Group: Button colors do not work for the outline button style

[carolinan]

Description

Groups have the option to set a default text, background or gradient background color of buttons that are placed inside it.
This works for the fill button style, but not the outline button style.

• Groups with button text color and text color: The outtline button uses the text color.
• Groups with button text color, but no text color: The outline button uses its default color, not the button text color set on the group.

Step-by-step reproduction instructions

Add a group block.
inside the group, add a buttons block with two buttons: One with the fill style, one with the outline style.
Select the group.
In the color settings panel, add a text color.
Activate the button color settings in the color panel. Set a button text color, and optionally a button background color.

Some sample code that can be copy pasted:

<!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-green-cyan"},":hover":{"color":{"text":"var:preset|color|vivid-purple"}}},"heading":{"color":{"text":"var:preset|color|white","background":"var:preset|color|black"}},"button":{"color":{"text":"var:preset|color|luminous-vivid-amber","background":"var:preset|color|vivid-purple"}}}},"backgroundColor":"pale-cyan-blue","textColor":"vivid-red","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-vivid-red-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color"><!-- wp:paragraph -->
<p>Text color, <a href="#">link color</a>, background color, heading color, button color.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">And this is the example heading inside the group</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">Fill</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

Screenshots, screen recording, code snippet

Environment info

WordPress 6.4.3.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[aaronrobertshaw]

Thanks for the detailed issue @carolinan 👍

This one seems straightforward on the surface but gets tricky once digging a little deeper. Hopefully, I can communicate some of the nuances I encountered clearly.

My understanding of the intent behind element styles on a specific block instance, was that they should be an override for all the elements within that block to provide consistency. That styles selected or defined by a user override those defined in core or the theme.

This nature means that the per-instance element styles are generated as required after all core and theme styles have been loaded leading to the behaviour described in this issue.

In this case we would have styles coming from different sources, each being overridden by the next:

• Core (possibly including block style variations)
• Theme (possibly including block style variations)
• Global Styles (both theme and user, possibly tweaking core block style variations)
• Block instance element styles

I understand an argument could be made that a user selecting to apply a block style variation could constitute "user" styles even if technically defined by the theme or core.

Ultimately, I'm not sure we can make both of these features, block instance element styles & block style variations, always play nice together. I'd be happy to be proven wrong here though!

Very soon, I hope to land some enhancements to block style variations which would support both inner element and inner block type styles for variations. Importantly, it would also introduce support for nested block style variations, e.g. applying a variation to a block that already lives inside another block with its own variation applied.

Using the extended block style variations feature, I think you might be able to achieve the behaviour it looks like this issue is chasing.

For example, this might look like, a block style variation for the Group block type that also defines element styles for buttons. Now the styles we're dealing with would be at the same level i.e. both block style variations rather than one being a "user override". The support for nested applications of block style variations would allow a single button block to be switched over to the outline style easily.

Even with these extended block style variations, another problem is adequately communicating to and guiding users as to the best tool the for job they are trying to accomplish.

Screen.Recording.2024-02-19.at.4.50.57.pm.mp4