Twenty Twenty-One: Update editor styles of search block.

Update editor styles to more closely match the front-end following upstream changes.

Props poena, paaljoachim, hellofromTonya.
Fixes #52433.


Built from https://develop.svn.wordpress.org/trunk@50262


git-svn-id: http://core.svn.wordpress.org/trunk@49907 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Peter Wilson 2021-02-09 03:55:05 +00:00
parent 2ffff78f51
commit 98b855ed94
4 changed files with 39 additions and 39 deletions

View File

@ -2306,7 +2306,7 @@ pre.wp-block-preformatted {
border-color: #28303d !important; border-color: #28303d !important;
} }
.wp-block-search .wp-block-search__button { .wp-block-search .wp-block-search__button.wp-block-search__button {
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 0; border-radius: 0;
cursor: pointer; cursor: pointer;
@ -2320,73 +2320,73 @@ pre.wp-block-preformatted {
margin-left: 0; margin-left: 0;
} }
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
color: #d1e4dd; color: #d1e4dd;
} }
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
color: #28303d; color: #28303d;
} }
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
color: #28303d; color: #28303d;
} }
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) { .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) {
background-color: #28303d; background-color: #28303d;
} }
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) {
background-color: #28303d; background-color: #28303d;
} }
.wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button.wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:active { .wp-block-search .wp-block-search__button.wp-block-search__button:active {
background-color: transparent; background-color: transparent;
border-color: currentColor; border-color: currentColor;
color: inherit; color: inherit;
} }
.wp-block-search .wp-block-search__button:focus { .wp-block-search .wp-block-search__button.wp-block-search__button:focus {
outline-offset: -6px; outline-offset: -6px;
outline: 2px dotted currentColor; outline: 2px dotted currentColor;
} }
.wp-block-search .wp-block-search__button:disabled { .wp-block-search .wp-block-search__button.wp-block-search__button:disabled {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5);
color: #39414d; color: #39414d;
} }
.wp-block-search .wp-block-search__button.has-icon { .wp-block-search .wp-block-search__button.wp-block-search__button.has-icon {
padding: 30px 15px; padding: 6px 15px;
display: inherit; display: inherit;
} }
.wp-block-search .wp-block-search__button.has-icon svg { .wp-block-search .wp-block-search__button.wp-block-search__button.has-icon svg {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
.has-background .wp-block-search .wp-block-search__button:hover { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:hover {
background-color: #d1e4dd !important; background-color: #d1e4dd !important;
color: #28303d !important; color: #28303d !important;
} }
.has-background .wp-block-search .wp-block-search__button:active { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:active {
background-color: #d1e4dd !important; background-color: #d1e4dd !important;
color: #28303d !important; color: #28303d !important;
} }
.has-text-color .wp-block-search .wp-block-search__button:hover { .has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:hover {
color: #28303d !important; color: #28303d !important;
} }
.has-text-color .wp-block-search .wp-block-search__button:active { .has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:active {
color: #28303d !important; color: #28303d !important;
} }
.wp-block-search .wp-block-search__button:focus { .wp-block-search .wp-block-search__button.wp-block-search__button:focus {
outline-offset: inherit; outline-offset: inherit;
outline: inherit; outline: inherit;
} }

View File

@ -1816,7 +1816,7 @@ pre.wp-block-preformatted {
border-color: var(--local--color-primary, var(--global--color-primary)) !important; border-color: var(--local--color-primary, var(--global--color-primary)) !important;
} }
.wp-block-search .wp-block-search__button { .wp-block-search .wp-block-search__button.wp-block-search__button {
border: var(--button--border-width) solid transparent; border: var(--button--border-width) solid transparent;
border-radius: var(--button--border-radius); border-radius: var(--button--border-radius);
cursor: pointer; cursor: pointer;
@ -1830,66 +1830,66 @@ pre.wp-block-preformatted {
margin-left: 0; margin-left: 0;
} }
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background); color: var(--global--color-background);
} }
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-primary)); color: var(--local--color-background, var(--global--color-primary));
} }
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary); color: var(--global--color-primary);
} }
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) { .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary); background-color: var(--global--color-primary);
} }
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary)); background-color: var(--local--color-primary, var(--global--color-primary));
} }
.wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button.wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:active { .wp-block-search .wp-block-search__button.wp-block-search__button:active {
background-color: transparent; background-color: transparent;
border-color: currentColor; border-color: currentColor;
color: inherit; color: inherit;
} }
.wp-block-search .wp-block-search__button:focus { .wp-block-search .wp-block-search__button.wp-block-search__button:focus {
outline-offset: -6px; outline-offset: -6px;
outline: 2px dotted currentColor; outline: 2px dotted currentColor;
} }
.wp-block-search .wp-block-search__button:disabled { .wp-block-search .wp-block-search__button.wp-block-search__button:disabled {
background-color: var(--global--color-white-50); background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50); border-color: var(--global--color-white-50);
color: var(--button--color-text-active); color: var(--button--color-text-active);
} }
.wp-block-search .wp-block-search__button.has-icon { .wp-block-search .wp-block-search__button.wp-block-search__button.has-icon {
padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); padding: 6px calc(0.5 * var(--button--padding-horizontal));
display: inherit; display: inherit;
} }
.wp-block-search .wp-block-search__button.has-icon svg { .wp-block-search .wp-block-search__button.wp-block-search__button.has-icon svg {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
.has-background .wp-block-search .wp-block-search__button:hover, .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:hover,
.has-background .wp-block-search .wp-block-search__button:active { .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:active {
background-color: var(--local--color-background, var(--global--color-background)) !important; background-color: var(--local--color-background, var(--global--color-background)) !important;
color: var(--local--color-primary, var(--global--color-primary)) !important; color: var(--local--color-primary, var(--global--color-primary)) !important;
} }
.has-text-color .wp-block-search .wp-block-search__button:hover, .has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:hover,
.has-text-color .wp-block-search .wp-block-search__button:active { .has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:active {
color: var(--local--color-primary, var(--global--color-primary)) !important; color: var(--local--color-primary, var(--global--color-primary)) !important;
} }
.wp-block-search .wp-block-search__button:focus { .wp-block-search .wp-block-search__button.wp-block-search__button:focus {
outline-offset: inherit; outline-offset: inherit;
outline: inherit; outline: inherit;
} }

View File

@ -27,13 +27,13 @@
} }
} }
.wp-block-search__button { .wp-block-search__button.wp-block-search__button {
@include button-style(); @include button-style();
box-shadow: none; box-shadow: none;
margin-left: 0; margin-left: 0;
&.has-icon { &.has-icon {
padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); padding: 6px calc(0.5 * var(--button--padding-horizontal));
display: inherit; display: inherit;
svg { svg {

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.7-beta1-50261'; $wp_version = '5.7-beta1-50262';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.