Add wide/full alignment to the Search block

[richtabor]

What problem does this address?

Is there a reason why wide/full width alignments were not included within the Search block? Currently the only way to get a search block to display wide or full is to add it to a Group block first, then set that parent block to the desired width.

I had to do that for implementing a wide search bar on the search template within my Wabi theme (source). Just doesn't seem like this should be a limitation for the block.

What is your proposed solution?

Add wide/full alignment support to the search block.

Screenshot

[brookewp]

Thanks for the issue! I appreciate the example you shared for a wide width Search block, @richtabor. Do you have a use case in mind for a full width Search block?

I quickly looked into this and it appears like it would be fairly straightforward to implement assuming we could just adjust the block supports. However, it looks like a custom width option was chosen over wide/full width options in #24666. Perhaps @shaunandrews could share more context on this decision and reassess if we want to add this in now?

[richtabor]

Hey @brookewp - totally missed this. Here's how I'm doing it currently: https://richtabor.com/?s=gutenberg

However, it looks like a custom width option was chosen over wide/full width options...

Yea, I think the resizable width is nice. You still can't go wide/fullwidth without the group block surrounding it, but that's probably fine.

I could probably be convinced that we don't actually need alignments like we have (as it currently does the float stuff, like inline images) — perhaps adopting the flex layout option may be more suitable. What do you think? I can open a separate issue and close this if you agree.

[brookewp]

Hi @richtabor, thanks for the example!

perhaps adopting the flex layout option may be more suitable. What do you think?

Are you referring to flex layouts as defined here? The Search block is currently set to display: flex, so I might be misunderstanding the idea here. Do you have an example of what it might look like?

[richtabor]

The Search block currently uses float alignment, like the image block. The image block makes sense as it could search an inline block, but the Search is unlikely to.

Alignment settings:

Left aligned:

Maybe the justification/flex left/center/right controls make more sense here instead, to prevent alignment mishaps when someone attempts to align it left/right and it works like the Image block, vs the Buttons block:

[brookewp]

Thanks for clarifying! I agree, your suggested approach makes sense to me. 👍