Move and update ButtonBlockAppender styles into component stylesheet + improvements

[wwdes]

What?

Fixes #70179. Improves appender appearance at various layout configuartions.

Why?

Several issues with CSS related to the ButtonBlockAppender component including:

• Parts of CSS is in the group block's directory, but should be within the component directory.
• CSS selectors in component directory targeting group block specifically, but should be block-agnostic.
• Appender's Click state not working when nested (group in group or column in columns)
• Visual cue when dragging blocks over empty blocks not working as expected.
• Appender is not placed correctly in flex layouts.
• Some old and unused CSS that can be removed.

How?

Relocated all styles for ButtonBlockAppender out of the group block’s CSS and into the component’s own stylesheet. Updated the CSS to ensure the appender elements appear where a block's content would appear, and extend layout.js to emit the new class names required by those styles. Addressed drag-over and click state issues. Cleaned up unused CSS related to the component.

layout.js already emits classes that indicate horizontal flex alignment (justification), but does not emit anything for vertical flex alignment. The CSS fix in this PR requires a class that indicates if a block has vertical alignment stretched (is-vertical-alignment-stretch).

Testing Instructions

Play with empty group block or a block that supports inner blocks and layout and uses ButtonBlockAppender. Test switching layouts and setting min-height to see how styles adapt. Test how styles appear on column block.

Screenshots or screencast

Flex layout improvement

Before

appender-fix-before.mp4

After

appender-fix-after.mp4

Drag-over fix

Before

drag-over-before.mp4

After

drag-over-after.mp4

Click state fix

Before

After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: wwdes <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.