Search block: Add space between attributes when using "Button only" option

[sabernhardt]

What?

Attributes in the expandable Search block start tag need to be separated.

Why?

Without spaces, the HTML does not pass validation.

How?

In addition to spaces, this includes line breaks around $form_context so the attributes are indented the same.

Screenshots or screencast

Invalid output in WordPress 6.5 (no plugins):

<div class="wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-3 wp-block-group-is-layout-flex"><form role="search" method="get" action="http://localhost/wp65/" class="wp-block-search__button-only wp-block-search__searchfield-hidden wp-block-search__text-button wp-block-search" 
		 data-wp-interactive="core/search"data-wp-context='{"isSearchInputVisible":false,"inputId":"wp-block-search__input-1","ariaLabelExpanded":"Submit Search","ariaLabelCollapsed":"Expand search field"}'data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
		 data-wp-on--keydown="actions.handleSearchKeydown"
		 data-wp-on--focusout="actions.handleSearchFocusout"
		>

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sabernhardt <[email protected]>
Co-authored-by: carolinan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[sabernhardt]

Related: #58943

[carolinan]

Hi
Can you include testing instructions for this PR? The code change looks valid to me, but I could not figure out where this markup is used.
I added the search block to a post, but it does not have these data attributes.

[sabernhardt]

Thanks for adding the labels.

Steps:

1. Open the editor (either site or post).
2. Add a Search block.
3. Choose the "Button only" option from the block toolbar.
4. Save changes.
5. View the post or site template on the front end, and view source (not inspect element) to find the missing spaces.
6. Apply the PR changes.
7. Refresh the page and view source to verify that data-wp- attributes have space between them.
8. Verify that the Search block still functions the same way (expanding the input and submitting search query).

[sabernhardt]

refreshed after #62160

[carolinan]

Hi, I followed the test instructions but I am not able to reproduce the missing space in the markup, using Gutenberg trunk.

[sabernhardt]

I don't have trunk, but it still happens for me in Gutenberg 18.6.1 and the trunk file has not changed since then.

To reduce confusion in the instructions, I emphasized "view source" because the similar "inspect element" browser tool would add the spaces.

[sabernhardt]

The data-wp-context attribute does not have space before and after it with WordPress 6.7 beta and Gutenberg 19.4.0.

I tried setting the block to "Button only" in Twenty Twenty-Five's search template, and this is the markup with an empty search query:

<form role="search" method="get" action="http://localhost/wp67/" class="wp-block-search__button-only wp-block-search__searchfield-hidden wp-block-search__text-button wp-block-search" 
		 data-wp-interactive="core/search"data-wp-context='{"isSearchInputVisible":false,"inputId":"wp-block-search__input-2","ariaLabelExpanded":"Submit Search","ariaLabelCollapsed":"Expand search field"}'data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
		 data-wp-on-async--keydown="actions.handleSearchKeydown"
		 data-wp-on-async--focusout="actions.handleSearchFocusout"
		><label class="wp-block-search__label screen-reader-text" for="wp-block-search__input-2" >Search</label><div class="wp-block-search__inside-wrapper " ><input aria-hidden="true" class="wp-block-search__input" data-wp-bind--aria-hidden="!context.isSearchInputVisible" data-wp-bind--tabindex="state.tabindex" id="wp-block-search__input-2" placeholder="Type here..."  value="" type="search" name="s" required /><button  aria-expanded="false"  class="wp-block-search__button wp-element-button" data-wp-bind--aria-controls="state.ariaControls" data-wp-bind--aria-expanded="context.isSearchInputVisible" data-wp-bind--aria-label="state.ariaLabel" data-wp-bind--type="state.type" data-wp-on--click="actions.openSearchInput"  >Search</button></div></form>

Firefox can show warnings about the lack of space when viewing the page source. For the screenshot below, I switched to the Light theme and turned off Syntax Highlighting, but I highlighted the data-wp-context attribute and hovered the cursor over it.

[carolinan]

I am not able to re-run the tests. 🤔
I think you may need to update the PR with the latest changes from trunk.