Description

Toolbar overlapping problems

I wanted to add a button with an icon. So, I have:

Created a button
Added text to it
(Horizontally) Justified it to the center
(Vertically) Aligned it to the middle

Then I have added an inline image (an svg) to the button.

This is the SVG I used:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"/></svg>

The edit width toolbar of the inline image is hiding the link button in the block toolbar, so to add a link I must first deselect the inline image, and select the button. After adding the link I'm being completely unable to hide the link edit toolbar that overlaps the block toolbar unless I deselect the block or select another block, so it's impossible to reach those hidden block toolbar buttons that are below without removing the link first. Selecting the button block from the list view doesn't hide the link edit toolbar either.

Oh, and it can be worse, if while having a link you select the inline image:

So, to summarize:

I don't think that using the Thumbnail size (the default size is 150px) is correct for the buttons.
It's impossible through the visual editor to change the units (ie. to use rem)
It's not possible to adjust the gap size, the justification, or alignment of an individual button through the visual editor.
The inline image and link toolbars overlaps the block toolbar

Button alignment problems

I have selected a button block and I've set the alignment to the middle. So I expected the text of that button, and the icon to be vertically aligned to the middle. But instead, it is aligned to the bottom line of the inline image.

What's happening here ?

The problem is that doesn't matter if you select the "Buttons" block, or one of the "Button" blocks. They both apply the justification and alignment to the "Buttons" block (to their parent and not to their children items). As this video illustrates:

https://github.com/WordPress/gutenberg/assets/679512/5c104c7c-d033-4665-9b34-7e74ccad87a0

So It's not possible to individually adjust the gap of the button block items or their alignment.

Using the inspector I see that the buttons use display: inline-block;

What are the solutions I propose ?

Remove the Buttons block from Gutenberg.
- Button blocks could/should be "primitive".
- We can contain a collection of button blocks in any other layout blocks (group, stack, row, grid)
- We would lose the ability of pressing "+" to automagically add a new button to the buttons block. But IMO this feature doesn't justify forcing a button to forcefully have a parent. On the other hand we could still duplicate buttons.
- The Button Block should use flexbox instead of inline-block, so we can justify, control gap, and vertically align it's items.

       /* note that some of the values are the CSS defaults */
          .wp-block-button__link:has(img) {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: .5rem;
            justify-content: center;
            align-items: center;
          }

Result with this css (the black bar in the image is the admin bar 😅):

If the Buttons block is not removed. (Unfortunately IMO) I think then that the Button blocks should not show the justification and alignment controls if the Button block doesn't really support alignment.

I'm sorry but I lack the coding knowledge that would be necessary to dig further on the "solution".

Step-by-step reproduction instructions

To test the overlapping toolbars:

Create new page
Create a Stack block, with a minimum height of ie. 25rem
Inside the Stack block, add a buttons block with text
Select the button block and justify it to the center and align it to the middle
Add an inline image
Select the inline image and check if the edit WIDTH toolbar is overlapping the block toolbar.
Select the button block and add a link to the button
Check if the link toolbar is overlapping the block toolbar and if you can hide it (so you can use those hidden icons that are below in the block toolbar) or if to use them you Must first remove the link.

To test the alignment problem:

Follow the previous steps 1 to 5 (included)
Check if the justification and alignments is applied to the parent, instead of the button items. (I think It'll be easier to spot the difference if you create more than one button)

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.6-RC1-58590
Gutenberg 18.6.1
I used both a custom theme & Twenty Twenty Four (same results)
Chrome 126.0.6478.127
Desktop Windows 11 23H2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

WordPress / gutenberg

Button Block: Overlapping toolbars while using both link and inline image & alignment that doesn't properly work #62997