Twenty Twenty-One: Search block submit button text is invisible when wrapped in a block with background color

[wildworks]

HTML Example:

<!-- wp:group {"style":{"color":{"background":"#aaaaaa"}},"layout":{"type":"constrained"}} --<!-- wp:group {"style":{"color":{"background":"#aaaaaa"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:#aaaaaa">
<!-- wp:search {"label":"Default Search Block","buttonText":"Search"} /-->
<!-- wp:search {"label":"Button Inside","buttonText":"Search","buttonPosition":"button-inside"} /-->
</div>
<!-- /wp:group -->

I found this problem when I was reviewing ​https://github.com/WordPress/gutenberg/pull/69624.

Other themes do not have this issue, see this screenshot: ​https://github.com/WordPress/gutenberg/pull/69624#pullrequestreview-2746451320

[wildworks]

Search block wrapped in a block with background color

[sourav08]

Hi, I checked this issue and it seems like this is an issue only when the custom colors/gradients are applied instead of colors from theme palette. I will explore and try to fix this issue.

[sabernhardt]

[49987] introduced selectors that start with .has-background .wp-block-search .wp-block-search__button, and it also involved the Button and File blocks. The ​mixin has a "Nested" note, but it sets only the text color without checking what the background is.

The incorrect text color can happen on the front end with custom background colors. In the editor, it can also happen with theme colors (more consistently in the widget editor, but the current post editor seems fine when the parent block's theme preset background and body background are both light).

[sourav08]

Hey, just a quick update!

I checked and compared the button colors across multiple themes, and noticed that in most cases, the button color remains consistent regardless of the background color applied to the parent block.

However, in the Twenty Twenty-One theme, the button color does change based on the background color — specifically, whether it's a light or dark background. Can someone confirm if this is the intended behavior for this theme?

📹 Reference (screen recording):
​https://www.awesomescreenshot.com/video/38502545?key=8aa7f281cc9c2e63fd8b2568d3f5c23b

Additionally, for theme palette colors, we can see that local background and text color variables (--local--color-background, --local--color-primary) are being defined. But for custom colors (i.e., colors not defined in the theme palette), these variables are not set, which causes inconsistent styling.

We might need to define default fallback values for these local variables to ensure consistent behavior when using custom colors.

🎨 Reference (color-palette.scss):
​https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss