Skip to content

Button Block: Add HTML Element selection in Advanced settings #70139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

Mayank-Tripathi32
Copy link
Contributor

@Mayank-Tripathi32 Mayank-Tripathi32 commented May 15, 2025

What?

resolves part of #63534

This PR adds an HTML Element selection dropdown to the Button block's Advanced settings panel, allowing users to choose between (link) and <button> elements for better accessibility.

Why?

Currently, the Button block only outputs links (<a> elements). Users frequently misinterpret its name and use it for actions that should be triggered by a true HTML button, not a link. This creates accessibility problems, particularly for screen reader users who rely on semantic HTML to understand page functionality.

This change makes it easier for users to create accessible interfaces without writing custom code, addressing a common issue found during accessibility audits.

How?

  • Added an HTMLElementControl component to the Button block's Advanced settings panel
  • Added custom help messages for both <a> and <button> elements to educate users on proper usage
  • Utilized the existing tagName attribute that was already present in the block.json file

Testing Instructions

  • Add a Button block to a post or page
  • Select the Button block
  • In the right sidebar, go to the "Advanced" panel
  • You should see a new "HTML element" dropdown with two options:
    • Default (<a>)
    • <button>
  • Select the <button> option
  • The button should now be rendered as an HTML button element instead of a link
  • When you select an element type, you should see a helpful description below the dropdown explaining when to use that element type

Testing Instructions for Keyboard

  • Add a Button block to a post or page
  • Use Tab to navigate to the block settings sidebar
  • Use Tab to navigate to the Advanced panel (press Enter to expand if collapsed)
  • Continue tabbing to reach the HTML element dropdown
  • Press Enter to open the dropdown
  • Use arrow keys to select <button> option
  • Press Enter to confirm selection
  • Verify the help text appears below the dropdown
  • Tab back to the editor and verify the button now uses the button element

Screenshot

image
image
image

@Mayank-Tripathi32 Mayank-Tripathi32 marked this pull request as ready for review May 15, 2025 20:47
Copy link

github-actions bot commented May 15, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: amberhinds <alh0319@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@Mayank-Tripathi32
Copy link
Contributor Author

Failing unit tests seems irrelevant

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. Needs Accessibility Feedback Need input from accessibility [Block] Buttons Affects the Buttons Block labels May 16, 2025
@t-hamano
Copy link
Contributor

Thanks for the PR!

Looking at #63534, it seems like the discussion is still ongoing and there is no clear direction yet.

Additionally, I think simply exposing the UI to change elements may cause another problems. From #63534 (comment):

I do think that if we add the button option without the ability to create interactivity within the interface we are creating a confusing situation for the user, since they can't create a button that has functionality.

Personally, I would suggest further discussion before moving ahead with the implementation.

cc @amberhinds @carolinan @joedolson

@Mayank-Tripathi32
Copy link
Contributor Author

Personally, I would suggest further discussion before moving ahead with the implementation.

I believe it will be better than the current experience where users are using # anchors as buttons. Furthermore, it's already a pattern we've used to change element types of groups. Users haven't really complained on it and according to #63534 (comment), we should move towards exposing it as it will improve developer experience.

@joedolson
Copy link
Contributor

While I think it's good to be able to create a button, I'm dubious about the value of having a UI that inserts an element that cannot do anything unless the user is able to additionally write custom scripting.

But for advanced users and custom cases like plugin usages, I think it can absolutely be beneficial.

I'm a little concerned about whether this might cause some support burden from users inserting a button then complaining because it doesn't work. Hard to know whether that's a real problem, however.

I also want to note that this PR only address one of the three subjects raised by @amberhinds in the original issue, so this should not close that issue.

@amberhinds
Copy link

I believe it will be better than the current experience where users are using # anchors as buttons.

I agree. There are a lot of popup plugins that allow non-devs to do this, and being able to name an actual button as a trigger would be helpful to these users.

I would also love to set the ability to change the wrapper markup to unordered lists and a nav tag, but just button functionality is a step in the right direction.

@t-hamano
Copy link
Contributor

t-hamano commented May 20, 2025

My biggest question is why expose elements as WordPress defaults if you have to rely on external plugins and code to make them work properly?

FWIW, the UI that this PR is trying to achieve can be added by consumers if necessary. See https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md#inspectoradvancedcontrols

@carolinan
Copy link
Contributor

I think we should move forward with this.
Lets say I have set up some settings with ACF, that loads a JavaScript file. Using the button block instead of also creating a custom ACF block with very similar output would still save me time.

@amberhinds
Copy link

amberhinds commented May 28, 2025 via email

@t-hamano
Copy link
Contributor

I see, let's try this UI out. Is there any room for improvement in terms of help text?

Help text for the a element:

image

Help text for the button element:

image

@amberhinds
Copy link

That help text makes sense to me.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Let's ship this PR and see what kind of feedback we get from consumers.

@t-hamano t-hamano merged commit a3b72ee into WordPress:trunk May 29, 2025
69 of 73 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.0 milestone May 29, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
…r button block (WordPress#70139)

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: amberhinds <alh0319@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block Needs Accessibility Feedback Need input from accessibility [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants