Refactor "Settings" panel of Button block to use ToolsPanel instead o…

…f PanelBody (#67887) Co-authored-by: Mayank-Tripathi32 <[email protected]> Co-authored-by: fabiankaegy <[email protected]>
WordPress · Dec 12, 2024 · 51e124c · 51e124c
1 parent 4db3120
commit 51e124c
Showing 1 changed file with 35 additions and 21 deletions.
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -18,10 +18,11 @@ import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
 	Button,
 	ButtonGroup,
-	PanelBody,
 	TextControl,
 	ToolbarButton,
 	Popover,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	AlignmentControl,
@@ -123,26 +124,39 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 	}
 
 	return (
-		<PanelBody title={ __( 'Settings' ) }>
-			<ButtonGroup aria-label={ __( 'Button width' ) }>
-				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
-					return (
-						<Button
-							key={ widthValue }
-							size="small"
-							variant={
-								widthValue === selectedWidth
-									? 'primary'
-									: undefined
-							}
-							onClick={ () => handleChange( widthValue ) }
-						>
-							{ widthValue }%
-						</Button>
-					);
-				} ) }
-			</ButtonGroup>
-		</PanelBody>
+		<ToolsPanel
+			label={ __( 'Settings' ) }
+			resetAll={ () => {
+				handleChange( undefined );
+			} }
+		>
+			<ToolsPanelItem
+				label={ __( 'Button width' ) }
+				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! selectedWidth }
+				onDeselect={ () => handleChange( undefined ) }
+			>
+				<ButtonGroup aria-label={ __( 'Button width' ) }>
+					{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+						return (
+							<Button
+								key={ widthValue }
+								size="small"
+								variant={
+									widthValue === selectedWidth
+										? 'primary'
+										: undefined
+								}
+								onClick={ () => handleChange( widthValue ) }
+							>
+								{ widthValue }%
+							</Button>
+						);
+					} ) }
+				</ButtonGroup>
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 }