#65567 closed enhancement (duplicate)
Password protected form: Add wp-element-button class to the submit input
| Reported by: | poena | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | |
| Component: | Themes | Version: | |
| Severity: | normal | Keywords: | has-patch |
| Cc: | Focuses: |
Description
Originally reported at
https://github.com/WordPress/gutenberg/issues/61353
When you set a page/post to be password protected, the "This content is password protected" form shown on the page includes a <input type="submit"> button without the
wp-element-button class. That means that the button doesn't match the button styles set by the theme in theme.json, or by the user in the site editor.
What is your proposed solution?
Add the wp-element-button class to the <input type="submit"> element in the password protected form.
This could be implemented in https://developer.wordpress.org/reference/functions/get_the_password_form/,
or as a filter in https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/theme.php.
Comments on the original issue favors get_the_password_form.
Attachments (1)
Change History (8)
This ticket was mentioned in PR #12374 on WordPress/wordpress-develop by @poena.
7 weeks ago
#1
- Keywords has-patch added
@
7 weeks ago
Added a refreshed patch to apply Button block styling classes to the password protected form submit input for block themes, and enqueue the Button block stylesheet when available.
#4
@
6 weeks ago
OK, without the wp-block-button class, the button uses the styling for button elements only, not the button block.
That is, in the interface, you would go to:
Styles > Typograhy > Elements > Buttons.
Styles > Colors > Elements > Buttons,
not Styles > Blocks > Button.
The element does not have border radius or text decoration settings in the interface.
The block does.
If / since we want the user to be able to change both of those, the button should indeed be wrapped in another HTML element that has the wp-block-button class.
So what is the least bad option? To add it to the p that wraps the label and text input, or add the new span around the button only?
Changing the markup may cause existing custom theme CSS to stop working, but we are already changing the styles, so existing block themes that has added their own CSS to work around this, will still need to update it.
#5
@
5 weeks ago
Should we close this ticket as a duplicate of #64569? The linked PRs both contain similar changes.
https://github.com/WordPress/wordpress-develop/pull/11642/
https://github.com/WordPress/wordpress-develop/pull/12374/
@wildworks commented on PR #12374:
5 weeks ago
#7
I would like to close this PR in favor of #11642, but I plan to adopt the explicit enqueueing of styles for buttons implemented in this PR.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Trac ticket: https://core.trac.wordpress.org/ticket/65567
Updates get_the_password_form() to print the wp-element-button classes on the submit input, if the current theme is a block theme.
A similar solution is already used for the submit button on the comments block:
https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/blocks/comments.php#L113
This way, the button uses the same styling as the button block. It allows styling the button using theme.json or the global styles interface in the Site Editor.
It enqueues the button block stylesheet, so that the CSS is applied even if there is no other button block on the page.
If the style has been unregistered for any reason, it is not enqueued.
### Testing Instructions
Activate a block theme that styles button, like Twenty Twenty-Four.
Create a new post. Password protect it.
View the post on the front. Confirm that the classes are present on the submit button and that the style matches the button block.
Props, see https://github.com/WordPress/gutenberg/pull/76627#issuecomment-4102828758