From 323a990616b9d11b64232e59fd56088ac8c84d1c Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 26 Jun 2024 12:21:52 +1000 Subject: [PATCH] Refactor so we don't have to change the EditorStyles props Register revision overrides with useStyleOverride --- .../src/components/editor-styles/index.js | 28 ++------- .../src/hooks/block-style-variation.js | 58 ++++++++++++++----- packages/block-editor/src/hooks/index.js | 2 +- packages/block-editor/src/private-apis.js | 4 +- .../src/components/revisions/index.js | 18 ++---- 5 files changed, 58 insertions(+), 52 deletions(-) diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js index 00a15d2bcfa48d..34c4a90020e3be 100644 --- a/packages/block-editor/src/components/editor-styles/index.js +++ b/packages/block-editor/src/components/editor-styles/index.js @@ -67,35 +67,17 @@ function useDarkThemeBodyClassName( styles, scope ) { ); } -function getStyleOverrideById( overrides, id ) { - if ( ! overrides?.length || ! id ) { - return []; - } - - return overrides.find( ( [ _id ] ) => _id === id ) || []; -} - -function EditorStyles( { styles, scope, overrides } ) { - const styleOverrides = useSelect( +function EditorStyles( { styles, scope } ) { + const overrides = useSelect( ( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(), [] ); const [ transformedStyles, transformedSvgs ] = useMemo( () => { const _styles = Object.values( styles ?? [] ); - for ( const [ id, override ] of styleOverrides ) { + for ( const [ id, override ] of overrides ) { const index = _styles.findIndex( ( { id: _id } ) => id === _id ); - /* - * The `overrides` prop in EditorStyles, - * allows consumers to override any existing overrides. - */ - const [ incomingId, incomingOverride ] = getStyleOverrideById( - overrides, - id - ); - const overrideWithId = incomingId - ? { ...incomingOverride, id: incomingId } - : { ...override, id }; + const overrideWithId = { ...override, id }; if ( index === -1 ) { _styles.push( overrideWithId ); } else { @@ -113,7 +95,7 @@ function EditorStyles( { styles, scope, overrides } ) { .map( ( style ) => style.assets ) .join( '' ), ]; - }, [ styles, styleOverrides, overrides, scope ] ); + }, [ styles, overrides, scope ] ); return ( <> diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js index a07fa7ce9557e0..1b4cc3ad5afe48 100644 --- a/packages/block-editor/src/hooks/block-style-variation.js +++ b/packages/block-editor/src/hooks/block-style-variation.js @@ -60,15 +60,23 @@ function getVariationNameFromClass( className, registeredStyles = [] ) { return null; } +function OverrideStyles( { override } ) { + useStyleOverride( override ); +} + /** - * This hook is used to generate new block style variation overrides + * This component is used to generate new block style variation overrides * based on an incoming theme config. If a matching style is found in the config, - * a new override is created and returned. + * a new override is created and returned. The overrides can be used in conjunction with + * useStyleOverride to apply the new styles to the editor. * - * @param {Object} config A global styles object, containing settings and styles. - * @return {Array} An array of new block variation overrides. + * @param {Object} props Props. + * @param {Object} props.config A global styles object, containing settings and styles. + * @return {JSX.Element} An array of new block variation overrides. */ -export function useUpdateBlockStyleVariationOverridesWithConfig( config ) { +export function ExperimentalBlockStyleVariationOverridesWithConfig( { + config, +} ) { const { getBlockStyles, overrides } = useSelect( ( select ) => ( { getBlockStyles: select( blocksStore ).getBlockStyles, @@ -78,10 +86,19 @@ export function useUpdateBlockStyleVariationOverridesWithConfig( config ) { ); const { getBlockName } = useSelect( blockEditorStore ); - return useMemo( () => { + const overridesWithConfig = useMemo( () => { const newOverrides = []; - for ( const [ id, override ] of overrides ) { - if ( override?.variation && override?.clientId ) { + const clientIds = []; + for ( const [ , override ] of overrides ) { + if ( + override?.variation && + override?.clientId && + /* + * Because this component overwrites existing style overrides, + * filter out any overrides that are already present in the store. + */ + ! clientIds.includes( override.clientId ) + ) { const blockName = getBlockName( override.clientId ); const configStyles = config?.styles?.blocks?.[ blockName ]?.variations?.[ @@ -130,15 +147,30 @@ export function useUpdateBlockStyleVariationOverridesWithConfig( config ) { variationStyles: true, } ); - newOverrides.push( [ - id, - { ...override, css: variationStyles }, - ] ); + newOverrides.push( { + id: `${ override.variation }-${ override.clientId }`, + css: variationStyles, + __unstableType: 'variation', + variation: override.variation, + // The clientId will be stored with the override and used to ensure + // the order of overrides matches the order of blocks so that the + // correct CSS cascade is maintained. + clientId: override.clientId, + } ); + clientIds.push( override.clientId ); } } } return newOverrides; - }, [ config, overrides ] ); + }, [ config, overrides, getBlockStyles ] ); + + return ( + <> + { overridesWithConfig.map( ( override ) => ( + + ) ) } + + ); } function useBlockStyleVariation( name, variation, clientId ) { diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index f831249881200d..6e79d2b3dbab86 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -88,4 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props'; export { getGapCSSValue } from './gap'; export { useCachedTruthy } from './use-cached-truthy'; export { useZoomOut } from './use-zoom-out'; -export { useUpdateBlockStyleVariationOverridesWithConfig } from './block-style-variation'; +export { ExperimentalBlockStyleVariationOverridesWithConfig } from './block-style-variation'; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index 0e5f18a5005b2f..b408693e375345 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -23,7 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod import { useLayoutClasses, useLayoutStyles, - useUpdateBlockStyleVariationOverridesWithConfig, + ExperimentalBlockStyleVariationOverridesWithConfig, } from './hooks'; import DimensionsTool from './components/dimensions-tool'; import ResolutionTool from './components/resolution-tool'; @@ -92,5 +92,5 @@ lock( privateApis, { PrivatePublishDateTimePicker, useSpacingSizes, useBlockDisplayTitle, - useUpdateBlockStyleVariationOverridesWithConfig, + ExperimentalBlockStyleVariationOverridesWithConfig, } ); diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js index aee6136df58888..932905a8effd08 100644 --- a/packages/edit-site/src/components/revisions/index.js +++ b/packages/edit-site/src/components/revisions/index.js @@ -25,7 +25,7 @@ const { ExperimentalBlockEditorProvider, GlobalStylesContext, useGlobalStylesOutputWithConfig, - useUpdateBlockStyleVariationOverridesWithConfig, + ExperimentalBlockStyleVariationOverridesWithConfig, } = unlock( blockEditorPrivateApis ); const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); @@ -33,13 +33,6 @@ function isObjectEmpty( object ) { return ! object || Object.keys( object ).length === 0; } -function RevisionStyles( { styles, config } ) { - const mergedOverrides = - useUpdateBlockStyleVariationOverridesWithConfig( config ); - - return ; -} - function Revisions( { userConfig, blocks } ) { const { base: baseConfig } = useContext( GlobalStylesContext ); @@ -96,12 +89,11 @@ function Revisions( { userConfig, blocks } ) { > { /* - * Styles are printed at the end of the document, - * so they can access any registered style overrides, - * which are only stored after the block list is rendered. + * Styles are printed inside the block editor provider, + * so they can access any registered style overrides. */ } - +