0

I have buttons with no text in my design which has icons designed in :before of the a tag.

It was working fine with the WP 5.5, but now I have updated in live and when I save any page it removes all those buttons.

I understand that because it is empty WP removes it on save. Is there a way that I can skip a block or skip this removing block stuff because most of my blocks have empty buttons and live site cannot be edited because it removes all empty buttons.

2
  • removed on the frontend or removed in the editor too? Have you tried giving them labels that are empty spaces or other characters? Or an inline image? Icon buttons sound like a great candidate for a custom block
    – Tom J Nowell
    Dec 15, 2021 at 16:33
  • Empty buttons, Icon is added in css. It is removed in the frontend. But it comes back if I add any label to it Dec 15, 2021 at 16:47

1 Answer 1

0

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.

enter image description here

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).

2
  • Is there a way to add label dynamically to the block? Dec 15, 2021 at 17:48
  • You mean on addition? It would have to happen in javascript and it would be no different to clicking and hitting the space bar. How are you determining what CSS and icon should be used for a button if there is no interaction with it? I get the feeling there's some context for this that's not been shared for why you've been doing this. The canonical answer for how to do this is: don't. Otherwise you're going to need to provide more information about why you're doing this and what the icon buttons are for
    – Tom J Nowell
    Dec 16, 2021 at 0:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.