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

Simple block + Simple block = Complex block #13202

Open
mapk opened this issue Jan 5, 2019 · 6 comments

Comments

@mapk
Copy link
Contributor

commented Jan 5, 2019

Problem:

In many of the user research videos of Gutenberg, the users tended to try and align items by dragging and dropping them in the editor. They'd want to display two images side-by-side by dragging them next to each other.

Solution:

Dragging and dropping a simple block onto another simple block produces an already existing core complex block.

Example:

Drag and drop a simple text block onto a simple image block, and you get a complex Media+Text block.


simple-to-complex

@mapk mapk added this to the Future: Phase 2 milestone Jan 5, 2019

@mapk mapk added this to To do in Phase 2 design Jan 5, 2019

@mapk mapk added the Needs Dev label Jan 5, 2019

@mapk mapk self-assigned this Jan 5, 2019

@mapk mapk added the Drag and Drop label Jan 5, 2019

@karmatosed karmatosed moved this from To do to In progress in Phase 2 design Jan 5, 2019

@karmatosed karmatosed moved this from In progress to To do in Phase 2 design Jan 5, 2019

@karmatosed karmatosed moved this from To do to In progress in Phase 2 design Jan 5, 2019

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

commented Jan 5, 2019

Notably, if this were actually implemented, you would have to be dragging blocks from the drag handle on their side, not the middle of the block as shown in the mockup GIF. You couldn't drag a text block like the GIF shows because it would just select the text inside it.

It is also important to keep in mind that people may want to reverse this conversion later on. The most obvious way to handle this would be the block switcher, but its UI is designed around converting one block to one block, multiple blocks to one block, or one block to multiple of the same type of block. It does not currently account for situations where you want to convert one block to multiple different types of blocks, e.g. going from a Media & Text block to a Paragraph block followed by an Image block. The UI would have to be tweaked for conversion options like this to be clearly displayed/communicated to the user.

I also recall an old mockup where the blue lines that appear between blocks when drag-and-dropping also appeared to the left and right of blocks. This could potentially allow for different conversions involving the Media & Text block where the order of image and text is determined when the drag-and-drop action happens, meaning the user does not have to manually discover and then use the toolbar option to change the text/image order.

On the other hand, the left/right blue lines idea may be better reserved for creating column or CSS Flex (flex-direction: row) Container blocks that wrap the 2 blocks involved in the drag-and-drop action, allowing for more generic (anything beside anything) and more powerful page building functionality, similar to how you can do stuff in plugins like Beaver Builder. In fact, this idea could potentially even replace the Media & Text block entirely.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

commented Jan 5, 2019

I just found the old mockups I was referring to; they were in #219:

image
image
image

@mapk

This comment has been minimized.

Copy link
Contributor Author

commented Jan 8, 2019

Notably, if this were actually implemented, you would have to be dragging blocks from the drag handle on their side, not the middle of the block as shown in the mockup GIF.

This is correct. The gif was meant to just convey the experience, not the actual UI.

keep in mind that people may want to reverse this conversion later on.

You bring up a good point. I hadn't thought of that.

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jan 17, 2019

Sharing a couple other animations to get this idea across:

Creating a Cover
https://cloudup.com/cZvhyKK6YS1

Creating a Media + Text block
https://cloudup.com/cBYXErSlphk

(Note that these both happen to place the drag handle on the right, and a layout grid during resize, which aren't necessarily part of the core concept here.)

@karmatosed karmatosed added this to To Do in Phase 2 via automation Jan 31, 2019

@karmatosed karmatosed removed this from In progress in Phase 2 design Jan 31, 2019

@karmatosed karmatosed moved this from To Do to In progress in Phase 2 Jan 31, 2019

@karmatosed karmatosed moved this from In progress to Tighten Up in Phase 2 Feb 18, 2019

@noisysocks noisysocks removed this from Tighten Up in Phase 2 Jul 19, 2019

@noisysocks noisysocks added this to To Do in Tightening Up Jul 19, 2019

@karmatosed karmatosed added this to To Do in Blocks via automation Jul 19, 2019

@karmatosed karmatosed removed this from To Do in Tightening Up Jul 19, 2019

@mapk

This comment has been minimized.

Copy link
Contributor Author

commented Sep 3, 2019

Here's a couple ways in which this interaction is done with other software applications.

Paper

paper

Medium

medium

In Gutenberg we already use a blue line pattern for dragging and dropping blocks above or below other blocks. We just need to extend this to a side-by-side drop position now too. Something like this:

drag

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Sep 4, 2019

I like that. The "drag two images together to make a gallery" example is probably the clearest first iteration of this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
4 participants
You can’t perform that action at this time.