Latest Comments: Refactor settings panel to use ToolsPanel (#67951)

* Latest Comments: Refactor settings panel to use ToolsPanel * Latest Comments: Simplify the structure and increase readability * Latest Comments: Add dropdownMenuProps for consistency Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
WordPress · Jan 18, 2025 · dce84c2 · dce84c2 · github-actions · Jan 18, 2025
1 parent 5661b57
commit dce84c2
Showing 1 changed file with 93 additions and 33 deletions.
diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js
@@ -4,13 +4,19 @@
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	Disabled,
-	PanelBody,
 	RangeControl,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import ServerSideRender from '@wordpress/server-side-render';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 /**
  * Minimum number of comments a user can show using this block.
  *
@@ -36,49 +42,103 @@ export default function LatestComments( { attributes, setAttributes } ) {
 		},
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							commentsToShow: 5,
+							displayAvatar: true,
+							displayDate: true,
+							displayExcerpt: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => ! displayAvatar }
 						label={ __( 'Display avatar' ) }
-						checked={ displayAvatar }
-						onChange={ () =>
-							setAttributes( { displayAvatar: ! displayAvatar } )
+						onDeselect={ () =>
+							setAttributes( { displayAvatar: true } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display avatar' ) }
+							checked={ displayAvatar }
+							onChange={ () =>
+								setAttributes( {
+									displayAvatar: ! displayAvatar,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => ! displayDate }
 						label={ __( 'Display date' ) }
-						checked={ displayDate }
-						onChange={ () =>
-							setAttributes( { displayDate: ! displayDate } )
+						onDeselect={ () =>
+							setAttributes( { displayDate: true } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display date' ) }
+							checked={ displayDate }
+							onChange={ () =>
+								setAttributes( { displayDate: ! displayDate } )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => ! displayExcerpt }
 						label={ __( 'Display excerpt' ) }
-						checked={ displayExcerpt }
-						onChange={ () =>
-							setAttributes( {
-								displayExcerpt: ! displayExcerpt,
-							} )
+						onDeselect={ () =>
+							setAttributes( { displayExcerpt: true } )
 						}
-					/>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display excerpt' ) }
+							checked={ displayExcerpt }
+							onChange={ () =>
+								setAttributes( {
+									displayExcerpt: ! displayExcerpt,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => commentsToShow !== 5 }
 						label={ __( 'Number of comments' ) }
-						value={ commentsToShow }
-						onChange={ ( value ) =>
-							setAttributes( { commentsToShow: value } )
+						onDeselect={ () =>
+							setAttributes( { commentsToShow: 5 } )
 						}
-						min={ MIN_COMMENTS }
-						max={ MAX_COMMENTS }
-						required
-					/>
-				</PanelBody>
+						isShownByDefault
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Number of comments' ) }
+							value={ commentsToShow }
+							onChange={ ( value ) =>
+								setAttributes( { commentsToShow: value } )
+							}
+							min={ MIN_COMMENTS }
+							max={ MAX_COMMENTS }
+							required
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<Disabled>
 				<ServerSideRender