diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js index 4250910cc6320..b7869e3413c3d 100644 --- a/packages/editor/src/components/global-styles-provider/index.js +++ b/packages/editor/src/components/global-styles-provider/index.js @@ -7,17 +7,15 @@ import { isPlainObject } from 'is-plain-object'; /** * WordPress dependencies */ -import { registerBlockStyle, store as blocksStore } from '@wordpress/blocks'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useMemo, useCallback } from '@wordpress/element'; +import { useMemo, useCallback } from '@wordpress/element'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import setNestedValue from '../../utils/set-nested-value'; const { GlobalStylesContext, cleanEmptyObject } = unlock( blockEditorPrivateApis @@ -32,85 +30,6 @@ export function mergeBaseAndUserConfigs( base, user ) { } ); } -/** - * Resolves shared block style variation definitions from the user origin - * under their respective block types and registers the block style if required. - * - * @param {Object} userConfig Current user origin global styles data. - * @return {Object} Updated global styles data. - */ -function useResolvedBlockStyleVariationsConfig( userConfig ) { - const { getBlockStyles } = useSelect( blocksStore ); - const sharedVariations = userConfig?.styles?.blocks?.variations; - - // Collect block style variation definitions to merge and unregistered - // block styles for automatic registration. - const [ userConfigToMerge, unregisteredStyles ] = useMemo( () => { - if ( ! sharedVariations ) { - return []; - } - - const variationsConfigToMerge = {}; - const unregisteredBlockStyles = []; - - Object.entries( sharedVariations ).forEach( - ( [ variationName, variation ] ) => { - if ( ! variation?.blockTypes?.length ) { - return; - } - - variation.blockTypes.forEach( ( blockName ) => { - const blockStyles = getBlockStyles( blockName ); - const registeredBlockStyle = blockStyles.find( - ( { name } ) => name === variationName - ); - - if ( ! registeredBlockStyle ) { - unregisteredBlockStyles.push( [ - blockName, - { - name: variationName, - label: variationName, - }, - ] ); - } - - const path = [ - 'styles', - 'blocks', - blockName, - 'variations', - variationName, - ]; - setNestedValue( variationsConfigToMerge, path, variation ); - } ); - } - ); - - return [ variationsConfigToMerge, unregisteredBlockStyles ]; - }, [ sharedVariations, getBlockStyles ] ); - - // Automatically register missing block styles from variations. - useEffect( - () => - unregisteredStyles?.forEach( ( unregisteredStyle ) => - registerBlockStyle( ...unregisteredStyle ) - ), - [ unregisteredStyles ] - ); - - // Merge shared block style variation definitions into overall user config. - const updatedConfig = useMemo( () => { - if ( ! userConfigToMerge ) { - return userConfig; - } - - return deepmerge( userConfigToMerge, userConfig ); - }, [ userConfigToMerge, userConfig ] ); - - return updatedConfig; -} - function useGlobalStylesUserConfig() { const { globalStylesId, isReady, settings, styles, _links } = useSelect( ( select ) => { @@ -199,7 +118,7 @@ function useGlobalStylesUserConfig() { options ); }, - [ globalStylesId ] + [ globalStylesId, editEntityRecord, getEditedEntityRecord ] ); return [ isReady, config, setConfig ]; @@ -219,28 +138,26 @@ export function useGlobalStylesContext() { const [ isUserConfigReady, userConfig, setUserConfig ] = useGlobalStylesUserConfig(); const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig(); - const userConfigWithVariations = - useResolvedBlockStyleVariationsConfig( userConfig ); const mergedConfig = useMemo( () => { - if ( ! baseConfig || ! userConfigWithVariations ) { + if ( ! baseConfig || ! userConfig ) { return {}; } - return mergeBaseAndUserConfigs( baseConfig, userConfigWithVariations ); - }, [ userConfigWithVariations, baseConfig ] ); + return mergeBaseAndUserConfigs( baseConfig, userConfig ); + }, [ userConfig, baseConfig ] ); const context = useMemo( () => { return { isReady: isUserConfigReady && isBaseConfigReady, - user: userConfigWithVariations, + user: userConfig, base: baseConfig, merged: mergedConfig, setUserConfig, }; }, [ mergedConfig, - userConfigWithVariations, + userConfig, baseConfig, setUserConfig, isUserConfigReady,