Can't override individual Button Style once I have set a Global Style in the Full Site Editor

admin管理员组

文章数量:1122833

I want my button blocks by default to have uppercase text, but for the user to be able to select individual buttons to be lowercase.

In Global Styles (Full Site Editor > three dots top right > Styles > Typography > Buttons > Letter Case) I have selected uppercase. When I export the theme files from the Site Editor, in theme.json it has saved in styles:elements:button:typography:textTransform the value uppercase.

But on an individual page in an individual button block I want to style differently (the single Button, not its Buttons container), I have then set lowercase on the Typography settings. But still the button is uppercase.

The output HTML is:

<div class="wp-block-button" style="text-transform:lowercase">
    <a class="wp-block-button__link wp-element-button">button text</a></div>

I think the issue is that my specific button setting is the inline lowercase style tag, but the global styles are styling .wp-element-button:

.wp-element-button, .wp-block-button__link {
    background-color: var(--wp--preset--color--primary);
    border-width: 0;
    color: var(--wp--preset--color--white);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: inherit;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    text-decoration: none;
    text-transform: uppercase;
}

Is there any way around this without having to set the text case on each individual button? The same is true for other applied styles I think (font weight, font family, etc). I would expect the global style to be the fallback, but for individual set styles to take precedence...

I am using WordPress 6.5.3, no other 3rd party plugins that affect styling or block styling.

本文标签： Can39t override individual Button Style once I have set a Global Style in the Full Site Editor