-
Notifications
You must be signed in to change notification settings - Fork 4.5k
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
Button Block: Add HTML Element selection in Advanced settings #70139
Conversation
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Failing unit tests seems irrelevant |
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):
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. |
While I think it's good to be able to create a 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. |
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. |
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 |
I think we should move forward with this. |
Another argument for it could be looking at the popularity of plugins like
Popup Maker (700,000+ installs) or any number of the lightbox plugins.
There are lots of ways for non-coders to trigger a model in the editor.
Amber Hinds
Founder & CEO
Pronouns: she/her
Phone: 512-942-5858
https://equalizedigital.com
[image: Equalize Digital - websites for everyone logo]
------------------------------
Equalize Digital believes in digital equality. Our mission is to make the
web more accessible for our team members, for our clients, *for everyone*.
If there is something in this email or an attachment that does not work for
you or your assistive technology, please let me know. I’ll do my best to
assist you and resolve issues. Read our full accessibility statement
<https://equalizedigital.com/about/accessibility-statement/>
…On Tue, May 27, 2025, 10:50 PM Carolina Nymark ***@***.***> wrote:
*carolinan* left a comment (WordPress/gutenberg#70139)
<#70139 (comment)>
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.
—
Reply to this email directly, view it on GitHub
<#70139 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ADELJMBGMDY36OZSC7XNATL3AUW6ZAVCNFSM6AAAAAB5HCPLV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSMJUHAYTGNBTHE>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
That help text makes sense to me. |
There was a problem hiding this 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.
…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>
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?
<a>
and<button>
elements to educate users on proper usageTesting Instructions
<a>
)<button>
<button>
optionTesting Instructions for Keyboard
<button>
optionScreenshot