Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Remove: Alignment options from button nested inside buttons #19824
When a button block is inside a buttons block, we should not render alignment options for the button block. The alignment is controlled globally for all blocks on the buttons block.
This change is complex because we can not simply remove the alignment from the button block, as for existing "button" blocks outside buttons the alignment on the block should still be supported.
If the alignment toolbar was not being rendered in a popover hiding it with CSS would be an option but given the change to popover that is not an option.
So it seems with the current API's it was not possible to hide the alignment toolbar of a button block when nested inside buttons block.
I prefer a change that does not involve additions to the public API, but it seems it is something not possible. I'm open to other ideas.
How has this been tested?
I added a buttons block and some "button" blocks inside.
I verified I could change the aligment of that button block.
Hi @youknowriad, In this case, it is complex, because the button block still exists and is valid but now is inside the buttons block. We would need an API not only to migrate a block to another one but also to consider block invalid if it is not nested inside a specific block.
The whole Button block is a bit odd; technically, it's not even an actual button. It's a link; it's an
I do think there is a need for parent blocks to be capable of controlling what alignments are considered valid inside them. For example, a flexbox container can't have floated children (
Hi Zebulan, thank you for sharing your thoughts. I guess the button block was named because button is more user-friendly but for accessibility reasons, we should use the "a" element.
Hi @youknowriad, @ellatrix any additional thoughts regarding this solution? Unfortunately, we can not use make sure the alignment we are setting will only pass one level down, as react context passes multiples levels down. I guess an alternative would be to make alignment restrictions part of InnerBlocks but that option is more complex.
Hi @youknowriad, unfortunately, we don't have a way to communicate from a block to a hook in block editor privately. I made the API used as experimental and followed your suggestion to simplify and juts specify if we are in an embed button context.