Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag and drop from inserter to post #1511

Closed
jwold opened this issue Jun 27, 2017 · 17 comments · Fixed by #27669
Closed

Drag and drop from inserter to post #1511

jwold opened this issue Jun 27, 2017 · 17 comments · Fixed by #27669
Assignees
Labels
[Feature] Drag and Drop Drag and drop functionality when working with blocks [Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Milestone

Comments

@jwold
Copy link

jwold commented Jun 27, 2017

Interested in options for adding drag and drop in the following situations:

  1. Drag from insert modal to desired location on screen between existing blocks

2. Drag blocks above/below each other by dragging the gray borders covered by #38

Annotations:

drag and drop

Note: This may have already been discussed, if so we can close this out.

@mtias
Copy link
Member

mtias commented Jun 27, 2017

Related #38.

@jwold
Copy link
Author

jwold commented Jun 27, 2017

@mtias thanks! That covers item #2 so we can ignore that. What about #1?

@mtias
Copy link
Member

mtias commented Jun 27, 2017

Sounds interesting as a progressive enhancement :)

@mtias mtias added [Feature] Blocks Overall functionality of blocks [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Jun 27, 2017
@buzztone
Copy link

We've found that Drag from insert modal to desired location on screen between existing blocks is still not well developed within the currently available React based npm modules.

Drag blocks above/below each other by dragging the gray borders is by contrast well supported & very solid.

@buzztone
Copy link

Another way to give insert modal to desired location on screen between existing blocks could be to allow positioning of the + icon via arrows & vertical dragging.

2017-06-29_01

If I could position the + icon where I want before I click it or Insert, I could add each block where I want.

@folletto
Copy link
Contributor

folletto commented Jul 7, 2017

If I could position the + icon where I want before I click it or Insert, I could add each block where I want.

This should already be working – just not with the + icon: it inserts below the block you've currently selected (or in other words: where the cursor is). Does it work for you?

@buzztone
Copy link

buzztone commented Jul 8, 2017

Does it work for you?

Yes. Though I wasn't previously aware of this, I can see it when I go looking for it based on your explanation.

It's pretty well hidden. To see it I had to:

  1. Select a Block
  2. Click on the + icon
  3. Hover over an item in the Inserter

@jwold
Copy link
Author

jwold commented Jul 9, 2017

If I could position the + icon where I want before I click it or Insert, I could add each block where I want.

Since this is already working do you feel it offsets the need for drag and drop?

@buzztone
Copy link

buzztone commented Jul 9, 2017

Since this is already working do you feel it offsets the need for drag and drop?

No - not at all.

@mtias mtias changed the title Drag and drop extendibility Drag and drop from inserter to post Aug 31, 2017
@jeffpaul
Copy link
Member

This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs.

@jeffpaul jeffpaul added this to the Bonus Features milestone Feb 15, 2018
@Soean Soean added the [Feature] Drag and Drop Drag and drop functionality when working with blocks label Jun 28, 2018
@mtias mtias added [Type] Enhancement A suggestion for improvement. and removed [Feature] Blocks Overall functionality of blocks labels Aug 6, 2018
@mtias mtias removed this from the Bonus Features milestone Oct 7, 2018
@mtias mtias added the Future label Oct 7, 2018
@mtias mtias added this to the Future: Phase 2 milestone Oct 12, 2018
@mapk
Copy link
Contributor

mapk commented May 12, 2020

The Inserter is now a sidebar that slides out when activated. As a sidebar, the ability to drag and drop blocks directly to the document feels much more natural. I'd like to look into how we can make this happen.

Current Inserter

Screen Shot 2020-05-12 at 3 22 01 PM

@mapk mapk added the Needs Dev Ready for, and needs developer efforts label May 12, 2020
@gziolo
Copy link
Member

gziolo commented May 13, 2020

It didn't take me much time to come to the same idea after the inserter was refactored :) It would make it so much easier to put a block or pattern in the nested context at the specific level. In addition, it feels more natural to drag and drop items rather than use the in-between the blocks inserter:

Screen Shot 2020-05-13 at 07 37 43

By the way, have you considered changing the way in-between the blocks works with drag & drop from the inserter? At the moment it's very difficult to trigger (I'm using Safari), but regardless, it could maybe set the selection in the editor accordingly to the placement clicked and open the sidebar with the inserter?

@mapk
Copy link
Contributor

mapk commented May 13, 2020

I agree, the sibling is SUPER difficult to activate right now. I'm not sure why.

Having it trigger the sidebar Inserter is an interesting solution. Will pushing the focus to the Inserter sidebar have any a11y ramifications?

I remember, at one time, we talked about the sibling Inserter opening the Patterns tab by default too.

Getting drag and drop right is going to be enough for this particular issue. It would be great to get some development help on it.

@mapk
Copy link
Contributor

mapk commented Oct 20, 2020

Being able to drag from the Inserter panel into the editor is also becoming a frequently requested item for the new Widget Screen. People would like to drag blocks directly into specific widget areas.

From the call for testing post: https://make.wordpress.org/core/2020/09/30/call-for-testing-the-widgets-screen-in-gutenberg-9-1/#comment-40042

Would be a nice touch to allow drag and drop of new blocks from the left block menu into the widget sections as widget users are accustom to the drag-drop from the legacy system.

@shaunandrews
Copy link
Contributor

drag-and-drop blocks to insert

Drag-and-drop could help resolve some common confusion around adding blocks: #26404

@talldan
Copy link
Contributor

talldan commented Nov 18, 2020

I don't think drag and drop from the block library would be technically difficult. When blocks are dragged and dropped currently, a dataTransfer value is set with some data about the block (client ids of the blocks, where the block is dragged from, and a type, which is always block for blocks etc):

const transferData = {
type: 'block',
srcClientIds: clientIds,
srcRootClientId,
};

That's then used in the drop event:

const {
srcRootClientId: sourceRootClientId,
srcClientIds: sourceClientIds,
type: dropType,
} = parseDropEvent( event );
// If the user isn't dropping a block, return early.
if ( dropType !== 'block' ) {
return;
}

For dragging from the inserter I imagine this would be a slightly different bit of data. The type would probably be something like insert-block or create-block, and the block type would be passed. Similar could be done for patterns, a type of insert-pattern and the pattern markup.

There are some a11y considerations. Previously there's been some feedback against a button that can be clicked and dragged when we tried that on the block toolbar.

Secondly, if the block is selected after being dropped, the block library panel will close as it's a popover. That probably makes this a little less useful, but it's the same at the moment when clicking a block in the library.

@mtias
Copy link
Member

mtias commented Nov 18, 2020

Secondly, if the block is selected after being dropped, the block library panel will close as it's a popover.

For what is worth, there's been some feedback about changing this behaviour.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Drag and Drop Drag and drop functionality when working with blocks [Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.