https://github.com/WordPress/gutenberg/pull/29717
This PR adds a check for button text before rendering the Button block on the front-end. This prevents an empty from displaying on the front-end.
What you are trying to do is considered a bug and was fixed in March 2021.
The result was empty tags which cause validation and accessibility issues, as well as styling problems in various themes.
It’s also awful for accessibility and SEO, screen readers will have no text explaining what the button does, which also means search engine crawlers will not know either. Icon buttons are also useless to a large number of people who have common but unrecognised issues (e.g. face blindness is commonly associated with recognition issue with icons that do not have accompanying text).
Can we work around this to let the button block not have text? No.
I’ve ran some tests and it appears a button with no text is simply not something that’s possible, the buttons block is present on the frontend but has no button blocks inside it.
It’s not that WP removed the block, it was simply never there to begin with, unless text is present the button block has no representation and is just user interface.
We can see this by looking at the button blocks save function, the very first thing it does is check if the button has text and aborts immediately if it does not:
if ( ! text ) {
return null;
}
This was done as an optimisation of an earlier piece of code that also did the same thing. Button blocks are meant to have text, this is intentional and by design.
What Should I Do Instead?
Your next steps are one of these options:
- Use CSS to hide the text in the button
- Add block variants to the button that add HTML classes which make it an icon button on the frontend, making the text invisible and adding an icon
- Build an icon button block instead of hacking an existing block to do it
- Avoid icon only blocks as they have poor SEO/Accessibility/Readability
The last option would be the most effective, although an icon block would allow you to add other options such as choosing which icon etc. You can use the button block itself as a starting point.
Social Sharing/Profiles
If you’re wanting this so that you can implement a social media icon list/share feature, then WordPress already has such a block and you don’t need to re-invent the wheel. Use the Social Links block instead.
It’s much easier to swap the icons out for this block or do it conditionally by setting a class in the advanced panel (this is actually very close to how the social link block does it, Google/Facebook/etc are all just variants of that block, and it’s the value of an attribute/class that determines it).