Skip to content

Commit 3f75e73

Browse files
MaggieCabrerat-hamanoMaggieCabrerajasmussengetdave
authored and
cbravobernal
committed
Global styles: add element support for text related inputs (#70378)
* add textInput to the elements API and implement it to the experimental form block, updated the schema too * linting changes * removed the class and target tags directly * moved styles from blocks into theme.json * add a color for the borders * move styles for search block * linting and moving styles to the specific blocks * removed duplicated selector * missing typography styles for post comments block * backport file * Update lib/class-wp-theme-json-gutenberg.php Co-authored-by: Aki Hamano <[email protected]> * moved styles back to css but with lower specificity * added basic styles for the text inputs * Revert "added basic styles for the text inputs" This reverts commit 3d393af. * fix commit number * separate CSS rules to make it work with specificity * format php --------- Co-authored-by: Aki Hamano <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ocean90 <[email protected]> Co-authored-by: mikachan <[email protected]> Co-authored-by: carolinan <[email protected]>
1 parent 73ec824 commit 3f75e73

File tree

7 files changed

+50
-41
lines changed

7 files changed

+50
-41
lines changed

‎backport-changelog/6.9/9600.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
https://github.com/WordPress/wordpress-develop/pull/9600
2+
3+
* https://github.com/WordPress/gutenberg/pull/70378

‎lib/class-wp-theme-json-gutenberg.php

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -598,20 +598,21 @@ class WP_Theme_JSON_Gutenberg {
598598
* @var string[]
599599
*/
600600
const ELEMENTS = array(
601-
'link' => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
602-
'heading' => 'h1, h2, h3, h4, h5, h6',
603-
'h1' => 'h1',
604-
'h2' => 'h2',
605-
'h3' => 'h3',
606-
'h4' => 'h4',
607-
'h5' => 'h5',
608-
'h6' => 'h6',
601+
'link' => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
602+
'heading' => 'h1, h2, h3, h4, h5, h6',
603+
'h1' => 'h1',
604+
'h2' => 'h2',
605+
'h3' => 'h3',
606+
'h4' => 'h4',
607+
'h5' => 'h5',
608+
'h6' => 'h6',
609609
// We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
610-
'button' => '.wp-element-button, .wp-block-button__link',
610+
'button' => '.wp-element-button, .wp-block-button__link',
611611
// The block classes are necessary to target older content that won't use the new class names.
612-
'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',
613-
'cite' => 'cite',
614-
'select' => 'select',
612+
'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',
613+
'cite' => 'cite',
614+
'select' => 'select',
615+
'textInput' => 'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=text],[type=tel],[type=url])',
615616
);
616617

617618
const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(

‎packages/block-library/src/form-input/style.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
width: fit-content;
3535
}
3636

37-
.wp-block-form-input__input {
37+
:where(.wp-block-form-input__input) {
3838
padding: 0 0.5em;
3939
font-size: 1em;
4040
margin-bottom: 0.5em;
@@ -54,7 +54,8 @@
5454
&[type="week"] {
5555
min-height: 2em;
5656
line-height: 2;
57-
border: 1px solid;
57+
border-width: 1px;
58+
border-style: solid;
5859
}
5960
}
6061

‎packages/block-library/src/post-comments-form/style.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
// Allow these default styles to be overridden by global styles.
2-
:where(.wp-block-post-comments-form) {
3-
textarea,
4-
input:not([type="submit"]) {
5-
border: 1px solid $gray-600;
6-
font-size: 1em;
7-
font-family: inherit;
8-
}
2+
:where(.wp-block-post-comments-form textarea),
3+
:where(.wp-block-post-comments-form input:not([type="submit"])) {
4+
border-width: 1px;
5+
border-style: solid;
6+
border-color: $gray-600;
7+
font-size: 1em;
8+
font-family: inherit;
9+
}
910

10-
textarea,
11-
input:where(:not([type="submit"]):not([type="checkbox"])) {
12-
padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
13-
}
11+
:where(.wp-block-post-comments-form textarea),
12+
:where(.wp-block-post-comments-form input:where(:not([type="submit"]):not([type="checkbox"]))) {
13+
padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
1414
}
1515

1616
.wp-block-post-comments-form {

‎packages/block-library/src/search/style.scss

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -37,21 +37,6 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
3737
width: 100%;
3838
}
3939

40-
.wp-block-search__input {
41-
padding: $grid-unit-10;
42-
flex-grow: 1;
43-
margin-left: 0;
44-
margin-right: 0;
45-
min-width: 3rem;
46-
border: 1px solid $gray-600;
47-
// !important used to forcibly prevent undesired application of
48-
// text-decoration styles on the input field.
49-
text-decoration: unset !important;
50-
51-
// Hides a redundant extra search icon on Mobile Safari.
52-
appearance: initial;
53-
}
54-
5540
.wp-block-search.wp-block-search__button-only {
5641
.wp-block-search__button {
5742
margin-left: 0;
@@ -104,12 +89,26 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
10489
letter-spacing: inherit;
10590
text-transform: inherit;
10691
font-style: inherit;
92+
padding: $grid-unit-10;
93+
flex-grow: 1;
94+
margin-left: 0;
95+
margin-right: 0;
96+
min-width: 3rem;
97+
border: 1px solid $gray-600;
98+
// !important used to forcibly prevent undesired application of
99+
// text-decoration styles on the input field.
100+
text-decoration: unset !important;
101+
102+
// Hides a redundant extra search icon on Mobile Safari.
103+
appearance: initial;
107104
}
108105

109106
// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
110107
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
111108
padding: $grid-unit-05;
112-
border: 1px solid $gray-600;
109+
border-width: 1px;
110+
border-style: solid;
111+
border-color: $gray-600;
113112
background-color: $white;
114113
box-sizing: border-box;
115114

‎packages/blocks/src/api/constants.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,8 @@ export const __EXPERIMENTAL_ELEMENTS = {
285285
'.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',
286286
cite: 'cite',
287287
select: 'select',
288+
textInput:
289+
'textarea, input:where([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url])',
288290
};
289291

290292
// These paths may have three origins, custom, theme, and default,

‎schemas/json/theme.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1839,6 +1839,9 @@
18391839
},
18401840
"select": {
18411841
"$ref": "#/definitions/stylesPropertiesComplete"
1842+
},
1843+
"textInput": {
1844+
"$ref": "#/definitions/stylesPropertiesComplete"
18421845
}
18431846
},
18441847
"additionalProperties": false

0 commit comments

Comments
 (0)