diff --git a/package-lock.json b/package-lock.json index 1a4684312d137e..b86d53e37e38e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54112,9 +54112,7 @@ "client-zip": "^2.4.4", "clsx": "^2.1.1", "colord": "^2.9.2", - "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", - "is-plain-object": "^5.0.0", "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0" }, @@ -54209,6 +54207,8 @@ "@wordpress/wordcount": "file:../wordcount", "clsx": "^2.1.1", "date-fns": "^3.6.0", + "deepmerge": "^4.3.0", + "is-plain-object": "^5.0.0", "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0", "remove-accents": "^0.5.0" @@ -69206,9 +69206,7 @@ "client-zip": "^2.4.4", "clsx": "^2.1.1", "colord": "^2.9.2", - "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", - "is-plain-object": "^5.0.0", "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0" } @@ -69285,6 +69283,8 @@ "@wordpress/wordcount": "file:../wordcount", "clsx": "^2.1.1", "date-fns": "^3.6.0", + "deepmerge": "^4.3.0", + "is-plain-object": "^5.0.0", "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0", "remove-accents": "^0.5.0" diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index f10fcc4df2c726..29cc5eecc37531 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -35,6 +35,7 @@ import { useFlashEditableBlocks } from './components/use-flash-editable-blocks'; import { selectBlockPatternsKey, reusableBlocksSelectKey, + globalStylesDataKey, } from './store/private-keys'; import { requiresWrapperOnCopy } from './components/writing-flow/utils'; import { PrivateRichText } from './components/rich-text/'; @@ -72,6 +73,7 @@ lock( privateApis, { useReusableBlocksRenameHint, usesContextKey, useFlashEditableBlocks, + globalStylesDataKey, selectBlockPatternsKey, requiresWrapperOnCopy, PrivateRichText, diff --git a/packages/block-editor/src/store/private-keys.js b/packages/block-editor/src/store/private-keys.js index f48612e7491c9c..82264ebe191579 100644 --- a/packages/block-editor/src/store/private-keys.js +++ b/packages/block-editor/src/store/private-keys.js @@ -1,2 +1,3 @@ +export const globalStylesDataKey = Symbol( 'globalStylesDataKey' ); export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' ); export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' ); diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index dfbcb4321f82f9..1cf07bec6740df 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -72,9 +72,7 @@ "client-zip": "^2.4.4", "clsx": "^2.1.1", "colord": "^2.9.2", - "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", - "is-plain-object": "^5.0.0", "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0" }, diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js index cad76b3ea1fb83..764b188acf6a53 100644 --- a/packages/edit-site/src/components/app/index.js +++ b/packages/edit-site/src/components/app/index.js @@ -2,7 +2,10 @@ * WordPress dependencies */ import { SlotFillProvider } from '@wordpress/components'; -import { UnsavedChangesWarning } from '@wordpress/editor'; +import { + UnsavedChangesWarning, + privateApis as editorPrivateApis, +} from '@wordpress/editor'; import { store as noticesStore } from '@wordpress/notices'; import { useDispatch } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; @@ -13,10 +16,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; * Internal dependencies */ import Layout from '../layout'; -import { GlobalStylesProvider } from '../global-styles/global-styles-provider'; import { unlock } from '../../lock-unlock'; const { RouterProvider } = unlock( routerPrivateApis ); +const { GlobalStylesProvider } = unlock( editorPrivateApis ); export default function App() { const { createErrorNotice } = useDispatch( noticesStore ); diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 6ecb1de03a1446..50032786e39942 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -9,18 +9,19 @@ import a11yPlugin from 'colord/plugins/a11y'; */ import { store as blocksStore } from '@wordpress/blocks'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useContext } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property'; import { getFontFamilies } from './utils'; import { unlock } from '../../lock-unlock'; import { useSelect } from '@wordpress/data'; +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock( blockEditorPrivateApis ); diff --git a/packages/edit-site/src/components/global-styles/stories/index.story.js b/packages/edit-site/src/components/global-styles/stories/index.story.js index f04387295c458a..66cf468d5e224c 100644 --- a/packages/edit-site/src/components/global-styles/stories/index.story.js +++ b/packages/edit-site/src/components/global-styles/stories/index.story.js @@ -2,15 +2,16 @@ * WordPress dependencies */ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useMemo, useState } from '@wordpress/element'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from '../global-styles-provider'; import { default as GlobalStylesUIComponent } from '../ui'; import { unlock } from '../../../lock-unlock'; +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); const { GlobalStylesContext, ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); diff --git a/packages/edit-site/src/components/global-styles/typography-example.js b/packages/edit-site/src/components/global-styles/typography-example.js index dfb8920fb5ea27..a491ca57bf5be4 100644 --- a/packages/edit-site/src/components/global-styles/typography-example.js +++ b/packages/edit-site/src/components/global-styles/typography-example.js @@ -5,16 +5,17 @@ import { useContext } from '@wordpress/element'; import { __unstableMotion as motion } from '@wordpress/components'; import { _x } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from './global-styles-provider'; import { unlock } from '../../lock-unlock'; import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles'; import { getFontFamilies } from './utils'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); export default function PreviewTypography( { fontSize, variation } ) { const { base } = useContext( GlobalStylesContext ); diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js index 877a0095e22ac6..26f5235dece6fc 100644 --- a/packages/edit-site/src/components/global-styles/variations/variation.js +++ b/packages/edit-site/src/components/global-styles/variations/variation.js @@ -10,13 +10,14 @@ import { useMemo, useContext, useState } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { __, sprintf } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from '../global-styles-provider'; import { unlock } from '../../../lock-unlock'; +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js index 2d4f3327035858..b726e79b15f2f7 100644 --- a/packages/edit-site/src/components/revisions/index.js +++ b/packages/edit-site/src/components/revisions/index.js @@ -10,6 +10,7 @@ import { __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe, } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; import { useContext, useMemo } from '@wordpress/element'; @@ -18,7 +19,6 @@ import { useContext, useMemo } from '@wordpress/element'; */ import { unlock } from '../../lock-unlock'; -import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider'; import EditorCanvasContainer from '../editor-canvas-container'; const { @@ -26,6 +26,7 @@ const { GlobalStylesContext, useGlobalStylesOutputWithConfig, } = unlock( blockEditorPrivateApis ); +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); function isObjectEmpty( object ) { return ! object || Object.keys( object ).length === 0; diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index c807c11ca369e2..900fa47beb99c2 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -24,6 +24,7 @@ import { __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe, } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; import { useResizeObserver } from '@wordpress/compose'; import { useMemo, useState, memo, useContext } from '@wordpress/element'; @@ -34,7 +35,6 @@ import { ENTER, SPACE } from '@wordpress/keycodes'; */ import { unlock } from '../../lock-unlock'; import EditorCanvasContainer from '../editor-canvas-container'; -import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider'; const { ExperimentalBlockEditorProvider, @@ -42,6 +42,7 @@ const { GlobalStylesContext, useGlobalStylesOutputWithConfig, } = unlock( blockEditorPrivateApis ); +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); const { CompositeV2: Composite, diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js index 27c3adf438ad6f..d14cd8f64b2ccd 100644 --- a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js +++ b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js @@ -5,16 +5,17 @@ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useContext, useMemo } from '@wordpress/element'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider'; import cloneDeep from '../../utils/clone-deep'; import { unlock } from '../../lock-unlock'; const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); +const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); /** * Removes all instances of a property from an object. diff --git a/packages/editor/package.json b/packages/editor/package.json index bab3a2c29107c0..65fa7deae1828c 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -66,6 +66,8 @@ "@wordpress/wordcount": "file:../wordcount", "clsx": "^2.1.1", "date-fns": "^3.6.0", + "deepmerge": "^4.3.0", + "is-plain-object": "^5.0.0", "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0", "remove-accents": "^0.5.0" diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/editor/src/components/global-styles-provider/index.js similarity index 98% rename from packages/edit-site/src/components/global-styles/global-styles-provider.js rename to packages/editor/src/components/global-styles-provider/index.js index 1e2d43e267a2dd..566e390b26a57d 100644 --- a/packages/edit-site/src/components/global-styles/global-styles-provider.js +++ b/packages/editor/src/components/global-styles-provider/index.js @@ -7,10 +7,10 @@ import { isPlainObject } from 'is-plain-object'; /** * WordPress dependencies */ -import { useMemo, useCallback } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { useMemo, useCallback } from '@wordpress/element'; /** * Internal dependencies @@ -118,7 +118,7 @@ function useGlobalStylesBaseConfig() { return [ !! baseConfig, baseConfig ]; } -function useGlobalStylesContext() { +export function useGlobalStylesContext() { const [ isUserConfigReady, userConfig, setUserConfig ] = useGlobalStylesUserConfig(); const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig(); diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 4d51025aed567a..2a9ecf60732480 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -24,8 +24,10 @@ import inserterMediaCategories from '../media-categories'; import { mediaUpload } from '../../utils'; import { store as editorStore } from '../../store'; import { lock, unlock } from '../../lock-unlock'; +import { useGlobalStylesContext } from '../global-styles-provider'; const EMPTY_BLOCKS_LIST = []; +const DEFAULT_STYLES = {}; function __experimentalReusableBlocksSelect( select ) { return ( @@ -173,6 +175,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) { [ postType, postId, isLargeViewport, renderingMode ] ); + const { merged: mergedGlobalStyles } = useGlobalStylesContext(); + const globalStylesData = mergedGlobalStyles.styles ?? DEFAULT_STYLES; + const settingsBlockPatterns = settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0 settings.__experimentalBlockPatterns; // WP 5.9 @@ -251,6 +256,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) { }, [ settings.allowedBlockTypes, hiddenBlockTypes, blockTypes ] ); const forceDisableFocusMode = settings.focusMode === false; + const { globalStylesDataKey, selectBlockPatternsKey } = + unlock( privateApis ); return useMemo( () => { const blockEditorSettings = { @@ -259,6 +266,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) { BLOCK_EDITOR_SETTINGS.includes( key ) ) ), + [ globalStylesDataKey ]: globalStylesData, allowedBlockTypes, allowRightClickOverrides, focusMode: focusMode && ! forceDisableFocusMode, @@ -267,7 +275,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) { keepCaretInsideBlock, mediaUpload: hasUploadPermissions ? mediaUpload : undefined, __experimentalBlockPatterns: blockPatterns, - [ unlock( privateApis ).selectBlockPatternsKey ]: ( select ) => { + [ selectBlockPatternsKey ]: ( select ) => { const { hasFinishedResolution, getBlockPatternsForPostType } = unlock( select( coreStore ) ); const patterns = getBlockPatternsForPostType( postType ); @@ -331,6 +339,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) { postType, setIsInserterOpened, sectionRootClientId, + globalStylesData, + globalStylesDataKey, + selectBlockPatternsKey, ] ); } diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 951cc4128badb8..41414743f9a6ba 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -30,6 +30,10 @@ import SavePublishPanels from './components/save-publish-panels'; import PostContentInformation from './components/post-content-information'; import PostLastEditedPanel from './components/post-last-edited-panel'; import Sidebar from './components/sidebar'; +import { + mergeBaseAndUserConfigs, + GlobalStylesProvider, +} from './components/global-styles-provider'; const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; @@ -38,9 +42,11 @@ lock( privateApis, { EditorCanvas, ExperimentalEditorProvider, EntitiesSavedStatesExtensible, + GlobalStylesProvider, Header, InserterSidebar, ListViewSidebar, + mergeBaseAndUserConfigs, PatternOverridesPanel, PluginPostExcerpt, PostActions,