Refactor "Settings" panel of Table block to use ToolsPanel instead of…

… PanelBody (WordPress#67896) Co-authored-by: Sukhendu2002 <[email protected]> Co-authored-by: fabiankaegy <[email protected]>
prasadkarmalkar · Dec 12, 2024 · 8d6b8c5 · 8d6b8c5
1 parent cff73d4
commit 8d6b8c5
Showing 1 changed file with 54 additions and 20 deletions.
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -20,12 +20,13 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
-	PanelBody,
 	Placeholder,
 	TextControl,
 	ToggleControl,
 	ToolbarDropdownMenu,
 	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	alignLeft,
@@ -473,33 +474,66 @@ function TableEdit( {
 				</>
 			) }
 			<InspectorControls>
-				<PanelBody
-					title={ __( 'Settings' ) }
-					className="blocks-table-settings"
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							hasFixedLayout: true,
+							head: [],
+							foot: [],
+						} );
+					} }
 				>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
+						hasValue={ () => hasFixedLayout !== true }
 						label={ __( 'Fixed width table cells' ) }
-						checked={ !! hasFixedLayout }
-						onChange={ onChangeFixedLayout }
-					/>
+						onDeselect={ () =>
+							setAttributes( { hasFixedLayout: true } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Fixed width table cells' ) }
+							checked={ !! hasFixedLayout }
+							onChange={ onChangeFixedLayout }
+						/>
+					</ToolsPanelItem>
 					{ ! isEmpty && (
 						<>
-							<ToggleControl
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
+								hasValue={ () => head && head.length }
 								label={ __( 'Header section' ) }
-								checked={ !! ( head && head.length ) }
-								onChange={ onToggleHeaderSection }
-							/>
-							<ToggleControl
-								__nextHasNoMarginBottom
+								onDeselect={ () =>
+									setAttributes( { head: [] } )
+								}
+								isShownByDefault
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Header section' ) }
+									checked={ !! ( head && head.length ) }
+									onChange={ onToggleHeaderSection }
+								/>
+							</ToolsPanelItem>
+							<ToolsPanelItem
+								hasValue={ () => foot && foot.length }
 								label={ __( 'Footer section' ) }
-								checked={ !! ( foot && foot.length ) }
-								onChange={ onToggleFooterSection }
-							/>
+								onDeselect={ () =>
+									setAttributes( { foot: [] } )
+								}
+								isShownByDefault
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Footer section' ) }
+									checked={ !! ( foot && foot.length ) }
+									onChange={ onToggleFooterSection }
+								/>
+							</ToolsPanelItem>
 						</>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ ! isEmpty && (
 				<table