Ticket #52433: 52433.patch

wp-content/themes/twentytwentyone/assets/css/ie-editor.css

@@ -2309 +2309 @@
         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-radius: 0;
         cursor: pointer;
@@ -2324 +2324 @@
         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;
 }
 
-.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;
 }
 
-.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;
 }
 
-.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;
 }
 
-.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;
 }
 
-.wp-block-search .wp-block-search__button:hover,
-.wp-block-search .wp-block-search__button:active {
+.wp-block-search .wp-block-search__button.wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button.wp-block-search__button:active {
         background-color: transparent;
         border-color: currentColor;
         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: 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);
         border-color: rgba(255, 255, 255, 0.5);
         color: #39414d;
 }
 
-.wp-block-search .wp-block-search__button.has-icon {
-        padding: 30px 15px;
+.wp-block-search .wp-block-search__button.wp-block-search__button.has-icon {
+        padding: 6px 15px;
         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;
         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;
         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;
         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;
 }
 
-.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;
 }
 
-.wp-block-search .wp-block-search__button:focus {
+.wp-block-search .wp-block-search__button.wp-block-search__button:focus {
         outline-offset: inherit;
         outline: inherit;
 }

wp-content/themes/twentytwentyone/assets/css/style-editor.css

@@ -1819 +1819 @@
         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-radius: var(--button--border-radius);
         cursor: pointer;
@@ -1834 +1834 @@
         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);
 }
 
-.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));
 }
 
-.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);
 }
 
-.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);
 }
 
-.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));
 }
 
-.wp-block-search .wp-block-search__button:hover,
-.wp-block-search .wp-block-search__button:active {
+.wp-block-search .wp-block-search__button.wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button.wp-block-search__button:active {
         background-color: transparent;
         border-color: currentColor;
         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: 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);
         border-color: var(--global--color-white-50);
         color: var(--button--color-text-active);
 }
 
-.wp-block-search .wp-block-search__button.has-icon {
-        padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+.wp-block-search .wp-block-search__button.wp-block-search__button.has-icon {
+        padding: 6px calc(0.5 * var(--button--padding-horizontal));
         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;
         height: 40px;
 }
 
-.has-background .wp-block-search .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:hover,
+.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;
         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:active {
+.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.wp-block-search__button:active {
         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: inherit;
 }

wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss

@@ -27 +27 @@
                 }
         }
 
-        .wp-block-search__button {
+        .wp-block-search__button.wp-block-search__button {
                 @include button-style();
                 box-shadow: none;
                 margin-left: 0;
 
                 &.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;
 
                         svg {