@wordpress/editor 14.33.3 → 14.34.0

package/build-module/components/collab-sidebar/comment-author-info.js

@@ -12,26 +12,38 @@ import { useSelect } from "@wordpress/data";
 import { store as blockEditorStore } from "@wordpress/block-editor";
 import { getAvatarBorderColor } from "./utils";
 function CommentAuthorInfo({ avatar, name, date, userId }) {
+  const hasAvatar = !!avatar;
   const dateSettings = getDateSettings();
   const {
     currentUserAvatar,
     currentUserName,
     currentUserId,
     dateFormat = dateSettings.formats.date
-  } = useSelect((select) => {
-    const { getCurrentUser, getEntityRecord } = select(coreStore);
-    const { getSettings } = select(blockEditorStore);
-    const userData = getCurrentUser();
-    const { __experimentalDiscussionSettings } = getSettings();
-    const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
-    const siteSettings = getEntityRecord("root", "site");
-    return {
-      currentUserAvatar: userData?.avatar_urls?.[48] ?? defaultAvatar,
-      currentUserName: userData?.name,
-      currentUserId: userData?.id,
-      dateFormat: siteSettings?.date_format
-    };
-  }, []);
+  } = useSelect(
+    (select) => {
+      const { canUser, getCurrentUser, getEntityRecord } = select(coreStore);
+      const siteSettings = canUser("read", {
+        kind: "root",
+        name: "site"
+      }) ? getEntityRecord("root", "site") : void 0;
+      if (hasAvatar) {
+        return {
+          dateFormat: siteSettings?.date_format
+        };
+      }
+      const { getSettings } = select(blockEditorStore);
+      const { __experimentalDiscussionSettings } = getSettings();
+      const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+      const userData = getCurrentUser();
+      return {
+        currentUserAvatar: userData?.avatar_urls?.[48] ?? defaultAvatar,
+        currentUserName: userData?.name,
+        currentUserId: userData?.id,
+        dateFormat: siteSettings?.date_format
+      };
+    },
+    [hasAvatar]
+  );
   const commentDate = getDate(date);
   const commentDateTime = dateI18n("c", commentDate);
   const shouldShowHumanTimeDiff = Math.floor((/* @__PURE__ */ new Date() - commentDate) / (1e3 * 60 * 60 * 24)) < 30;

package/build-module/components/collab-sidebar/comment-author-info.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/comment-author-info.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Tooltip, __experimentalVStack as VStack } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tdateI18n,\n\tgetSettings as getDateSettings,\n\thumanTimeDiff,\n\tgetDate,\n} from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { getAvatarBorderColor } from './utils';\n\n/**\n * Render author information for a comment.\n *\n * @param {Object} props        - Component properties.\n * @param {string} props.avatar - URL of the author's avatar.\n * @param {string} props.name   - Name of the author.\n * @param {string} props.date   - Date of the comment.\n * @param {string} props.userId - User ID of the author.\n *\n * @return {React.ReactNode} The JSX element representing the author's information.\n */\nfunction CommentAuthorInfo( { avatar, name, date, userId } ) {\n\tconst dateSettings = getDateSettings();\n\tconst {\n\t\tcurrentUserAvatar,\n\t\tcurrentUserName,\n\t\tcurrentUserId,\n\t\tdateFormat = dateSettings.formats.date,\n\t} = useSelect( ( select ) => {\n\t\tconst { getCurrentUser, getEntityRecord } = select( coreStore );\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst userData = getCurrentUser();\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\tconst defaultAvatar = __experimentalDiscussionSettings?.avatarURL;\n\t\tconst siteSettings = getEntityRecord( 'root', 'site' );\n\t\treturn {\n\t\t\tcurrentUserAvatar: userData?.avatar_urls?.[ 48 ] ?? defaultAvatar,\n\t\t\tcurrentUserName: userData?.name,\n\t\t\tcurrentUserId: userData?.id,\n\t\t\tdateFormat: siteSettings?.date_format,\n\t\t};\n\t}, [] );\n\n\tconst commentDate = getDate( date );\n\tconst commentDateTime = dateI18n( 'c', commentDate );\n\tconst shouldShowHumanTimeDiff =\n\t\tMath.floor( ( new Date() - commentDate ) / ( 1000 * 60 * 60 * 24 ) ) <\n\t\t30;\n\n\tconst commentDateText = shouldShowHumanTimeDiff\n\t\t? humanTimeDiff( commentDate )\n\t\t: dateI18n( dateFormat, commentDate );\n\n\tconst tooltipText = dateI18n(\n\t\t// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.\n\t\t_x( 'F j, Y g:i\\xa0a', 'Note date full date format' ),\n\t\tdate\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<img\n\t\t\t\tsrc={ avatar || currentUserAvatar }\n\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-avatar\"\n\t\t\t\t// translators: alt text for user avatar image\n\t\t\t\talt={ __( 'User avatar' ) }\n\t\t\t\twidth={ 32 }\n\t\t\t\theight={ 32 }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\tuserId ?? currentUserId\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<VStack spacing=\"0\">\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__user-name\">\n\t\t\t\t\t{ name ?? currentUserName }\n\t\t\t\t</span>\n\t\t\t\t{ date && (\n\t\t\t\t\t<Tooltip placement=\"top\" text={ tooltipText }>\n\t\t\t\t\t\t<time\n\t\t\t\t\t\t\tdateTime={ commentDateTime }\n\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-time\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ commentDateText }\n\t\t\t\t\t\t</time>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CommentAuthorInfo;\n"],
-  "mappings": "AAsEE,mBACC,KAaA,YAdD;AAnEF,SAAS,SAAS,wBAAwB,cAAc;AACxD,SAAS,IAAI,UAAU;AACvB;AAAA,EACC;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,wBAAwB;AAK1C,SAAS,4BAA4B;AAarC,SAAS,kBAAmB,EAAE,QAAQ,MAAM,MAAM,OAAO,GAAI;AAC5D,QAAM,eAAe,gBAAgB;AACrC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,aAAa,QAAQ;AAAA,EACnC,IAAI,UAAW,CAAE,WAAY;AAC5B,UAAM,EAAE,gBAAgB,gBAAgB,IAAI,OAAQ,SAAU;AAC9D,UAAM,EAAE,YAAY,IAAI,OAAQ,gBAAiB;AACjD,UAAM,WAAW,eAAe;AAChC,UAAM,EAAE,iCAAiC,IAAI,YAAY;AACzD,UAAM,gBAAgB,kCAAkC;AACxD,UAAM,eAAe,gBAAiB,QAAQ,MAAO;AACrD,WAAO;AAAA,MACN,mBAAmB,UAAU,cAAe,EAAG,KAAK;AAAA,MACpD,iBAAiB,UAAU;AAAA,MAC3B,eAAe,UAAU;AAAA,MACzB,YAAY,cAAc;AAAA,IAC3B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,cAAc,QAAS,IAAK;AAClC,QAAM,kBAAkB,SAAU,KAAK,WAAY;AACnD,QAAM,0BACL,KAAK,OAAS,oBAAI,KAAK,IAAI,gBAAkB,MAAO,KAAK,KAAK,GAAK,IACnE;AAED,QAAM,kBAAkB,0BACrB,cAAe,WAAY,IAC3B,SAAU,YAAY,WAAY;AAErC,QAAM,cAAc;AAAA;AAAA,IAEnB,GAAI,mBAAmB,4BAA6B;AAAA,IACpD;AAAA,EACD;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,KAAM,UAAU;AAAA,QAChB,WAAU;AAAA,QAEV,KAAM,GAAI,aAAc;AAAA,QACxB,OAAQ;AAAA,QACR,QAAS;AAAA,QACT,OAAQ;AAAA,UACP,aAAa;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,qBAAC,UAAO,SAAQ,KACf;AAAA,0BAAC,UAAK,WAAU,0CACb,kBAAQ,iBACX;AAAA,MACE,QACD,oBAAC,WAAQ,WAAU,OAAM,MAAO,aAC/B;AAAA,QAAC;AAAA;AAAA,UACA,UAAW;AAAA,UACX,WAAU;AAAA,UAER;AAAA;AAAA,MACH,GACD;AAAA,OAEF;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Tooltip, __experimentalVStack as VStack } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tdateI18n,\n\tgetSettings as getDateSettings,\n\thumanTimeDiff,\n\tgetDate,\n} from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { getAvatarBorderColor } from './utils';\n\nfunction CommentAuthorInfo( { avatar, name, date, userId } ) {\n\tconst hasAvatar = !! avatar;\n\tconst dateSettings = getDateSettings();\n\tconst {\n\t\tcurrentUserAvatar,\n\t\tcurrentUserName,\n\t\tcurrentUserId,\n\t\tdateFormat = dateSettings.formats.date,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canUser, getCurrentUser, getEntityRecord } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst siteSettings = canUser( 'read', {\n\t\t\t\tkind: 'root',\n\t\t\t\tname: 'site',\n\t\t\t} )\n\t\t\t\t? getEntityRecord( 'root', 'site' )\n\t\t\t\t: undefined;\n\n\t\t\tif ( hasAvatar ) {\n\t\t\t\treturn {\n\t\t\t\t\tdateFormat: siteSettings?.date_format,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst { getSettings } = select( blockEditorStore );\n\t\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\t\tconst defaultAvatar = __experimentalDiscussionSettings?.avatarURL;\n\t\t\tconst userData = getCurrentUser();\n\t\t\treturn {\n\t\t\t\tcurrentUserAvatar:\n\t\t\t\t\tuserData?.avatar_urls?.[ 48 ] ?? defaultAvatar,\n\t\t\t\tcurrentUserName: userData?.name,\n\t\t\t\tcurrentUserId: userData?.id,\n\t\t\t\tdateFormat: siteSettings?.date_format,\n\t\t\t};\n\t\t},\n\t\t[ hasAvatar ]\n\t);\n\n\tconst commentDate = getDate( date );\n\tconst commentDateTime = dateI18n( 'c', commentDate );\n\tconst shouldShowHumanTimeDiff =\n\t\tMath.floor( ( new Date() - commentDate ) / ( 1000 * 60 * 60 * 24 ) ) <\n\t\t30;\n\n\tconst commentDateText = shouldShowHumanTimeDiff\n\t\t? humanTimeDiff( commentDate )\n\t\t: dateI18n( dateFormat, commentDate );\n\n\tconst tooltipText = dateI18n(\n\t\t// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.\n\t\t_x( 'F j, Y g:i\\xa0a', 'Note date full date format' ),\n\t\tdate\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<img\n\t\t\t\tsrc={ avatar || currentUserAvatar }\n\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-avatar\"\n\t\t\t\t// translators: alt text for user avatar image\n\t\t\t\talt={ __( 'User avatar' ) }\n\t\t\t\twidth={ 32 }\n\t\t\t\theight={ 32 }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\tuserId ?? currentUserId\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<VStack spacing=\"0\">\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__user-name\">\n\t\t\t\t\t{ name ?? currentUserName }\n\t\t\t\t</span>\n\t\t\t\t{ date && (\n\t\t\t\t\t<Tooltip placement=\"top\" text={ tooltipText }>\n\t\t\t\t\t\t<time\n\t\t\t\t\t\t\tdateTime={ commentDateTime }\n\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-time\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ commentDateText }\n\t\t\t\t\t\t</time>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CommentAuthorInfo;\n"],
+  "mappings": "AA6EE,mBACC,KAaA,YAdD;AA1EF,SAAS,SAAS,wBAAwB,cAAc;AACxD,SAAS,IAAI,UAAU;AACvB;AAAA,EACC;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,wBAAwB;AAK1C,SAAS,4BAA4B;AAErC,SAAS,kBAAmB,EAAE,QAAQ,MAAM,MAAM,OAAO,GAAI;AAC5D,QAAM,YAAY,CAAC,CAAE;AACrB,QAAM,eAAe,gBAAgB;AACrC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,aAAa,QAAQ;AAAA,EACnC,IAAI;AAAA,IACH,CAAE,WAAY;AACb,YAAM,EAAE,SAAS,gBAAgB,gBAAgB,IAChD,OAAQ,SAAU;AACnB,YAAM,eAAe,QAAS,QAAQ;AAAA,QACrC,MAAM;AAAA,QACN,MAAM;AAAA,MACP,CAAE,IACC,gBAAiB,QAAQ,MAAO,IAChC;AAEH,UAAK,WAAY;AAChB,eAAO;AAAA,UACN,YAAY,cAAc;AAAA,QAC3B;AAAA,MACD;AAEA,YAAM,EAAE,YAAY,IAAI,OAAQ,gBAAiB;AACjD,YAAM,EAAE,iCAAiC,IAAI,YAAY;AACzD,YAAM,gBAAgB,kCAAkC;AACxD,YAAM,WAAW,eAAe;AAChC,aAAO;AAAA,QACN,mBACC,UAAU,cAAe,EAAG,KAAK;AAAA,QAClC,iBAAiB,UAAU;AAAA,QAC3B,eAAe,UAAU;AAAA,QACzB,YAAY,cAAc;AAAA,MAC3B;AAAA,IACD;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AAEA,QAAM,cAAc,QAAS,IAAK;AAClC,QAAM,kBAAkB,SAAU,KAAK,WAAY;AACnD,QAAM,0BACL,KAAK,OAAS,oBAAI,KAAK,IAAI,gBAAkB,MAAO,KAAK,KAAK,GAAK,IACnE;AAED,QAAM,kBAAkB,0BACrB,cAAe,WAAY,IAC3B,SAAU,YAAY,WAAY;AAErC,QAAM,cAAc;AAAA;AAAA,IAEnB,GAAI,mBAAmB,4BAA6B;AAAA,IACpD;AAAA,EACD;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,KAAM,UAAU;AAAA,QAChB,WAAU;AAAA,QAEV,KAAM,GAAI,aAAc;AAAA,QACxB,OAAQ;AAAA,QACR,QAAS;AAAA,QACT,OAAQ;AAAA,UACP,aAAa;AAAA,YACZ,UAAU;AAAA,UACX;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,qBAAC,UAAO,SAAQ,KACf;AAAA,0BAAC,UAAK,WAAU,0CACb,kBAAQ,iBACX;AAAA,MACE,QACD,oBAAC,WAAQ,WAAU,OAAM,MAAO,aAC/B;AAAA,QAAC;AAAA;AAAA,UACA,UAAW;AAAA,UACX,WAAU;AAAA,UAER;AAAA;AAAA,MACH,GACD;AAAA,OAEF;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
   "names": []
 }

package/build-module/components/document-bar/index.js

@@ -21,6 +21,8 @@ import { TEMPLATE_POST_TYPES } from "../../store/constants";
 import { store as editorStore } from "../../store";
 import usePageTypeBadge from "../../utils/pageTypeBadge";
 import { getTemplateInfo } from "../../utils/get-template-info";
+import { getStylesCanvasTitle } from "../styles-canvas";
+import { unlock } from "../../lock-unlock";
 const MotionButton = motion.create(Button);
 function DocumentBar(props) {
   const {
@@ -31,7 +33,8 @@ function DocumentBar(props) {
     isNotFound,
     templateTitle,
     onNavigateToPreviousEntityRecord,
-    isTemplatePreview
+    isTemplatePreview,
+    stylesCanvasTitle
   } = useSelect((select) => {
     const {
       getCurrentPostType,
@@ -58,6 +61,15 @@ function DocumentBar(props) {
       template: _document
     });
     const _postTypeLabel = getPostType(_postType)?.labels?.singular_name;
+    const { getStylesPath, getShowStylebook } = unlock(
+      select(editorStore)
+    );
+    const _stylesPath = getStylesPath();
+    const _showStylebook = getShowStylebook();
+    const _stylesCanvasTitle = getStylesCanvasTitle(
+      _stylesPath,
+      _showStylebook
+    );
     return {
       postId: _postId,
       postType: _postType,
@@ -71,7 +83,8 @@ function DocumentBar(props) {
       ),
       templateTitle: _templateInfo.title,
       onNavigateToPreviousEntityRecord: getEditorSettings().onNavigateToPreviousEntityRecord,
-      isTemplatePreview: getRenderingMode() === "template-locked"
+      isTemplatePreview: getRenderingMode() === "template-locked",
+      stylesCanvasTitle: _stylesCanvasTitle
     };
   }, []);
   const { open: openCommandCenter } = useDispatch(commandsStore);
@@ -79,7 +92,7 @@ function DocumentBar(props) {
   const isTemplate = TEMPLATE_POST_TYPES.includes(postType);
   const hasBackButton = !!onNavigateToPreviousEntityRecord;
   const entityTitle = isTemplate ? templateTitle : documentTitle;
-  const title = props.title || entityTitle;
+  const title = props.title || stylesCanvasTitle || entityTitle;
   const icon = props.icon;
   const pageTypeBadge = usePageTypeBadge(postId);
   const mountedRef = useRef(false);

package/build-module/components/document-bar/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/document-bar/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalText as Text,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { BlockIcon } from '@wordpress/block-editor';\nimport { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as commandsStore } from '@wordpress/commands';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { TEMPLATE_POST_TYPES } from '../../store/constants';\nimport { store as editorStore } from '../../store';\nimport usePageTypeBadge from '../../utils/pageTypeBadge';\nimport { getTemplateInfo } from '../../utils/get-template-info';\n\n/** @typedef {import(\"@wordpress/components\").IconType} IconType */\n\nconst MotionButton = motion.create( Button );\n\n/**\n * This component renders a navigation bar at the top of the editor. It displays the title of the current document,\n * a back button (if applicable), and a command center button. It also handles different states of the document,\n * such as \"not found\" or \"unsynced\".\n *\n * @example\n * ```jsx\n * <DocumentBar />\n * ```\n * @param {Object}   props       The component props.\n * @param {string}   props.title A title for the document, defaulting to the document or\n *                               template title currently being edited.\n * @param {IconType} props.icon  An icon for the document, no default.\n *                               (A default icon indicating the document post type is no longer used.)\n *\n * @return {React.ReactNode} The rendered DocumentBar component.\n */\nexport default function DocumentBar( props ) {\n\tconst {\n\t\tpostId,\n\t\tpostType,\n\t\tpostTypeLabel,\n\t\tdocumentTitle,\n\t\tisNotFound,\n\t\ttemplateTitle,\n\t\tonNavigateToPreviousEntityRecord,\n\t\tisTemplatePreview,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetCurrentPostType,\n\t\t\tgetCurrentPostId,\n\t\t\tgetEditorSettings,\n\t\t\tgetRenderingMode,\n\t\t} = select( editorStore );\n\n\t\tconst {\n\t\t\tgetEditedEntityRecord,\n\t\t\tgetPostType,\n\t\t\tgetCurrentTheme,\n\t\t\tisResolving: isResolvingSelector,\n\t\t} = select( coreStore );\n\t\tconst _postType = getCurrentPostType();\n\t\tconst _postId = getCurrentPostId();\n\t\tconst _document = getEditedEntityRecord(\n\t\t\t'postType',\n\t\t\t_postType,\n\t\t\t_postId\n\t\t);\n\n\t\tconst { default_template_types: templateTypes = [] } =\n\t\t\tgetCurrentTheme() ?? {};\n\n\t\tconst _templateInfo = getTemplateInfo( {\n\t\t\ttemplateTypes,\n\t\t\ttemplate: _document,\n\t\t} );\n\t\tconst _postTypeLabel = getPostType( _postType )?.labels?.singular_name;\n\n\t\treturn {\n\t\t\tpostId: _postId,\n\t\t\tpostType: _postType,\n\t\t\tpostTypeLabel: _postTypeLabel,\n\t\t\tdocumentTitle: _document.title,\n\t\t\tisNotFound:\n\t\t\t\t! _document &&\n\t\t\t\t! isResolvingSelector(\n\t\t\t\t\t'getEditedEntityRecord',\n\t\t\t\t\t'postType',\n\t\t\t\t\t_postType,\n\t\t\t\t\t_postId\n\t\t\t\t),\n\t\t\ttemplateTitle: _templateInfo.title,\n\t\t\tonNavigateToPreviousEntityRecord:\n\t\t\t\tgetEditorSettings().onNavigateToPreviousEntityRecord,\n\t\t\tisTemplatePreview: getRenderingMode() === 'template-locked',\n\t\t};\n\t}, [] );\n\n\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\tconst isReducedMotion = useReducedMotion();\n\n\tconst isTemplate = TEMPLATE_POST_TYPES.includes( postType );\n\tconst hasBackButton = !! onNavigateToPreviousEntityRecord;\n\tconst entityTitle = isTemplate ? templateTitle : documentTitle;\n\tconst title = props.title || entityTitle;\n\tconst icon = props.icon;\n\n\tconst pageTypeBadge = usePageTypeBadge( postId );\n\n\tconst mountedRef = useRef( false );\n\tuseEffect( () => {\n\t\tmountedRef.current = true;\n\t}, [] );\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'editor-document-bar', {\n\t\t\t\t'has-back-button': hasBackButton,\n\t\t\t} ) }\n\t\t>\n\t\t\t<AnimatePresence>\n\t\t\t\t{ hasBackButton && (\n\t\t\t\t\t<MotionButton\n\t\t\t\t\t\tclassName=\"editor-document-bar__back\"\n\t\t\t\t\t\ticon={ isRTL() ? chevronRightSmall : chevronLeftSmall }\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\tonNavigateToPreviousEntityRecord();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tmountedRef.current\n\t\t\t\t\t\t\t\t? { opacity: 0, transform: 'translateX(15%)' }\n\t\t\t\t\t\t\t\t: false // Don't show entry animation when DocumentBar mounts.\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={ { opacity: 1, transform: 'translateX(0%)' } }\n\t\t\t\t\t\texit={ { opacity: 0, transform: 'translateX(15%)' } }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisReducedMotion ? { duration: 0 } : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Back' ) }\n\t\t\t\t\t</MotionButton>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t\t{ ! isTemplate && isTemplatePreview && ! hasBackButton && (\n\t\t\t\t<BlockIcon\n\t\t\t\t\ticon={ layout }\n\t\t\t\t\tclassName=\"editor-document-bar__icon-layout\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isNotFound ? (\n\t\t\t\t<Text>{ __( 'Document not found' ) }</Text>\n\t\t\t) : (\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"editor-document-bar__command\"\n\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName=\"editor-document-bar__title\"\n\t\t\t\t\t\t// Force entry animation when the back button is added or removed.\n\t\t\t\t\t\tkey={ hasBackButton }\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tmountedRef.current\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\ttransform: hasBackButton\n\t\t\t\t\t\t\t\t\t\t\t? 'translateX(15%)'\n\t\t\t\t\t\t\t\t\t\t\t: 'translateX(-15%)',\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: false // Don't show entry animation when DocumentBar mounts.\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransform: 'translateX(0%)',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisReducedMotion ? { duration: 0 } : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ icon && <BlockIcon icon={ icon } /> }\n\t\t\t\t\t\t<Text size=\"body\" as=\"h1\">\n\t\t\t\t\t\t\t<span className=\"editor-document-bar__post-title\">\n\t\t\t\t\t\t\t\t{ title\n\t\t\t\t\t\t\t\t\t? stripHTML( title )\n\t\t\t\t\t\t\t\t\t: __( 'No title' ) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{ pageTypeBadge && (\n\t\t\t\t\t\t\t\t<span className=\"editor-document-bar__post-type-label\">\n\t\t\t\t\t\t\t\t\t{ `\u00B7 ${ pageTypeBadge }` }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ postTypeLabel &&\n\t\t\t\t\t\t\t\t! props.title &&\n\t\t\t\t\t\t\t\t! pageTypeBadge && (\n\t\t\t\t\t\t\t\t\t<span className=\"editor-document-bar__post-type-label\">\n\t\t\t\t\t\t\t\t\t\t{ `\u00B7 ${ decodeEntities(\n\t\t\t\t\t\t\t\t\t\t\tpostTypeLabel\n\t\t\t\t\t\t\t\t\t\t) }` }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</motion.div>\n\t\t\t\t\t<span className=\"editor-document-bar__shortcut\">\n\t\t\t\t\t\t{ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t</div>\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 { __, isRTL } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalText as Text,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { BlockIcon } from '@wordpress/block-editor';\nimport { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as commandsStore } from '@wordpress/commands';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { TEMPLATE_POST_TYPES } from '../../store/constants';\nimport { store as editorStore } from '../../store';\nimport usePageTypeBadge from '../../utils/pageTypeBadge';\nimport { getTemplateInfo } from '../../utils/get-template-info';\nimport { getStylesCanvasTitle } from '../styles-canvas';\nimport { unlock } from '../../lock-unlock';\n\n/** @typedef {import(\"@wordpress/components\").IconType} IconType */\n\nconst MotionButton = motion.create( Button );\n\n/**\n * This component renders a navigation bar at the top of the editor. It displays the title of the current document,\n * a back button (if applicable), and a command center button. It also handles different states of the document,\n * such as \"not found\" or \"unsynced\".\n *\n * @example\n * ```jsx\n * <DocumentBar />\n * ```\n *\n * @param {Object}   props       The component props.\n * @param {string}   props.title A title for the document, defaulting to the document or template title currently being edited.\n * @param {IconType} props.icon  An icon for the document, no default.\n *                               (A default icon indicating the document post type is no longer used.)\n *\n * @return {React.ReactNode} The rendered DocumentBar component.\n */\nexport default function DocumentBar( props ) {\n\tconst {\n\t\tpostId,\n\t\tpostType,\n\t\tpostTypeLabel,\n\t\tdocumentTitle,\n\t\tisNotFound,\n\t\ttemplateTitle,\n\t\tonNavigateToPreviousEntityRecord,\n\t\tisTemplatePreview,\n\t\tstylesCanvasTitle,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetCurrentPostType,\n\t\t\tgetCurrentPostId,\n\t\t\tgetEditorSettings,\n\t\t\tgetRenderingMode,\n\t\t} = select( editorStore );\n\n\t\tconst {\n\t\t\tgetEditedEntityRecord,\n\t\t\tgetPostType,\n\t\t\tgetCurrentTheme,\n\t\t\tisResolving: isResolvingSelector,\n\t\t} = select( coreStore );\n\t\tconst _postType = getCurrentPostType();\n\t\tconst _postId = getCurrentPostId();\n\t\tconst _document = getEditedEntityRecord(\n\t\t\t'postType',\n\t\t\t_postType,\n\t\t\t_postId\n\t\t);\n\n\t\tconst { default_template_types: templateTypes = [] } =\n\t\t\tgetCurrentTheme() ?? {};\n\n\t\tconst _templateInfo = getTemplateInfo( {\n\t\t\ttemplateTypes,\n\t\t\ttemplate: _document,\n\t\t} );\n\t\tconst _postTypeLabel = getPostType( _postType )?.labels?.singular_name;\n\n\t\t// Check if styles canvas is active and get its title\n\t\tconst { getStylesPath, getShowStylebook } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\tconst _stylesPath = getStylesPath();\n\t\tconst _showStylebook = getShowStylebook();\n\t\tconst _stylesCanvasTitle = getStylesCanvasTitle(\n\t\t\t_stylesPath,\n\t\t\t_showStylebook\n\t\t);\n\n\t\treturn {\n\t\t\tpostId: _postId,\n\t\t\tpostType: _postType,\n\t\t\tpostTypeLabel: _postTypeLabel,\n\t\t\tdocumentTitle: _document.title,\n\t\t\tisNotFound:\n\t\t\t\t! _document &&\n\t\t\t\t! isResolvingSelector(\n\t\t\t\t\t'getEditedEntityRecord',\n\t\t\t\t\t'postType',\n\t\t\t\t\t_postType,\n\t\t\t\t\t_postId\n\t\t\t\t),\n\t\t\ttemplateTitle: _templateInfo.title,\n\t\t\tonNavigateToPreviousEntityRecord:\n\t\t\t\tgetEditorSettings().onNavigateToPreviousEntityRecord,\n\t\t\tisTemplatePreview: getRenderingMode() === 'template-locked',\n\t\t\tstylesCanvasTitle: _stylesCanvasTitle,\n\t\t};\n\t}, [] );\n\n\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\tconst isReducedMotion = useReducedMotion();\n\n\tconst isTemplate = TEMPLATE_POST_TYPES.includes( postType );\n\tconst hasBackButton = !! onNavigateToPreviousEntityRecord;\n\tconst entityTitle = isTemplate ? templateTitle : documentTitle;\n\tconst title = props.title || stylesCanvasTitle || entityTitle;\n\tconst icon = props.icon;\n\n\tconst pageTypeBadge = usePageTypeBadge( postId );\n\n\tconst mountedRef = useRef( false );\n\tuseEffect( () => {\n\t\tmountedRef.current = true;\n\t}, [] );\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'editor-document-bar', {\n\t\t\t\t'has-back-button': hasBackButton,\n\t\t\t} ) }\n\t\t>\n\t\t\t<AnimatePresence>\n\t\t\t\t{ hasBackButton && (\n\t\t\t\t\t<MotionButton\n\t\t\t\t\t\tclassName=\"editor-document-bar__back\"\n\t\t\t\t\t\ticon={ isRTL() ? chevronRightSmall : chevronLeftSmall }\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\tonNavigateToPreviousEntityRecord();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tmountedRef.current\n\t\t\t\t\t\t\t\t? { opacity: 0, transform: 'translateX(15%)' }\n\t\t\t\t\t\t\t\t: false // Don't show entry animation when DocumentBar mounts.\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={ { opacity: 1, transform: 'translateX(0%)' } }\n\t\t\t\t\t\texit={ { opacity: 0, transform: 'translateX(15%)' } }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisReducedMotion ? { duration: 0 } : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Back' ) }\n\t\t\t\t\t</MotionButton>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t\t{ ! isTemplate && isTemplatePreview && ! hasBackButton && (\n\t\t\t\t<BlockIcon\n\t\t\t\t\ticon={ layout }\n\t\t\t\t\tclassName=\"editor-document-bar__icon-layout\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isNotFound ? (\n\t\t\t\t<Text>{ __( 'Document not found' ) }</Text>\n\t\t\t) : (\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"editor-document-bar__command\"\n\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName=\"editor-document-bar__title\"\n\t\t\t\t\t\t// Force entry animation when the back button is added or removed.\n\t\t\t\t\t\tkey={ hasBackButton }\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tmountedRef.current\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\ttransform: hasBackButton\n\t\t\t\t\t\t\t\t\t\t\t? 'translateX(15%)'\n\t\t\t\t\t\t\t\t\t\t\t: 'translateX(-15%)',\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: false // Don't show entry animation when DocumentBar mounts.\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransform: 'translateX(0%)',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisReducedMotion ? { duration: 0 } : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ icon && <BlockIcon icon={ icon } /> }\n\t\t\t\t\t\t<Text size=\"body\" as=\"h1\">\n\t\t\t\t\t\t\t<span className=\"editor-document-bar__post-title\">\n\t\t\t\t\t\t\t\t{ title\n\t\t\t\t\t\t\t\t\t? stripHTML( title )\n\t\t\t\t\t\t\t\t\t: __( 'No title' ) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{ pageTypeBadge && (\n\t\t\t\t\t\t\t\t<span className=\"editor-document-bar__post-type-label\">\n\t\t\t\t\t\t\t\t\t{ `\u00B7 ${ pageTypeBadge }` }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ postTypeLabel &&\n\t\t\t\t\t\t\t\t! props.title &&\n\t\t\t\t\t\t\t\t! pageTypeBadge && (\n\t\t\t\t\t\t\t\t\t<span className=\"editor-document-bar__post-type-label\">\n\t\t\t\t\t\t\t\t\t\t{ `\u00B7 ${ decodeEntities(\n\t\t\t\t\t\t\t\t\t\t\tpostTypeLabel\n\t\t\t\t\t\t\t\t\t\t) }` }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</motion.div>\n\t\t\t\t\t<span className=\"editor-document-bar__shortcut\">\n\t\t\t\t\t\t{ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "AA2JK,cA4DC,YA5DD;AAxJL,OAAO,UAAU;AAKjB,SAAS,IAAI,aAAa;AAC1B,SAAS,WAAW,mBAAmB;AACvC;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,OACvB;AACP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB,mBAAmB,cAAc;AAC5D,SAAS,uBAAuB;AAChC,SAAS,SAAS,iBAAiB;AACnC,SAAS,SAAS,qBAAqB;AACvC,SAAS,QAAQ,iBAAiB;AAClC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB,iBAAiB;AAKjD,SAAS,2BAA2B;AACpC,SAAS,SAAS,mBAAmB;AACrC,OAAO,sBAAsB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,cAAc;AAIvB,MAAM,eAAe,OAAO,OAAQ,MAAO;AAmB5B,SAAR,YAA8B,OAAQ;AAC5C,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,UAAW,CAAE,WAAY;AAC5B,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,IAAI,OAAQ,WAAY;AAExB,UAAM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,IACd,IAAI,OAAQ,SAAU;AACtB,UAAM,YAAY,mBAAmB;AACrC,UAAM,UAAU,iBAAiB;AACjC,UAAM,YAAY;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAEA,UAAM,EAAE,wBAAwB,gBAAgB,CAAC,EAAE,IAClD,gBAAgB,KAAK,CAAC;AAEvB,UAAM,gBAAgB,gBAAiB;AAAA,MACtC;AAAA,MACA,UAAU;AAAA,IACX,CAAE;AACF,UAAM,iBAAiB,YAAa,SAAU,GAAG,QAAQ;AAGzD,UAAM,EAAE,eAAe,iBAAiB,IAAI;AAAA,MAC3C,OAAQ,WAAY;AAAA,IACrB;AACA,UAAM,cAAc,cAAc;AAClC,UAAM,iBAAiB,iBAAiB;AACxC,UAAM,qBAAqB;AAAA,MAC1B;AAAA,MACA;AAAA,IACD;AAEA,WAAO;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,eAAe;AAAA,MACf,eAAe,UAAU;AAAA,MACzB,YACC,CAAE,aACF,CAAE;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACD,eAAe,cAAc;AAAA,MAC7B,kCACC,kBAAkB,EAAE;AAAA,MACrB,mBAAmB,iBAAiB,MAAM;AAAA,MAC1C,mBAAmB;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,MAAM,kBAAkB,IAAI,YAAa,aAAc;AAC/D,QAAM,kBAAkB,iBAAiB;AAEzC,QAAM,aAAa,oBAAoB,SAAU,QAAS;AAC1D,QAAM,gBAAgB,CAAC,CAAE;AACzB,QAAM,cAAc,aAAa,gBAAgB;AACjD,QAAM,QAAQ,MAAM,SAAS,qBAAqB;AAClD,QAAM,OAAO,MAAM;AAEnB,QAAM,gBAAgB,iBAAkB,MAAO;AAE/C,QAAM,aAAa,OAAQ,KAAM;AACjC,YAAW,MAAM;AAChB,eAAW,UAAU;AAAA,EACtB,GAAG,CAAC,CAAE;AAEN,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,uBAAuB;AAAA,QACxC,mBAAmB;AAAA,MACpB,CAAE;AAAA,MAEF;AAAA,4BAAC,mBACE,2BACD;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,MAAO,MAAM,IAAI,oBAAoB;AAAA,YACrC,SAAU,CAAE,UAAW;AACtB,oBAAM,gBAAgB;AACtB,+CAAiC;AAAA,YAClC;AAAA,YACA,MAAK;AAAA,YACL,SACC,WAAW,UACR,EAAE,SAAS,GAAG,WAAW,kBAAkB,IAC3C;AAAA,YAEJ,SAAU,EAAE,SAAS,GAAG,WAAW,iBAAiB;AAAA,YACpD,MAAO,EAAE,SAAS,GAAG,WAAW,kBAAkB;AAAA,YAClD,YACC,kBAAkB,EAAE,UAAU,EAAE,IAAI;AAAA,YAGnC,aAAI,MAAO;AAAA;AAAA,QACd,GAEF;AAAA,QACE,CAAE,cAAc,qBAAqB,CAAE,iBACxC;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,YACP,WAAU;AAAA;AAAA,QACX;AAAA,QAEC,aACD,oBAAC,QAAO,aAAI,oBAAqB,GAAG,IAEpC;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAU,MAAM,kBAAkB;AAAA,YAClC,MAAK;AAAA,YAEL;AAAA;AAAA,gBAAC,OAAO;AAAA,gBAAP;AAAA,kBACA,WAAU;AAAA,kBAGV,SACC,WAAW,UACR;AAAA,oBACA,SAAS;AAAA,oBACT,WAAW,gBACR,oBACA;AAAA,kBACH,IACA;AAAA,kBAEJ,SAAU;AAAA,oBACT,SAAS;AAAA,oBACT,WAAW;AAAA,kBACZ;AAAA,kBACA,YACC,kBAAkB,EAAE,UAAU,EAAE,IAAI;AAAA,kBAGnC;AAAA,4BAAQ,oBAAC,aAAU,MAAc;AAAA,oBACnC,qBAAC,QAAK,MAAK,QAAO,IAAG,MACpB;AAAA,0CAAC,UAAK,WAAU,mCACb,kBACC,UAAW,KAAM,IACjB,GAAI,UAAW,GACnB;AAAA,sBACE,iBACD,oBAAC,UAAK,WAAU,wCACb,kBAAM,aAAc,IACvB;AAAA,sBAEC,iBACD,CAAE,MAAM,SACR,CAAE,iBACD,oBAAC,UAAK,WAAU,wCACb,kBAAM;AAAA,wBACP;AAAA,sBACD,CAAE,IACH;AAAA,uBAEH;AAAA;AAAA;AAAA,gBAxCM;AAAA,cAyCP;AAAA,cACA,oBAAC,UAAK,WAAU,iCACb,0BAAgB,QAAS,GAAI,GAChC;AAAA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF;AAEF;",
   "names": []
 }

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

@@ -3,11 +3,14 @@ import { useSelect } from "@wordpress/data";
 import { store as coreStore } from "@wordpress/core-data";
 import { Notice } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
+import { store as editorStore } from "../../store";
 import { TEMPLATE_POST_TYPE } from "../../store/constants";
 import EditorInterface from "../editor-interface";
 import { ExperimentalEditorProvider } from "../provider";
 import Sidebar from "../sidebar";
 import NotesSidebar from "../collab-sidebar";
+import GlobalStylesSidebar from "../global-styles-sidebar";
+import { GlobalStylesRenderer } from "../global-styles-renderer";
 function Editor({
   postType,
   postId,
@@ -23,14 +26,26 @@ function Editor({
   extraSidebarPanels,
   ...props
 }) {
-  const { post, template, hasLoadedPost, error } = useSelect(
+  const {
+    post,
+    template,
+    hasLoadedPost,
+    error,
+    isBlockTheme,
+    showGlobalStyles
+  } = useSelect(
     (select) => {
       const {
         getEntityRecord,
         getResolutionError,
-        hasFinishedResolution
+        hasFinishedResolution,
+        getCurrentTheme
       } = select(coreStore);
+      const { getRenderingMode, getCurrentPostType } = select(editorStore);
       const postArgs = ["postType", postType, postId];
+      const renderingMode = getRenderingMode();
+      const currentPostType = getCurrentPostType();
+      const _isBlockTheme = getCurrentTheme()?.is_block_theme;
       return {
         post: getEntityRecord(...postArgs),
         template: templateId ? getEntityRecord(
@@ -42,7 +57,9 @@ function Editor({
           "getEntityRecord",
           postArgs
         ),
-        error: getResolutionError("getEntityRecord", postArgs)?.message
+        error: getResolutionError("getEntityRecord", postArgs)?.message,
+        isBlockTheme: _isBlockTheme,
+        showGlobalStyles: _isBlockTheme && (currentPostType === "wp_template" || renderingMode === "template-locked")
       };
     },
     [postType, postId, templateId]
@@ -76,7 +93,9 @@ function Editor({
               onActionPerformed,
               extraPanels: extraSidebarPanels
             }
-          )
+          ),
+          isBlockTheme && /* @__PURE__ */ jsx(GlobalStylesRenderer, {}),
+          showGlobalStyles && /* @__PURE__ */ jsx(GlobalStylesSidebar, {})
         ]
       }
     )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/editor/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { Notice } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { TEMPLATE_POST_TYPE } from '../../store/constants';\nimport EditorInterface from '../editor-interface';\nimport { ExperimentalEditorProvider } from '../provider';\nimport Sidebar from '../sidebar';\nimport NotesSidebar from '../collab-sidebar';\n\nfunction Editor( {\n\tpostType,\n\tpostId,\n\ttemplateId,\n\tsettings,\n\tchildren,\n\tinitialEdits,\n\n\t// This could be part of the settings.\n\tonActionPerformed,\n\n\t// The following abstractions are not ideal but necessary\n\t// to account for site editor and post editor differences for now.\n\textraContent,\n\textraSidebarPanels,\n\t...props\n} ) {\n\tconst { post, template, hasLoadedPost, error } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecord,\n\t\t\t\tgetResolutionError,\n\t\t\t\thasFinishedResolution,\n\t\t\t} = select( coreStore );\n\n\t\t\tconst postArgs = [ 'postType', postType, postId ];\n\t\t\treturn {\n\t\t\t\tpost: getEntityRecord( ...postArgs ),\n\t\t\t\ttemplate: templateId\n\t\t\t\t\t? getEntityRecord(\n\t\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t\tTEMPLATE_POST_TYPE,\n\t\t\t\t\t\t\ttemplateId\n\t\t\t\t\t  )\n\t\t\t\t\t: undefined,\n\t\t\t\thasLoadedPost: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecord',\n\t\t\t\t\tpostArgs\n\t\t\t\t),\n\t\t\t\terror: getResolutionError( 'getEntityRecord', postArgs )\n\t\t\t\t\t?.message,\n\t\t\t};\n\t\t},\n\t\t[ postType, postId, templateId ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ hasLoadedPost && ! post && (\n\t\t\t\t<Notice\n\t\t\t\t\tstatus={ !! error ? 'error' : 'warning' }\n\t\t\t\t\tisDismissible={ false }\n\t\t\t\t>\n\t\t\t\t\t{ ! error\n\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\"You attempted to edit an item that doesn't exist. Perhaps it was deleted?\"\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: error }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t{ !! post && (\n\t\t\t\t<ExperimentalEditorProvider\n\t\t\t\t\tpost={ post }\n\t\t\t\t\t__unstableTemplate={ template }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tinitialEdits={ initialEdits }\n\t\t\t\t\tuseSubRegistry={ false }\n\t\t\t\t>\n\t\t\t\t\t<EditorInterface { ...props }>\n\t\t\t\t\t\t{ extraContent }\n\t\t\t\t\t</EditorInterface>\n\t\t\t\t\t{ children }\n\t\t\t\t\t<NotesSidebar />\n\t\t\t\t\t<Sidebar\n\t\t\t\t\t\tonActionPerformed={ onActionPerformed }\n\t\t\t\t\t\textraPanels={ extraSidebarPanels }\n\t\t\t\t\t/>\n\t\t\t\t</ExperimentalEditorProvider>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Editor;\n"],
-  "mappings": "AAgEE,mBAEE,KAYA,YAdF;AA7DF,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,cAAc;AACvB,SAAS,UAAU;AAKnB,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B,SAAS,kCAAkC;AAC3C,OAAO,aAAa;AACpB,OAAO,kBAAkB;AAEzB,SAAS,OAAQ;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA;AAAA;AAAA,EAIA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,QAAM,EAAE,MAAM,UAAU,eAAe,MAAM,IAAI;AAAA,IAChD,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,SAAU;AAEtB,YAAM,WAAW,CAAE,YAAY,UAAU,MAAO;AAChD,aAAO;AAAA,QACN,MAAM,gBAAiB,GAAG,QAAS;AAAA,QACnC,UAAU,aACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACA,IACA;AAAA,QACH,eAAe;AAAA,UACd;AAAA,UACA;AAAA,QACD;AAAA,QACA,OAAO,mBAAoB,mBAAmB,QAAS,GACpD;AAAA,MACJ;AAAA,IACD;AAAA,IACA,CAAE,UAAU,QAAQ,UAAW;AAAA,EAChC;AAEA,SACC,iCACG;AAAA,qBAAiB,CAAE,QACpB;AAAA,MAAC;AAAA;AAAA,QACA,QAAS,CAAC,CAAE,QAAQ,UAAU;AAAA,QAC9B,eAAgB;AAAA,QAEd,WAAE,QACD;AAAA,UACA;AAAA,QACA,IACA;AAAA;AAAA,IACJ;AAAA,IAEC,CAAC,CAAE,QACJ;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,oBAAqB;AAAA,QACrB;AAAA,QACA;AAAA,QACA,gBAAiB;AAAA,QAEjB;AAAA,8BAAC,mBAAkB,GAAG,OACnB,wBACH;AAAA,UACE;AAAA,UACF,oBAAC,gBAAa;AAAA,UACd;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,aAAc;AAAA;AAAA,UACf;AAAA;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,iBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { Notice } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { TEMPLATE_POST_TYPE } from '../../store/constants';\nimport EditorInterface from '../editor-interface';\nimport { ExperimentalEditorProvider } from '../provider';\nimport Sidebar from '../sidebar';\nimport NotesSidebar from '../collab-sidebar';\nimport GlobalStylesSidebar from '../global-styles-sidebar';\nimport { GlobalStylesRenderer } from '../global-styles-renderer';\n\nfunction Editor( {\n\tpostType,\n\tpostId,\n\ttemplateId,\n\tsettings,\n\tchildren,\n\tinitialEdits,\n\n\t// This could be part of the settings.\n\tonActionPerformed,\n\n\t// The following abstractions are not ideal but necessary\n\t// to account for site editor and post editor differences for now.\n\textraContent,\n\textraSidebarPanels,\n\t...props\n} ) {\n\tconst {\n\t\tpost,\n\t\ttemplate,\n\t\thasLoadedPost,\n\t\terror,\n\t\tisBlockTheme,\n\t\tshowGlobalStyles,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecord,\n\t\t\t\tgetResolutionError,\n\t\t\t\thasFinishedResolution,\n\t\t\t\tgetCurrentTheme,\n\t\t\t} = select( coreStore );\n\t\t\tconst { getRenderingMode, getCurrentPostType } =\n\t\t\t\tselect( editorStore );\n\n\t\t\tconst postArgs = [ 'postType', postType, postId ];\n\t\t\tconst renderingMode = getRenderingMode();\n\t\t\tconst currentPostType = getCurrentPostType();\n\t\t\tconst _isBlockTheme = getCurrentTheme()?.is_block_theme;\n\n\t\t\treturn {\n\t\t\t\tpost: getEntityRecord( ...postArgs ),\n\t\t\t\ttemplate: templateId\n\t\t\t\t\t? getEntityRecord(\n\t\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t\tTEMPLATE_POST_TYPE,\n\t\t\t\t\t\t\ttemplateId\n\t\t\t\t\t  )\n\t\t\t\t\t: undefined,\n\t\t\t\thasLoadedPost: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecord',\n\t\t\t\t\tpostArgs\n\t\t\t\t),\n\t\t\t\terror: getResolutionError( 'getEntityRecord', postArgs )\n\t\t\t\t\t?.message,\n\t\t\t\tisBlockTheme: _isBlockTheme,\n\t\t\t\tshowGlobalStyles:\n\t\t\t\t\t_isBlockTheme &&\n\t\t\t\t\t( currentPostType === 'wp_template' ||\n\t\t\t\t\t\trenderingMode === 'template-locked' ),\n\t\t\t};\n\t\t},\n\t\t[ postType, postId, templateId ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ hasLoadedPost && ! post && (\n\t\t\t\t<Notice\n\t\t\t\t\tstatus={ !! error ? 'error' : 'warning' }\n\t\t\t\t\tisDismissible={ false }\n\t\t\t\t>\n\t\t\t\t\t{ ! error\n\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\"You attempted to edit an item that doesn't exist. Perhaps it was deleted?\"\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: error }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t{ !! post && (\n\t\t\t\t<ExperimentalEditorProvider\n\t\t\t\t\tpost={ post }\n\t\t\t\t\t__unstableTemplate={ template }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tinitialEdits={ initialEdits }\n\t\t\t\t\tuseSubRegistry={ false }\n\t\t\t\t>\n\t\t\t\t\t<EditorInterface { ...props }>\n\t\t\t\t\t\t{ extraContent }\n\t\t\t\t\t</EditorInterface>\n\t\t\t\t\t{ children }\n\t\t\t\t\t<NotesSidebar />\n\t\t\t\t\t<Sidebar\n\t\t\t\t\t\tonActionPerformed={ onActionPerformed }\n\t\t\t\t\t\textraPanels={ extraSidebarPanels }\n\t\t\t\t\t/>\n\t\t\t\t\t{ isBlockTheme && <GlobalStylesRenderer /> }\n\t\t\t\t\t{ showGlobalStyles && <GlobalStylesSidebar /> }\n\t\t\t\t</ExperimentalEditorProvider>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Editor;\n"],
+  "mappings": "AAsFE,mBAEE,KAYA,YAdF;AAnFF,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,cAAc;AACvB,SAAS,UAAU;AAKnB,SAAS,SAAS,mBAAmB;AACrC,SAAS,0BAA0B;AACnC,OAAO,qBAAqB;AAC5B,SAAS,kCAAkC;AAC3C,OAAO,aAAa;AACpB,OAAO,kBAAkB;AACzB,OAAO,yBAAyB;AAChC,SAAS,4BAA4B;AAErC,SAAS,OAAQ;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA;AAAA;AAAA,EAIA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,SAAU;AACtB,YAAM,EAAE,kBAAkB,mBAAmB,IAC5C,OAAQ,WAAY;AAErB,YAAM,WAAW,CAAE,YAAY,UAAU,MAAO;AAChD,YAAM,gBAAgB,iBAAiB;AACvC,YAAM,kBAAkB,mBAAmB;AAC3C,YAAM,gBAAgB,gBAAgB,GAAG;AAEzC,aAAO;AAAA,QACN,MAAM,gBAAiB,GAAG,QAAS;AAAA,QACnC,UAAU,aACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACA,IACA;AAAA,QACH,eAAe;AAAA,UACd;AAAA,UACA;AAAA,QACD;AAAA,QACA,OAAO,mBAAoB,mBAAmB,QAAS,GACpD;AAAA,QACH,cAAc;AAAA,QACd,kBACC,kBACE,oBAAoB,iBACrB,kBAAkB;AAAA,MACrB;AAAA,IACD;AAAA,IACA,CAAE,UAAU,QAAQ,UAAW;AAAA,EAChC;AAEA,SACC,iCACG;AAAA,qBAAiB,CAAE,QACpB;AAAA,MAAC;AAAA;AAAA,QACA,QAAS,CAAC,CAAE,QAAQ,UAAU;AAAA,QAC9B,eAAgB;AAAA,QAEd,WAAE,QACD;AAAA,UACA;AAAA,QACA,IACA;AAAA;AAAA,IACJ;AAAA,IAEC,CAAC,CAAE,QACJ;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,oBAAqB;AAAA,QACrB;AAAA,QACA;AAAA,QACA,gBAAiB;AAAA,QAEjB;AAAA,8BAAC,mBAAkB,GAAG,OACnB,wBACH;AAAA,UACE;AAAA,UACF,oBAAC,gBAAa;AAAA,UACd;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,aAAc;AAAA;AAAA,UACf;AAAA,UACE,gBAAgB,oBAAC,wBAAqB;AAAA,UACtC,oBAAoB,oBAAC,uBAAoB;AAAA;AAAA;AAAA,IAC5C;AAAA,KAEF;AAEF;AAEA,IAAO,iBAAQ;",
   "names": []
 }

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": []
+}