Wrong CSS Styles when defining custom Button fontSizes #56015
Description
Description
When defining custom fontSizes for the core/button it puts the correct class but the style that is generated has the class in the wrong element.
Theme.json:
"blocks": {
"core/button": {
"typography": {
"fontSizes": [
{
"name": "Button Medium",
"slug": "button-medium",
"size": "16px"
},
{
"name": "Button Large",
"slug": "button-large",
"size": "23px"
},
{
"name": "Button XLarge",
"slug": "button-xlarge",
"size": "42px"
}
]
}
}
},
Produced markup in the editor:
<div tabindex="0" class="block-editor-block-list__block wp-block has-button-xlarge-font-size is-selected wp-block-button" id="block-c564793c-672f-4b14-84be-ee439ea353ca" role="document" aria-label="Block: Button" data-block="c564793c-672f-4b14-84be-ee439ea353ca" data-type="core/button" data-title="Button">
<div role="textbox" aria-multiline="true" aria-label="Button text" class="block-editor-rich-text__editable wp-block-button__link wp-element-button rich-text" contenteditable="true" style="white-space: pre-wrap; min-width: 1px;">Button 1</div>
</div>
Produced markup in the front end:
<div class="wp-block-button has-custom-font-size has-button-xlarge-font-size">
<a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
Produced Style for has-button-xlarge-font-size in the editor:
.editor-styles-wrapper .wp-block-button .wp-block-button__link.has-button-xlarge-font-size {
font-size: var(--wp--preset--font-size--button-xlarge) !important;
}
Produced Style for has-button-xlarge-font-size in the front end:
wp-block-button .wp-block-button__link.has-button-xlarge-font-size{font-size: var(--wp--preset--font-size--button-xlarge) !important;}
As you can see, it does everything it is supposed to, but the styles are supposed to be wp-block-button.has-button-xlarge-font-size .wp-block-button__link
Step-by-step reproduction instructions
- In your theme.json go to settings>blocks
- Add core/button and an option
- Add different font sizes to the core button
- Go to the editor
- Try applying those sizes to your button
- Check markup
- Check generated CSS
Screenshots, screen recording, code snippet
Environment info
WP 6.4.1 (core gutenberg)
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