Title Block: Refactor settings panel to use ToolsPanel

WordPress · Jan 8, 2025 · 8fe68b1 · 8fe68b1
1 parent ad4da87
commit 8fe68b1
Showing 1 changed file with 76 additions and 24 deletions.
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
@@ -15,12 +15,22 @@ import {
 	HeadingLevelDropdown,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
+import {
+	ToggleControl,
+	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function PostTitleEdit( {
 	attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget },
 	setAttributes,
@@ -66,6 +76,7 @@ export default function PostTitleEdit( {
 		} ),
 	} );
 	const blockEditingMode = useBlockEditingMode();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	let titleElement = <TagName { ...blockProps }>{ __( 'Title' ) }</TagName>;
 
@@ -138,41 +149,82 @@ export default function PostTitleEdit( {
 						/>
 					</BlockControls>
 					<InspectorControls>
-						<PanelBody title={ __( 'Settings' ) }>
-							<ToggleControl
-								__nextHasNoMarginBottom
+						<ToolsPanel
+							label={ __( 'Settings' ) }
+							resetAll={ () => {
+								setAttributes( {
+									isLink: false,
+									linkTarget: '_self',
+									rel: '',
+								} );
+							} }
+							dropdownMenuProps={ dropdownMenuProps }
+						>
+							<ToolsPanelItem
+								hasValue={ () => isLink }
 								label={ __( 'Make title a link' ) }
-								onChange={ () =>
-									setAttributes( { isLink: ! isLink } )
+								onDeselect={ () =>
+									setAttributes( { isLink: false } )
 								}
-								checked={ isLink }
-							/>
+								isShownByDefault
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Make title a link' ) }
+									onChange={ () =>
+										setAttributes( { isLink: ! isLink } )
+									}
+									checked={ isLink }
+								/>
+							</ToolsPanelItem>
 							{ isLink && (
 								<>
-									<ToggleControl
-										__nextHasNoMarginBottom
+									<ToolsPanelItem
+										hasValue={ () =>
+											linkTarget !== '_self'
+										}
 										label={ __( 'Open in new tab' ) }
-										onChange={ ( value ) =>
+										onDeselect={ () =>
 											setAttributes( {
-												linkTarget: value
-													? '_blank'
-													: '_self',
+												linkTarget: '_self',
 											} )
 										}
-										checked={ linkTarget === '_blank' }
-									/>
-									<TextControl
-										__next40pxDefaultSize
-										__nextHasNoMarginBottom
+										isShownByDefault
+									>
+										<ToggleControl
+											__nextHasNoMarginBottom
+											label={ __( 'Open in new tab' ) }
+											onChange={ ( value ) =>
+												setAttributes( {
+													linkTarget: value
+														? '_blank'
+														: '_self',
+												} )
+											}
+											checked={ linkTarget === '_blank' }
+										/>
+									</ToolsPanelItem>
+									<ToolsPanelItem
+										hasValue={ () => !! rel }
 										label={ __( 'Link rel' ) }
-										value={ rel }
-										onChange={ ( newRel ) =>
-											setAttributes( { rel: newRel } )
+										onDeselect={ () =>
+											setAttributes( { rel: '' } )
 										}
-									/>
+										isShownByDefault
+									>
+										<TextControl
+											__next40pxDefaultSize
+											__nextHasNoMarginBottom
+											label={ __( 'Link rel' ) }
+											value={ rel }
+											onChange={ ( newRel ) =>
+												setAttributes( { rel: newRel } )
+											}
+										/>
+									</ToolsPanelItem>
 								</>
 							) }
-						</PanelBody>
+						</ToolsPanel>
 					</InspectorControls>
 				</>
 			) }