[WIP] Core blocks: Refactor heading styles to use dropdown

[gziolo]

Description

Related issue: #783.

This PR tries to fix a regression introduced in #6675. On mobile devices, some controls are hard to access because there are too many of the rendered in the toolbar.

The proposed solution was described by @SuperGeniusZeb in #5635 (comment)

The Heading block now has text alignment controls in its block toolbar thanks to #6675. Of course, now the block toolbar is the longest of any block, and likely not very mobile friendly.

I think the heading level/size switcher should be a single button with a dropdown, but should not be merged with the block converter/switcher dropdown.

Here is a (kind of sloppy) mockup I made:

(Yeah, that is not an h3 heading in the mockup... I forgot to change the number.)

I think the block converter/switcher should probably use a different icon, both to differentiate it from the heading level/size switcher, and to make its function a bit more clear. Personally, I have always thought it was a little odd that the block converter/switcher used the icon of the current block. I think it should look more like this instead:

Maybe you could combine the two icon styles by replacing one of the squares in the previous mockup with the icon of the current block. That could also work.

How has this been tested?

Manually.

Screenshots

It still needs more ❤️ .

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[gziolo]

So far, I mirrored what we have for BlockSwitcher component and applied subscript for headings. We might want it to align closer to Toolbar component if we plan to use this in other places. Most of the styles are missing, this is something that is planned next.

[jasmussen]

I pushed a few changes so it now fits on an iPhone. Before:

After:

I also polished the subscript a bit.

There's still a bit of messiness with the dropdown:

But perhaps this is faster to fix than reverting? We can still look at improving the "style selector" at a later time, but this at least fixes the regression.

[gziolo]

Yes, let's move to 3.0. Reverting the original issue with #6794.

[gziolo]

I rebased this branch with the latest changes in master (#6974 revert mostly).

@karmatosed and @mtias, this one needs your feedback before we can continue future iterations. As @jasmussen mentioned:

There's still a bit of messiness with the dropdown

We could copy styles from the block switcher to make it work, but we want to provide a long-term solution which doesn't introduce too much code duplication. So let's agree on the final approach first before we take a deep dive into refactorings. The main question is if we want to have this drop-down as proposed, how much it should share logic with the block switcher? Or should we rather have an independent style switcher which could be used for other blocks (Quote?)?

[jasmussen]

Matías, I recall from conversations I've had with you that you've never been happy with the block variation UI (see also #5947). I share that feeling. Do you think a variation picker drop-down as proposed here could be a solution?

[karmatosed]

I have to admit I'm not wild about seeing a double 'H', I understand what this solves, but I'm not super sure a double drop down is the way forward. I am happy to be wrong there though. Maybe one iteration could be to not have double H somehow?

If you look above it's a little less confusing than seeing the double H dropdown's beside each other.

[youknowriad]

Just a crazy idea, what if we leverage the transform API to transform the block to it-self using modified attributes. This API doesn't exist at the moment, but this would allow us to show "Heading 1" ... "Heading N" in the block switcher dropdown.

[ZebulanStanphill]

@karmatosed I suggested changing the block switcher icon to something different. (See initial post.) You could also replace one of the squares in that design with the icon of the current block so the block switcher could still double as a hint of what the current block is.

@youknowriad There was a mockup of that sort of thing here:
#5635 (comment)

[jasmussen]

#5635 (comment)

We could even go this route without the actual heading size changes being shown, and simply show H1-H6 in the block switcher. This would be simpler, and I think the most obvious way to go. But at the same time, I like @mtias thinking that we need a good UI for showing variations of a block, a pattern we can reuse for quotes in #5947. But I'm coming up short for what it should be, because you definitely need this variation chooser to be part of the block toolbar — we can't hide that in the sidebar.

[gziolo]

Just a crazy idea, what if we leverage the transform API to transform the block to it-self using modified attributes. This API doesn't exist at the moment, but this would allow us to show "Heading 1" ... "Heading N" in the block switcher dropdown.

Yes, this might be even simpler to implement if we add another API in addition to transforms -> styles, which would have their own group in the block switcher as proposed by @jasmussen.

[ZebulanStanphill]

I was initially opposed to having the heading type and transform options in the same dropdown, since it felt like an odd special-case solution. However, considering that the Quote block has similar block variations and other blocks may also implement this sort of thing in the future, and since the different block types are still separated from variations by the “Transform into:” text, I have changed my mind.

I now think the single dropdown is the best solution. Switching heading size (or quote style) and transforming the block are pretty similar, and having them in a single dropdown both eliminates any confusion of 2 similar-looking dropdowns and also makes the block toolbar smaller... the same size as the Paragraph toolbar.

[karmatosed]

I have to say I really like leveraging the transform API in the way @gziolo you show in the mock, great idea @youknowriad.

[chrisvanpatten]

Oh wow, that's great! Doing the same in the quote block (allowing multiple "styles" under the block transform menu) would be a great other use-case for this!

[ZebulanStanphill]

Relevant: #7227. See also the recent discussion in #783.

[gziolo]

@karmatosed, I’m closing this one given that we came out with a better idea how to tackle this issue 🎉