Add block variations transformation in block switcher #50139
Conversation
ntsekouras
added
[Type] Enhancement
ntsekouras
requested review from
Mamaduka,
mtias,
gziolo,
jameskoster,
jasmussen and
richtabor
|
Size Change: +929 B (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in c053a1e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4945275915
|
My instinct is that's something to consider separately. There is an icon-button UI there, and also this dropdown which looks a little tired:
On Group blocks the 'Orientation' UI is also a transform:
It might be good to consolidate all of these different transform methods, but yeah, likely a separate consideration.
Are we aware of any examples where a block has more than four variations? Do we need to worry about this just yet? Flyouts would probably make sense and afaik the components team are currently researching that. Looking at a couple of specific blocks: Group
Terms
I've love to hear thoughts from other @WordPress/gutenberg-design team members. Thanks for working on this Nik! |
Right now in core, no. But this can be the case for Social Icon and probably some other blocks, when we enable this. This is an API that will pick up such variations(transform scoped) and show them there, so if any third party blocks have many of them, will automatically render there.
Yes
This is an API for other blocks too, like
That's something different as we don't have any context for variations/blocks right now. I think this is more connected to the issues about where to show specific blocks in all places(even the Inserter). |
|
Adding variations to the Transform to drop down looks like a good idea to me. Another aspect with this is if the Transform drop down needs an even bigger redesign which needs to be more thought through, but that is for another time. |
|
I’m curious if variations should be treated any differently than transforms. The experience, and resulting expectation, of using either a transform or a variation is the same. I don’t think it’s necessary to call them out separately; perhaps just prioritized higher than transforms. “Transform” and “Variation” are more technical terms anyhow (why I suggested “Turn into” previously #42202). |
In the case of the use case described in this PR, maybe the difference is not useful. Zooming out a bit, however, I feel like the block transforms interface (both the one in the inspector, but primarily the dropdown from the block toolbar) hasn't been as creatively explored as it might have been. Essentially transforming one block into another can be thought of as an opportunity to view a variety of possible layouts. A quote might get a ton more impact by becoming a pullquote, or an image might benefit from text-overlay of a cover. We are a bit limited there with transforms, through poor quality block previews, lots of work to still do on flyout menus, and some duplicate interfaces muddling things up. At the same time, this transforms interface also needs to accomplish the most basic writing flow task: transform a paragraph to a heading. I still think there's an opportunity for a larger creative push on transforms, as described above. But a more useful near term solution there may be to refine pattern transforms first. That is, select 2 paragraphs and an image, and get suggestions for compatible patterns it can transform into. Can be both in the dropdown, but it can also easily be here:
Keeping pattern transforms in mind as probably the first big visual transforms push, maybe single block transforms can just be grouped together? (Also, let's remove "Unwrap" in favor of having only "Ungroup" in the ellipsis menu soon) |
There is no good way to do that easily currently. There is a mechanism for transforming from patterns(implemented here), but there are many boxes to check in order to find matches:
So while it's possible for certain cases and already in block switcher, it's quite hard and I don't think there are lots of patterns right now that are made with the above in mind. Having said that, this PR's main purpose for me is to decide on how to better organize the transforms, even if that would mean to explore augmenting some APIs. I started with the variation transforms, but we should have a clear vision on where we want to go and act accordingly. |
I agree—that'll be very neat—though I lean towards that effort being separate from transforming between a single blocks variations (what this PR is attempting). I don't think there's a difference experience-wise if I want to change my "Tags" block into a "Categories" block, or even a "Post Date" block. I'm turning one thing into another, at the singular block level. Selecting a variation from that popover isn't transforming the block in a programmatic sense, but it is experientially. I'm proposing we move forward on this PR, but remove the separate MenuGroup to instead have variations prepended to the list of "transforms". And as a follow-up consider #42202, as well as removing Columns and Group as editor-wide transforms. We already have Group/Ungroup and columns doesn't seem like a common entry-point after-the-fact.
|
This comment was marked as resolved.
This comment was marked as resolved.
ntsekouras
force-pushed
the
add/block-variation-transforms-in-switcher
branch
from
c212e2c to
fc743b5
Compare
This comment was marked as off-topic.
This comment was marked as off-topic.
There's this issue here: #45841 |
This comment was marked as resolved.
This comment was marked as resolved.
ntsekouras
force-pushed
the
add/block-variation-transforms-in-switcher
branch
from
fc743b5 to
c053a1e
Compare
Fixed! Additionally I prepended the variation transforms to the list. I'll see to the tests now. |
Co-authored-by: Kai Hao <[email protected]>
ntsekouras
force-pushed
the
add/block-variation-transforms-in-switcher
branch
from
a311eeb to
a71e09d
Compare
Co-authored-by: Kai Hao <[email protected]>
bph
added
the
Needs Dev Note
What?
Resolves: #49891
Resolves: #39066
Some issues below are related and could be resolved with small changes to apply the
transformscope to some variations, or small tweaks.Issues: #40208, #49879, #49584, #49524, #46726, #46195
I don't think we have concluded to a specific design for this, so this PR will help us do so. Also for now I have enabled this only for single selected blocks.
My personal notes would be:
MenuGroups, etc..transformsAPI by adding something like a category(exlayout. I don't have something specific in mind for now, but we'll see based on the main block switcher issue's needs.Testing Instructions
transformvariations, likeGroupScreenshots or screencast
Screen.Recording.2023-04-27.at.3.52.17.PM.mov