Search block: update alignment and icon button width (#54773)

* Render rich text button as a button so that it inherits the default button styles, mainly the text:center Remove max-width change so that it doesn't affect search buttons in the header * Render rich text button as a button so that it inherits the default button styles, mainly the text:center Remove max-width change for buttons with icons only so that it doesn't affect search button icons in the header or in narrow widths * Revert tagName on Richtext Achieve centered text via text-align in editor.scss
WordPress · Sep 26, 2023 · 6c9738c · 6c9738c · github-actions · Sep 26, 2023
1 parent c8fa0db
commit 6c9738c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
@@ -13,6 +13,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		text-align: center;
 	}
 
 	&__components-button-group {

diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
@@ -57,6 +57,9 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 		flex-shrink: 0;
 		// Ensure minimum input field width in small viewports.
 		max-width: calc(100% - 100px);
+		&.has-icon {
+			max-width: 100%;
+		}
 	}
 }