Search Block: Custom-width search blocks are not fully right-aligned

[kjellr]

It appears that they have some sort of extra margin or spacing to the right of them:

(Screenshot taken with the emptytheme to eliminate any theme styles. I think there may be something weird going on with that center-aligned search field label as well).

This space is not present when the button is 100% wide:

To reproduce

1. Add a search block.
2. Set it to be 25%, 50%, or 75% width.
3. Set it to be right-aligned.

[ramonjd]

Hi there @kjellr ! Did you add anything specific to the theme.json or elsewhere to test this in empty theme?

The toolbar controls for left/center/right align aren't showing by default in a clean dev env. High probability it's just me :)

[kjellr]

Running a fresh site with Gutenberg 10.5.4, and the latest emptytheme, the controls show up in the post/page editor, but not in the site editor. Running TT1 Blocks, it's the opposite 😅. I'm not sure if there's a bug in there somewhere?

For the issue here — I was running emptytheme and using the post/page editor.

[ramonjd]

Thanks for the quick reply!

@aaronrobertshaw set me straight by pointing me to this PR (Add a layout config to the group and theme.json and make alignments declarative), and the align.js hook, which filters valid alignment values.

So, for the empty theme, I just needed to enclose the search block in a group block for the alignment controls to appear. ✨