Make WordPress Core

Opened 7 weeks ago

Closed 5 weeks ago

Last modified 5 weeks ago

#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)

65567-password-form-button-class.diff (2.5 KB ) - added by sachinrajcp123 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.

Download all attachments as: .zip

Change History (8)

This ticket was mentioned in PR #12374 on WordPress/wordpress-develop by @poena.


7 weeks ago
#1

  • Keywords has-patch added

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

@sachinrajcp123
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.

#3 @SergeyBiryukov
7 weeks ago

  • Milestone Awaiting Review7.1

#4 @poena
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 @wildworks
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/

#6 @wildworks
5 weeks ago

  • Milestone 7.1
  • Resolutionduplicate
  • Status newclosed

Duplicate of #64569.

@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.

Note: See TracTickets for help on using tickets.