Group: Button colors do not work for the outline button style #58923
Description
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