Add check for button text before rendering button block

[getsource]

Description

This PR continues the code and conversation from #24064, so props @richtabor, @ZebulanStanphill, and @youknowriad from there.

@Mamaduka also helped put this PR together and with testing.

This PR adds a check for button text before rendering the Button block on the front-end. This prevents an empty <div class="wp-block-button"><a class="wp-block-button__link"></a></div> from displaying on the front-end.

Closes #17221.

How has this been tested?

Tested using wp-env and trunk.
Locally, with wp-env, tests pass as well.

Screenshots

Before:

Editor:

Front-end:

After:

Editor:

Front-end:

Types of changes

Bug fix.
It does, however, change how buttons without text are displayed after a post with such buttons is loaded, then saved again.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[draganescu]

Tested this and worked like a charm. The code looks good as well 🚢

[youknowriad]

Nitpick: you could have sed and early return here. Not that it changes anything, just wanted to share this code style trick in case you find it nicer.

[getsource]

Thank you!
I considered that when I saw the previous PR, but when I tried it, I got a lot of warnings/errors regarding unused variables (from everything included in the return that was skipped).

Is there a way to work around that, for future knowledge at least? I think this is pretty readable, but an early return is probably slightly better.

[ZebulanStanphill]

The answer is to just move the early return above the unused variables. I went ahead and made a PR for this: #29781.

[youknowriad]

That PR is good. Though I would like to add just a small thing here. Early returns in components can break the "react hooks rules", so if we use this technique, we should make sure there's no React hook being called after the early return. (it's not the case here)

[ZebulanStanphill]

@youknowriad Good point. That kind of thing is caught by the React rules-of-hooks ESLint rules, isn't it? Or are we not using that?

[youknowriad]

you're probably right :)

[Mamaduka]

@youknowriad that rule doesn't apply to custom hooks like useBlockProps?

Just want to know for future reference.

[ZebulanStanphill]

@Mamaduka useBlockProps.save() is not a hook. In fact, React hooks aren't even usable in a block's save implementation. It's actually just an alias that points to getBlockProps() from https://github.com/WordPress/gutenberg/blob/trunk/packages/blocks/src/api/serializer.js. Yeah, it's kinda weird.

[Mamaduka]

Thanks, @ZebulanStanphill for clarifying this.