@wordpress/editor 14.33.3 → 14.34.0

package/build-module/components/global-styles-sidebar/default-sidebar.js

@@ -0,0 +1,49 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ComplementaryArea,
+  ComplementaryAreaMoreMenuItem
+} from "@wordpress/interface";
+function DefaultSidebar({
+  className,
+  identifier,
+  title,
+  icon,
+  children,
+  closeLabel,
+  header,
+  headerClassName,
+  panelClassName,
+  isActiveByDefault
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ComplementaryArea,
+      {
+        className,
+        scope: "core",
+        identifier,
+        title,
+        icon,
+        closeLabel,
+        header,
+        headerClassName,
+        panelClassName,
+        isActiveByDefault,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ComplementaryAreaMoreMenuItem,
+      {
+        scope: "core",
+        identifier,
+        icon,
+        children: title
+      }
+    )
+  ] });
+}
+export {
+  DefaultSidebar as default
+};
+//# sourceMappingURL=default-sidebar.js.map

package/build-module/components/global-styles-sidebar/default-sidebar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/default-sidebar.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tComplementaryArea,\n\tComplementaryAreaMoreMenuItem,\n} from '@wordpress/interface';\n\nexport default function DefaultSidebar( {\n\tclassName,\n\tidentifier,\n\ttitle,\n\ticon,\n\tchildren,\n\tcloseLabel,\n\theader,\n\theaderClassName,\n\tpanelClassName,\n\tisActiveByDefault,\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<ComplementaryArea\n\t\t\t\tclassName={ className }\n\t\t\t\tscope=\"core\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ttitle={ title }\n\t\t\t\ticon={ icon }\n\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\theader={ header }\n\t\t\t\theaderClassName={ headerClassName }\n\t\t\t\tpanelClassName={ panelClassName }\n\t\t\t\tisActiveByDefault={ isActiveByDefault }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</ComplementaryArea>\n\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\tscope=\"core\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ticon={ icon }\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "AAqBE,mBACC,KADD;AAlBF;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAEQ,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
+  "names": []
+}

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

@@ -0,0 +1,152 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FlexItem, Flex, Button } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { styles, seen, backup } from "@wordpress/icons";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { useEffect } from "@wordpress/element";
+import { store as preferencesStore } from "@wordpress/preferences";
+import { useViewportMatch, usePrevious } from "@wordpress/compose";
+import { store as coreStore } from "@wordpress/core-data";
+import { store as interfaceStore } from "@wordpress/interface";
+import GlobalStylesUI from "../global-styles";
+import { GlobalStylesActionMenu } from "../global-styles/menu";
+import { store as editorStore } from "../../store";
+import { unlock } from "../../lock-unlock";
+import DefaultSidebar from "./default-sidebar";
+import WelcomeGuideStyles from "./welcome-guide";
+function GlobalStylesSidebar() {
+  const {
+    shouldResetNavigation,
+    stylesPath,
+    showStylebook,
+    showListViewByDefault,
+    hasRevisions,
+    activeComplementaryArea
+  } = useSelect((select) => {
+    const { getActiveComplementaryArea } = select(interfaceStore);
+    const { getStylesPath, getShowStylebook } = unlock(
+      select(editorStore)
+    );
+    const _isVisualEditorMode = "visual" === select(editorStore).getEditorMode();
+    const _showListViewByDefault = select(preferencesStore).get(
+      "core",
+      "showListViewByDefault"
+    );
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(coreStore);
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
+    return {
+      stylesPath: getStylesPath(),
+      showStylebook: getShowStylebook(),
+      shouldResetNavigation: "edit-site/global-styles" !== getActiveComplementaryArea("core") || !_isVisualEditorMode,
+      showListViewByDefault: _showListViewByDefault,
+      hasRevisions: !!globalStyles?._links?.["version-history"]?.[0]?.count,
+      activeComplementaryArea: select(interfaceStore).getActiveComplementaryArea("core")
+    };
+  }, []);
+  const { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(
+    useDispatch(editorStore)
+  );
+  const isMobileViewport = useViewportMatch("medium", "<");
+  const isRevisionsOpened = stylesPath.startsWith("/revisions") && !showStylebook;
+  const isRevisionsStyleBookOpened = stylesPath.startsWith("/revisions") && showStylebook;
+  const previousActiveArea = usePrevious(activeComplementaryArea);
+  useEffect(() => {
+    if (activeComplementaryArea === "edit-site/global-styles" && previousActiveArea !== "edit-site/global-styles") {
+      resetStylesNavigation();
+    }
+  }, [activeComplementaryArea, previousActiveArea, resetStylesNavigation]);
+  useEffect(() => {
+    if (shouldResetNavigation) {
+      resetStylesNavigation();
+    }
+  }, [shouldResetNavigation, resetStylesNavigation]);
+  const { setIsListViewOpened } = useDispatch(editorStore);
+  const toggleRevisions = () => {
+    setIsListViewOpened(false);
+    if (isRevisionsOpened || isRevisionsStyleBookOpened) {
+      setStylesPath("/");
+    } else {
+      setStylesPath("/revisions");
+    }
+  };
+  const toggleStyleBook = () => {
+    setIsListViewOpened(showStylebook && showListViewByDefault);
+    setShowStylebook(!showStylebook);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DefaultSidebar,
+      {
+        className: "editor-global-styles-sidebar",
+        identifier: "edit-site/global-styles",
+        title: __("Styles"),
+        icon: styles,
+        closeLabel: __("Close Styles"),
+        panelClassName: "editor-global-styles-sidebar__panel",
+        header: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            className: "editor-global-styles-sidebar__header",
+            gap: 1,
+            children: [
+              /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx("h2", { className: "editor-global-styles-sidebar__header-title", children: __("Styles") }) }),
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  justify: "flex-end",
+                  gap: 1,
+                  className: "editor-global-styles-sidebar__header-actions",
+                  children: [
+                    !isMobileViewport && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        icon: seen,
+                        label: __("Style Book"),
+                        isPressed: showStylebook,
+                        accessibleWhenDisabled: true,
+                        disabled: shouldResetNavigation,
+                        onClick: toggleStyleBook,
+                        size: "compact"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        label: __("Revisions"),
+                        icon: backup,
+                        onClick: toggleRevisions,
+                        accessibleWhenDisabled: true,
+                        disabled: !hasRevisions,
+                        isPressed: isRevisionsOpened || isRevisionsStyleBookOpened,
+                        size: "compact"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      GlobalStylesActionMenu,
+                      {
+                        onChangePath: setStylesPath
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ jsx(
+          GlobalStylesUI,
+          {
+            path: stylesPath,
+            onPathChange: setStylesPath
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(WelcomeGuideStyles, {})
+  ] });
+}
+export {
+  GlobalStylesSidebar as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { FlexItem, Flex, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen, backup } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { useViewportMatch, usePrevious } from '@wordpress/compose';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport GlobalStylesUI from '../global-styles';\nimport { GlobalStylesActionMenu } from '../global-styles/menu';\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport DefaultSidebar from './default-sidebar';\nimport WelcomeGuideStyles from './welcome-guide';\n\nexport default function GlobalStylesSidebar() {\n\tconst {\n\t\tshouldResetNavigation,\n\t\tstylesPath,\n\t\tshowStylebook,\n\t\tshowListViewByDefault,\n\t\thasRevisions,\n\t\tactiveComplementaryArea,\n\t} = useSelect( ( select ) => {\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\t\tconst { getStylesPath, getShowStylebook } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\tconst _isVisualEditorMode =\n\t\t\t'visual' === select( editorStore ).getEditorMode();\n\t\tconst _showListViewByDefault = select( preferencesStore ).get(\n\t\t\t'core',\n\t\t\t'showListViewByDefault'\n\t\t);\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tstylesPath: getStylesPath(),\n\t\t\tshowStylebook: getShowStylebook(),\n\t\t\tshouldResetNavigation:\n\t\t\t\t'edit-site/global-styles' !==\n\t\t\t\t\tgetActiveComplementaryArea( 'core' ) ||\n\t\t\t\t! _isVisualEditorMode,\n\t\t\tshowListViewByDefault: _showListViewByDefault,\n\t\t\thasRevisions:\n\t\t\t\t!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,\n\t\t\tactiveComplementaryArea:\n\t\t\t\tselect( interfaceStore ).getActiveComplementaryArea( 'core' ),\n\t\t};\n\t}, [] );\n\tconst { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(\n\t\tuseDispatch( editorStore )\n\t);\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\t// Derive state from path and showStylebook\n\tconst isRevisionsOpened =\n\t\tstylesPath.startsWith( '/revisions' ) && ! showStylebook;\n\tconst isRevisionsStyleBookOpened =\n\t\tstylesPath.startsWith( '/revisions' ) && showStylebook;\n\n\tconst previousActiveArea = usePrevious( activeComplementaryArea );\n\n\t// Reset navigation when sidebar opens\n\tuseEffect( () => {\n\t\tif (\n\t\t\tactiveComplementaryArea === 'edit-site/global-styles' &&\n\t\t\tpreviousActiveArea !== 'edit-site/global-styles'\n\t\t) {\n\t\t\tresetStylesNavigation();\n\t\t}\n\t}, [ activeComplementaryArea, previousActiveArea, resetStylesNavigation ] );\n\n\tuseEffect( () => {\n\t\tif ( shouldResetNavigation ) {\n\t\t\tresetStylesNavigation();\n\t\t}\n\t}, [ shouldResetNavigation, resetStylesNavigation ] );\n\n\tconst { setIsListViewOpened } = useDispatch( editorStore );\n\n\tconst toggleRevisions = () => {\n\t\tsetIsListViewOpened( false );\n\t\tif ( isRevisionsOpened || isRevisionsStyleBookOpened ) {\n\t\t\t// Close revisions, go back to root\n\t\t\tsetStylesPath( '/' );\n\t\t} else {\n\t\t\t// Open revisions\n\t\t\tsetStylesPath( '/revisions' );\n\t\t}\n\t};\n\tconst toggleStyleBook = () => {\n\t\tsetIsListViewOpened( showStylebook && showListViewByDefault );\n\t\tsetShowStylebook( ! showStylebook );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<DefaultSidebar\n\t\t\t\tclassName=\"editor-global-styles-sidebar\"\n\t\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\t\ttitle={ __( 'Styles' ) }\n\t\t\t\ticon={ styles }\n\t\t\t\tcloseLabel={ __( 'Close Styles' ) }\n\t\t\t\tpanelClassName=\"editor-global-styles-sidebar__panel\"\n\t\t\t\theader={\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"editor-global-styles-sidebar__header\"\n\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<h2 className=\"editor-global-styles-sidebar__header-title\">\n\t\t\t\t\t\t\t\t{ __( 'Styles' ) }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\tclassName=\"editor-global-styles-sidebar__header-actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\t\t\t\tisPressed={ showStylebook }\n\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\tdisabled={ shouldResetNavigation }\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleStyleBook }\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Revisions' ) }\n\t\t\t\t\t\t\t\t\ticon={ backup }\n\t\t\t\t\t\t\t\t\tonClick={ toggleRevisions }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tdisabled={ ! hasRevisions }\n\t\t\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\t\t\tisRevisionsOpened ||\n\t\t\t\t\t\t\t\t\t\tisRevisionsStyleBookOpened\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<GlobalStylesActionMenu\n\t\t\t\t\t\t\t\tonChangePath={ setStylesPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</Flex>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<GlobalStylesUI\n\t\t\t\t\tpath={ stylesPath }\n\t\t\t\t\tonPathChange={ setStylesPath }\n\t\t\t\t/>\n\t\t\t</DefaultSidebar>\n\t\t\t<WelcomeGuideStyles />\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/components/global-styles-sidebar/welcome-guide-image.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function WelcomeGuideImage({ nonAnimatedSrc, animatedSrc }) {
+  return /* @__PURE__ */ jsxs("picture", { className: "editor-welcome-guide__image", children: [
+    /* @__PURE__ */ jsx(
+      "source",
+      {
+        srcSet: nonAnimatedSrc,
+        media: "(prefers-reduced-motion: reduce)"
+      }
+    ),
+    /* @__PURE__ */ jsx("img", { src: animatedSrc, width: "312", height: "240", alt: "" })
+  ] });
+}
+export {
+  WelcomeGuideImage as default
+};
+//# sourceMappingURL=welcome-guide-image.js.map

package/build-module/components/global-styles-sidebar/welcome-guide-image.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/welcome-guide-image.js"],
+  "sourcesContent": ["export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {\n\treturn (\n\t\t<picture className=\"editor-welcome-guide__image\">\n\t\t\t<source\n\t\t\t\tsrcSet={ nonAnimatedSrc }\n\t\t\t\tmedia=\"(prefers-reduced-motion: reduce)\"\n\t\t\t/>\n\t\t\t<img src={ animatedSrc } width=\"312\" height=\"240\" alt=\"\" />\n\t\t</picture>\n\t);\n}\n"],
+  "mappings": "AAEE,SACC,KADD;AAFa,SAAR,kBAAoC,EAAE,gBAAgB,YAAY,GAAI;AAC5E,SACC,qBAAC,aAAQ,WAAU,+BAClB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,QAAS;AAAA,QACT,OAAM;AAAA;AAAA,IACP;AAAA,IACA,oBAAC,SAAI,KAAM,aAAc,OAAM,OAAM,QAAO,OAAM,KAAI,IAAG;AAAA,KAC1D;AAEF;",
+  "names": []
+}

package/build-module/components/global-styles-sidebar/welcome-guide.js

@@ -0,0 +1,113 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useDispatch, useSelect } from "@wordpress/data";
+import { ExternalLink, Guide } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { store as preferencesStore } from "@wordpress/preferences";
+import { store as interfaceStore } from "@wordpress/interface";
+import WelcomeGuideImage from "./welcome-guide-image";
+function WelcomeGuideStyles() {
+  const { toggle } = useDispatch(preferencesStore);
+  const { isActive, isStylesOpen } = useSelect((select) => {
+    const sidebar = select(interfaceStore).getActiveComplementaryArea("core");
+    return {
+      isActive: !!select(preferencesStore).get(
+        "core/edit-site",
+        "welcomeGuideStyles"
+      ),
+      isStylesOpen: sidebar === "edit-site/global-styles"
+    };
+  }, []);
+  if (!isActive || !isStylesOpen) {
+    return null;
+  }
+  const welcomeLabel = __("Welcome to Styles");
+  return /* @__PURE__ */ jsx(
+    Guide,
+    {
+      className: "editor-welcome-guide guide-styles",
+      contentLabel: welcomeLabel,
+      finishButtonText: __("Get started"),
+      onFinish: () => toggle("core/edit-site", "welcomeGuideStyles"),
+      pages: [
+        {
+          image: /* @__PURE__ */ jsx(
+            WelcomeGuideImage,
+            {
+              nonAnimatedSrc: "https://s.w.org/images/block-editor/welcome-to-styles.svg?1",
+              animatedSrc: "https://s.w.org/images/block-editor/welcome-to-styles.gif?1"
+            }
+          ),
+          content: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("h1", { className: "editor-welcome-guide__heading", children: welcomeLabel }),
+            /* @__PURE__ */ jsx("p", { className: "editor-welcome-guide__text", children: __(
+              "Tweak your site, or give it a whole new look! Get creative \u2014 how about a new color palette for your buttons, or choosing a new font? Take a look at what you can do here."
+            ) })
+          ] })
+        },
+        {
+          image: /* @__PURE__ */ jsx(
+            WelcomeGuideImage,
+            {
+              nonAnimatedSrc: "https://s.w.org/images/block-editor/set-the-design.svg?1",
+              animatedSrc: "https://s.w.org/images/block-editor/set-the-design.gif?1"
+            }
+          ),
+          content: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("h1", { className: "editor-welcome-guide__heading", children: __("Set the design") }),
+            /* @__PURE__ */ jsx("p", { className: "editor-welcome-guide__text", children: __(
+              "You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!"
+            ) })
+          ] })
+        },
+        {
+          image: /* @__PURE__ */ jsx(
+            WelcomeGuideImage,
+            {
+              nonAnimatedSrc: "https://s.w.org/images/block-editor/personalize-blocks.svg?1",
+              animatedSrc: "https://s.w.org/images/block-editor/personalize-blocks.gif?1"
+            }
+          ),
+          content: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("h1", { className: "editor-welcome-guide__heading", children: __("Personalize blocks") }),
+            /* @__PURE__ */ jsx("p", { className: "editor-welcome-guide__text", children: __(
+              "You can adjust your blocks to ensure a cohesive experience across your site \u2014 add your unique colors to a branded Button block, or adjust the Heading block to your preferred size."
+            ) })
+          ] })
+        },
+        {
+          image: /* @__PURE__ */ jsx(
+            WelcomeGuideImage,
+            {
+              nonAnimatedSrc: "https://s.w.org/images/block-editor/welcome-documentation.svg",
+              animatedSrc: "https://s.w.org/images/block-editor/welcome-documentation.gif"
+            }
+          ),
+          content: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("h1", { className: "editor-welcome-guide__heading", children: __("Learn more") }),
+            /* @__PURE__ */ jsxs("p", { className: "editor-welcome-guide__text", children: [
+              __(
+                "New to block themes and styling your site?"
+              ),
+              " ",
+              /* @__PURE__ */ jsx(
+                ExternalLink,
+                {
+                  href: __(
+                    "https://wordpress.org/documentation/article/styles-overview/"
+                  ),
+                  children: __(
+                    "Here\u2019s a detailed guide to learn how to make the most of it."
+                  )
+                }
+              )
+            ] })
+          ] })
+        }
+      ]
+    }
+  );
+}
+export {
+  WelcomeGuideStyles as default
+};
+//# sourceMappingURL=welcome-guide.js.map

package/build-module/components/global-styles-sidebar/welcome-guide.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/welcome-guide.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { ExternalLink, Guide } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport WelcomeGuideImage from './welcome-guide-image';\n\nexport default function WelcomeGuideStyles() {\n\tconst { toggle } = useDispatch( preferencesStore );\n\n\tconst { isActive, isStylesOpen } = useSelect( ( select ) => {\n\t\tconst sidebar =\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( 'core' );\n\n\t\treturn {\n\t\t\tisActive: !! select( preferencesStore ).get(\n\t\t\t\t'core/edit-site',\n\t\t\t\t'welcomeGuideStyles'\n\t\t\t),\n\t\t\tisStylesOpen: sidebar === 'edit-site/global-styles',\n\t\t};\n\t}, [] );\n\n\tif ( ! isActive || ! isStylesOpen ) {\n\t\treturn null;\n\t}\n\n\tconst welcomeLabel = __( 'Welcome to Styles' );\n\n\treturn (\n\t\t<Guide\n\t\t\tclassName=\"editor-welcome-guide guide-styles\"\n\t\t\tcontentLabel={ welcomeLabel }\n\t\t\tfinishButtonText={ __( 'Get started' ) }\n\t\t\tonFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }\n\t\t\tpages={ [\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/welcome-to-styles.svg?1\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/welcome-to-styles.gif?1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"editor-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ welcomeLabel }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"editor-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Tweak your site, or give it a whole new look! Get creative \u2014 how about a new color palette for your buttons, or choosing a new font? Take a look at what you can do here.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/set-the-design.svg?1\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/set-the-design.gif?1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"editor-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ __( 'Set the design' ) }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"editor-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/personalize-blocks.svg?1\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/personalize-blocks.gif?1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"editor-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ __( 'Personalize blocks' ) }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"editor-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'You can adjust your blocks to ensure a cohesive experience across your site \u2014 add your unique colors to a branded Button block, or adjust the Heading block to your preferred size.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/welcome-documentation.svg\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/welcome-documentation.gif\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"editor-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ __( 'Learn more' ) }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"editor-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'New to block themes and styling your site?'\n\t\t\t\t\t\t\t\t) }{ ' ' }\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/styles-overview/'\n\t\t\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{ __(\n\t\t\t\t\t\t\t\t\t\t'Here\u2019s a detailed guide to learn how to make the most of it.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t</p>\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/>\n\t);\n}\n"],
+  "mappings": "AA6CM,SAMA,UANA,KAMA,YANA;AA1CN,SAAS,aAAa,iBAAiB;AACvC,SAAS,cAAc,aAAa;AACpC,SAAS,UAAU;AACnB,SAAS,SAAS,wBAAwB;AAC1C,SAAS,SAAS,sBAAsB;AAKxC,OAAO,uBAAuB;AAEf,SAAR,qBAAsC;AAC5C,QAAM,EAAE,OAAO,IAAI,YAAa,gBAAiB;AAEjD,QAAM,EAAE,UAAU,aAAa,IAAI,UAAW,CAAE,WAAY;AAC3D,UAAM,UACL,OAAQ,cAAe,EAAE,2BAA4B,MAAO;AAE7D,WAAO;AAAA,MACN,UAAU,CAAC,CAAE,OAAQ,gBAAiB,EAAE;AAAA,QACvC;AAAA,QACA;AAAA,MACD;AAAA,MACA,cAAc,YAAY;AAAA,IAC3B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,MAAK,CAAE,YAAY,CAAE,cAAe;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,eAAe,GAAI,mBAAoB;AAE7C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAe;AAAA,MACf,kBAAmB,GAAI,aAAc;AAAA,MACrC,UAAW,MAAM,OAAQ,kBAAkB,oBAAqB;AAAA,MAChE,OAAQ;AAAA,QACP;AAAA,UACC,OACC;AAAA,YAAC;AAAA;AAAA,cACA,gBAAe;AAAA,cACf,aAAY;AAAA;AAAA,UACb;AAAA,UAED,SACC,iCACC;AAAA,gCAAC,QAAG,WAAU,iCACX,wBACH;AAAA,YACA,oBAAC,OAAE,WAAU,8BACV;AAAA,cACD;AAAA,YACD,GACD;AAAA,aACD;AAAA,QAEF;AAAA,QACA;AAAA,UACC,OACC;AAAA,YAAC;AAAA;AAAA,cACA,gBAAe;AAAA,cACf,aAAY;AAAA;AAAA,UACb;AAAA,UAED,SACC,iCACC;AAAA,gCAAC,QAAG,WAAU,iCACX,aAAI,gBAAiB,GACxB;AAAA,YACA,oBAAC,OAAE,WAAU,8BACV;AAAA,cACD;AAAA,YACD,GACD;AAAA,aACD;AAAA,QAEF;AAAA,QACA;AAAA,UACC,OACC;AAAA,YAAC;AAAA;AAAA,cACA,gBAAe;AAAA,cACf,aAAY;AAAA;AAAA,UACb;AAAA,UAED,SACC,iCACC;AAAA,gCAAC,QAAG,WAAU,iCACX,aAAI,oBAAqB,GAC5B;AAAA,YACA,oBAAC,OAAE,WAAU,8BACV;AAAA,cACD;AAAA,YACD,GACD;AAAA,aACD;AAAA,QAEF;AAAA,QACA;AAAA,UACC,OACC;AAAA,YAAC;AAAA;AAAA,cACA,gBAAe;AAAA,cACf,aAAY;AAAA;AAAA,UACb;AAAA,UAED,SACC,iCACC;AAAA,gCAAC,QAAG,WAAU,iCACX,aAAI,YAAa,GACpB;AAAA,YACA,qBAAC,OAAE,WAAU,8BACV;AAAA;AAAA,gBACD;AAAA,cACD;AAAA,cAAK;AAAA,cACL;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAO;AAAA,oBACN;AAAA,kBACD;AAAA,kBAEE;AAAA,oBACD;AAAA,kBACD;AAAA;AAAA,cACD;AAAA,eACD;AAAA,aACD;AAAA,QAEF;AAAA,MACD;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/build-module/components/header/index.js

@@ -41,9 +41,7 @@ const backButtonVariations = {
 function Header({
   customSaveButton,
   forceIsDirty,
-  forceDisableBlockTools,
-  setEntitiesSavedStatesCallback,
-  title
+  setEntitiesSavedStatesCallback
 }) {
   const isWideViewport = useViewportMatch("large");
   const isLargeViewport = useViewportMatch("medium");
@@ -55,7 +53,8 @@ function Header({
     showIconLabels,
     hasFixedToolbar,
     hasBlockSelection,
-    hasSectionRootClientId
+    hasSectionRootClientId,
+    isStylesCanvasActive
   } = useSelect((select) => {
     const { get: getPreference } = select(preferencesStore);
     const {
@@ -63,6 +62,9 @@ function Header({
       getCurrentPostType,
       isPublishSidebarOpened: _isPublishSidebarOpened
     } = select(editorStore);
+    const { getStylesPath, getShowStylebook } = unlock(
+      select(editorStore)
+    );
     const { getBlockSelectionStart, getSectionRootClientId } = unlock(
       select(blockEditorStore)
     );
@@ -73,7 +75,8 @@ function Header({
       showIconLabels: getPreference("core", "showIconLabels"),
       hasFixedToolbar: getPreference("core", "fixedToolbar"),
       hasBlockSelection: !!getBlockSelectionStart(),
-      hasSectionRootClientId: !!getSectionRootClientId()
+      hasSectionRootClientId: !!getSectionRootClientId(),
+      isStylesCanvasActive: !!getStylesPath()?.startsWith("/revisions") || getShowStylebook()
     };
   }, []);
   const canBeZoomedOut = ["post", "page", "wp_template"].includes(postType) && hasSectionRootClientId;
@@ -81,7 +84,7 @@ function Header({
     NAVIGATION_POST_TYPE,
     TEMPLATE_PART_POST_TYPE,
     PATTERN_POST_TYPE
-  ].includes(postType) || forceDisableBlockTools;
+  ].includes(postType) || isStylesCanvasActive;
   const [isBlockToolsCollapsed, setIsBlockToolsCollapsed] = useState(true);
   const hasCenter = !isTooNarrowForDocumentBar && (!hasFixedToolbar || hasFixedToolbar && (!hasBlockSelection || isBlockToolsCollapsed));
   const hasBackButton = useHasBackButton();
@@ -105,7 +108,7 @@ function Header({
           /* @__PURE__ */ jsx(
             DocumentTools,
             {
-              disableBlockTools: forceDisableBlockTools || isTextEditor
+              disableBlockTools: isStylesCanvasActive || isTextEditor
             }
           ),
           hasFixedToolbar && isLargeViewport && /* @__PURE__ */ jsx(
@@ -124,7 +127,7 @@ function Header({
         className: "editor-header__center",
         variants: toolbarVariations,
         transition: { type: "tween" },
-        children: /* @__PURE__ */ jsx(DocumentBar, { title })
+        children: /* @__PURE__ */ jsx(DocumentBar, {})
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -157,7 +160,7 @@ function Header({
               forceIsAutosaveable: forceIsDirty
             }
           ),
-          isWideViewport && canBeZoomedOut && /* @__PURE__ */ jsx(ZoomOutToggle, { disabled: forceDisableBlockTools }),
+          isWideViewport && canBeZoomedOut && /* @__PURE__ */ jsx(ZoomOutToggle, { disabled: isStylesCanvasActive }),
           (isWideViewport || !showIconLabels) && /* @__PURE__ */ jsx(PinnedItems.Slot, { scope: "core" }),
           !customSaveButton && /* @__PURE__ */ jsx(
             PostPublishButtonOrToggle,

package/build-module/components/header/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/header/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMediaQuery, useViewportMatch } from '@wordpress/compose';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { useState } from '@wordpress/element';\nimport { PinnedItems } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport BackButton, { useHasBackButton } from './back-button';\nimport CollapsibleBlockToolbar from '../collapsible-block-toolbar';\nimport DocumentBar from '../document-bar';\nimport DocumentTools from '../document-tools';\nimport MoreMenu from '../more-menu';\nimport PostPreviewButton from '../post-preview-button';\nimport PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';\nimport PostSavedState from '../post-saved-state';\nimport PostViewLink from '../post-view-link';\nimport PreviewDropdown from '../preview-dropdown';\nimport ZoomOutToggle from '../zoom-out-toggle';\nimport { store as editorStore } from '../../store';\nimport {\n\tTEMPLATE_PART_POST_TYPE,\n\tPATTERN_POST_TYPE,\n\tNAVIGATION_POST_TYPE,\n} from '../../store/constants';\nimport { unlock } from '../../lock-unlock';\n\nconst toolbarVariations = {\n\tdistractionFreeDisabled: { y: '-50px' },\n\tdistractionFreeHover: { y: 0 },\n\tdistractionFreeHidden: { y: '-50px' },\n\tvisible: { y: 0 },\n\thidden: { y: 0 },\n};\n\nconst backButtonVariations = {\n\tdistractionFreeDisabled: { x: '-100%' },\n\tdistractionFreeHover: { x: 0 },\n\tdistractionFreeHidden: { x: '-100%' },\n\tvisible: { x: 0 },\n\thidden: { x: 0 },\n};\n\nfunction Header( {\n\tcustomSaveButton,\n\tforceIsDirty,\n\tforceDisableBlockTools,\n\tsetEntitiesSavedStatesCallback,\n\ttitle,\n} ) {\n\tconst isWideViewport = useViewportMatch( 'large' );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );\n\tconst {\n\t\tpostType,\n\t\tisTextEditor,\n\t\tisPublishSidebarOpened,\n\t\tshowIconLabels,\n\t\thasFixedToolbar,\n\t\thasBlockSelection,\n\t\thasSectionRootClientId,\n\t} = useSelect( ( select ) => {\n\t\tconst { get: getPreference } = select( preferencesStore );\n\t\tconst {\n\t\t\tgetEditorMode,\n\t\t\tgetCurrentPostType,\n\t\t\tisPublishSidebarOpened: _isPublishSidebarOpened,\n\t\t} = select( editorStore );\n\t\tconst { getBlockSelectionStart, getSectionRootClientId } = unlock(\n\t\t\tselect( blockEditorStore )\n\t\t);\n\n\t\treturn {\n\t\t\tpostType: getCurrentPostType(),\n\t\t\tisTextEditor: getEditorMode() === 'text',\n\t\t\tisPublishSidebarOpened: _isPublishSidebarOpened(),\n\t\t\tshowIconLabels: getPreference( 'core', 'showIconLabels' ),\n\t\t\thasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),\n\t\t\thasBlockSelection: !! getBlockSelectionStart(),\n\t\t\thasSectionRootClientId: !! getSectionRootClientId(),\n\t\t};\n\t}, [] );\n\n\tconst canBeZoomedOut =\n\t\t[ 'post', 'page', 'wp_template' ].includes( postType ) &&\n\t\thasSectionRootClientId;\n\n\tconst disablePreviewOption =\n\t\t[\n\t\t\tNAVIGATION_POST_TYPE,\n\t\t\tTEMPLATE_PART_POST_TYPE,\n\t\t\tPATTERN_POST_TYPE,\n\t\t].includes( postType ) || forceDisableBlockTools;\n\n\tconst [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =\n\t\tuseState( true );\n\n\tconst hasCenter =\n\t\t! isTooNarrowForDocumentBar &&\n\t\t( ! hasFixedToolbar ||\n\t\t\t( hasFixedToolbar &&\n\t\t\t\t( ! hasBlockSelection || isBlockToolsCollapsed ) ) );\n\tconst hasBackButton = useHasBackButton();\n\n\t/*\n\t * The edit-post-header classname is only kept for backward compatibility\n\t * as some plugins might be relying on its presence.\n\t */\n\treturn (\n\t\t<div className=\"editor-header edit-post-header\">\n\t\t\t{ hasBackButton && (\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"editor-header__back-button\"\n\t\t\t\t\tvariants={ backButtonVariations }\n\t\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\t>\n\t\t\t\t\t<BackButton.Slot />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t<motion.div\n\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\tclassName=\"editor-header__toolbar\"\n\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t>\n\t\t\t\t<DocumentTools\n\t\t\t\t\tdisableBlockTools={ forceDisableBlockTools || isTextEditor }\n\t\t\t\t/>\n\t\t\t\t{ hasFixedToolbar && isLargeViewport && (\n\t\t\t\t\t<CollapsibleBlockToolbar\n\t\t\t\t\t\tisCollapsed={ isBlockToolsCollapsed }\n\t\t\t\t\t\tonToggle={ setIsBlockToolsCollapsed }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</motion.div>\n\t\t\t{ hasCenter && (\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"editor-header__center\"\n\t\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\t>\n\t\t\t\t\t<DocumentBar title={ title } />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t<motion.div\n\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\tclassName=\"editor-header__settings\"\n\t\t\t>\n\t\t\t\t{ ! customSaveButton && ! isPublishSidebarOpened && (\n\t\t\t\t\t/*\n\t\t\t\t\t * This button isn't completely hidden by the publish sidebar.\n\t\t\t\t\t * We can't hide the whole toolbar when the publish sidebar is open because\n\t\t\t\t\t * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.\n\t\t\t\t\t * We track that DOM node to return focus to the PostPublishButtonOrToggle\n\t\t\t\t\t * when the publish sidebar has been closed.\n\t\t\t\t\t */\n\t\t\t\t\t<PostSavedState forceIsDirty={ forceIsDirty } />\n\t\t\t\t) }\n\n\t\t\t\t<PostViewLink />\n\n\t\t\t\t<PreviewDropdown\n\t\t\t\t\tforceIsAutosaveable={ forceIsDirty }\n\t\t\t\t\tdisabled={ disablePreviewOption }\n\t\t\t\t/>\n\n\t\t\t\t<PostPreviewButton\n\t\t\t\t\tclassName=\"editor-header__post-preview-button\"\n\t\t\t\t\tforceIsAutosaveable={ forceIsDirty }\n\t\t\t\t/>\n\n\t\t\t\t{ isWideViewport && canBeZoomedOut && (\n\t\t\t\t\t<ZoomOutToggle disabled={ forceDisableBlockTools } />\n\t\t\t\t) }\n\n\t\t\t\t{ ( isWideViewport || ! showIconLabels ) && (\n\t\t\t\t\t<PinnedItems.Slot scope=\"core\" />\n\t\t\t\t) }\n\n\t\t\t\t{ ! customSaveButton && (\n\t\t\t\t\t<PostPublishButtonOrToggle\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/>\n\t\t\t\t) }\n\t\t\t\t{ customSaveButton }\n\t\t\t\t<MoreMenu />\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n}\n\nexport default Header;\n"],
-  "mappings": "AA0HK,cAGF,YAHE;AAvHL,SAAS,SAAS,wBAAwB;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,eAAe,wBAAwB;AAChD,SAAS,oBAAoB,cAAc;AAC3C,SAAS,SAAS,wBAAwB;AAC1C,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAK5B,OAAO,cAAc,wBAAwB;AAC7C,OAAO,6BAA6B;AACpC,OAAO,iBAAiB;AACxB,OAAO,mBAAmB;AAC1B,OAAO,cAAc;AACrB,OAAO,uBAAuB;AAC9B,OAAO,+BAA+B;AACtC,OAAO,oBAAoB;AAC3B,OAAO,kBAAkB;AACzB,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,SAAS,SAAS,mBAAmB;AACrC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,cAAc;AAEvB,MAAM,oBAAoB;AAAA,EACzB,yBAAyB,EAAE,GAAG,QAAQ;AAAA,EACtC,sBAAsB,EAAE,GAAG,EAAE;AAAA,EAC7B,uBAAuB,EAAE,GAAG,QAAQ;AAAA,EACpC,SAAS,EAAE,GAAG,EAAE;AAAA,EAChB,QAAQ,EAAE,GAAG,EAAE;AAChB;AAEA,MAAM,uBAAuB;AAAA,EAC5B,yBAAyB,EAAE,GAAG,QAAQ;AAAA,EACtC,sBAAsB,EAAE,GAAG,EAAE;AAAA,EAC7B,uBAAuB,EAAE,GAAG,QAAQ;AAAA,EACpC,SAAS,EAAE,GAAG,EAAE;AAAA,EAChB,QAAQ,EAAE,GAAG,EAAE;AAChB;AAEA,SAAS,OAAQ;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,iBAAiB,iBAAkB,OAAQ;AACjD,QAAM,kBAAkB,iBAAkB,QAAS;AACnD,QAAM,4BAA4B,cAAe,oBAAqB;AACtE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,UAAW,CAAE,WAAY;AAC5B,UAAM,EAAE,KAAK,cAAc,IAAI,OAAQ,gBAAiB;AACxD,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA,wBAAwB;AAAA,IACzB,IAAI,OAAQ,WAAY;AACxB,UAAM,EAAE,wBAAwB,uBAAuB,IAAI;AAAA,MAC1D,OAAQ,gBAAiB;AAAA,IAC1B;AAEA,WAAO;AAAA,MACN,UAAU,mBAAmB;AAAA,MAC7B,cAAc,cAAc,MAAM;AAAA,MAClC,wBAAwB,wBAAwB;AAAA,MAChD,gBAAgB,cAAe,QAAQ,gBAAiB;AAAA,MACxD,iBAAiB,cAAe,QAAQ,cAAe;AAAA,MACvD,mBAAmB,CAAC,CAAE,uBAAuB;AAAA,MAC7C,wBAAwB,CAAC,CAAE,uBAAuB;AAAA,IACnD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,iBACL,CAAE,QAAQ,QAAQ,aAAc,EAAE,SAAU,QAAS,KACrD;AAED,QAAM,uBACL;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,SAAU,QAAS,KAAK;AAE3B,QAAM,CAAE,uBAAuB,wBAAyB,IACvD,SAAU,IAAK;AAEhB,QAAM,YACL,CAAE,8BACA,CAAE,mBACD,oBACC,CAAE,qBAAqB;AAC5B,QAAM,gBAAgB,iBAAiB;AAMvC,SACC,qBAAC,SAAI,WAAU,kCACZ;AAAA,qBACD;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,WAAU;AAAA,QACV,UAAW;AAAA,QACX,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE7B,8BAAC,WAAW,MAAX,EAAgB;AAAA;AAAA,IAClB;AAAA,IAED;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,UAAW;AAAA,QACX,WAAU;AAAA,QACV,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE7B;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,mBAAoB,0BAA0B;AAAA;AAAA,UAC/C;AAAA,UACE,mBAAmB,mBACpB;AAAA,YAAC;AAAA;AAAA,cACA,aAAc;AAAA,cACd,UAAW;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,IAEF;AAAA,IACE,aACD;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,WAAU;AAAA,QACV,UAAW;AAAA,QACX,YAAa,EAAE,MAAM,QAAQ;AAAA,QAE7B,8BAAC,eAAY,OAAgB;AAAA;AAAA,IAC9B;AAAA,IAED;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,UAAW;AAAA,QACX,YAAa,EAAE,MAAM,QAAQ;AAAA,QAC7B,WAAU;AAAA,QAER;AAAA,WAAE,oBAAoB,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQzB,oBAAC,kBAAe,cAA8B;AAAA,UAG/C,oBAAC,gBAAa;AAAA,UAEd;AAAA,YAAC;AAAA;AAAA,cACA,qBAAsB;AAAA,cACtB,UAAW;AAAA;AAAA,UACZ;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,qBAAsB;AAAA;AAAA,UACvB;AAAA,UAEE,kBAAkB,kBACnB,oBAAC,iBAAc,UAAW,wBAAyB;AAAA,WAGhD,kBAAkB,CAAE,mBACvB,oBAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO;AAAA,UAG9B,CAAE,oBACH;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UAGD;AAAA,UAEC;AAAA,UACF,oBAAC,YAAS;AAAA;AAAA;AAAA,IACX;AAAA,KACD;AAEF;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMediaQuery, useViewportMatch } from '@wordpress/compose';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { useState } from '@wordpress/element';\nimport { PinnedItems } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport BackButton, { useHasBackButton } from './back-button';\nimport CollapsibleBlockToolbar from '../collapsible-block-toolbar';\nimport DocumentBar from '../document-bar';\nimport DocumentTools from '../document-tools';\nimport MoreMenu from '../more-menu';\nimport PostPreviewButton from '../post-preview-button';\nimport PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';\nimport PostSavedState from '../post-saved-state';\nimport PostViewLink from '../post-view-link';\nimport PreviewDropdown from '../preview-dropdown';\nimport ZoomOutToggle from '../zoom-out-toggle';\nimport { store as editorStore } from '../../store';\nimport {\n\tTEMPLATE_PART_POST_TYPE,\n\tPATTERN_POST_TYPE,\n\tNAVIGATION_POST_TYPE,\n} from '../../store/constants';\nimport { unlock } from '../../lock-unlock';\n\nconst toolbarVariations = {\n\tdistractionFreeDisabled: { y: '-50px' },\n\tdistractionFreeHover: { y: 0 },\n\tdistractionFreeHidden: { y: '-50px' },\n\tvisible: { y: 0 },\n\thidden: { y: 0 },\n};\n\nconst backButtonVariations = {\n\tdistractionFreeDisabled: { x: '-100%' },\n\tdistractionFreeHover: { x: 0 },\n\tdistractionFreeHidden: { x: '-100%' },\n\tvisible: { x: 0 },\n\thidden: { x: 0 },\n};\n\nfunction Header( {\n\tcustomSaveButton,\n\tforceIsDirty,\n\tsetEntitiesSavedStatesCallback,\n} ) {\n\tconst isWideViewport = useViewportMatch( 'large' );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );\n\tconst {\n\t\tpostType,\n\t\tisTextEditor,\n\t\tisPublishSidebarOpened,\n\t\tshowIconLabels,\n\t\thasFixedToolbar,\n\t\thasBlockSelection,\n\t\thasSectionRootClientId,\n\t\tisStylesCanvasActive,\n\t} = useSelect( ( select ) => {\n\t\tconst { get: getPreference } = select( preferencesStore );\n\t\tconst {\n\t\t\tgetEditorMode,\n\t\t\tgetCurrentPostType,\n\t\t\tisPublishSidebarOpened: _isPublishSidebarOpened,\n\t\t} = select( editorStore );\n\t\tconst { getStylesPath, getShowStylebook } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\tconst { getBlockSelectionStart, getSectionRootClientId } = unlock(\n\t\t\tselect( blockEditorStore )\n\t\t);\n\n\t\treturn {\n\t\t\tpostType: getCurrentPostType(),\n\t\t\tisTextEditor: getEditorMode() === 'text',\n\t\t\tisPublishSidebarOpened: _isPublishSidebarOpened(),\n\t\t\tshowIconLabels: getPreference( 'core', 'showIconLabels' ),\n\t\t\thasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),\n\t\t\thasBlockSelection: !! getBlockSelectionStart(),\n\t\t\thasSectionRootClientId: !! getSectionRootClientId(),\n\t\t\tisStylesCanvasActive:\n\t\t\t\t!! getStylesPath()?.startsWith( '/revisions' ) ||\n\t\t\t\tgetShowStylebook(),\n\t\t};\n\t}, [] );\n\n\tconst canBeZoomedOut =\n\t\t[ 'post', 'page', 'wp_template' ].includes( postType ) &&\n\t\thasSectionRootClientId;\n\n\tconst disablePreviewOption =\n\t\t[\n\t\t\tNAVIGATION_POST_TYPE,\n\t\t\tTEMPLATE_PART_POST_TYPE,\n\t\t\tPATTERN_POST_TYPE,\n\t\t].includes( postType ) || isStylesCanvasActive;\n\n\tconst [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =\n\t\tuseState( true );\n\n\tconst hasCenter =\n\t\t! isTooNarrowForDocumentBar &&\n\t\t( ! hasFixedToolbar ||\n\t\t\t( hasFixedToolbar &&\n\t\t\t\t( ! hasBlockSelection || isBlockToolsCollapsed ) ) );\n\tconst hasBackButton = useHasBackButton();\n\n\t/*\n\t * The edit-post-header classname is only kept for backward compatibility\n\t * as some plugins might be relying on its presence.\n\t */\n\treturn (\n\t\t<div className=\"editor-header edit-post-header\">\n\t\t\t{ hasBackButton && (\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"editor-header__back-button\"\n\t\t\t\t\tvariants={ backButtonVariations }\n\t\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\t>\n\t\t\t\t\t<BackButton.Slot />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t<motion.div\n\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\tclassName=\"editor-header__toolbar\"\n\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t>\n\t\t\t\t<DocumentTools\n\t\t\t\t\tdisableBlockTools={ isStylesCanvasActive || isTextEditor }\n\t\t\t\t/>\n\t\t\t\t{ hasFixedToolbar && isLargeViewport && (\n\t\t\t\t\t<CollapsibleBlockToolbar\n\t\t\t\t\t\tisCollapsed={ isBlockToolsCollapsed }\n\t\t\t\t\t\tonToggle={ setIsBlockToolsCollapsed }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</motion.div>\n\t\t\t{ hasCenter && (\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"editor-header__center\"\n\t\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\t>\n\t\t\t\t\t<DocumentBar />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t<motion.div\n\t\t\t\tvariants={ toolbarVariations }\n\t\t\t\ttransition={ { type: 'tween' } }\n\t\t\t\tclassName=\"editor-header__settings\"\n\t\t\t>\n\t\t\t\t{ ! customSaveButton && ! isPublishSidebarOpened && (\n\t\t\t\t\t/*\n\t\t\t\t\t * This button isn't completely hidden by the publish sidebar.\n\t\t\t\t\t * We can't hide the whole toolbar when the publish sidebar is open because\n\t\t\t\t\t * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.\n\t\t\t\t\t * We track that DOM node to return focus to the PostPublishButtonOrToggle\n\t\t\t\t\t * when the publish sidebar has been closed.\n\t\t\t\t\t */\n\t\t\t\t\t<PostSavedState forceIsDirty={ forceIsDirty } />\n\t\t\t\t) }\n\n\t\t\t\t<PostViewLink />\n\n\t\t\t\t<PreviewDropdown\n\t\t\t\t\tforceIsAutosaveable={ forceIsDirty }\n\t\t\t\t\tdisabled={ disablePreviewOption }\n\t\t\t\t/>\n\n\t\t\t\t<PostPreviewButton\n\t\t\t\t\tclassName=\"editor-header__post-preview-button\"\n\t\t\t\t\tforceIsAutosaveable={ forceIsDirty }\n\t\t\t\t/>\n\n\t\t\t\t{ isWideViewport && canBeZoomedOut && (\n\t\t\t\t\t<ZoomOutToggle disabled={ isStylesCanvasActive } />\n\t\t\t\t) }\n\n\t\t\t\t{ ( isWideViewport || ! showIconLabels ) && (\n\t\t\t\t\t<PinnedItems.Slot scope=\"core\" />\n\t\t\t\t) }\n\n\t\t\t\t{ ! customSaveButton && (\n\t\t\t\t\t<PostPublishButtonOrToggle\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/>\n\t\t\t\t) }\n\t\t\t\t{ customSaveButton }\n\t\t\t\t<MoreMenu />\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n}\n\nexport default Header;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/post-featured-image/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { __, sprintf } from "@wordpress/i18n";
 import { applyFilters } from "@wordpress/hooks";
@@ -18,17 +18,49 @@ import { useSelect, withDispatch, withSelect } from "@wordpress/data";
 import {
   MediaUpload,
   MediaUploadCheck,
-  store as blockEditorStore
+  store as blockEditorStore,
+  privateApis as blockEditorPrivateApis
 } from "@wordpress/block-editor";
 import { store as coreStore } from "@wordpress/core-data";
+import { unlock } from "../../lock-unlock";
 import PostFeaturedImageCheck from "./check";
 import { store as editorStore } from "../../store";
+const { MediaUploadModal } = unlock(blockEditorPrivateApis);
 const ALLOWED_MEDIA_TYPES = ["image"];
 const DEFAULT_FEATURE_IMAGE_LABEL = __("Featured image");
 const DEFAULT_SET_FEATURE_IMAGE_LABEL = __("Add a featured image");
 const instructions = /* @__PURE__ */ jsx("p", { children: __(
   "To edit the featured image, you need permission to upload media."
 ) });
+function ConditionalMediaUpload({ render, ...props }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const mediaUpload = useSelect((select) => {
+    const { getSettings } = select(blockEditorStore);
+    return getSettings().mediaUpload;
+  }, []);
+  if (window.__experimentalDataViewsMediaModal) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      render && render({ open: () => setIsModalOpen(true) }),
+      /* @__PURE__ */ jsx(
+        MediaUploadModal,
+        {
+          ...props,
+          isOpen: isModalOpen,
+          onClose: () => {
+            setIsModalOpen(false);
+            props.onClose?.();
+          },
+          onSelect: (media) => {
+            setIsModalOpen(false);
+            props.onSelect?.(media);
+          },
+          onUpload: mediaUpload
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(MediaUpload, { ...props, render });
+}
 function getMediaDetails(media, postId) {
   if (!media) {
     return {};
@@ -136,7 +168,7 @@ function PostFeaturedImage({
         }
       ),
       /* @__PURE__ */ jsx(MediaUploadCheck, { fallback: instructions, children: /* @__PURE__ */ jsx(
-        MediaUpload,
+        ConditionalMediaUpload,
         {
           title: postType?.labels?.featured_image || DEFAULT_FEATURE_IMAGE_LABEL,
           onSelect: onUpdateImage,