Block Editor: Fix the 'Reset all' bug for the 'ResolutionTool' component

WordPress · Dec 25, 2024 · 43a244e · 43a244e
1 parent 227fcd8
commit 43a244e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/resolution-tool/index.js b/packages/block-editor/src/components/resolution-tool/index.js
@@ -33,6 +33,7 @@ export default function ResolutionTool( {
 	options = DEFAULT_SIZE_OPTIONS,
 	defaultValue = DEFAULT_SIZE_OPTIONS[ 0 ].value,
 	isShownByDefault = true,
+	resetAllFilter,
 } ) {
 	const displayValue = value ?? defaultValue;
 	return (
@@ -42,6 +43,7 @@ export default function ResolutionTool( {
 			onDeselect={ () => onChange( defaultValue ) }
 			isShownByDefault={ isShownByDefault }
 			panelId={ panelId }
+			resetAllFilter={ resetAllFilter }
 		>
 			<SelectControl
 				__nextHasNoMarginBottom

diff --git a/packages/block-editor/src/components/resolution-tool/stories/index.story.js b/packages/block-editor/src/components/resolution-tool/stories/index.story.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useReducer } from '@wordpress/element';
 import {
 	Panel,
 	__experimentalToolsPanel as ToolsPanel,
@@ -21,28 +21,55 @@ export default {
 	},
 };
 
-export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
-	const [ resolution, setResolution ] = useState( undefined );
-	const resetAll = () => {
-		setResolution( undefined );
+export const Default = ( {
+	label,
+	panelId,
+	onChange: onChangeProp,
+	...props
+} ) => {
+	const [ attributes, setAttributes ] = useReducer(
+		( prevState, nextState ) => ( { ...prevState, ...nextState } ),
+		{}
+	);
+	const { resolution } = attributes;
+	const resetAll = ( resetFilters = [] ) => {
+		let newAttributes = {};
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		setAttributes( newAttributes );
 		onChangeProp( undefined );
 	};
 	return (
 		<Panel>
-			<ToolsPanel panelId={ panelId } resetAll={ resetAll }>
+			<ToolsPanel
+				label={ label }
+				panelId={ panelId }
+				resetAll={ resetAll }
+			>
 				<ResolutionTool
 					panelId={ panelId }
 					onChange={ ( newValue ) => {
-						setResolution( newValue );
+						setAttributes( { resolution: newValue } );
 						onChangeProp( newValue );
 					} }
 					value={ resolution }
+					resetAllFilter={ () => ( {
+						resolution: undefined,
+					} ) }
 					{ ...props }
 				/>
 			</ToolsPanel>
 		</Panel>
 	);
 };
 Default.args = {
+	label: 'Settings',
+	defaultValue: 'full',
 	panelId: 'panel-id',
 };