Skip to content
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.

Sign up for GitHub

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

Elements: Add support for text based inputs #51337

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Open

Elements: Add support for text based inputs #51337

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
17f13c5
Elements: Add support for text area
scruffian Jun 8, 2023
f2afb2e
target all text inputs
scruffian Jun 8, 2023
3781361
add text based inputs
scruffian Jun 8, 2023
26b2e28
make the CSS lower specificity
scruffian Jun 8, 2023
f73935a
fix CSS
scruffian Jun 13, 2023
3ca066d
update the selector to only target some types
scruffian Jun 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,19 +497,20 @@ class WP_Theme_JSON_Gutenberg {
* @var string[]
*/
const ELEMENTS = array(
'link' => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
'heading' => 'h1, h2, h3, h4, h5, h6',
'h1' => 'h1',
'h2' => 'h2',
'h3' => 'h3',
'h4' => 'h4',
'h5' => 'h5',
'h6' => 'h6',
'link' => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
'heading' => 'h1, h2, h3, h4, h5, h6',
'h1' => 'h1',
'h2' => 'h2',
'h3' => 'h3',
'h4' => 'h4',
'h5' => 'h5',
'h6' => 'h6',
// We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
'button' => '.wp-element-button, .wp-block-button__link',
'button' => '.wp-element-button, .wp-block-button__link',
// The block classes are necessary to target older content that won't use the new class names.
'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
'cite' => 'cite',
'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
'cite' => 'cite',
'textInput' => 'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=tel],[type=url])',
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
'textInput' => 'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=tel],[type=url])',
'textInput' => 'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=tel],[type=url]), .wp-block-search__input, .wp-block-post-comments-form textarea',

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for taking a look. I don't think this is the right way round. Elements are meant to be a low level API so their CSS should be as non-specific as possible. If blocks chose to override these elements then that is their decision. One option might also be to add a selector like wp-element-text-input, so that blocks can decide to apply these rules to other elements if they want to.

Copy link
Contributor

Choose a reason for hiding this comment

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

With the text area and inputs bundled together as textInput, there is no way to for example have different padding in a text area compared to a text input, right? And I think we need to be able to do that.

);

const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
Expand Down
Loading