Skip to content

Password protected form: Add wp-element-button class#76627

Open
carolinan wants to merge 6 commits intotrunkfrom
update/password-form-classes
Open

Password protected form: Add wp-element-button class#76627
carolinan wants to merge 6 commits intotrunkfrom
update/password-form-classes

Conversation

@carolinan
Copy link
Copy Markdown
Contributor

@carolinan carolinan commented Mar 18, 2026

What?

Closes #61353

For block themes only, but this is easy to change if we want it for all themes.

Adds the wp-block-button__link and wp-element-button classes to the submit button in the form that shows on password protected content.

Why?

To make the button easier to style. With the class added, the button uses the button styles set in theme.json.
So why did I add both classes? Because the form block uses both. 🤷‍♀️ I thought they should match.

How?

Use the_password_form filter to add the wp-block-button__link and wp-element-button to the form that shows on password protected content.

Testing Instructions

  1. Activate a block theme that styles button, like Twenty Twenty-Four.
  2. Create a new post. Password protect it.
  3. View the post on the front. Confirm that the classes are present on the submit button and that the style matches the button block.

Use of AI Tools

GitHub Copilot came up with the idea to use the WP_HTML_Tag_Processor.

Use the_password_form filter to add the wp-block-button__link and wp-element-button to the form that shows on password protected content.
@carolinan carolinan added [Type] Enhancement A suggestion for improvement. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Mar 18, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 18, 2026

Flaky tests detected in 2abf3a7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23437766580
📝 Reported issues:

Since we're not rendering a core/button block, enqueue the button block style.
Also:
Use wp_theme_get_element_class_name( 'button' ) instead of hard coding wp-element-button directly.
If for any reason, the button style is not registered, then don't try to enqueue it.
@carolinan carolinan marked this pull request as ready for review March 21, 2026 08:20
@carolinan carolinan requested a review from spacedmonkey as a code owner March 21, 2026 08:20
@github-actions
Copy link
Copy Markdown

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: carolinan <poena@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: andersnoren <anlino@git.wordpress.org>

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

@carolinan
Copy link
Copy Markdown
Contributor Author

Compared to the login/out block, we can't take advantage of the "wp-submit" class because it is not present on the button.

@carolinan
Copy link
Copy Markdown
Contributor Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Password protected form: Add wp-element-button class to the submit input

1 participant