Gutenberg: UI/UX: Convert HeadingToolbar to ButtonGroup

[richtabor]

In order to bring more consistency across controls, as originally discussed in #19904, let's consider employing the ButtonGroup control, instead of a one-off HeadingToolbar component we're currently using, within the Heading block.

Here's what we currently have:

Here's what it would look like, as a ButtonGroup:

[kevinkovadia]

oh yes, looks better.

[kevinkovadia]

just an idea, Can we use adjust height H1 icon as same font size and so on as shown in attached image.

can this increase visual appeal?

[shaunandrews]

I wonder if we need to have this option in both the sidebar and the toolbar? It seems with the toolbar we could add all the options and just get rid of the sidebar options.

--

Looking towards the new block UI, I think we could basically take the sidebar component and use in a popover:

[richtabor]

I wonder if we need to have this option in both the sidebar and the toolbar?

That's an interesting proposition. I'm down for decluttering for sure.

I'm curious if we could get some user testing around this, to see if users understand that they can change the heading level via the toolbar H{level} label, or they need to see the label/array of sizes first (like within the sidebar).

[karmatosed]

I think moving to the toolbar as @shaunandrews suggests make a bit more sense visually and also brings in the iterated UI.

As far as user experience goes, I do think in the sidebar there is even more invisibility than being in the toolbar.

[paaljoachim]

I will also mention this PR:
"Heading block: use toolbar exclusively for heading level control "
https://github.com/WordPress/gutenberg/pull/20246

[mapk]

After today's design team triage in Slack, it was decided to close this issue due to the above mentioned PR. Once the controls get merged into the block toolbar, it would be a good idea to create a new PR that removes these controls from the sidebar. That makes this issue obsolete.