Search: Hide label when inserted in Navigation block

WordPress · Oct 28, 2021 · 8e05f25 · 8e05f25
1 parent 0054ce9
commit 8e05f25
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
@@ -39,6 +39,7 @@
 			"default": false
 		}
 	},
+	"usesContext": [ "showSubmenuIcon" ],
 	"supports": {
 		"align": [ "left", "center", "right" ],
 		"color": {

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -14,6 +14,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseColorProps as useColorProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	ToolbarDropdownMenu,
@@ -27,6 +28,8 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { Icon, search } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -54,6 +57,7 @@ const DEFAULT_INNER_PADDING = '4px';
 
 export default function SearchEdit( {
 	className,
+	context,
 	attributes,
 	setAttributes,
 	toggleSelection,
@@ -76,6 +80,21 @@ export default function SearchEdit( {
 	const borderColor = style?.border?.color;
 	const borderProps = useBorderProps( attributes );
 
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+
+	// Check if Navigation contains the block.
+	const isNavigationChild = 'showSubmenuIcon' in context;
+
+	useEffect( () => {
+		if ( isNavigationChild && showLabel ) {
+			// This side-effect should not create an undo level.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { showLabel: false } );
+		}
+	}, [ isNavigationChild, showLabel ] );
+
 	// Check for old deprecated numerical border radius. Done as a separate
 	// check so that a borderRadius style won't overwrite the longhand
 	// per-corner styles.
@@ -254,16 +273,18 @@ export default function SearchEdit( {
 		<>
 			<BlockControls>
 				<ToolbarGroup>
-					<ToolbarButton
-						title={ __( 'Toggle search label' ) }
-						icon={ toggleLabel }
-						onClick={ () => {
-							setAttributes( {
-								showLabel: ! showLabel,
-							} );
-						} }
-						className={ showLabel ? 'is-pressed' : undefined }
-					/>
+					{ ! isNavigationChild && (
+						<ToolbarButton
+							title={ __( 'Toggle search label' ) }
+							icon={ toggleLabel }
+							onClick={ () => {
+								setAttributes( {
+									showLabel: ! showLabel,
+								} );
+							} }
+							className={ showLabel ? 'is-pressed' : undefined }
+						/>
+					) }
 					<ToolbarDropdownMenu
 						icon={ getButtonPositionIcon() }
 						label={ __( 'Change button position' ) }