Repository navigation
Add option to add class right to <a> tag in 'button' block #28444
Description
Hi,
first of all, unbelievable what has been done with a Gutenberg editor for the past year, great job!
Can you please add an option to add class right to <a> tag in 'button' block? Now "additional CSS class" adding over "advanced option" adds class to <div> wrap before <a> tag like this:
<div class="wp-block-button button arrow inverted"><a class="wp-block-button__link no-border-radius" href="https://www.example.com/contact/">Contact</a></div>
Desired output is as follows:
<div class="wp-block-button optional-something"><a class="wp-block-button__link no-border-radius button arrow inverted" href="https://www.example.com/contact/">Contact</a></div>
This simplifies ability to synchronize theme with power of editing content over a Gutenberg editor.
Activity
brylie commentedon Aug 20, 2021
This would help a use-case where we want to apply button styling directly to the links, rather than a containing
div. When applying the extra CSS to the button block, the containingdivtakes on the button style, rather than the button.fienen commentedon Jul 26, 2022
Oof, just came across this. I have the same use case problem bringing in a pattern library for a WordPress site. The class being applied to the wrapper screws stuff up without a bunch of additional CSS work on the selectors (the pattern library is using BEM methodology, and adding in special options for WordPress dirties it up.) Was hoping a fix was already out there without overriding the core block.
TCook20 commentedon Sep 9, 2022
To echo what others have said. I am pulling in styling from a design system where button components are applying the class to
aorbuttonso applying the class to the wrapper creates some really odd behavior. Would love to see some movement on this issue.skorasaurus commentedon Sep 21, 2026
hi, thanks for reporting.
This a duplicate issue of #14121 ; please reopen and comment if I misunderstand that this is different from #14121