Refactor "Settings" panel of Navigation Item block to use ToolsPanel …

…instead of PanelBody (WordPress#67973) Co-authored-by: rinkalpagdar <[email protected]> Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: Mamaduka <[email protected]>
MaxMood96 · Dec 19, 2024 · afca7b5 · afca7b5
1 parent 505bbc8
commit afca7b5
Showing 1 changed file with 101 additions and 61 deletions.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -9,7 +9,8 @@ import clsx from 'clsx';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
@@ -161,71 +162,110 @@ function getMissingText( type ) {
 function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 	const { label, url, description, title, rel } = attributes;
 	return (
-		<PanelBody title={ __( 'Settings' ) }>
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				value={ label ? stripHTML( label ) : '' }
-				onChange={ ( labelValue ) => {
-					setAttributes( { label: labelValue } );
-				} }
+		<ToolsPanel label={ __( 'Settings' ) }>
+			<ToolsPanelItem
+				hasValue={ () => !! label }
 				label={ __( 'Text' ) }
-				autoComplete="off"
-				onFocus={ () => setIsLabelFieldFocused( true ) }
-				onBlur={ () => setIsLabelFieldFocused( false ) }
-			/>
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				value={ url ? safeDecodeURI( url ) : '' }
-				onChange={ ( urlValue ) => {
-					updateAttributes(
-						{ url: urlValue },
-						setAttributes,
-						attributes
-					);
-				} }
+				onDeselect={ () => setAttributes( { label: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Text' ) }
+					value={ label ? stripHTML( label ) : '' }
+					onChange={ ( labelValue ) => {
+						setAttributes( { label: labelValue } );
+					} }
+					autoComplete="off"
+					onFocus={ () => setIsLabelFieldFocused( true ) }
+					onBlur={ () => setIsLabelFieldFocused( false ) }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! url }
 				label={ __( 'Link' ) }
-				autoComplete="off"
-			/>
-			<TextareaControl
-				__nextHasNoMarginBottom
-				value={ description || '' }
-				onChange={ ( descriptionValue ) => {
-					setAttributes( { description: descriptionValue } );
-				} }
+				onDeselect={ () => setAttributes( { url: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Link' ) }
+					value={ url ? safeDecodeURI( url ) : '' }
+					onChange={ ( urlValue ) => {
+						updateAttributes(
+							{ url: urlValue },
+							setAttributes,
+							attributes
+						);
+					} }
+					autoComplete="off"
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! description }
 				label={ __( 'Description' ) }
-				help={ __(
-					'The description will be displayed in the menu if the current theme supports it.'
-				) }
-			/>
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				value={ title || '' }
-				onChange={ ( titleValue ) => {
-					setAttributes( { title: titleValue } );
-				} }
+				onDeselect={ () => setAttributes( { description: '' } ) }
+				isShownByDefault
+			>
+				<TextareaControl
+					__nextHasNoMarginBottom
+					label={ __( 'Description' ) }
+					value={ description || '' }
+					onChange={ ( descriptionValue ) => {
+						setAttributes( { description: descriptionValue } );
+					} }
+					help={ __(
+						'The description will be displayed in the menu if the current theme supports it.'
+					) }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! title }
 				label={ __( 'Title attribute' ) }
-				autoComplete="off"
-				help={ __(
-					'Additional information to help clarify the purpose of the link.'
-				) }
-			/>
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				value={ rel || '' }
-				onChange={ ( relValue ) => {
-					setAttributes( { rel: relValue } );
-				} }
+				onDeselect={ () => setAttributes( { title: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Title attribute' ) }
+					value={ title || '' }
+					onChange={ ( titleValue ) => {
+						setAttributes( { title: titleValue } );
+					} }
+					autoComplete="off"
+					help={ __(
+						'Additional information to help clarify the purpose of the link.'
+					) }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! rel }
 				label={ __( 'Rel attribute' ) }
-				autoComplete="off"
-				help={ __(
-					'The relationship of the linked URL as space-separated link types.'
-				) }
-			/>
-		</PanelBody>
+				onDeselect={ () => setAttributes( { rel: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Rel attribute' ) }
+					value={ rel || '' }
+					onChange={ ( relValue ) => {
+						setAttributes( { rel: relValue } );
+					} }
+					autoComplete="off"
+					help={ __(
+						'The relationship of the linked URL as space-separated link types.'
+					) }
+				/>
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 }