Refactor "Settings" panel of Page List block to use ToolsPanel instea…

…d of PanelBody (WordPress#67903) Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
yogeshbhutkar · Dec 18, 2024 · 1db6558 · 1db6558
1 parent 63cf372
commit 1db6558
Showing 1 changed file with 54 additions and 31 deletions.
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
@@ -17,12 +17,13 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	ToolbarButton,
 	Spinner,
 	Notice,
 	ComboboxControl,
 	Button,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, useState, useEffect, useCallback } from '@wordpress/element';
@@ -320,38 +321,60 @@ export default function PageListEdit( {
 	return (
 		<>
 			<InspectorControls>
-				{ pagesTree.length > 0 && (
-					<PanelBody>
-						<ComboboxControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							className="editor-page-attributes__parent"
-							label={ __( 'Parent' ) }
-							value={ parentPageID }
-							options={ pagesTree }
-							onChange={ ( value ) =>
-								setAttributes( { parentPageID: value ?? 0 } )
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( { parentPageID: 0 } );
+					} }
+				>
+					{ pagesTree.length > 0 && (
+						<ToolsPanelItem
+							label={ __( 'Parent Page' ) }
+							hasValue={ () => parentPageID !== 0 }
+							onDeselect={ () =>
+								setAttributes( { parentPageID: 0 } )
 							}
-							help={ __(
-								'Choose a page to show only its subpages.'
-							) }
-						/>
-					</PanelBody>
-				) }
-				{ allowConvertToLinks && (
-					<PanelBody title={ __( 'Edit this menu' ) }>
-						<p>{ convertDescription }</p>
-						<Button
-							__next40pxDefaultSize
-							variant="primary"
-							accessibleWhenDisabled
-							disabled={ ! hasResolvedPages }
-							onClick={ convertToNavigationLinks }
+							isShownByDefault
 						>
-							{ __( 'Edit' ) }
-						</Button>
-					</PanelBody>
-				) }
+							<ComboboxControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								className="editor-page-attributes__parent"
+								label={ __( 'Parent' ) }
+								value={ parentPageID }
+								options={ pagesTree }
+								onChange={ ( value ) =>
+									setAttributes( {
+										parentPageID: value ?? 0,
+									} )
+								}
+								help={ __(
+									'Choose a page to show only its subpages.'
+								) }
+							/>
+						</ToolsPanelItem>
+					) }
+
+					{ allowConvertToLinks && (
+						<ToolsPanelItem
+							label={ __( 'Edit Menu' ) }
+							isShownByDefault
+						>
+							<div>
+								<p>{ convertDescription }</p>
+								<Button
+									__next40pxDefaultSize
+									variant="primary"
+									accessibleWhenDisabled
+									disabled={ ! hasResolvedPages }
+									onClick={ convertToNavigationLinks }
+								>
+									{ __( 'Edit' ) }
+								</Button>
+							</div>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
 			</InspectorControls>
 			{ allowConvertToLinks && (
 				<>