Skip to content

Core/Button .is-style-outline overwrites theme.json padding settings for default button padding #34853

@websitegenii

Description

@websitegenii

Description

So utilizing theme.json I am able to add styles to the core/button as intended

Though when I change the button style to outline it now ignores my colors (obviously) but what I didn't expect is it overwrote my theme.json padding with its own padding.

Here is the part of my theme.json file

"core/button": {
          "color": {
            "background" : "var(--wp--preset--color--primary)",
            "text" : "var(--wp--preset--color--white)"
        },
        "spacing": {
          "padding": {
              "top": "5px",
              "right": "15px",
              "bottom": "5px",
              "left": "15px"
          },
          "border": {
            "customRadius": false
          }
        }
      },

This applies everything as expected but if in the wp-admin area you go and switch style to outline it adds the class
.is-style-outline which then applies its own padding and overwrites my padding.

.is-style-outline>.wp-block-button__link, .wp-block-button__link.is-style-outline {
    border: 2px solid;
    padding: .667em 1.333em;
}

With this in mind, my thought (though with a grain of salt) would be to either remove the padding from .is-style-outline and let it default to the .wp-block-button__link styles precede.

This creates the problem though of the buttons not being equal in size with default stylings. As the border: 2px solid; will increase the overall size by 4px.

I also thought of maybe changing the border to outline.

Overall I'm not sure the best solution here but that it doesn't seem to be the best way of handling it.

A couple of of other thoughts I had was to have the theme.json file a way of targeting .is-style-outline

Ultimately I think this comes back to the hard coding of styles versus the direction we seem to be going with flexibility.

Step-by-step reproduction instructions

Set a padding in theme.json to apply to core/button

Set button to outline style.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Block] ButtonsAffects the Buttons Block[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions