Search block is missing styles

[kjellr]

Current state:

[MaggieCabrera]

I had the markup for testing this block around, I'm dropping it here for easier testing:

<!-- wp:search {"label":"Search","placeholder":"Placeholder text...","buttonText":"Search"} /-->

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Placeholder text...","buttonText":"Search"} /-->

<!-- wp:search {"label":"Search","placeholder":"Placeholder text...","buttonText":"Search","buttonPosition":"button-inside"} /-->

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Placeholder text...","buttonText":"Search","buttonPosition":"button-inside"} /-->

<!-- wp:search {"label":"Search","placeholder":"Placeholder text...","buttonText":"Search","buttonUseIcon":true} /-->

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Placeholder text...","buttonText":"Search","buttonUseIcon":true} /-->

<!-- wp:search {"label":"Search","placeholder":"Placeholder text...","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Placeholder text...","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->

<!-- wp:search {"label":"Search","placeholder":"Placeholder text...","buttonText":"Search","buttonPosition":"no-button"} /-->

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Placeholder text...","buttonText":"Search","buttonPosition":"no-button"} /-->

How it looks like on TT2:

[carolinan]

Is the correct style for the search block the one in the Figma template for the 404 page?

It's been a year since I used Figma :) -is the input field and button supposed to be 70px tall?

[kjellr]

I think we should actually just work backwards from the button:

• The search button by default should use the same text size and padding as the normal button block.
• Then the search field should be as tall as that button, so they line up.

[carolinan]

I believe this will need custom CSS because it can't be changed with theme.json:
WordPress/gutenberg#34216

[kjellr]

I opened an issue upstream to track this: WordPress/gutenberg#36444

[jffng]

I think we should hard code the styles in CSS, and remove them as soon as global styles supports styling the block.

[kjellr]

Let's give that a try and see how complicated/verbose the code needs to be.

[kjellr]

Fixed by #235.