From 1e829be3c7245ba5eb7a39974f47179eecfdd04c Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 13 Jun 2024 15:17:23 +1000 Subject: [PATCH] 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 Co-authored-by: noisysocks --- .../src/components/global-styles/hooks.js | 5 +--- .../global-styles/screen-revisions/index.js | 27 +++---------------- .../global-styles/variations/variation.js | 14 ++-------- .../push-changes-to-global-styles/index.js | 4 +-- .../global-styles-provider/index.js | 14 ++++++++-- 5 files changed, 20 insertions(+), 44 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 7411d84f1fbd49..50211db723e238 100644 --- 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 index e4ffb209964187..dab5c77176bfdd 100644 --- 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() { /> ) ) } ( { - user: { - settings: variation.settings ?? {}, - styles: variation.styles ?? {}, - _links: variation._links ?? {}, - }, + user: variation, base, merged: mergeBaseAndUserConfigs( base, variation ), setUserConfig: () => {}, @@ -39,13 +35,7 @@ export default function Variation( { variation, children, isPill } ) { [ 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 index 9e876d39d73407..a81bc107a787c9 100644 --- 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 index 04a42ab7af819c..4250910cc6320a 100644 --- 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',