Buttons block: lighten editor DOM even more.

[ZebulanStanphill]

Description

This makes the editor DOM of the Buttons block identical to the front-end (in terms of div-wrapping) by removing several wrapper divs thanks to the __experimentalTagName property on <InnerBlocks />.

Note that this PR does not change the React Native edit implementation.

Before:

After:

How has this been tested?

I tested to make sure Buttons blocks still looked as expected in the editor, with or without a block alignment set.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: -6 B (0%)

Total Size: 1.17 MB

Filename	Size	Change
build/block-library/editor-rtl.css	8.57 kB	-4 B (0%)
build/block-library/editor.css	8.58 kB	-4 B (0%)
build/block-library/index.js	135 kB	+2 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.52 kB	0 B
build/api-fetch/index.js	3.35 kB	0 B
build/autop/index.js	2.72 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	8.53 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	128 kB	0 B
build/block-editor/style-rtl.css	11.1 kB	0 B
build/block-editor/style.css	11.1 kB	0 B
build/block-library/style-rtl.css	7.61 kB	0 B
build/block-library/style.css	7.6 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	741 B	0 B
build/block-serialization-default-parser/index.js	1.78 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.5 kB	0 B
build/components/index.js	167 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	9.42 kB	0 B
build/core-data/index.js	12 kB	0 B
build/data-controls/index.js	1.27 kB	0 B
build/data/index.js	8.43 kB	0 B
build/date/index.js	31.9 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.42 kB	0 B
build/edit-navigation/index.js	10.4 kB	0 B
build/edit-navigation/style-rtl.css	868 B	0 B
build/edit-navigation/style.css	871 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.25 kB	0 B
build/edit-post/style.css	6.24 kB	0 B
build/edit-site/index.js	20.5 kB	0 B
build/edit-site/style-rtl.css	3.54 kB	0 B
build/edit-site/style.css	3.54 kB	0 B
build/edit-widgets/index.js	17.5 kB	0 B
build/edit-widgets/style-rtl.css	2.8 kB	0 B
build/edit-widgets/style.css	2.8 kB	0 B
build/editor/editor-styles-rtl.css	492 B	0 B
build/editor/editor-styles.css	493 B	0 B
build/editor/index.js	45.4 kB	0 B
build/editor/style-rtl.css	3.83 kB	0 B
build/editor/style.css	3.82 kB	0 B
build/element/index.js	4.44 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.49 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	1.74 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.55 kB	0 B
build/is-shallow-equal/index.js	709 B	0 B
build/keyboard-shortcuts/index.js	2.39 kB	0 B
build/keycodes/index.js	1.85 kB	0 B
build/list-reusable-blocks/index.js	3.02 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.12 kB	0 B
build/notices/index.js	1.69 kB	0 B
build/nux/index.js	3.27 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.44 kB	0 B
build/primitives/index.js	1.34 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13.7 kB	0 B
build/server-side-render/index.js	2.61 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.24 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.74 kB	0 B
build/warning/index.js	1.13 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[oxyc]

I'm seeing some broken styles with Twentytwenty.

First part is before this patch, notice the spacing betwen buttons (center aligned) and how the inner button inserter is hidden when out of focus. The second part I switch to an editor after this PR where the spacing is increased and the inserter never disappears.

[ZebulanStanphill]

@oxyc Thanks for catching those. The margin issue should be fixed now.

The appender issue seems to be a lot more difficult to fix, however. I think the block wrapper is broken since AlignmentHookSettingsProvider is now wrapping the InnerBlocks (that is also the Block.div block wrapper), thus causing the block wrapper props to be applied to a div that isn't the root of the block. This seems to mess up the show/hide logic for the appender. Or at least that's my current hypothesis. I could be way off.

I'm not sure how to proceed here. The Buttons block is the only core block currently using AlignmentHookSettingsProvider. It uses it to disable the "block alignment" controls for nested Button blocks.

Pinging @jorgefilipecosta, since he introduced AlignmentHookSettingsProvider in #19824. Any suggestions for what to do here?

[youknowriad]

AlignmentHookSettingsProvider might be better as something internal to Innerblocks using a allowedAlignments prop or something like that. I'd love for this prop to be able to define the size of the alignments though and potentially custom alignments but that's a big challenge.

[ZebulanStanphill]

Thinking about it some more, I'm not actually sure if the appender not disappearing is a bug or not. The behavior in this PR is consistent with other blocks like the Group block, where the appender is always visible. #24836, if merged, will change this default behavior, and perhaps that will change the behavior for the Buttons block. I think I'll wait for that PR to be merged, and see what happens when I rebase this one.

[ZebulanStanphill]

I looked into everything some more, and I discovered that the appender issue was actually unrelated to AlignmentHookSettingsProvider. The issue was actually #21805, which was actually a generic issue that can also be observed with the Social Icons block. The only difference between the two blocks was that the appender appears invisible for unselected Buttons blocks, but still takes up space, while it is simply always visible for the Social Icons block. The latter is technically "more expected" due to the current implementation. I'm not actually sure why the appender is invisible for the Buttons block in master.

Anyway, this PR actually fixed the weird invisible-appender bug, and in doing so, made the behavior consistent with the Social Icons block. But of course, the appender should simply not be there at all in the first place when these blocks (and their children) aren't selected. So I've created #25518 to fix this issue.

[ZebulanStanphill]

Alright, thanks to some fixes that landed in other PRs, this one was unblocked, and I've polished it up and rebased it. It is now ready for a final review.

[youknowriad]

LGTM

[youknowriad]

Curious why this changed so much though?

[ZebulanStanphill]

I found that both the display and width properties were unnecessary. The former was already set by style.scss, and the latter was already auto by default. (And the editor never overrode it.) I tested with various alignments to make sure everything worked as expected.

I also found that the selector had a lot more specificity than it actually needed, so I simplified that. Notably, I chose to point at just the wp-block class for the children, to make it easier for 3rd-party button blocks to be inserted and styled correctly in the Buttons block. I almost just went with a .wp-block-buttons > * selector, but that turned out to not have enough specificity to override the margin-left value being set by the editor in some cases.