Add Block prompt regression

[annezazu]

Description

As reported by others in core-editor slack , there seems to be a regression in the add block prompt within the site editor. Rather than just showing a + button, there is now text saying "Add Block".

Step-by-step reproduction instructions

1. Set up a site with FSE capabilities
2. Use either the site editor or template editing mode and notice that the add block prompt has changed.

Expected behaviour

Expect to just see the + button and no "Add Block" text.

Actual behaviour

The add block appender now say "add block" and looks quite awkward :D

Screenshots or screen recording (optional)

Here are two examples in the Site Editor where adding a new template part causes it and trying to add a new navigation block item:

add.block.mov

Here's an example from the Template Editing Mode:

add.block.template.editing.mode.mov

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: 10.6RC
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 Blocks

Device information

• Device: Desktop
• Operating system: MacOS
• Browser: Chrome

[jasmussen]

Definitely a bug, inspecting this I see that there's a "visuallyhidden" component, which is used when the text is meant as added context for screenreaders, but not meant to be seen:

Since the bug is present only in the site editor, I wonder if the regression is related to the split block styles loading system that landed recently, but only for block themes. CC: @aristath

[aristath]

v10.5 works as expected, the regression is in v10.6 and the block-styles tweaks far predate these 2 versions 😉
Using git bisect I tracked down the issue to this PR: #31244

[jasmussen]

Thanks so much for doing that. CC @sarayourfriend in case you might have thoughts.

[sarayourfriend]

This is a problem with iframe support in Emotion. It seems to work in some cases (if you try a block like the Jetpack Google Calendar block you can see that the external link is rendered with the correct CSS-in-JS styles) but for some reason it's not working for the columns block appender. I'm not familiar with the architecture of FSE so I don't know why one is inside the StyleProvider and the other isn't. Maybe @youknowriad will know?

[youknowriad]

I think all of these are supposed to be already inside a StyleProvider 🤔 It's not a Slot AFAIK