Block list appender cleanup: Add gray background and dark theme styles, fix hover state.

[kjellr]

This PR cleans up the block list appender:

• It adds a gray background to align with the styles in #14241 and #12367.
• It adds proper styles for themes that declare support for dark-editor-style.
• It corrects a bug where the hover state was being overridden by default button styles.

The easiest way to test is to use the block manager: Set the "Paragraph" block to be hidden. Once you do that, the block list appender should appear:

---

Screenshots

Before:

Before (Hover):

After:

After (Hover):

After (Dark Theme):

After (Dark Theme, Hover):

[chrisvanpatten]

Looking at the gif, why is the alternate appender the full width of the canvas? Has it always done that?

[chrisvanpatten]

(FWIW the styles look super good; just weird that the width is different!)

[kjellr]

Looking at the gif, why is the alternate appender the full width of the canvas? Has it always done that?

It is weird! Looking at the history, it looks like this appender previously showed up inside of a block wrapper. That meant it got all the styles of a .block-editor-block-list__block and .wp-block. In my GIF example, it doesn't have any sort of max width or margins, so it just takes up all the available space.

I'm not 100% sure the best way to solve that (changing it purely via CSS will likely mean it won't adhere to theme styles for the content width).

[kjellr]

Just noticed that #14241 basically does this same thing. Should hold off on this one until that lands.

[jasmussen]

Nice PR, agreed on holding off until 14241. But great trick on testing this new appender.

Agree with Chris, though, this appender should be no wider than the blocks it inserts. Let's consider exploring that either in this PR, or a separate one, how we can restore that.

[kjellr]

Closing, since #14241 was merged.