Block Editor: Fix the 'Reset all' bug for the 'ResolutionTool' compon…

…ent (#68296)


Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

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',
 };