Search Block: Add button, label, and width options

[apeatling]

Fixes #22071 (partially)
Closes #24643

Description

Update the search block to support:

• Hiding the search label.
• Switching between a button with text, or an icon.
• Changing the position of the button (outside, inside, button only, no button)
• Resizing the width of the search field.

How has this been tested?

Tested locally, all e2e tests passed.

Screenshots

Types of changes

New feature. I have tested upgrading from the previous version of the block, and all settings and visuals remain consistent.

Testing Instructions

• Insert a search block into a post or page
• Adjust the settings for the block using the block toolbar
• Confirm these settings are saved, and the search block is rendered correctly on the front end.
• Try adding a search block using master, and then switch to this branch and confirm the block still works and looks correct.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: +1.81 kB (0%)

Total Size: 1.17 MB

Filename	Size	Change
build/block-library/editor-rtl.css	8.64 kB	+65 B (0%)
build/block-library/editor.css	8.64 kB	+66 B (0%)
build/block-library/index.js	138 kB	+1.42 kB (1%)
build/block-library/style-rtl.css	7.6 kB	+130 B (1%)
build/block-library/style.css	7.6 kB	+127 B (1%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.67 kB	0 B
build/api-fetch/index.js	3.41 kB	0 B
build/autop/index.js	2.82 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	7.99 kB	0 B
build/block-directory/style-rtl.css	953 B	0 B
build/block-directory/style.css	952 B	0 B
build/block-editor/index.js	128 kB	0 B
build/block-editor/style-rtl.css	11.1 kB	0 B
build/block-editor/style.css	11.1 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	742 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.7 kB	0 B
build/components/index.js	200 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	9.67 kB	0 B
build/core-data/index.js	12.3 kB	0 B
build/data-controls/index.js	1.29 kB	0 B
build/data/index.js	8.55 kB	0 B
build/date/index.js	5.38 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.48 kB	0 B
build/edit-navigation/index.js	11.7 kB	0 B
build/edit-navigation/style-rtl.css	1.16 kB	0 B
build/edit-navigation/style.css	1.16 kB	0 B
build/edit-post/index.js	305 kB	0 B
build/edit-post/style-rtl.css	6.26 kB	0 B
build/edit-post/style.css	6.25 kB	0 B
build/edit-site/index.js	17.1 kB	0 B
build/edit-site/style-rtl.css	3.06 kB	0 B
build/edit-site/style.css	3.06 kB	0 B
build/edit-widgets/index.js	12 kB	0 B
build/edit-widgets/style-rtl.css	2.46 kB	0 B
build/edit-widgets/style.css	2.45 kB	0 B
build/editor/editor-styles-rtl.css	492 B	0 B
build/editor/editor-styles.css	493 B	0 B
build/editor/index.js	45.6 kB	0 B
build/editor/style-rtl.css	3.81 kB	0 B
build/editor/style.css	3.81 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.71 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.57 kB	0 B
build/is-shallow-equal/index.js	710 B	0 B
build/keyboard-shortcuts/index.js	2.52 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.32 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.41 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13.9 kB	0 B
build/server-side-render/index.js	2.77 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.85 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[shaunandrews]

There's a lot of options, but it actually feels pretty easy to use.

I took a stab at some new icons (you can find them in Figma), opting to use less of the rounded rects:

I wonder about the width and alignment options. I think maybe we could remove the Wide and Full options. I'd be nice to support a custom width similar to the Spacer block's height.

[apeatling]

@shaunandrews Icons now updated, and I've added support for resizing the width.

Latest:

[apeatling]

Marking this one as ready for review since all the editor and front end rendering is now working for button, label, and width options. I think separating color, border, and spacing settings into a separate PR makes sense?

[shaunandrews]

• I added the Search block to a Navigation block and found that while I can reduces the width with the drag handle, I'm unable to increase the width.
• When I deselect the block, the drag handle (the dot thing) remains visible. In fact, I can't seem to find a way to get rid of it without a page refresh.
• I think there will need to be a minimum width, or it might be interesting to have it automatically switch to button-only when the width doesn't allow any other options.
• I know you've mostly been focused on the editor functionality, but I expected the button to look like a Buttons block — even though I know it doesn't really act like a separate block.

[apeatling]

@shaunandrews The first three items should be fixed now. The minimum width is set at 220px.

For the button to inherit the styles of the theme, I'd need to include the class wp-block-button__link on the button. This isn't actually a button block, but it is a button, so I wonder if this is still okay?

[mtias]

I think the separators should be removed in the toolbar since these are all similar block level operations

[mtias]

The width control could probably also offer the percentages segmented control we use in images etc?

[aristath]

This is great!
The only thing that sort of bugs me is the fact that width is defined as a number, and forces the use of pixels... It would be preferable if users were able to pick the units they want - or even better be allowed to enter complex values in a plain text field so they can enter values like calc(100% - 10em). Otherwise, this is a great improvement!

[mtias]

The unit input component should already allow to change to any unit (em, rem, vw, %) though it doesn't support more complex calculations. Once theme.json is properly deployed, it should also allow declaring preferred default units for themes and such, so that things default to the right context.

[apeatling]

@mtias The image block converts the percentage into a pixel value when selected. I would expect if I selected a percentage value for this block that it would be an actual percentage for width. In this case it probably makes sense to remove the pixel width value when a percentage is selected, or remove a percentage selection when the width is manually adjusted. Thoughts?

[apeatling]

Or I suppose it could also change the unit input component to percentage.

[shaunandrews]

I suppose it could also change the unit input component to percentage.

That was my first thought:

[mtias]

Yes :)

[apeatling]

@shaunandrews What would the reset button do on your graphic above?

[apeatling]

Rebased to fix merge conflicts. 👍

[ZebulanStanphill]

Pinging @afercia to check out and make sure all the variations here make sense, accessibility-wise.

[afercia]

Thanks for the ping.

I don't think WordPress should ever allow users to remove everything and produce an input field like the following one:

which has no visual label, no button, no placeholder text, nothing that can visually identify this input like a search input.

Instead, WordPress should make sure the content it produces is semantic and accessible. Giving so much power to users opens the door to potential abuse and I'm not sure this is okay.

More importantly, when removing the label I would expect the <label> element on the front end to be visually hidden (as it was the case before this change). Instead, it's now completely removed from the HTML. This is a serious regression and it's not acceptable because it produces an unlabelled element which will be announced by assistive technology only as "edit text". Form elements must always be labelled.

I'll propose the accessibility team to discuss this change in the next weekly meeting. For now, I'd like to point out that I'm a bit disappointed this PR and the related issues weren't marked with the Accessibility label nor anyone pinged the accessibility team for some quick feedback. When changing important parts of the UI and especially anything related fo form controls an accessibility audit should be required. Not sure this is the best way to improve collaboration between teams.

[scruffian]

What is the expected behaviour when in "button only" mode?

[bph]

@scruffian Good point - Chandrika and I wondered the same thing, when working on the User documentation for it. Added new issue #27329

[apeatling]

The idea was to follow up with a full screen or slide out search option using the button only mode, but this hasn't been done yet. For scenarios like including a search icon in a navigation block.

[bph]

@apeatling it felt like an artifact of a future idea. Maybe you can remove it for 5.6 and finish it after wards?