[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        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 # 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>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform