@wordpress/editor 14.33.3-next.36001005c.0 → 14.34.0

package/build-module/components/editor-interface/index.js

@@ -8,6 +8,7 @@ import { BlockBreadcrumb, BlockToolbar } from "@wordpress/block-editor";
 import { useViewportMatch } from "@wordpress/compose";
 import { useState, useCallback } from "@wordpress/element";
 import { store as editorStore } from "../../store";
+import { unlock } from "../../lock-unlock";
 import EditorNotices from "../editor-notices";
 import Header from "../header";
 import InserterSidebar from "../inserter-sidebar";
@@ -15,7 +16,7 @@ import ListViewSidebar from "../list-view-sidebar";
 import SavePublishPanels from "../save-publish-panels";
 import TextEditor from "../text-editor";
 import VisualEditor from "../visual-editor";
-import EditorContentSlotFill from "./content-slot-fill";
+import StylesCanvas from "../styles-canvas";
 const interfaceLabels = {
   /* translators: accessibility text for the editor top bar landmark region. */
   header: __("Editor top bar"),
@@ -30,7 +31,6 @@ const interfaceLabels = {
 };
 function EditorInterface({
   className,
-  styles,
   children,
   forceIsDirty,
   contentRef,
@@ -39,7 +39,6 @@ function EditorInterface({
   customSaveButton,
   customSavePanel,
   forceDisableBlockTools,
-  title,
   iframeProps
 }) {
   const {
@@ -49,10 +48,15 @@ function EditorInterface({
     isDistractionFree,
     isPreviewMode,
     showBlockBreadcrumbs,
-    documentLabel
+    documentLabel,
+    stylesPath,
+    showStylebook
   } = useSelect((select) => {
     const { get } = select(preferencesStore);
     const { getEditorSettings, getPostTypeLabel } = select(editorStore);
+    const { getStylesPath, getShowStylebook } = unlock(
+      select(editorStore)
+    );
     const editorSettings = getEditorSettings();
     const postTypeLabel = getPostTypeLabel();
     let _mode = select(editorStore).getEditorMode();
@@ -72,11 +76,14 @@ function EditorInterface({
       documentLabel: (
         // translators: Default label for the Document in the Block Breadcrumb.
         postTypeLabel || _x("Document", "noun, breadcrumb")
-      )
+      ),
+      stylesPath: getStylesPath(),
+      showStylebook: getShowStylebook()
     };
   }, []);
   const isLargeViewport = useViewportMatch("medium");
   const secondarySidebarLabel = isListViewOpened ? __("Document Overview") : __("Block Library");
+  const shouldShowStylesCanvas = showStylebook || stylesPath?.startsWith("/revisions");
   const [entitiesSavedStatesCallback, setEntitiesSavedStatesCallback] = useState(false);
   const closeEntitiesSavedStates = useCallback(
     (arg) => {
@@ -105,8 +112,7 @@ function EditorInterface({
           forceIsDirty,
           setEntitiesSavedStatesCallback,
           customSaveButton,
-          forceDisableBlockTools,
-          title
+          forceDisableBlockTools
         }
       ),
       editorNotices: /* @__PURE__ */ jsx(EditorNotices, {}),
@@ -114,7 +120,7 @@ function EditorInterface({
       sidebar: !isPreviewMode && !isDistractionFree && /* @__PURE__ */ jsx(ComplementaryArea.Slot, { scope: "core" }),
       content: /* @__PURE__ */ jsxs(Fragment, { children: [
         !isDistractionFree && !isPreviewMode && /* @__PURE__ */ jsx(EditorNotices, {}),
-        /* @__PURE__ */ jsx(EditorContentSlotFill.Slot, { children: ([editorCanvasView]) => editorCanvasView ? editorCanvasView : /* @__PURE__ */ jsxs(Fragment, { children: [
+        shouldShowStylesCanvas ? /* @__PURE__ */ jsx(StylesCanvas, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
           !isPreviewMode && mode === "text" && /* @__PURE__ */ jsx(
             TextEditor,
             {
@@ -125,7 +131,6 @@ function EditorInterface({
           (isPreviewMode || mode === "visual") && /* @__PURE__ */ jsx(
             VisualEditor,
             {
-              styles,
               contentRef,
               disableIframe,
               autoFocus,
@@ -133,7 +138,7 @@ function EditorInterface({
             }
           ),
           children
-        ] }) })
+        ] })
       ] }),
       footer: !isPreviewMode && !isDistractionFree && isLargeViewport && showBlockBreadcrumbs && mode === "visual" && /* @__PURE__ */ jsx(BlockBreadcrumb, { rootLabelText: documentLabel }),
       actions: !isPreviewMode ? customSavePanel || /* @__PURE__ */ jsx(

package/build-module/components/editor-interface/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/editor-interface/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';\nimport { useSelect } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { BlockBreadcrumb, BlockToolbar } from '@wordpress/block-editor';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport EditorNotices from '../editor-notices';\nimport Header from '../header';\nimport InserterSidebar from '../inserter-sidebar';\nimport ListViewSidebar from '../list-view-sidebar';\nimport SavePublishPanels from '../save-publish-panels';\nimport TextEditor from '../text-editor';\nimport VisualEditor from '../visual-editor';\nimport EditorContentSlotFill from './content-slot-fill';\n\nconst interfaceLabels = {\n\t/* translators: accessibility text for the editor top bar landmark region. */\n\theader: __( 'Editor top bar' ),\n\t/* translators: accessibility text for the editor content landmark region. */\n\tbody: __( 'Editor content' ),\n\t/* translators: accessibility text for the editor settings landmark region. */\n\tsidebar: __( 'Editor settings' ),\n\t/* translators: accessibility text for the editor publish landmark region. */\n\tactions: __( 'Editor publish' ),\n\t/* translators: accessibility text for the editor footer landmark region. */\n\tfooter: __( 'Editor footer' ),\n};\n\nexport default function EditorInterface( {\n\tclassName,\n\tstyles,\n\tchildren,\n\tforceIsDirty,\n\tcontentRef,\n\tdisableIframe,\n\tautoFocus,\n\tcustomSaveButton,\n\tcustomSavePanel,\n\tforceDisableBlockTools,\n\ttitle,\n\tiframeProps,\n} ) {\n\tconst {\n\t\tmode,\n\t\tisInserterOpened,\n\t\tisListViewOpened,\n\t\tisDistractionFree,\n\t\tisPreviewMode,\n\t\tshowBlockBreadcrumbs,\n\t\tdocumentLabel,\n\t} = useSelect( ( select ) => {\n\t\tconst { get } = select( preferencesStore );\n\t\tconst { getEditorSettings, getPostTypeLabel } = select( editorStore );\n\t\tconst editorSettings = getEditorSettings();\n\t\tconst postTypeLabel = getPostTypeLabel();\n\n\t\tlet _mode = select( editorStore ).getEditorMode();\n\t\tif ( ! editorSettings.richEditingEnabled && _mode === 'visual' ) {\n\t\t\t_mode = 'text';\n\t\t}\n\t\tif ( ! editorSettings.codeEditingEnabled && _mode === 'text' ) {\n\t\t\t_mode = 'visual';\n\t\t}\n\n\t\treturn {\n\t\t\tmode: _mode,\n\t\t\tisInserterOpened: select( editorStore ).isInserterOpened(),\n\t\t\tisListViewOpened: select( editorStore ).isListViewOpened(),\n\t\t\tisDistractionFree: get( 'core', 'distractionFree' ),\n\t\t\tisPreviewMode: editorSettings.isPreviewMode,\n\t\t\tshowBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),\n\t\t\tdocumentLabel:\n\t\t\t\t// translators: Default label for the Document in the Block Breadcrumb.\n\t\t\t\tpostTypeLabel || _x( 'Document', 'noun, breadcrumb' ),\n\t\t};\n\t}, [] );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst secondarySidebarLabel = isListViewOpened\n\t\t? __( 'Document Overview' )\n\t\t: __( 'Block Library' );\n\n\t// Local state for save panel.\n\t// Note 'truthy' callback implies an open panel.\n\tconst [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =\n\t\tuseState( false );\n\tconst closeEntitiesSavedStates = useCallback(\n\t\t( arg ) => {\n\t\t\tif ( typeof entitiesSavedStatesCallback === 'function' ) {\n\t\t\t\tentitiesSavedStatesCallback( arg );\n\t\t\t}\n\t\t\tsetEntitiesSavedStatesCallback( false );\n\t\t},\n\t\t[ entitiesSavedStatesCallback ]\n\t);\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tisDistractionFree={ isDistractionFree }\n\t\t\tclassName={ clsx( 'editor-editor-interface', className, {\n\t\t\t\t'is-entity-save-view-open': !! entitiesSavedStatesCallback,\n\t\t\t\t'is-distraction-free': isDistractionFree && ! isPreviewMode,\n\t\t\t} ) }\n\t\t\tlabels={ {\n\t\t\t\t...interfaceLabels,\n\t\t\t\tsecondarySidebar: secondarySidebarLabel,\n\t\t\t} }\n\t\t\theader={\n\t\t\t\t! isPreviewMode && (\n\t\t\t\t\t<Header\n\t\t\t\t\t\tforceIsDirty={ forceIsDirty }\n\t\t\t\t\t\tsetEntitiesSavedStatesCallback={\n\t\t\t\t\t\t\tsetEntitiesSavedStatesCallback\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcustomSaveButton={ customSaveButton }\n\t\t\t\t\t\tforceDisableBlockTools={ forceDisableBlockTools }\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t\teditorNotices={ <EditorNotices /> }\n\t\t\tsecondarySidebar={\n\t\t\t\t! isPreviewMode &&\n\t\t\t\tmode === 'visual' &&\n\t\t\t\t( ( isInserterOpened && <InserterSidebar /> ) ||\n\t\t\t\t\t( isListViewOpened && <ListViewSidebar /> ) )\n\t\t\t}\n\t\t\tsidebar={\n\t\t\t\t! isPreviewMode &&\n\t\t\t\t! isDistractionFree && <ComplementaryArea.Slot scope=\"core\" />\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ ! isDistractionFree && ! isPreviewMode && (\n\t\t\t\t\t\t<EditorNotices />\n\t\t\t\t\t) }\n\n\t\t\t\t\t<EditorContentSlotFill.Slot>\n\t\t\t\t\t\t{ ( [ editorCanvasView ] ) =>\n\t\t\t\t\t\t\teditorCanvasView ? (\n\t\t\t\t\t\t\t\teditorCanvasView\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{ ! isPreviewMode && mode === 'text' && (\n\t\t\t\t\t\t\t\t\t\t<TextEditor\n\t\t\t\t\t\t\t\t\t\t\t// We should auto-focus the canvas (title) on load.\n\t\t\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\t\t\t\t\t\tautoFocus={ autoFocus }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ ! isPreviewMode &&\n\t\t\t\t\t\t\t\t\t\t! isLargeViewport &&\n\t\t\t\t\t\t\t\t\t\tmode === 'visual' && (\n\t\t\t\t\t\t\t\t\t\t\t<BlockToolbar hideDragHandle />\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ ( isPreviewMode ||\n\t\t\t\t\t\t\t\t\t\tmode === 'visual' ) && (\n\t\t\t\t\t\t\t\t\t\t<VisualEditor\n\t\t\t\t\t\t\t\t\t\t\tstyles={ styles }\n\t\t\t\t\t\t\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t\t\t\t\t\t\t\tdisableIframe={ disableIframe }\n\t\t\t\t\t\t\t\t\t\t\t// We should auto-focus the canvas (title) on load.\n\t\t\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\t\t\t\t\t\tautoFocus={ autoFocus }\n\t\t\t\t\t\t\t\t\t\t\tiframeProps={ iframeProps }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t</EditorContentSlotFill.Slot>\n\t\t\t\t</>\n\t\t\t}\n\t\t\tfooter={\n\t\t\t\t! isPreviewMode &&\n\t\t\t\t! isDistractionFree &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\tshowBlockBreadcrumbs &&\n\t\t\t\tmode === 'visual' && (\n\t\t\t\t\t<BlockBreadcrumb rootLabelText={ documentLabel } />\n\t\t\t\t)\n\t\t\t}\n\t\t\tactions={\n\t\t\t\t! isPreviewMode\n\t\t\t\t\t? customSavePanel || (\n\t\t\t\t\t\t\t<SavePublishPanels\n\t\t\t\t\t\t\t\tcloseEntitiesSavedStates={\n\t\t\t\t\t\t\t\t\tcloseEntitiesSavedStates\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tisEntitiesSavedStatesOpen={\n\t\t\t\t\t\t\t\t\tentitiesSavedStatesCallback\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetEntitiesSavedStatesCallback={\n\t\t\t\t\t\t\t\t\tsetEntitiesSavedStatesCallback\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tforceIsDirtyPublishPanel={ forceIsDirty }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t  )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';\nimport { useSelect } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { BlockBreadcrumb, BlockToolbar } from '@wordpress/block-editor';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport EditorNotices from '../editor-notices';\nimport Header from '../header';\nimport InserterSidebar from '../inserter-sidebar';\nimport ListViewSidebar from '../list-view-sidebar';\nimport SavePublishPanels from '../save-publish-panels';\nimport TextEditor from '../text-editor';\nimport VisualEditor from '../visual-editor';\nimport StylesCanvas from '../styles-canvas';\n\nconst interfaceLabels = {\n\t/* translators: accessibility text for the editor top bar landmark region. */\n\theader: __( 'Editor top bar' ),\n\t/* translators: accessibility text for the editor content landmark region. */\n\tbody: __( 'Editor content' ),\n\t/* translators: accessibility text for the editor settings landmark region. */\n\tsidebar: __( 'Editor settings' ),\n\t/* translators: accessibility text for the editor publish landmark region. */\n\tactions: __( 'Editor publish' ),\n\t/* translators: accessibility text for the editor footer landmark region. */\n\tfooter: __( 'Editor footer' ),\n};\n\nexport default function EditorInterface( {\n\tclassName,\n\tchildren,\n\tforceIsDirty,\n\tcontentRef,\n\tdisableIframe,\n\tautoFocus,\n\tcustomSaveButton,\n\tcustomSavePanel,\n\tforceDisableBlockTools,\n\tiframeProps,\n} ) {\n\tconst {\n\t\tmode,\n\t\tisInserterOpened,\n\t\tisListViewOpened,\n\t\tisDistractionFree,\n\t\tisPreviewMode,\n\t\tshowBlockBreadcrumbs,\n\t\tdocumentLabel,\n\t\tstylesPath,\n\t\tshowStylebook,\n\t} = useSelect( ( select ) => {\n\t\tconst { get } = select( preferencesStore );\n\t\tconst { getEditorSettings, getPostTypeLabel } = select( editorStore );\n\t\tconst { getStylesPath, getShowStylebook } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\tconst editorSettings = getEditorSettings();\n\t\tconst postTypeLabel = getPostTypeLabel();\n\n\t\tlet _mode = select( editorStore ).getEditorMode();\n\t\tif ( ! editorSettings.richEditingEnabled && _mode === 'visual' ) {\n\t\t\t_mode = 'text';\n\t\t}\n\t\tif ( ! editorSettings.codeEditingEnabled && _mode === 'text' ) {\n\t\t\t_mode = 'visual';\n\t\t}\n\n\t\treturn {\n\t\t\tmode: _mode,\n\t\t\tisInserterOpened: select( editorStore ).isInserterOpened(),\n\t\t\tisListViewOpened: select( editorStore ).isListViewOpened(),\n\t\t\tisDistractionFree: get( 'core', 'distractionFree' ),\n\t\t\tisPreviewMode: editorSettings.isPreviewMode,\n\t\t\tshowBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),\n\t\t\tdocumentLabel:\n\t\t\t\t// translators: Default label for the Document in the Block Breadcrumb.\n\t\t\t\tpostTypeLabel || _x( 'Document', 'noun, breadcrumb' ),\n\t\t\tstylesPath: getStylesPath(),\n\t\t\tshowStylebook: getShowStylebook(),\n\t\t};\n\t}, [] );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst secondarySidebarLabel = isListViewOpened\n\t\t? __( 'Document Overview' )\n\t\t: __( 'Block Library' );\n\tconst shouldShowStylesCanvas =\n\t\tshowStylebook || stylesPath?.startsWith( '/revisions' );\n\n\t// Local state for save panel.\n\t// Note 'truthy' callback implies an open panel.\n\tconst [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =\n\t\tuseState( false );\n\tconst closeEntitiesSavedStates = useCallback(\n\t\t( arg ) => {\n\t\t\tif ( typeof entitiesSavedStatesCallback === 'function' ) {\n\t\t\t\tentitiesSavedStatesCallback( arg );\n\t\t\t}\n\t\t\tsetEntitiesSavedStatesCallback( false );\n\t\t},\n\t\t[ entitiesSavedStatesCallback ]\n\t);\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tisDistractionFree={ isDistractionFree }\n\t\t\tclassName={ clsx( 'editor-editor-interface', className, {\n\t\t\t\t'is-entity-save-view-open': !! entitiesSavedStatesCallback,\n\t\t\t\t'is-distraction-free': isDistractionFree && ! isPreviewMode,\n\t\t\t} ) }\n\t\t\tlabels={ {\n\t\t\t\t...interfaceLabels,\n\t\t\t\tsecondarySidebar: secondarySidebarLabel,\n\t\t\t} }\n\t\t\theader={\n\t\t\t\t! isPreviewMode && (\n\t\t\t\t\t<Header\n\t\t\t\t\t\tforceIsDirty={ forceIsDirty }\n\t\t\t\t\t\tsetEntitiesSavedStatesCallback={\n\t\t\t\t\t\t\tsetEntitiesSavedStatesCallback\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcustomSaveButton={ customSaveButton }\n\t\t\t\t\t\tforceDisableBlockTools={ forceDisableBlockTools }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t\teditorNotices={ <EditorNotices /> }\n\t\t\tsecondarySidebar={\n\t\t\t\t! isPreviewMode &&\n\t\t\t\tmode === 'visual' &&\n\t\t\t\t( ( isInserterOpened && <InserterSidebar /> ) ||\n\t\t\t\t\t( isListViewOpened && <ListViewSidebar /> ) )\n\t\t\t}\n\t\t\tsidebar={\n\t\t\t\t! isPreviewMode &&\n\t\t\t\t! isDistractionFree && <ComplementaryArea.Slot scope=\"core\" />\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ ! isDistractionFree && ! isPreviewMode && (\n\t\t\t\t\t\t<EditorNotices />\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ shouldShowStylesCanvas ? (\n\t\t\t\t\t\t<StylesCanvas />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ ! isPreviewMode && mode === 'text' && (\n\t\t\t\t\t\t\t\t<TextEditor\n\t\t\t\t\t\t\t\t\t// We should auto-focus the canvas (title) on load.\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\t\t\t\tautoFocus={ autoFocus }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ! isPreviewMode &&\n\t\t\t\t\t\t\t\t! isLargeViewport &&\n\t\t\t\t\t\t\t\tmode === 'visual' && (\n\t\t\t\t\t\t\t\t\t<BlockToolbar hideDragHandle />\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ( isPreviewMode || mode === 'visual' ) && (\n\t\t\t\t\t\t\t\t<VisualEditor\n\t\t\t\t\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t\t\t\t\t\tdisableIframe={ disableIframe }\n\t\t\t\t\t\t\t\t\t// We should auto-focus the canvas (title) on load.\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\t\t\t\tautoFocus={ autoFocus }\n\t\t\t\t\t\t\t\t\tiframeProps={ iframeProps }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t}\n\t\t\tfooter={\n\t\t\t\t! isPreviewMode &&\n\t\t\t\t! isDistractionFree &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\tshowBlockBreadcrumbs &&\n\t\t\t\tmode === 'visual' && (\n\t\t\t\t\t<BlockBreadcrumb rootLabelText={ documentLabel } />\n\t\t\t\t)\n\t\t\t}\n\t\t\tactions={\n\t\t\t\t! isPreviewMode\n\t\t\t\t\t? customSavePanel || (\n\t\t\t\t\t\t\t<SavePublishPanels\n\t\t\t\t\t\t\t\tcloseEntitiesSavedStates={\n\t\t\t\t\t\t\t\t\tcloseEntitiesSavedStates\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tisEntitiesSavedStatesOpen={\n\t\t\t\t\t\t\t\t\tentitiesSavedStatesCallback\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetEntitiesSavedStatesCallback={\n\t\t\t\t\t\t\t\t\tsetEntitiesSavedStatesCallback\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tforceIsDirtyPublishPanel={ forceIsDirty }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t  )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/entities-saved-states/entity-type-list.js

@@ -3,13 +3,8 @@ import { __ } from "@wordpress/i18n";
 import { useSelect } from "@wordpress/data";
 import { PanelBody, PanelRow } from "@wordpress/components";
 import { store as coreStore } from "@wordpress/core-data";
-import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
-import { useContext } from "@wordpress/element";
+import { getGlobalStylesChanges } from "@wordpress/global-styles-engine";
 import EntityRecordItem from "./entity-record-item";
-import { unlock } from "../../lock-unlock";
-const { getGlobalStylesChanges, GlobalStylesContext } = unlock(
-  blockEditorPrivateApis
-);
 function getEntityDescription(entity, count) {
   switch (entity) {
     case "site":
@@ -24,17 +19,26 @@ function getEntityDescription(entity, count) {
   }
 }
 function GlobalStylesDescription({ record }) {
-  const { user: currentEditorGlobalStyles } = useContext(GlobalStylesContext);
-  const savedRecord = useSelect(
-    (select) => select(coreStore).getEntityRecord(
-      record.kind,
-      record.name,
-      record.key
-    ),
+  const { editedRecord, savedRecord } = useSelect(
+    (select) => {
+      const { getEditedEntityRecord, getEntityRecord } = select(coreStore);
+      return {
+        editedRecord: getEditedEntityRecord(
+          record.kind,
+          record.name,
+          record.key
+        ),
+        savedRecord: getEntityRecord(
+          record.kind,
+          record.name,
+          record.key
+        )
+      };
+    },
     [record.kind, record.name, record.key]
   );
   const globalStylesChanges = getGlobalStylesChanges(
-    currentEditorGlobalStyles,
+    editedRecord,
     savedRecord,
     {
       maxResults: 10

package/build-module/components/entities-saved-states/entity-type-list.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/entities-saved-states/entity-type-list.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { PanelBody, PanelRow } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport EntityRecordItem from './entity-record-item';\nimport { unlock } from '../../lock-unlock';\n\nconst { getGlobalStylesChanges, GlobalStylesContext } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction getEntityDescription( entity, count ) {\n\tswitch ( entity ) {\n\t\tcase 'site':\n\t\t\treturn 1 === count\n\t\t\t\t? __( 'This change will affect your whole site.' )\n\t\t\t\t: __( 'These changes will affect your whole site.' );\n\t\tcase 'wp_template':\n\t\t\treturn __(\n\t\t\t\t'This change will affect other parts of your site that use this template.'\n\t\t\t);\n\t\tcase 'page':\n\t\tcase 'post':\n\t\t\treturn __( 'The following has been modified.' );\n\t}\n}\n\nfunction GlobalStylesDescription( { record } ) {\n\tconst { user: currentEditorGlobalStyles } =\n\t\tuseContext( GlobalStylesContext );\n\tconst savedRecord = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecord(\n\t\t\t\trecord.kind,\n\t\t\t\trecord.name,\n\t\t\t\trecord.key\n\t\t\t),\n\t\t[ record.kind, record.name, record.key ]\n\t);\n\n\tconst globalStylesChanges = getGlobalStylesChanges(\n\t\tcurrentEditorGlobalStyles,\n\t\tsavedRecord,\n\t\t{\n\t\t\tmaxResults: 10,\n\t\t}\n\t);\n\treturn globalStylesChanges.length ? (\n\t\t<ul className=\"entities-saved-states__changes\">\n\t\t\t{ globalStylesChanges.map( ( change ) => (\n\t\t\t\t<li key={ change }>{ change }</li>\n\t\t\t) ) }\n\t\t</ul>\n\t) : null;\n}\n\nfunction EntityDescription( { record, count } ) {\n\tif ( 'globalStyles' === record?.name ) {\n\t\treturn null;\n\t}\n\tconst description = getEntityDescription( record?.name, count );\n\treturn description ? <PanelRow>{ description }</PanelRow> : null;\n}\n\nexport default function EntityTypeList( {\n\tlist,\n\tunselectedEntities,\n\tsetUnselectedEntities,\n} ) {\n\tconst count = list.length;\n\tconst firstRecord = list[ 0 ];\n\tconst entityConfig = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityConfig(\n\t\t\t\tfirstRecord.kind,\n\t\t\t\tfirstRecord.name\n\t\t\t),\n\t\t[ firstRecord.kind, firstRecord.name ]\n\t);\n\n\tlet entityLabel = entityConfig.label;\n\tif ( firstRecord?.name === 'wp_template_part' ) {\n\t\tentityLabel =\n\t\t\t1 === count ? __( 'Template Part' ) : __( 'Template Parts' );\n\t}\n\n\treturn (\n\t\t<PanelBody\n\t\t\ttitle={ entityLabel }\n\t\t\tinitialOpen\n\t\t\tclassName=\"entities-saved-states__panel-body\"\n\t\t>\n\t\t\t<EntityDescription record={ firstRecord } count={ count } />\n\t\t\t{ list.map( ( record ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<EntityRecordItem\n\t\t\t\t\t\tkey={ record.key || record.property }\n\t\t\t\t\t\trecord={ record }\n\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t! unselectedEntities.some(\n\t\t\t\t\t\t\t\t( elt ) =>\n\t\t\t\t\t\t\t\t\telt.kind === record.kind &&\n\t\t\t\t\t\t\t\t\telt.name === record.name &&\n\t\t\t\t\t\t\t\t\telt.key === record.key &&\n\t\t\t\t\t\t\t\t\telt.property === record.property\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tsetUnselectedEntities( record, value )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ 'globalStyles' === firstRecord?.name && (\n\t\t\t\t<GlobalStylesDescription record={ firstRecord } />\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n}\n"],
-  "mappings": "AA2DI,cAqCF,YArCE;AAxDJ,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,WAAW,gBAAgB;AACpC,SAAS,SAAS,iBAAiB;AACnC,SAAS,eAAe,8BAA8B;AACtD,SAAS,kBAAkB;AAK3B,OAAO,sBAAsB;AAC7B,SAAS,cAAc;AAEvB,MAAM,EAAE,wBAAwB,oBAAoB,IAAI;AAAA,EACvD;AACD;AAEA,SAAS,qBAAsB,QAAQ,OAAQ;AAC9C,UAAS,QAAS;AAAA,IACjB,KAAK;AACJ,aAAO,MAAM,QACV,GAAI,0CAA2C,IAC/C,GAAI,4CAA6C;AAAA,IACrD,KAAK;AACJ,aAAO;AAAA,QACN;AAAA,MACD;AAAA,IACD,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,GAAI,kCAAmC;AAAA,EAChD;AACD;AAEA,SAAS,wBAAyB,EAAE,OAAO,GAAI;AAC9C,QAAM,EAAE,MAAM,0BAA0B,IACvC,WAAY,mBAAoB;AACjC,QAAM,cAAc;AAAA,IACnB,CAAE,WACD,OAAQ,SAAU,EAAE;AAAA,MACnB,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,IACR;AAAA,IACD,CAAE,OAAO,MAAM,OAAO,MAAM,OAAO,GAAI;AAAA,EACxC;AAEA,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,MACC,YAAY;AAAA,IACb;AAAA,EACD;AACA,SAAO,oBAAoB,SAC1B,oBAAC,QAAG,WAAU,kCACX,8BAAoB,IAAK,CAAE,WAC5B,oBAAC,QAAoB,oBAAX,MAAmB,CAC5B,GACH,IACG;AACL;AAEA,SAAS,kBAAmB,EAAE,QAAQ,MAAM,GAAI;AAC/C,MAAK,mBAAmB,QAAQ,MAAO;AACtC,WAAO;AAAA,EACR;AACA,QAAM,cAAc,qBAAsB,QAAQ,MAAM,KAAM;AAC9D,SAAO,cAAc,oBAAC,YAAW,uBAAa,IAAc;AAC7D;AAEe,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,QAAQ,KAAK;AACnB,QAAM,cAAc,KAAM,CAAE;AAC5B,QAAM,eAAe;AAAA,IACpB,CAAE,WACD,OAAQ,SAAU,EAAE;AAAA,MACnB,YAAY;AAAA,MACZ,YAAY;AAAA,IACb;AAAA,IACD,CAAE,YAAY,MAAM,YAAY,IAAK;AAAA,EACtC;AAEA,MAAI,cAAc,aAAa;AAC/B,MAAK,aAAa,SAAS,oBAAqB;AAC/C,kBACC,MAAM,QAAQ,GAAI,eAAgB,IAAI,GAAI,gBAAiB;AAAA,EAC7D;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA,MACR,aAAW;AAAA,MACX,WAAU;AAAA,MAEV;AAAA,4BAAC,qBAAkB,QAAS,aAAc,OAAgB;AAAA,QACxD,KAAK,IAAK,CAAE,WAAY;AACzB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA;AAAA,cACA,SACC,CAAE,mBAAmB;AAAA,gBACpB,CAAE,QACD,IAAI,SAAS,OAAO,QACpB,IAAI,SAAS,OAAO,QACpB,IAAI,QAAQ,OAAO,OACnB,IAAI,aAAa,OAAO;AAAA,cAC1B;AAAA,cAED,UAAW,CAAE,UACZ,sBAAuB,QAAQ,KAAM;AAAA;AAAA,YAZhC,OAAO,OAAO,OAAO;AAAA,UAc5B;AAAA,QAEF,CAAE;AAAA,QACA,mBAAmB,aAAa,QACjC,oBAAC,2BAAwB,QAAS,aAAc;AAAA;AAAA;AAAA,EAElD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { PanelBody, PanelRow } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { getGlobalStylesChanges } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport EntityRecordItem from './entity-record-item';\n\nfunction getEntityDescription( entity, count ) {\n\tswitch ( entity ) {\n\t\tcase 'site':\n\t\t\treturn 1 === count\n\t\t\t\t? __( 'This change will affect your whole site.' )\n\t\t\t\t: __( 'These changes will affect your whole site.' );\n\t\tcase 'wp_template':\n\t\t\treturn __(\n\t\t\t\t'This change will affect other parts of your site that use this template.'\n\t\t\t);\n\t\tcase 'page':\n\t\tcase 'post':\n\t\t\treturn __( 'The following has been modified.' );\n\t}\n}\n\nfunction GlobalStylesDescription( { record } ) {\n\tconst { editedRecord, savedRecord } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedEntityRecord, getEntityRecord } =\n\t\t\t\tselect( coreStore );\n\t\t\treturn {\n\t\t\t\teditedRecord: getEditedEntityRecord(\n\t\t\t\t\trecord.kind,\n\t\t\t\t\trecord.name,\n\t\t\t\t\trecord.key\n\t\t\t\t),\n\t\t\t\tsavedRecord: getEntityRecord(\n\t\t\t\t\trecord.kind,\n\t\t\t\t\trecord.name,\n\t\t\t\t\trecord.key\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ record.kind, record.name, record.key ]\n\t);\n\n\tconst globalStylesChanges = getGlobalStylesChanges(\n\t\teditedRecord,\n\t\tsavedRecord,\n\t\t{\n\t\t\tmaxResults: 10,\n\t\t}\n\t);\n\treturn globalStylesChanges.length ? (\n\t\t<ul className=\"entities-saved-states__changes\">\n\t\t\t{ globalStylesChanges.map( ( change ) => (\n\t\t\t\t<li key={ change }>{ change }</li>\n\t\t\t) ) }\n\t\t</ul>\n\t) : null;\n}\n\nfunction EntityDescription( { record, count } ) {\n\tif ( 'globalStyles' === record?.name ) {\n\t\treturn null;\n\t}\n\tconst description = getEntityDescription( record?.name, count );\n\treturn description ? <PanelRow>{ description }</PanelRow> : null;\n}\n\nexport default function EntityTypeList( {\n\tlist,\n\tunselectedEntities,\n\tsetUnselectedEntities,\n} ) {\n\tconst count = list.length;\n\tconst firstRecord = list[ 0 ];\n\tconst entityConfig = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityConfig(\n\t\t\t\tfirstRecord.kind,\n\t\t\t\tfirstRecord.name\n\t\t\t),\n\t\t[ firstRecord.kind, firstRecord.name ]\n\t);\n\n\tlet entityLabel = entityConfig.label;\n\tif ( firstRecord?.name === 'wp_template_part' ) {\n\t\tentityLabel =\n\t\t\t1 === count ? __( 'Template Part' ) : __( 'Template Parts' );\n\t}\n\n\treturn (\n\t\t<PanelBody\n\t\t\ttitle={ entityLabel }\n\t\t\tinitialOpen\n\t\t\tclassName=\"entities-saved-states__panel-body\"\n\t\t>\n\t\t\t<EntityDescription record={ firstRecord } count={ count } />\n\t\t\t{ list.map( ( record ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<EntityRecordItem\n\t\t\t\t\t\tkey={ record.key || record.property }\n\t\t\t\t\t\trecord={ record }\n\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t! unselectedEntities.some(\n\t\t\t\t\t\t\t\t( elt ) =>\n\t\t\t\t\t\t\t\t\telt.kind === record.kind &&\n\t\t\t\t\t\t\t\t\telt.name === record.name &&\n\t\t\t\t\t\t\t\t\telt.key === record.key &&\n\t\t\t\t\t\t\t\t\telt.property === record.property\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tsetUnselectedEntities( record, value )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ 'globalStyles' === firstRecord?.name && (\n\t\t\t\t<GlobalStylesDescription record={ firstRecord } />\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n}\n"],
+  "mappings": "AA6DI,cAqCF,YArCE;AA1DJ,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,WAAW,gBAAgB;AACpC,SAAS,SAAS,iBAAiB;AACnC,SAAS,8BAA8B;AAKvC,OAAO,sBAAsB;AAE7B,SAAS,qBAAsB,QAAQ,OAAQ;AAC9C,UAAS,QAAS;AAAA,IACjB,KAAK;AACJ,aAAO,MAAM,QACV,GAAI,0CAA2C,IAC/C,GAAI,4CAA6C;AAAA,IACrD,KAAK;AACJ,aAAO;AAAA,QACN;AAAA,MACD;AAAA,IACD,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,GAAI,kCAAmC;AAAA,EAChD;AACD;AAEA,SAAS,wBAAyB,EAAE,OAAO,GAAI;AAC9C,QAAM,EAAE,cAAc,YAAY,IAAI;AAAA,IACrC,CAAE,WAAY;AACb,YAAM,EAAE,uBAAuB,gBAAgB,IAC9C,OAAQ,SAAU;AACnB,aAAO;AAAA,QACN,cAAc;AAAA,UACb,OAAO;AAAA,UACP,OAAO;AAAA,UACP,OAAO;AAAA,QACR;AAAA,QACA,aAAa;AAAA,UACZ,OAAO;AAAA,UACP,OAAO;AAAA,UACP,OAAO;AAAA,QACR;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,OAAO,MAAM,OAAO,MAAM,OAAO,GAAI;AAAA,EACxC;AAEA,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,MACC,YAAY;AAAA,IACb;AAAA,EACD;AACA,SAAO,oBAAoB,SAC1B,oBAAC,QAAG,WAAU,kCACX,8BAAoB,IAAK,CAAE,WAC5B,oBAAC,QAAoB,oBAAX,MAAmB,CAC5B,GACH,IACG;AACL;AAEA,SAAS,kBAAmB,EAAE,QAAQ,MAAM,GAAI;AAC/C,MAAK,mBAAmB,QAAQ,MAAO;AACtC,WAAO;AAAA,EACR;AACA,QAAM,cAAc,qBAAsB,QAAQ,MAAM,KAAM;AAC9D,SAAO,cAAc,oBAAC,YAAW,uBAAa,IAAc;AAC7D;AAEe,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,QAAQ,KAAK;AACnB,QAAM,cAAc,KAAM,CAAE;AAC5B,QAAM,eAAe;AAAA,IACpB,CAAE,WACD,OAAQ,SAAU,EAAE;AAAA,MACnB,YAAY;AAAA,MACZ,YAAY;AAAA,IACb;AAAA,IACD,CAAE,YAAY,MAAM,YAAY,IAAK;AAAA,EACtC;AAEA,MAAI,cAAc,aAAa;AAC/B,MAAK,aAAa,SAAS,oBAAqB;AAC/C,kBACC,MAAM,QAAQ,GAAI,eAAgB,IAAI,GAAI,gBAAiB;AAAA,EAC7D;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA,MACR,aAAW;AAAA,MACX,WAAU;AAAA,MAEV;AAAA,4BAAC,qBAAkB,QAAS,aAAc,OAAgB;AAAA,QACxD,KAAK,IAAK,CAAE,WAAY;AACzB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA;AAAA,cACA,SACC,CAAE,mBAAmB;AAAA,gBACpB,CAAE,QACD,IAAI,SAAS,OAAO,QACpB,IAAI,SAAS,OAAO,QACpB,IAAI,QAAQ,OAAO,OACnB,IAAI,aAAa,OAAO;AAAA,cAC1B;AAAA,cAED,UAAW,CAAE,UACZ,sBAAuB,QAAQ,KAAM;AAAA;AAAA,YAZhC,OAAO,OAAO,OAAO;AAAA,UAc5B;AAAA,QAEF,CAAE;AAAA,QACA,mBAAmB,aAAa,QACjC,oBAAC,2BAAwB,QAAS,aAAc;AAAA;AAAA;AAAA,EAElD;AAEF;",
   "names": []
 }

package/build-module/components/global-styles/block-link.js

@@ -0,0 +1,46 @@
+import { useSelect } from "@wordpress/data";
+import { useEffect } from "@wordpress/element";
+import { store as blockEditorStore } from "@wordpress/block-editor";
+import { usePrevious } from "@wordpress/compose";
+function GlobalStylesBlockLink({ path, onPathChange }) {
+  const { selectedBlockName, selectedBlockClientId } = useSelect(
+    (select) => {
+      const { getSelectedBlockClientId, getBlockName } = select(blockEditorStore);
+      const clientId = getSelectedBlockClientId();
+      return {
+        selectedBlockName: getBlockName(clientId),
+        selectedBlockClientId: clientId
+      };
+    },
+    []
+  );
+  const blockHasGlobalStyles = true;
+  const previousBlockClientId = usePrevious(selectedBlockClientId);
+  useEffect(() => {
+    if (selectedBlockClientId === previousBlockClientId) {
+      return;
+    }
+    if (!selectedBlockClientId || !blockHasGlobalStyles) {
+      return;
+    }
+    if (!path || path !== "/blocks" && !path.startsWith("/blocks/")) {
+      return;
+    }
+    const newPath = "/blocks/" + encodeURIComponent(selectedBlockName);
+    if (newPath !== path) {
+      onPathChange?.(newPath);
+    }
+  }, [
+    selectedBlockClientId,
+    previousBlockClientId,
+    selectedBlockName,
+    blockHasGlobalStyles,
+    path,
+    onPathChange
+  ]);
+  return null;
+}
+export {
+  GlobalStylesBlockLink
+};
+//# sourceMappingURL=block-link.js.map

package/build-module/components/global-styles/block-link.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/block-link.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { usePrevious } from '@wordpress/compose';\n\n/**\n * Auto-navigate to block styles when a block is selected in the canvas.\n *\n * @param {Object}   props\n * @param {string}   props.path         Current navigation path.\n * @param {Function} props.onPathChange Callback to change the navigation path.\n */\nexport function GlobalStylesBlockLink( { path, onPathChange } ) {\n\tconst { selectedBlockName, selectedBlockClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSelectedBlockClientId, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tselectedBlockName: getBlockName( clientId ),\n\t\t\t\tselectedBlockClientId: clientId,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\t// const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );\n\tconst blockHasGlobalStyles = true;\n\tconst previousBlockClientId = usePrevious( selectedBlockClientId );\n\n\t// When we're in the `Blocks` screen enable deep linking to the selected block.\n\tuseEffect( () => {\n\t\t// Only navigate when block selection changes, not when path changes\n\t\tif ( selectedBlockClientId === previousBlockClientId ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {\n\t\t\treturn;\n\t\t}\n\t\tif (\n\t\t\t! path ||\n\t\t\t( path !== '/blocks' && ! path.startsWith( '/blocks/' ) )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tconst newPath = '/blocks/' + encodeURIComponent( selectedBlockName );\n\t\t// Avoid navigating to the same path. This can happen when selecting\n\t\t// a new block of the same type.\n\t\tif ( newPath !== path ) {\n\t\t\tonPathChange?.( newPath );\n\t\t}\n\t}, [\n\t\tselectedBlockClientId,\n\t\tpreviousBlockClientId,\n\t\tselectedBlockName,\n\t\tblockHasGlobalStyles,\n\t\tpath,\n\t\tonPathChange,\n\t] );\n\n\treturn null;\n}\n"],
+  "mappings": "AAGA,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,mBAAmB;AASrB,SAAS,sBAAuB,EAAE,MAAM,aAAa,GAAI;AAC/D,QAAM,EAAE,mBAAmB,sBAAsB,IAAI;AAAA,IACpD,CAAE,WAAY;AACb,YAAM,EAAE,0BAA0B,aAAa,IAC9C,OAAQ,gBAAiB;AAC1B,YAAM,WAAW,yBAAyB;AAC1C,aAAO;AAAA,QACN,mBAAmB,aAAc,QAAS;AAAA,QAC1C,uBAAuB;AAAA,MACxB;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAGA,QAAM,uBAAuB;AAC7B,QAAM,wBAAwB,YAAa,qBAAsB;AAGjE,YAAW,MAAM;AAEhB,QAAK,0BAA0B,uBAAwB;AACtD;AAAA,IACD;AACA,QAAK,CAAE,yBAAyB,CAAE,sBAAuB;AACxD;AAAA,IACD;AACA,QACC,CAAE,QACA,SAAS,aAAa,CAAE,KAAK,WAAY,UAAW,GACrD;AACD;AAAA,IACD;AACA,UAAM,UAAU,aAAa,mBAAoB,iBAAkB;AAGnE,QAAK,YAAY,MAAO;AACvB,qBAAgB,OAAQ;AAAA,IACzB;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,SAAO;AACR;",
+  "names": []
+}

package/build-module/components/global-styles/header.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack,
+  __experimentalSpacer as Spacer,
+  __experimentalHeading as Heading,
+  __experimentalView as View,
+  Navigator
+} from "@wordpress/components";
+import { isRTL, __ } from "@wordpress/i18n";
+import { chevronRight, chevronLeft } from "@wordpress/icons";
+function ScreenHeader({ title, description, onBack }) {
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 0, children: [
+    /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(Spacer, { marginBottom: 0, paddingX: 4, paddingY: 3, children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
+      /* @__PURE__ */ jsx(
+        Navigator.BackButton,
+        {
+          icon: isRTL() ? chevronRight : chevronLeft,
+          size: "small",
+          label: __("Back"),
+          onClick: onBack
+        }
+      ),
+      /* @__PURE__ */ jsx(Spacer, { children: /* @__PURE__ */ jsx(
+        Heading,
+        {
+          className: "editor-global-styles-header",
+          level: 2,
+          size: 13,
+          children: title
+        }
+      ) })
+    ] }) }) }),
+    description && /* @__PURE__ */ jsx("p", { className: "editor-global-styles-header__description", children: description })
+  ] });
+}
+var header_default = ScreenHeader;
+export {
+  header_default as default
+};
+//# sourceMappingURL=header.js.map

package/build-module/components/global-styles/header.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/header.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title, description, onBack } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"editor-global-styles-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"editor-global-styles-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default ScreenHeader;\n"],
+  "mappings": "AAmBK,SACC,KADD;AAhBL;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAE1C,SAAS,aAAc,EAAE,OAAO,aAAa,OAAO,GAAI;AACvD,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,QACA,8BAAC,UAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,+BAAC,UAAO,SAAU,GACjB;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACA,MAAO,MAAM,IAAI,eAAe;AAAA,UAChC,MAAK;AAAA,UACL,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,UACA;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAQ;AAAA,UACR,MAAO;AAAA,UAEL;AAAA;AAAA,MACH,GACD;AAAA,OACD,GACD,GACD;AAAA,IACE,eACD,oBAAC,OAAE,WAAU,4CACV,uBACH;AAAA,KAEF;AAEF;AAEA,IAAO,iBAAQ;",
+  "names": []
+}

package/build-module/components/global-styles/hooks.js

@@ -0,0 +1,154 @@
+import { useMemo, useCallback } from "@wordpress/element";
+import {
+  mergeGlobalStyles,
+  getStyle,
+  getSetting
+} from "@wordpress/global-styles-engine";
+import { store as coreStore } from "@wordpress/core-data";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { unlock } from "../../lock-unlock";
+const { cleanEmptyObject } = unlock(blockEditorPrivateApis);
+function useGlobalStylesUserConfig() {
+  const { globalStylesId, isReady, settings, styles, _links } = useSelect(
+    (select) => {
+      const {
+        getEntityRecord,
+        getEditedEntityRecord: getEditedEntityRecord2,
+        hasFinishedResolution,
+        canUser
+      } = select(coreStore);
+      const _globalStylesId = select(coreStore).__experimentalGetCurrentGlobalStylesId();
+      let record;
+      const userCanEditGlobalStyles = _globalStylesId ? canUser("update", {
+        kind: "root",
+        name: "globalStyles",
+        id: _globalStylesId
+      }) : null;
+      if (_globalStylesId && typeof userCanEditGlobalStyles === "boolean") {
+        if (userCanEditGlobalStyles) {
+          record = getEditedEntityRecord2(
+            "root",
+            "globalStyles",
+            _globalStylesId
+          );
+        } else {
+          record = getEntityRecord(
+            "root",
+            "globalStyles",
+            _globalStylesId,
+            { context: "view" }
+          );
+        }
+      }
+      let hasResolved = false;
+      if (hasFinishedResolution(
+        "__experimentalGetCurrentGlobalStylesId"
+      )) {
+        if (_globalStylesId) {
+          hasResolved = userCanEditGlobalStyles ? hasFinishedResolution("getEditedEntityRecord", [
+            "root",
+            "globalStyles",
+            _globalStylesId
+          ]) : hasFinishedResolution("getEntityRecord", [
+            "root",
+            "globalStyles",
+            _globalStylesId,
+            { context: "view" }
+          ]);
+        } else {
+          hasResolved = true;
+        }
+      }
+      return {
+        globalStylesId: _globalStylesId,
+        isReady: hasResolved,
+        settings: record?.settings,
+        styles: record?.styles,
+        _links: record?._links
+      };
+    },
+    []
+  );
+  const { getEditedEntityRecord } = useSelect(coreStore);
+  const { editEntityRecord } = useDispatch(coreStore);
+  const config = useMemo(() => {
+    return {
+      settings: settings ?? {},
+      styles: styles ?? {},
+      _links: _links ?? {}
+    };
+  }, [settings, styles, _links]);
+  const setConfig = useCallback(
+    (callbackOrObject, options = {}) => {
+      const record = getEditedEntityRecord(
+        "root",
+        "globalStyles",
+        globalStylesId
+      );
+      const currentConfig = {
+        styles: record?.styles ?? {},
+        settings: record?.settings ?? {},
+        _links: record?._links ?? {}
+      };
+      const updatedConfig = typeof callbackOrObject === "function" ? callbackOrObject(currentConfig) : callbackOrObject;
+      editEntityRecord(
+        "root",
+        "globalStyles",
+        globalStylesId,
+        {
+          styles: cleanEmptyObject(updatedConfig.styles) || {},
+          settings: cleanEmptyObject(updatedConfig.settings) || {},
+          _links: cleanEmptyObject(updatedConfig._links) || {}
+        },
+        options
+      );
+    },
+    [globalStylesId, editEntityRecord, getEditedEntityRecord]
+  );
+  return [isReady, config, setConfig];
+}
+function useGlobalStylesBaseConfig() {
+  const baseConfig = useSelect(
+    (select) => select(coreStore).__experimentalGetCurrentThemeBaseGlobalStyles(),
+    []
+  );
+  return [!!baseConfig, baseConfig];
+}
+function useGlobalStyles() {
+  const [isUserConfigReady, userConfig, setUserConfig] = useGlobalStylesUserConfig();
+  const [isBaseConfigReady, baseConfig] = useGlobalStylesBaseConfig();
+  const merged = useMemo(() => {
+    if (!isUserConfigReady || !isBaseConfigReady) {
+      return {};
+    }
+    return mergeGlobalStyles(baseConfig || {}, userConfig);
+  }, [isUserConfigReady, isBaseConfigReady, baseConfig, userConfig]);
+  return {
+    merged,
+    base: baseConfig || {},
+    user: userConfig,
+    setUser: setUserConfig,
+    isReady: isUserConfigReady && isBaseConfigReady
+  };
+}
+function useStyle(path, blockName) {
+  const { merged } = useGlobalStyles();
+  return useMemo(
+    () => getStyle(merged, path, blockName),
+    [merged, path, blockName]
+  );
+}
+function useSetting(path, blockName) {
+  const { merged } = useGlobalStyles();
+  return useMemo(
+    () => getSetting(merged, path, blockName),
+    [merged, path, blockName]
+  );
+}
+export {
+  useGlobalStyles,
+  useSetting,
+  useStyle
+};
+//# sourceMappingURL=hooks.js.map

package/build-module/components/global-styles/hooks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/hooks.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback } from '@wordpress/element';\nimport {\n\tmergeGlobalStyles,\n\tgetStyle,\n\tgetSetting,\n} from '@wordpress/global-styles-engine';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { cleanEmptyObject } = unlock( blockEditorPrivateApis );\n\n/**\n * Hook to fetch and manage user global styles config\n */\nfunction useGlobalStylesUserConfig() {\n\tconst { globalStylesId, isReady, settings, styles, _links } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecord,\n\t\t\t\tgetEditedEntityRecord,\n\t\t\t\thasFinishedResolution,\n\t\t\t\tcanUser,\n\t\t\t} = select( coreStore );\n\t\t\tconst _globalStylesId =\n\t\t\t\tselect( coreStore ).__experimentalGetCurrentGlobalStylesId();\n\n\t\t\tlet record;\n\n\t\t\tconst userCanEditGlobalStyles = _globalStylesId\n\t\t\t\t? canUser( 'update', {\n\t\t\t\t\t\tkind: 'root',\n\t\t\t\t\t\tname: 'globalStyles',\n\t\t\t\t\t\tid: _globalStylesId,\n\t\t\t\t  } )\n\t\t\t\t: null;\n\n\t\t\tif (\n\t\t\t\t_globalStylesId &&\n\t\t\t\ttypeof userCanEditGlobalStyles === 'boolean'\n\t\t\t) {\n\t\t\t\tif ( userCanEditGlobalStyles ) {\n\t\t\t\t\trecord = getEditedEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t_globalStylesId\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\trecord = getEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t{ context: 'view' }\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlet hasResolved = false;\n\t\t\tif (\n\t\t\t\thasFinishedResolution(\n\t\t\t\t\t'__experimentalGetCurrentGlobalStylesId'\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tif ( _globalStylesId ) {\n\t\t\t\t\thasResolved = userCanEditGlobalStyles\n\t\t\t\t\t\t? hasFinishedResolution( 'getEditedEntityRecord', [\n\t\t\t\t\t\t\t\t'root',\n\t\t\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t  ] )\n\t\t\t\t\t\t: hasFinishedResolution( 'getEntityRecord', [\n\t\t\t\t\t\t\t\t'root',\n\t\t\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t\t\t{ context: 'view' },\n\t\t\t\t\t\t  ] );\n\t\t\t\t} else {\n\t\t\t\t\thasResolved = true;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tglobalStylesId: _globalStylesId,\n\t\t\t\tisReady: hasResolved,\n\t\t\t\tsettings: record?.settings,\n\t\t\t\tstyles: record?.styles,\n\t\t\t\t_links: record?._links,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { getEditedEntityRecord } = useSelect( coreStore );\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\n\tconst config = useMemo( () => {\n\t\treturn {\n\t\t\tsettings: settings ?? {},\n\t\t\tstyles: styles ?? {},\n\t\t\t_links: _links ?? {},\n\t\t};\n\t}, [ settings, styles, _links ] );\n\n\tconst setConfig = useCallback(\n\t\t( callbackOrObject, options = {} ) => {\n\t\t\tconst record = getEditedEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId\n\t\t\t);\n\n\t\t\tconst currentConfig = {\n\t\t\t\tstyles: record?.styles ?? {},\n\t\t\t\tsettings: record?.settings ?? {},\n\t\t\t\t_links: record?._links ?? {},\n\t\t\t};\n\n\t\t\tconst updatedConfig =\n\t\t\t\ttypeof callbackOrObject === 'function'\n\t\t\t\t\t? callbackOrObject( currentConfig )\n\t\t\t\t\t: callbackOrObject;\n\n\t\t\teditEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId,\n\t\t\t\t{\n\t\t\t\t\tstyles: cleanEmptyObject( updatedConfig.styles ) || {},\n\t\t\t\t\tsettings: cleanEmptyObject( updatedConfig.settings ) || {},\n\t\t\t\t\t_links: cleanEmptyObject( updatedConfig._links ) || {},\n\t\t\t\t},\n\t\t\t\toptions\n\t\t\t);\n\t\t},\n\t\t[ globalStylesId, editEntityRecord, getEditedEntityRecord ]\n\t);\n\n\treturn [ isReady, config, setConfig ];\n}\n\n/**\n * Hook to fetch base/theme global styles config\n */\nfunction useGlobalStylesBaseConfig() {\n\tconst baseConfig = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),\n\t\t[]\n\t);\n\treturn [ !! baseConfig, baseConfig ];\n}\n\n/**\n * Hook to get merged global styles configuration\n *\n * @return {Object} Object containing merged, base, user configs and setUser function\n *                  { merged, base, user, setUser }\n */\nexport function useGlobalStyles() {\n\tconst [ isUserConfigReady, userConfig, setUserConfig ] =\n\t\tuseGlobalStylesUserConfig();\n\tconst [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();\n\n\tconst merged = useMemo( () => {\n\t\tif ( ! isUserConfigReady || ! isBaseConfigReady ) {\n\t\t\treturn {};\n\t\t}\n\t\treturn mergeGlobalStyles( baseConfig || {}, userConfig );\n\t}, [ isUserConfigReady, isBaseConfigReady, baseConfig, userConfig ] );\n\n\treturn {\n\t\tmerged,\n\t\tbase: baseConfig || {},\n\t\tuser: userConfig,\n\t\tsetUser: setUserConfig,\n\t\tisReady: isUserConfigReady && isBaseConfigReady,\n\t};\n}\n\n/**\n * Hook to get a style value from global styles\n *\n * @param {string} path      Style path (e.g., 'color.background')\n * @param {string} blockName Optional block name\n * @return {*} Style value\n */\nexport function useStyle( path, blockName ) {\n\tconst { merged } = useGlobalStyles();\n\treturn useMemo(\n\t\t() => getStyle( merged, path, blockName ),\n\t\t[ merged, path, blockName ]\n\t);\n}\n\n/**\n * Hook to get a setting value from global styles\n *\n * @param {string} path      Setting path (e.g., 'spacing.blockGap')\n * @param {string} blockName Optional block name\n * @return {*} Setting value\n */\nexport function useSetting( path, blockName ) {\n\tconst { merged } = useGlobalStyles();\n\treturn useMemo(\n\t\t() => getSetting( merged, path, blockName ),\n\t\t[ merged, path, blockName ]\n\t);\n}\n"],
+  "mappings": "AAGA,SAAS,SAAS,mBAAmB;AACrC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,iBAAiB;AACnC,SAAS,WAAW,mBAAmB;AACvC,SAAS,eAAe,8BAA8B;AAKtD,SAAS,cAAc;AAEvB,MAAM,EAAE,iBAAiB,IAAI,OAAQ,sBAAuB;AAK5D,SAAS,4BAA4B;AACpC,QAAM,EAAE,gBAAgB,SAAS,UAAU,QAAQ,OAAO,IAAI;AAAA,IAC7D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA,uBAAAA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,SAAU;AACtB,YAAM,kBACL,OAAQ,SAAU,EAAE,uCAAuC;AAE5D,UAAI;AAEJ,YAAM,0BAA0B,kBAC7B,QAAS,UAAU;AAAA,QACnB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,MACJ,CAAE,IACF;AAEH,UACC,mBACA,OAAO,4BAA4B,WAClC;AACD,YAAK,yBAA0B;AAC9B,mBAASA;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD,OAAO;AACN,mBAAS;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA,EAAE,SAAS,OAAO;AAAA,UACnB;AAAA,QACD;AAAA,MACD;AAEA,UAAI,cAAc;AAClB,UACC;AAAA,QACC;AAAA,MACD,GACC;AACD,YAAK,iBAAkB;AACtB,wBAAc,0BACX,sBAAuB,yBAAyB;AAAA,YAChD;AAAA,YACA;AAAA,YACA;AAAA,UACA,CAAE,IACF,sBAAuB,mBAAmB;AAAA,YAC1C;AAAA,YACA;AAAA,YACA;AAAA,YACA,EAAE,SAAS,OAAO;AAAA,UAClB,CAAE;AAAA,QACN,OAAO;AACN,wBAAc;AAAA,QACf;AAAA,MACD;AAEA,aAAO;AAAA,QACN,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,UAAU,QAAQ;AAAA,QAClB,QAAQ,QAAQ;AAAA,QAChB,QAAQ,QAAQ;AAAA,MACjB;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,EAAE,sBAAsB,IAAI,UAAW,SAAU;AACvD,QAAM,EAAE,iBAAiB,IAAI,YAAa,SAAU;AAEpD,QAAM,SAAS,QAAS,MAAM;AAC7B,WAAO;AAAA,MACN,UAAU,YAAY,CAAC;AAAA,MACvB,QAAQ,UAAU,CAAC;AAAA,MACnB,QAAQ,UAAU,CAAC;AAAA,IACpB;AAAA,EACD,GAAG,CAAE,UAAU,QAAQ,MAAO,CAAE;AAEhC,QAAM,YAAY;AAAA,IACjB,CAAE,kBAAkB,UAAU,CAAC,MAAO;AACrC,YAAM,SAAS;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAEA,YAAM,gBAAgB;AAAA,QACrB,QAAQ,QAAQ,UAAU,CAAC;AAAA,QAC3B,UAAU,QAAQ,YAAY,CAAC;AAAA,QAC/B,QAAQ,QAAQ,UAAU,CAAC;AAAA,MAC5B;AAEA,YAAM,gBACL,OAAO,qBAAqB,aACzB,iBAAkB,aAAc,IAChC;AAEJ;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACC,QAAQ,iBAAkB,cAAc,MAAO,KAAK,CAAC;AAAA,UACrD,UAAU,iBAAkB,cAAc,QAAS,KAAK,CAAC;AAAA,UACzD,QAAQ,iBAAkB,cAAc,MAAO,KAAK,CAAC;AAAA,QACtD;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,gBAAgB,kBAAkB,qBAAsB;AAAA,EAC3D;AAEA,SAAO,CAAE,SAAS,QAAQ,SAAU;AACrC;AAKA,SAAS,4BAA4B;AACpC,QAAM,aAAa;AAAA,IAClB,CAAE,WACD,OAAQ,SAAU,EAAE,8CAA8C;AAAA,IACnE,CAAC;AAAA,EACF;AACA,SAAO,CAAE,CAAC,CAAE,YAAY,UAAW;AACpC;AAQO,SAAS,kBAAkB;AACjC,QAAM,CAAE,mBAAmB,YAAY,aAAc,IACpD,0BAA0B;AAC3B,QAAM,CAAE,mBAAmB,UAAW,IAAI,0BAA0B;AAEpE,QAAM,SAAS,QAAS,MAAM;AAC7B,QAAK,CAAE,qBAAqB,CAAE,mBAAoB;AACjD,aAAO,CAAC;AAAA,IACT;AACA,WAAO,kBAAmB,cAAc,CAAC,GAAG,UAAW;AAAA,EACxD,GAAG,CAAE,mBAAmB,mBAAmB,YAAY,UAAW,CAAE;AAEpE,SAAO;AAAA,IACN;AAAA,IACA,MAAM,cAAc,CAAC;AAAA,IACrB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS,qBAAqB;AAAA,EAC/B;AACD;AASO,SAAS,SAAU,MAAM,WAAY;AAC3C,QAAM,EAAE,OAAO,IAAI,gBAAgB;AACnC,SAAO;AAAA,IACN,MAAM,SAAU,QAAQ,MAAM,SAAU;AAAA,IACxC,CAAE,QAAQ,MAAM,SAAU;AAAA,EAC3B;AACD;AASO,SAAS,WAAY,MAAM,WAAY;AAC7C,QAAM,EAAE,OAAO,IAAI,gBAAgB;AACnC,SAAO;AAAA,IACN,MAAM,WAAY,QAAQ,MAAM,SAAU;AAAA,IAC1C,CAAE,QAAQ,MAAM,SAAU;AAAA,EAC3B;AACD;",
+  "names": ["getEditedEntityRecord"]
+}

package/build-module/components/global-styles/index.js

@@ -0,0 +1,112 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { store as coreStore } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { useMemo } from "@wordpress/element";
+import { GlobalStylesUI } from "@wordpress/global-styles-ui";
+import { uploadMedia } from "@wordpress/media-utils";
+import { store as editorStore } from "../../store";
+import { GlobalStylesBlockLink } from "./block-link";
+import { useGlobalStyles } from "./hooks";
+function useServerData() {
+  const {
+    styles,
+    __unstableResolvedAssets,
+    colors,
+    gradients,
+    __experimentalDiscussionSettings,
+    mediaUploadHandler,
+    fontLibraryEnabled
+  } = useSelect((select) => {
+    const { getEditorSettings } = select(editorStore);
+    const { canUser } = select(coreStore);
+    const editorSettings = getEditorSettings();
+    const canUserUploadMedia = canUser("create", {
+      kind: "root",
+      name: "media"
+    });
+    return {
+      styles: editorSettings?.styles || [],
+      __unstableResolvedAssets: editorSettings?.__unstableResolvedAssets || {},
+      colors: editorSettings?.colors || [],
+      gradients: editorSettings?.gradients || [],
+      __experimentalDiscussionSettings: editorSettings?.__experimentalDiscussionSettings,
+      mediaUploadHandler: canUserUploadMedia ? uploadMedia : void 0,
+      fontLibraryEnabled: editorSettings?.fontLibraryEnabled ?? true
+    };
+  }, []);
+  const serverCSS = useMemo(() => {
+    if (!styles) {
+      return [];
+    }
+    return styles.filter((style) => !style.isGlobalStyles);
+  }, [styles]);
+  const serverSettings = useMemo(() => {
+    return {
+      __unstableResolvedAssets,
+      settings: {
+        color: {
+          palette: {
+            theme: colors
+          },
+          gradients: {
+            theme: gradients
+          },
+          duotone: {
+            theme: []
+          }
+        }
+      },
+      __experimentalDiscussionSettings,
+      mediaUpload: mediaUploadHandler
+    };
+  }, [
+    __unstableResolvedAssets,
+    colors,
+    gradients,
+    __experimentalDiscussionSettings,
+    mediaUploadHandler
+  ]);
+  return { serverCSS, serverSettings, fontLibraryEnabled };
+}
+function GlobalStylesUIWrapper({ path, onPathChange }) {
+  const {
+    user: userConfig,
+    base: baseConfig,
+    setUser: setUserConfig,
+    isReady
+  } = useGlobalStyles();
+  const { serverCSS, serverSettings, fontLibraryEnabled } = useServerData();
+  if (!isReady) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      GlobalStylesUI,
+      {
+        value: userConfig,
+        baseValue: baseConfig || {},
+        onChange: setUserConfig,
+        path,
+        onPathChange,
+        fontLibraryEnabled,
+        serverCSS,
+        serverSettings
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GlobalStylesBlockLink,
+      {
+        path,
+        onPathChange
+      }
+    )
+  ] });
+}
+import { useGlobalStyles as useGlobalStyles2, useStyle, useSetting } from "./hooks";
+export {
+  GlobalStylesUIWrapper as default,
+  useGlobalStyles2 as useGlobalStyles,
+  useSetting,
+  useStyle
+};
+//# sourceMappingURL=index.js.map