[wp-trac] [WordPress Trac] #64094: Button variation element styling in theme.json overridden by outline default style

[WordPress Trac]

#64094: Button variation element styling in theme.json overridden by outline
default style
--------------------------+------------------------------
 Reporter:  peroks        |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  General       |     Version:  6.8.3
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------
Description changed by ocean90:

Old description:

> # Issue
> When using a `core/button` `outline` style with `outline.elements.button`
> styling in theme.json, the default `outline` styles override the
> `outline.elements.button` styles. Some of the `outline.elements.button`
> properties can be applied directly to the `outline` object, but not all,
> i.e. `:hover`, `:focus`, etc.
>
> This is an issue, because the only way to apply a **hover** effect to the
> default outline button in theme.json is to use the `css` property, as
> seen in the Twenty Twenty Five theme. The expected behaviour is that the
> `elements.button` styles in theme.json take priority over the default
> `outline` styles (not defined in theme.json). Or more general: that
> theme.json styling take priority over default styling.
>
> The cause for this issue is the **order** of the generated css. All
> selectors have a specificity of (0,1,0), but the default `outline` styles
> are positioned **after** the `elements` styles and thus override them.
>
> This only applies to the `outline` style. When using a custom style, i.e.
> `variations.custom-outline`, element styling works as expected on the
> **frontend** (but not in the editor, see below).
>
> # How to reproduce
> In Twenty Twenty Five theme.json, replace
> `styles.blocks.core/button.variations.outline` with
>
> "outline": {
>         "elements": {
>                 "button": {
>                         "color": {
>                                 "background": "var:preset|color|accent-2"
>                         },
>                         ":hover": {
>                                 "color": {
>                                         "background":
> "var:preset|color|accent-3"
>                                 }
>                         }
>                 }
>         }
> }
>
> You will see that the background colors don't apply. They do when using a
> `custom-outline` style.
>
> This is what the generated css looks like
>
> :root :where(.is-style-outline--2 .wp-element-button, .is-style-outline--
> 2 .wp-block-button__link) {
>         background-color: var(--wp--preset--color--accent-2);
> }
>
> :root :where(.is-style-outline--2 .wp-element-button:hover, .is-style-
> outline--2 .wp-block-button__link:hover) {
>         background-color: var(--wp--preset--color--accent-3);
> }
>
> :root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link)
> {
>         background: transparent none;
>         border-color: currentColor;
>         border-width: 2px;
>         border-style: solid;
>         color: currentColor;
>         padding-top: 0.667em;
>         padding-right: 1.33em;
>         padding-bottom: 0.667em;
>         padding-left: 1.33em;
> }
>
> You see that the `elements` styles are created, but are overridden by the
> default non-theme.json `outline` styles coming **after** the `element`
> styles.
>
> Due to the use of the `css` property for hover styling in Twenty Twenty
> Five theme.json, I guess this issue is kind of known (to some), but I
> didn't find a corresponding issue and think this is bug which should be
> fixed.
>
> # Additional editor issue
> For custom button styles, element styling works as expected on the
> frontend, but not in the **editor**. There, the element styles like the
> background colors don't apply.

New description:

 **Issue**
 When using a `core/button` `outline` style with `outline.elements.button`
 styling in theme.json, the default `outline` styles override the
 `outline.elements.button` styles. Some of the `outline.elements.button`
 properties can be applied directly to the `outline` object, but not all,
 i.e. `:hover`, `:focus`, etc.

 This is an issue, because the only way to apply a **hover** effect to the
 default outline button in theme.json is to use the `css` property, as seen
 in the Twenty Twenty Five theme. The expected behaviour is that the
 `elements.button` styles in theme.json take priority over the default
 `outline` styles (not defined in theme.json). Or more general: that
 theme.json styling take priority over default styling.

 The cause for this issue is the **order** of the generated css. All
 selectors have a specificity of (0,1,0), but the default `outline` styles
 are positioned **after** the `elements` styles and thus override them.

 This only applies to the `outline` style. When using a custom style, i.e.
 `variations.custom-outline`, element styling works as expected on the
 **frontend** (but not in the editor, see below).

 **How to reproduce**
 In Twenty Twenty Five theme.json, replace
 `styles.blocks.core/button.variations.outline` with


 {{{
 "outline": {
         "elements": {
                 "button": {
                         "color": {
                                 "background": "var:preset|color|accent-2"
                         },
                         ":hover": {
                                 "color": {
                                         "background":
 "var:preset|color|accent-3"
                                 }
                         }
                 }
         }
 }
 }}}


 You will see that the background colors don't apply. They do when using a
 `custom-outline` style.

 This is what the generated css looks like


 {{{
 :root :where(.is-style-outline--2 .wp-element-button, .is-style-outline--2
 .wp-block-button__link) {
         background-color: var(--wp--preset--color--accent-2);
 }

 :root :where(.is-style-outline--2 .wp-element-button:hover, .is-style-
 outline--2 .wp-block-button__link:hover) {
         background-color: var(--wp--preset--color--accent-3);
 }

 :root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link)
 {
         background: transparent none;
         border-color: currentColor;
         border-width: 2px;
         border-style: solid;
         color: currentColor;
         padding-top: 0.667em;
         padding-right: 1.33em;
         padding-bottom: 0.667em;
         padding-left: 1.33em;
 }
 }}}


 You see that the `elements` styles are created, but are overridden by the
 default non-theme.json `outline` styles coming **after** the `element`
 styles.

 Due to the use of the `css` property for hover styling in Twenty Twenty
 Five theme.json, I guess this issue is kind of known (to some), but I
 didn't find a corresponding issue and think this is bug which should be
 fixed.

 **Additional editor issue**
 For custom button styles, element styling works as expected on the
 frontend, but not in the **editor**. There, the element styles like the
 background colors don't apply.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64094#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform