Search Block: Add icon only option with expandable search field

packages/block-library/src/search/block.json

@@ -21,10 +21,12 @@
 			"__experimentalRole": "content"
 		},
 		"width": {
-			"type": "number"
+			"type": "number",
+			"default": 100
 		},
 		"widthUnit": {
-			"type": "string"
+			"type": "string",
+			"default": "%"
 		},
 		"buttonText": {
 			"type": "string",
@@ -37,6 +39,14 @@
 		"buttonUseIcon": {
 			"type": "boolean",
 			"default": false
+		},
+		"buttonBehavior": {
+			"type": "string",
+			"default": "expand-searchfield"
+		},
+		"isSearchFieldHidden": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {

packages/block-library/src/search/edit.js

@@ -29,6 +29,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { search } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { useRef, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -51,6 +52,7 @@ import {
 // Used to calculate border radius adjustment to avoid "fat" corners when
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = 4;
+const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield';
 
 export default function SearchEdit( {
 	className,
@@ -69,18 +71,40 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
+		buttonBehavior,
+		isSearchFieldHidden,
 		style,
 	} = attributes;
 
 	const borderRadius = style?.border?.radius;
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
+	const searchFieldRef = useRef();
+	const buttonRef = useRef();
 
 	const units = useCustomUnits( {
 		availableUnits: [ '%', 'px' ],
 		defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },
 	} );
 
+	useEffect( () => {
+		if ( 'button-only' === buttonPosition && ! isSelected ) {
+			setAttributes( {
+				isSearchFieldHidden: true,
+			} );
+		}
+	}, [ isSelected ] );
+
+	useEffect( () => {
+		if ( 'button-only' !== buttonPosition || ! isSelected ) {
+			return;
+		}
+
+		setAttributes( {
+			isSearchFieldHidden: false,
+		} );
+	}, [ width ] );
+
 	const getBlockClassNames = () => {
 		return classnames(
 			className,
@@ -96,6 +120,13 @@ export default function SearchEdit( {
 			'button-only' === buttonPosition
 				? 'wp-block-search__button-only'
 				: undefined,
+			'button-only' === buttonPosition &&
+				BUTTON_BEHAVIOR_EXPAND === buttonBehavior
+				? 'wp-block-search__button-behavior-expand'
+				: undefined,
+			'button-only' === buttonPosition && isSearchFieldHidden
+				? 'wp-block-search__searchfield-hidden'
+				: undefined,
 			! buttonUseIcon && 'no-button' !== buttonPosition
 				? 'wp-block-search__text-button'
 				: undefined,
@@ -119,7 +150,10 @@ export default function SearchEdit( {
 	};
 
 	const getResizableSides = () => {
-		if ( 'button-only' === buttonPosition ) {
+		if (
+			'button-only' === buttonPosition &&
+			( 'search-page-link' === buttonBehavior || isSearchFieldHidden )
+		) {
 			return {};
 		}
 
@@ -145,6 +179,7 @@ export default function SearchEdit( {
 				onChange={ ( event ) =>
 					setAttributes( { placeholder: event.target.value } )
 				}
+				ref={ searchFieldRef }
 			/>
 		);
 	};
@@ -157,6 +192,17 @@ export default function SearchEdit( {
 						icon={ search }
 						className="wp-block-search__button"
 						style={ { borderRadius } }
+						onClick={ () => {
+							if (
+								'button-only' === buttonPosition &&
+								BUTTON_BEHAVIOR_EXPAND === buttonBehavior
+							) {
+								setAttributes( {
+									isSearchFieldHidden: ! isSearchFieldHidden,
+								} );
+							}
+						} }
+						ref={ buttonRef }
 					/>
 				) }
 
@@ -171,6 +217,17 @@ export default function SearchEdit( {
 						onChange={ ( html ) =>
 							setAttributes( { buttonText: html } )
 						}
+						onClick={ () => {
+							if (
+								'button-only' === buttonPosition &&
+								BUTTON_BEHAVIOR_EXPAND === buttonBehavior
+							) {
+								setAttributes( {
+									isSearchFieldHidden: ! isSearchFieldHidden,
+								} );
+							}
+						} }
+						ref={ buttonRef }
 					/>
 				) }
 			</>
@@ -202,6 +259,7 @@ export default function SearchEdit( {
 									onClick={ () => {
 										setAttributes( {
 											buttonPosition: 'no-button',
+											isSearchFieldHidden: false,
 										} );
 										onClose();
 									} }
@@ -213,6 +271,7 @@ export default function SearchEdit( {
 									onClick={ () => {
 										setAttributes( {
 											buttonPosition: 'button-outside',
+											isSearchFieldHidden: false,
 										} );
 										onClose();
 									} }
@@ -224,12 +283,26 @@ export default function SearchEdit( {
 									onClick={ () => {
 										setAttributes( {
 											buttonPosition: 'button-inside',
+											isSearchFieldHidden: false,
 										} );
 										onClose();
 									} }
 								>
 									{ __( 'Button Inside' ) }
 								</MenuItem>
+								<MenuItem
+									icon={ buttonOnly }
+									onClick={ () => {
+										setAttributes( {
+											buttonPosition: 'button-only',
+											isSearchFieldHidden: true,
+										} );
+
+										onClose();
+									} }
+								>
+									{ __( 'Button Only' ) }
+								</MenuItem>
 							</MenuGroup>
 						) }
 					</DropdownMenu>
@@ -241,6 +314,7 @@ export default function SearchEdit( {
 							onClick={ () => {
 								setAttributes( {
 									buttonUseIcon: ! buttonUseIcon,
+									isSearchFieldHidden: true,
 								} );
 							} }
 							className={
@@ -375,14 +449,18 @@ export default function SearchEdit( {
 				showHandle={ isSelected }
 			>
 				{ ( 'button-inside' === buttonPosition ||
-					'button-outside' === buttonPosition ) && (
+					'button-outside' === buttonPosition ||
+					( 'button-only' === buttonPosition &&
+						BUTTON_BEHAVIOR_EXPAND === buttonBehavior ) ) && (
 					<>
 						{ renderTextField() }
 						{ renderButton() }
 					</>
 				) }
 
-				{ 'button-only' === buttonPosition && renderButton() }
+				{ 'button-only' === buttonPosition &&
+					BUTTON_BEHAVIOR_EXPAND !== buttonBehavior &&
+					renderButton() }
 				{ 'no-button' === buttonPosition && renderTextField() }
 			</ResizableBox>
 		</div>

packages/block-library/src/search/editor.scss

@@ -22,7 +22,6 @@
 		// This needs high specificity because it otherwise inherits styles from `components-button`.
 		// stylelint-disable-line no-duplicate-selectors
 		&.wp-block-search__button.wp-block-search__button {
-			padding: 6px 10px;
 			display: flex;
 			align-items: center;
 		}
@@ -31,4 +30,10 @@
 	&__components-button-group {
 		margin-top: 10px;
 	}
+
+	&.wp-block-search__button-behavior-expand {
+		.wp-block-search__input {
+			transition-duration: 300ms;
+		}
+	}
 }

packages/block-library/src/search/frontend.js

@@ -0,0 +1,63 @@
+// eslint-disable-next-line @wordpress/no-global-event-listener
+document.addEventListener( 'DOMContentLoaded', () => {
+	const transitionDuration = 300;
+
+	Array.from(
+		document.getElementsByClassName(
+			'wp-block-search__button-behavior-expand'
+		)
+	).forEach( ( block ) => {
+		const hiddenClass = 'wp-block-search__searchfield-hidden';
+		const wrapperClass = '.wp-block-search__inside-wrapper';
+		const buttonClass = '.wp-block-search__button';
+
+		const wrapper = block.querySelector( wrapperClass );
+		const searchField = block.querySelector( '.wp-block-search__input' );
+		const button = block.querySelector( buttonClass );
+
+		// Hide search on init.
+		block.classList.add( hiddenClass );
+		setTimeout(
+			() =>
+				( searchField.style.transitionDuration = `${ transitionDuration }ms` ),
+			transitionDuration
+		);
+
+		const toggleSearchField = ( e ) => {
+			if ( e.target !== button && ! e.target.closest( buttonClass ) ) {
+				return false;
+			}
+
+			e.preventDefault();
+
+			return block.classList.contains( hiddenClass )
+				? doShowSearchField()
+				: doHideSearchField();
+		};
+
+		const doShowSearchField = () => {
+			block.classList.remove( hiddenClass );
+			searchField.focus();
+
+			wrapper.removeEventListener( 'click', toggleSearchField );
+			document.body.addEventListener( 'click', doSearch );
+		};
+
+		const doHideSearchField = () => {
+			block.classList.add( hiddenClass );
+		};
+
+		const doSearch = ( e ) => {
+			if ( e.target.closest( wrapperClass ) ) {
+				return false;
+			}
+
+			doHideSearchField();
+
+			document.body.removeEventListener( 'click', doSearch );
+			wrapper.addEventListener( 'click', toggleSearchField );
+		};
+
+		wrapper.addEventListener( 'click', toggleSearchField );
+	} );
+} );

packages/block-library/src/search/index.php

@@ -31,7 +31,6 @@ function render_block_core_search( $attributes ) {
 	$classnames      = classnames_for_block_core_search( $attributes );
 	$show_label      = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
 	$use_icon_button = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
-	$show_input      = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
 	$show_button     = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
 	$label_markup    = '';
 	$input_markup    = '';
@@ -54,15 +53,13 @@ function render_block_core_search( $attributes ) {
 		}
 	}
 
-	if ( $show_input ) {
-		$input_markup = sprintf(
-			'<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" %s required />',
-			$input_id,
-			esc_attr( get_search_query() ),
-			esc_attr( $attributes['placeholder'] ),
-			$inline_styles['shared']
-		);
-	}
+	$input_markup = sprintf(
+		'<input type="search" id="%s" class="wp-block-search__input" name="s" value="%s" placeholder="%s" %s required />',
+		$input_id,
+		esc_attr( get_search_query() ),
+		esc_attr( $attributes['placeholder'] ),
+		$inline_styles['shared']
+	);
 
 	if ( $show_button ) {
 		$button_internal_markup = '';
@@ -95,6 +92,12 @@ function render_block_core_search( $attributes ) {
 	);
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
 
+	if ( ! empty( $attributes['buttonPosition'] ) && ! empty( $attributes['buttonBehavior'] ) ) {
+		if ( 'button-only' === $attributes['buttonPosition'] && 'expand-searchfield' === $attributes['buttonBehavior'] ) {
+			wp_enqueue_script( 'wp-block-library-search', plugins_url( 'search/frontend.js', __FILE__ ) );
+		}
+	}
+
 	return sprintf(
 		'<form role="search" method="get" action="%s" %s>%s</form>',
 		esc_url( home_url( '/' ) ),
@@ -141,6 +144,16 @@ function classnames_for_block_core_search( $attributes ) {
 
 		if ( 'button-only' === $attributes['buttonPosition'] ) {
 			$classnames[] = 'wp-block-search__button-only';
+
+			if ( ! empty( $attributes['buttonBehavior'] ) ) {
+				if ( 'expand-searchfield' === $attributes['buttonBehavior'] ) {
+					$classnames[] = 'wp-block-search__button-behavior-expand';
+				}
+
+				if ( 'search-page-link' === $attributes['buttonBehavior'] ) {
+					$classnames[] = 'wp-block-search__button-behavior-link';
+				}
+			}
 		}
 	}
 
@@ -176,7 +189,7 @@ function styles_for_block_core_search( $attributes ) {
 	$has_width   = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
 	$button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'];
 
-	if ( $has_width && ! $button_only ) {
+	if ( $has_width ) {
 		$wrapper_styles[] = sprintf(
 			'width: %d%s;',
 			esc_attr( $attributes['width'] ),