-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use a context provider for global styles config
- Loading branch information
1 parent
b371822
commit 7e088b9
Showing
6 changed files
with
293 additions
and
234 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
packages/edit-site/src/components/global-styles/context.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { createContext } from '@wordpress/element'; | ||
|
|
||
| export const DEFAULT_GLOBAL_STYLES_CONTEXT = { | ||
| user: {}, | ||
| base: {}, | ||
| merged: {}, | ||
| setUserConfig: () => {}, | ||
| }; | ||
|
|
||
| export const GlobalStylesContext = createContext( | ||
| DEFAULT_GLOBAL_STYLES_CONTEXT | ||
| ); |
162 changes: 162 additions & 0 deletions
162
packages/edit-site/src/components/global-styles/global-styles-provider.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { get, cloneDeep, set, mergeWith } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useMemo, useCallback } from '@wordpress/element'; | ||
| import { useSelect, useDispatch } from '@wordpress/data'; | ||
| import { store as coreStore } from '@wordpress/core-data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { store as editSiteStore } from '../../store'; | ||
| import { PRESET_METADATA } from './utils'; | ||
| import { GlobalStylesContext } from './context'; | ||
|
|
||
| function mergeTreesCustomizer( _, srcValue ) { | ||
| // We only pass as arrays the presets, | ||
| // in which case we want the new array of values | ||
| // to override the old array (no merging). | ||
| if ( Array.isArray( srcValue ) ) { | ||
| return srcValue; | ||
| } | ||
| } | ||
|
|
||
| function mergeBaseAndUserConfigs( base, user ) { | ||
| return mergeWith( {}, base, user, mergeTreesCustomizer ); | ||
| } | ||
|
|
||
| function addUserOriginToSettings( settingsToAdd ) { | ||
| const newSettings = cloneDeep( settingsToAdd ); | ||
| PRESET_METADATA.forEach( ( { path } ) => { | ||
| const presetData = get( newSettings, path ); | ||
| if ( presetData ) { | ||
| set( newSettings, path, { | ||
| user: presetData, | ||
| } ); | ||
| } | ||
| } ); | ||
| return newSettings; | ||
| } | ||
|
|
||
| function removeUserOriginFromSettings( settingsToRemove ) { | ||
| const newSettings = cloneDeep( settingsToRemove ); | ||
| PRESET_METADATA.forEach( ( { path } ) => { | ||
| const presetData = get( newSettings, path ); | ||
| if ( presetData ) { | ||
| set( newSettings, path, ( presetData ?? {} ).user ); | ||
| } | ||
| } ); | ||
| return newSettings; | ||
| } | ||
|
|
||
| function useGlobalStylesUserConfig() { | ||
| const { globalStylesId, content } = useSelect( ( select ) => { | ||
| const _globalStylesId = select( editSiteStore ).getSettings() | ||
| .__experimentalGlobalStylesUserEntityId; | ||
| return { | ||
| globalStylesId: _globalStylesId, | ||
| content: select( coreStore ).getEditedEntityRecord( | ||
| 'postType', | ||
| 'wp_global_styles', | ||
| _globalStylesId | ||
| )?.content, | ||
| }; | ||
| }, [] ); | ||
| const { getEditedEntityRecord } = useSelect( coreStore ); | ||
| const { editEntityRecord } = useDispatch( coreStore ); | ||
|
|
||
| const parseContent = ( contentToParse ) => { | ||
| let parsedConfig; | ||
| try { | ||
| parsedConfig = contentToParse ? JSON.parse( contentToParse ) : {}; | ||
| // It is very important to verify if the flag isGlobalStylesUserThemeJSON is true. | ||
| // If it is not true the content was not escaped and is not safe. | ||
| if ( ! parsedConfig.isGlobalStylesUserThemeJSON ) { | ||
| parsedConfig = {}; | ||
| } else { | ||
| parsedConfig = { | ||
| ...parsedConfig, | ||
| settings: addUserOriginToSettings( parsedConfig.settings ), | ||
| }; | ||
| } | ||
| } catch ( e ) { | ||
| /* eslint-disable no-console */ | ||
| console.error( 'Global Styles User data is not valid' ); | ||
| console.error( e ); | ||
| /* eslint-enable no-console */ | ||
| parsedConfig = {}; | ||
| } | ||
|
|
||
| return parsedConfig; | ||
| }; | ||
|
|
||
| const config = useMemo( () => { | ||
| return parseContent( content ); | ||
| }, [ content ] ); | ||
|
|
||
| const setConfig = useCallback( | ||
| ( callback ) => { | ||
| const currentConfig = parseContent( | ||
| getEditedEntityRecord( | ||
| 'postType', | ||
| 'wp_global_styles', | ||
| globalStylesId | ||
| )?.content | ||
| ); | ||
| const updatedConfig = callback( currentConfig ); | ||
| editEntityRecord( 'postType', 'wp_global_styles', globalStylesId, { | ||
| content: JSON.stringify( { | ||
| ...updatedConfig, | ||
| settings: removeUserOriginFromSettings( | ||
| updatedConfig.settings | ||
| ), | ||
| } ), | ||
| } ); | ||
| }, | ||
| [ globalStylesId ] | ||
| ); | ||
|
|
||
| return [ config, setConfig ]; | ||
| } | ||
|
|
||
| function useGlobalStylesBaseConfig() { | ||
| const baseConfig = useSelect( ( select ) => { | ||
| return select( editSiteStore ).getSettings() | ||
| .__experimentalGlobalStylesBaseConfig; | ||
| }, [] ); | ||
|
|
||
| return baseConfig; | ||
| } | ||
|
|
||
| function useGlobalStylesContext() { | ||
| const [ userConfig, setUserConfig ] = useGlobalStylesUserConfig(); | ||
| const baseConfig = useGlobalStylesBaseConfig(); | ||
| const mergedConfig = useMemo( () => { | ||
| return mergeBaseAndUserConfigs( baseConfig, userConfig ); | ||
| }, [ userConfig, baseConfig ] ); | ||
| const context = useMemo( () => { | ||
| return { | ||
| user: userConfig, | ||
| base: baseConfig, | ||
| merged: mergedConfig, | ||
| setUserConfig, | ||
| }; | ||
| }, [ mergedConfig, userConfig, baseConfig, setUserConfig ] ); | ||
|
|
||
| return context; | ||
| } | ||
|
|
||
| export function GlobalStylesProvider( { children } ) { | ||
| const context = useGlobalStylesContext(); | ||
|
|
||
| return ( | ||
| <GlobalStylesContext.Provider value={ context }> | ||
| { children } | ||
| </GlobalStylesContext.Provider> | ||
| ); | ||
| } |
Oops, something went wrong.