[Block] Search: Add dimensions (height, padding, margins) settings

[cuemarie]

What

It'd be great to see the ability to adjust the height, padding, and margins of the Search block. Right now, we can adjust the Typography settings (font size, and line height) as well as the width of the block, but these options don't offer full customization of the block's input field and button.

Why

This solves the problem of needing to apply CSS to adjust the height and other dimensions of the search block.

Here's an example chat where this came up: 37286617-hc (long chat - search block dimensions chat starts around 2022-10-06 22:12:09 😊 )

How

CSS workaround I offered today was to reduce the internal padding of the block, like this:

.wp-block-search .wp-block-search__input, .wp-block-search .wp-block-search__button {
    padding-top: 3px;
    padding-bottom: 3px;
}

I've seen other approaches in slack as well, such as:

input#wp-block-search__input-5 {
    height: max-content;
}

&

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button, .wp-block-search .wp-block-search__button {
    border-width: 0;
    padding-top: inherit;
    padding-bottom: inherit;
}

[cuemarie]

📌 ACTIONS

• Feature request kept

📌 Message to Author

• Wow, what a great idea, OP! 😉

📌 Message to Quality Squad

• Turns out I was next in line to triage my report here. If Quality Squad disagrees with keeping this feature request, feel free to close! 😁

[cuemarie]

This is included in this Core issue: WordPress/gutenberg#22071

But I'm not sure it's been worked on in a bit.

[annezazu]

Quick note that margin controls have been added but padding hasn't been: WordPress/gutenberg#43243 I updated the related issue in question for now: WordPress/gutenberg#22071