Global styles: send theme object to setUserConfig (#61805)

* Instead of destructuring object, just send it. The global styles provider does the work. * Remove unnecessary callback - use state function to set current revision * Allow an object or a function in the setConfig function, which sets global styles. Use the object arg for variations, pushing to global styles from block settings, and reset global styles. Co-authored-by: ramonjd <[email protected]> Co-authored-by: noisysocks <[email protected]>
WordPress · Jun 13, 2024 · 1e829be · 1e829be
1 parent 6ec0bda
commit 1e829be
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 44 deletions.
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
@@ -89,10 +89,7 @@ export const useGlobalStylesReset = () => {
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
-		useCallback(
-			() => setUserConfig( () => EMPTY_CONFIG ),
-			[ setUserConfig ]
-		),
+		useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ),
 	];
 };
 

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -81,28 +81,11 @@ function ScreenRevisions() {
 	};
 
 	const restoreRevision = ( revision ) => {
-		setUserConfig( () => ( {
-			styles: revision?.styles,
-			settings: revision?.settings,
-			_links: revision?._links,
-		} ) );
+		setUserConfig( () => revision );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
 	};
 
-	const selectRevision = ( revision ) => {
-		setCurrentlySelectedRevision( {
-			/*
-			 * The default must be an empty object so that
-			 * `mergeBaseAndUserConfigs()` can merge them correctly.
-			 */
-			styles: revision?.styles || {},
-			settings: revision?.settings || {},
-			_links: revision?._links || {},
-			id: revision?.id,
-		} );
-	};
-
 	useEffect( () => {
 		if (
 			! editorCanvasContainerView ||
@@ -134,11 +117,7 @@ function ScreenRevisions() {
 		 * See: https://github.com/WordPress/gutenberg/issues/55866
 		 */
 		if ( shouldSelectFirstItem ) {
-			setCurrentlySelectedRevision( {
-				styles: firstRevision?.styles || {},
-				settings: firstRevision?.settings || {},
-				id: firstRevision?.id,
-			} );
+			setCurrentlySelectedRevision( firstRevision );
 		}
 	}, [ shouldSelectFirstItem, firstRevision ] );
 
@@ -186,7 +165,7 @@ function ScreenRevisions() {
 					/>
 				) ) }
 			<RevisionsButtons
-				onChange={ selectRevision }
+				onChange={ setCurrentlySelectedRevision }
 				selectedRevisionId={ currentlySelectedRevisionId }
 				userRevisions={ currentRevisions }
 				canApplyRevision={ isLoadButtonEnabled }

diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -27,25 +27,15 @@ export default function Variation( { variation, children, isPill } ) {
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo(
 		() => ( {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-				_links: variation._links ?? {},
-			},
+			user: variation,
 			base,
 			merged: mergeBaseAndUserConfigs( base, variation ),
 			setUserConfig: () => {},
 		} ),
 		[ variation, base ]
 	);
 
-	const selectVariation = () => {
-		setUserConfig( () => ( {
-			settings: variation.settings,
-			styles: variation.styles,
-			_links: variation._links,
-		} ) );
-	};
+	const selectVariation = () => setUserConfig( variation );
 
 	const selectOnEnter = ( event ) => {
 		if ( event.keyCode === ENTER ) {

diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -287,7 +287,7 @@ function PushChangesToGlobalStylesControl( {
 			// notification.
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( newBlockAttributes );
-			setUserConfig( () => newUserConfig, { undoIgnore: true } );
+			setUserConfig( newUserConfig, { undoIgnore: true } );
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: Title of the block e.g. 'Heading'.
@@ -302,7 +302,7 @@ function PushChangesToGlobalStylesControl( {
 							onClick() {
 								__unstableMarkNextChangeAsNotPersistent();
 								setAttributes( attributes );
-								setUserConfig( () => userConfig, {
+								setUserConfig( userConfig, {
 									undoIgnore: true,
 								} );
 							},

diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
@@ -163,7 +163,13 @@ function useGlobalStylesUserConfig() {
 	}, [ settings, styles, _links ] );
 
 	const setConfig = useCallback(
-		( callback, options = {} ) => {
+		/**
+		 * Set the global styles config.
+		 * @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.
+		 *                                           Otherwise, overwrite the current config with the incoming object.
+		 * @param {Object}          options          Options for editEntityRecord Core selector.
+		 */
+		( callbackOrObject, options = {} ) => {
 			const record = getEditedEntityRecord(
 				'root',
 				'globalStyles',
@@ -175,7 +181,11 @@ function useGlobalStylesUserConfig() {
 				settings: record?.settings ?? {},
 				_links: record?._links ?? {},
 			};
-			const updatedConfig = callback( currentConfig );
+
+			const updatedConfig =
+				typeof callbackOrObject === 'function'
+					? callbackOrObject( currentConfig )
+					: callbackOrObject;
 
 			editEntityRecord(
 				'root',