@wordpress/editor 14.37.0 → 14.37.1-next.79a2f3cdd.0

package/build-module/components/start-page-options/index.mjs

@@ -0,0 +1,158 @@
+// packages/editor/src/components/start-page-options/index.js
+import { Flex, FlexItem, Modal, CheckboxControl } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { useState, useMemo, useEffect } from "@wordpress/element";
+import {
+  store as blockEditorStore,
+  __experimentalBlockPatternsList as BlockPatternsList
+} from "@wordpress/block-editor";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { store as coreStore } from "@wordpress/core-data";
+import { __unstableSerializeAndClean } from "@wordpress/blocks";
+import { store as preferencesStore } from "@wordpress/preferences";
+import { store as interfaceStore } from "@wordpress/interface";
+import {
+  TEMPLATE_POST_TYPE,
+  TEMPLATE_PART_POST_TYPE
+} from "../../store/constants.mjs";
+import { store as editorStore } from "../../store/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useStartPatterns() {
+  const { blockPatternsWithPostContentBlockType, postType } = useSelect(
+    (select) => {
+      const { getPatternsByBlockTypes, getBlocksByName } = select(blockEditorStore);
+      const { getCurrentPostType, getRenderingMode } = select(editorStore);
+      const rootClientId = getRenderingMode() === "post-only" ? "" : getBlocksByName("core/post-content")?.[0];
+      return {
+        blockPatternsWithPostContentBlockType: getPatternsByBlockTypes(
+          "core/post-content",
+          rootClientId
+        ),
+        postType: getCurrentPostType()
+      };
+    },
+    []
+  );
+  return useMemo(() => {
+    if (!blockPatternsWithPostContentBlockType?.length) {
+      return [];
+    }
+    return blockPatternsWithPostContentBlockType.filter((pattern) => {
+      return postType === "page" && !pattern.postTypes || Array.isArray(pattern.postTypes) && pattern.postTypes.includes(postType);
+    });
+  }, [postType, blockPatternsWithPostContentBlockType]);
+}
+function PatternSelection({ blockPatterns, onChoosePattern }) {
+  const { editEntityRecord } = useDispatch(coreStore);
+  const { postType, postId } = useSelect((select) => {
+    const { getCurrentPostType, getCurrentPostId } = select(editorStore);
+    return {
+      postType: getCurrentPostType(),
+      postId: getCurrentPostId()
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    BlockPatternsList,
+    {
+      blockPatterns,
+      onClickPattern: (_pattern, blocks) => {
+        editEntityRecord("postType", postType, postId, {
+          blocks,
+          content: ({ blocks: blocksForSerialization = [] }) => __unstableSerializeAndClean(blocksForSerialization)
+        });
+        onChoosePattern();
+      }
+    }
+  );
+}
+function StartPageOptionsModal({ onClose }) {
+  const [showStartPatterns, setShowStartPatterns] = useState(true);
+  const { set: setPreference } = useDispatch(preferencesStore);
+  const startPatterns = useStartPatterns();
+  const hasStartPattern = startPatterns.length > 0;
+  if (!hasStartPattern) {
+    return null;
+  }
+  function handleClose() {
+    onClose();
+    setPreference("core", "enableChoosePatternModal", showStartPatterns);
+  }
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      className: "editor-start-page-options__modal",
+      title: __("Choose a pattern"),
+      isFullScreen: true,
+      onRequestClose: handleClose,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "editor-start-page-options__modal-content", children: /* @__PURE__ */ jsx(
+          PatternSelection,
+          {
+            blockPatterns: startPatterns,
+            onChoosePattern: handleClose
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            className: "editor-start-page-options__modal__actions",
+            justify: "flex-start",
+            expanded: false,
+            children: /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+              CheckboxControl,
+              {
+                checked: showStartPatterns,
+                label: __(
+                  "Always show starter patterns for new pages"
+                ),
+                onChange: (newValue) => {
+                  setShowStartPatterns(newValue);
+                }
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+function StartPageOptions() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { isEditedPostDirty, isEditedPostEmpty } = useSelect(editorStore);
+  const { isModalActive } = useSelect(interfaceStore);
+  const { enabled, postId } = useSelect((select) => {
+    const { getCurrentPostId, getCurrentPostType } = select(editorStore);
+    const choosePatternModalEnabled = select(preferencesStore).get(
+      "core",
+      "enableChoosePatternModal"
+    );
+    const currentPostType = getCurrentPostType();
+    return {
+      postId: getCurrentPostId(),
+      enabled: choosePatternModalEnabled && TEMPLATE_POST_TYPE !== currentPostType && TEMPLATE_PART_POST_TYPE !== currentPostType
+    };
+  }, []);
+  useEffect(() => {
+    const isFreshPage = !isEditedPostDirty() && isEditedPostEmpty();
+    const isPreferencesModalActive = isModalActive("editor/preferences");
+    if (!enabled || !isFreshPage || isPreferencesModalActive) {
+      return;
+    }
+    setIsOpen(true);
+  }, [
+    enabled,
+    postId,
+    isEditedPostDirty,
+    isEditedPostEmpty,
+    isModalActive
+  ]);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StartPageOptionsModal, { onClose: () => setIsOpen(false) });
+}
+export {
+  StartPageOptions as default,
+  useStartPatterns
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/start-page-options/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/start-page-options/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Flex, FlexItem, Modal, CheckboxControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\t__experimentalBlockPatternsList as BlockPatternsList,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __unstableSerializeAndClean } from '@wordpress/blocks';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport {\n\tTEMPLATE_POST_TYPE,\n\tTEMPLATE_PART_POST_TYPE,\n} from '../../store/constants';\nimport { store as editorStore } from '../../store';\n\nexport function useStartPatterns() {\n\t// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,\n\t// and it has no postTypes declared and the current post type is page or if\n\t// the current post type is part of the postTypes declared.\n\tconst { blockPatternsWithPostContentBlockType, postType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getPatternsByBlockTypes, getBlocksByName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst { getCurrentPostType, getRenderingMode } =\n\t\t\t\tselect( editorStore );\n\t\t\tconst rootClientId =\n\t\t\t\tgetRenderingMode() === 'post-only'\n\t\t\t\t\t? ''\n\t\t\t\t\t: getBlocksByName( 'core/post-content' )?.[ 0 ];\n\t\t\treturn {\n\t\t\t\tblockPatternsWithPostContentBlockType: getPatternsByBlockTypes(\n\t\t\t\t\t'core/post-content',\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\treturn useMemo( () => {\n\t\tif ( ! blockPatternsWithPostContentBlockType?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t/*\n\t\t * Filter patterns without postTypes declared if the current postType is page\n\t\t * or patterns that declare the current postType in its post type array.\n\t\t */\n\t\treturn blockPatternsWithPostContentBlockType.filter( ( pattern ) => {\n\t\t\treturn (\n\t\t\t\t( postType === 'page' && ! pattern.postTypes ) ||\n\t\t\t\t( Array.isArray( pattern.postTypes ) &&\n\t\t\t\t\tpattern.postTypes.includes( postType ) )\n\t\t\t);\n\t\t} );\n\t}, [ postType, blockPatternsWithPostContentBlockType ] );\n}\n\nfunction PatternSelection( { blockPatterns, onChoosePattern } ) {\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\tconst { postType, postId } = useSelect( ( select ) => {\n\t\tconst { getCurrentPostType, getCurrentPostId } = select( editorStore );\n\n\t\treturn {\n\t\t\tpostType: getCurrentPostType(),\n\t\t\tpostId: getCurrentPostId(),\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<BlockPatternsList\n\t\t\tblockPatterns={ blockPatterns }\n\t\t\tonClickPattern={ ( _pattern, blocks ) => {\n\t\t\t\teditEntityRecord( 'postType', postType, postId, {\n\t\t\t\t\tblocks,\n\t\t\t\t\tcontent: ( { blocks: blocksForSerialization = [] } ) =>\n\t\t\t\t\t\t__unstableSerializeAndClean( blocksForSerialization ),\n\t\t\t\t} );\n\t\t\t\tonChoosePattern();\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction StartPageOptionsModal( { onClose } ) {\n\tconst [ showStartPatterns, setShowStartPatterns ] = useState( true );\n\tconst { set: setPreference } = useDispatch( preferencesStore );\n\tconst startPatterns = useStartPatterns();\n\tconst hasStartPattern = startPatterns.length > 0;\n\n\tif ( ! hasStartPattern ) {\n\t\treturn null;\n\t}\n\n\tfunction handleClose() {\n\t\tonClose();\n\t\tsetPreference( 'core', 'enableChoosePatternModal', showStartPatterns );\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"editor-start-page-options__modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tisFullScreen\n\t\t\tonRequestClose={ handleClose }\n\t\t>\n\t\t\t<div className=\"editor-start-page-options__modal-content\">\n\t\t\t\t<PatternSelection\n\t\t\t\t\tblockPatterns={ startPatterns }\n\t\t\t\t\tonChoosePattern={ handleClose }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<Flex\n\t\t\t\tclassName=\"editor-start-page-options__modal__actions\"\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\tchecked={ showStartPatterns }\n\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t'Always show starter patterns for new pages'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tsetShowStartPatterns( newValue );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nexport default function StartPageOptions() {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\tconst { isEditedPostDirty, isEditedPostEmpty } = useSelect( editorStore );\n\tconst { isModalActive } = useSelect( interfaceStore );\n\tconst { enabled, postId } = useSelect( ( select ) => {\n\t\tconst { getCurrentPostId, getCurrentPostType } = select( editorStore );\n\t\tconst choosePatternModalEnabled = select( preferencesStore ).get(\n\t\t\t'core',\n\t\t\t'enableChoosePatternModal'\n\t\t);\n\t\tconst currentPostType = getCurrentPostType();\n\t\treturn {\n\t\t\tpostId: getCurrentPostId(),\n\t\t\tenabled:\n\t\t\t\tchoosePatternModalEnabled &&\n\t\t\t\tTEMPLATE_POST_TYPE !== currentPostType &&\n\t\t\t\tTEMPLATE_PART_POST_TYPE !== currentPostType,\n\t\t};\n\t}, [] );\n\n\t// Note: The `postId` ensures the effect re-runs when pages are switched without remounting the component.\n\t// Examples: changing pages in the List View, creating a new page via Command Palette.\n\tuseEffect( () => {\n\t\tconst isFreshPage = ! isEditedPostDirty() && isEditedPostEmpty();\n\t\t// Prevents immediately opening when features is enabled via preferences modal.\n\t\tconst isPreferencesModalActive = isModalActive( 'editor/preferences' );\n\t\tif ( ! enabled || ! isFreshPage || isPreferencesModalActive ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Open the modal after the initial render for a new page.\n\t\tsetIsOpen( true );\n\t}, [\n\t\tenabled,\n\t\tpostId,\n\t\tisEditedPostDirty,\n\t\tisEditedPostEmpty,\n\t\tisModalActive,\n\t] );\n\n\tif ( ! isOpen ) {\n\t\treturn null;\n\t}\n\n\treturn <StartPageOptionsModal onClose={ () => setIsOpen( false ) } />;\n}\n"],
+  "mappings": ";AAGA,SAAS,MAAM,UAAU,OAAO,uBAAuB;AACvD,SAAS,UAAU;AACnB,SAAS,UAAU,SAAS,iBAAiB;AAC7C;AAAA,EACC,SAAS;AAAA,EACT,mCAAmC;AAAA,OAC7B;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,SAAS,iBAAiB;AACnC,SAAS,mCAAmC;AAC5C,SAAS,SAAS,wBAAwB;AAC1C,SAAS,SAAS,sBAAsB;AAKxC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,mBAAmB;AAyDnC,cA8BA,YA9BA;AAvDK,SAAS,mBAAmB;AAIlC,QAAM,EAAE,uCAAuC,SAAS,IAAI;AAAA,IAC3D,CAAE,WAAY;AACb,YAAM,EAAE,yBAAyB,gBAAgB,IAChD,OAAQ,gBAAiB;AAC1B,YAAM,EAAE,oBAAoB,iBAAiB,IAC5C,OAAQ,WAAY;AACrB,YAAM,eACL,iBAAiB,MAAM,cACpB,KACA,gBAAiB,mBAAoB,IAAK,CAAE;AAChD,aAAO;AAAA,QACN,uCAAuC;AAAA,UACtC;AAAA,UACA;AAAA,QACD;AAAA,QACA,UAAU,mBAAmB;AAAA,MAC9B;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AAEA,SAAO,QAAS,MAAM;AACrB,QAAK,CAAE,uCAAuC,QAAS;AACtD,aAAO,CAAC;AAAA,IACT;AAMA,WAAO,sCAAsC,OAAQ,CAAE,YAAa;AACnE,aACG,aAAa,UAAU,CAAE,QAAQ,aACjC,MAAM,QAAS,QAAQ,SAAU,KAClC,QAAQ,UAAU,SAAU,QAAS;AAAA,IAExC,CAAE;AAAA,EACH,GAAG,CAAE,UAAU,qCAAsC,CAAE;AACxD;AAEA,SAAS,iBAAkB,EAAE,eAAe,gBAAgB,GAAI;AAC/D,QAAM,EAAE,iBAAiB,IAAI,YAAa,SAAU;AACpD,QAAM,EAAE,UAAU,OAAO,IAAI,UAAW,CAAE,WAAY;AACrD,UAAM,EAAE,oBAAoB,iBAAiB,IAAI,OAAQ,WAAY;AAErE,WAAO;AAAA,MACN,UAAU,mBAAmB;AAAA,MAC7B,QAAQ,iBAAiB;AAAA,IAC1B;AAAA,EACD,GAAG,CAAC,CAAE;AACN,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,gBAAiB,CAAE,UAAU,WAAY;AACxC,yBAAkB,YAAY,UAAU,QAAQ;AAAA,UAC/C;AAAA,UACA,SAAS,CAAE,EAAE,QAAQ,yBAAyB,CAAC,EAAE,MAChD,4BAA6B,sBAAuB;AAAA,QACtD,CAAE;AACF,wBAAgB;AAAA,MACjB;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,sBAAuB,EAAE,QAAQ,GAAI;AAC7C,QAAM,CAAE,mBAAmB,oBAAqB,IAAI,SAAU,IAAK;AACnE,QAAM,EAAE,KAAK,cAAc,IAAI,YAAa,gBAAiB;AAC7D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,kBAAkB,cAAc,SAAS;AAE/C,MAAK,CAAE,iBAAkB;AACxB,WAAO;AAAA,EACR;AAEA,WAAS,cAAc;AACtB,YAAQ;AACR,kBAAe,QAAQ,4BAA4B,iBAAkB;AAAA,EACtE;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,GAAI,kBAAmB;AAAA,MAC/B,cAAY;AAAA,MACZ,gBAAiB;AAAA,MAEjB;AAAA,4BAAC,SAAI,WAAU,4CACd;AAAA,UAAC;AAAA;AAAA,YACA,eAAgB;AAAA,YAChB,iBAAkB;AAAA;AAAA,QACnB,GACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,UAAW;AAAA,YAEX,8BAAC,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,SAAU;AAAA,gBACV,OAAQ;AAAA,kBACP;AAAA,gBACD;AAAA,gBACA,UAAW,CAAE,aAAc;AAC1B,uCAAsB,QAAS;AAAA,gBAChC;AAAA;AAAA,YACD,GACD;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEe,SAAR,mBAAoC;AAC1C,QAAM,CAAE,QAAQ,SAAU,IAAI,SAAU,KAAM;AAC9C,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,UAAW,WAAY;AACxE,QAAM,EAAE,cAAc,IAAI,UAAW,cAAe;AACpD,QAAM,EAAE,SAAS,OAAO,IAAI,UAAW,CAAE,WAAY;AACpD,UAAM,EAAE,kBAAkB,mBAAmB,IAAI,OAAQ,WAAY;AACrE,UAAM,4BAA4B,OAAQ,gBAAiB,EAAE;AAAA,MAC5D;AAAA,MACA;AAAA,IACD;AACA,UAAM,kBAAkB,mBAAmB;AAC3C,WAAO;AAAA,MACN,QAAQ,iBAAiB;AAAA,MACzB,SACC,6BACA,uBAAuB,mBACvB,4BAA4B;AAAA,IAC9B;AAAA,EACD,GAAG,CAAC,CAAE;AAIN,YAAW,MAAM;AAChB,UAAM,cAAc,CAAE,kBAAkB,KAAK,kBAAkB;AAE/D,UAAM,2BAA2B,cAAe,oBAAqB;AACrE,QAAK,CAAE,WAAW,CAAE,eAAe,0BAA2B;AAC7D;AAAA,IACD;AAGA,cAAW,IAAK;AAAA,EACjB,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,MAAK,CAAE,QAAS;AACf,WAAO;AAAA,EACR;AAEA,SAAO,oBAAC,yBAAsB,SAAU,MAAM,UAAW,KAAM,GAAI;AACpE;",
+  "names": []
+}

package/build-module/components/start-template-options/index.mjs

@@ -0,0 +1,188 @@
+// packages/editor/src/components/start-template-options/index.js
+import { Modal, Flex, FlexItem, Button } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { useState, useMemo, useEffect } from "@wordpress/element";
+import { __experimentalBlockPatternsList as BlockPatternsList } from "@wordpress/block-editor";
+import { useSelect } from "@wordpress/data";
+import { parse } from "@wordpress/blocks";
+import { store as coreStore, useEntityBlockEditor } from "@wordpress/core-data";
+import { store as editorStore } from "../../store/index.mjs";
+import { TEMPLATE_POST_TYPE } from "../../store/constants.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useFallbackTemplateContent(slug, isCustom = false) {
+  return useSelect(
+    (select) => {
+      const { getEntityRecord, getDefaultTemplateId } = select(coreStore);
+      const templateId = getDefaultTemplateId({
+        slug,
+        is_custom: isCustom,
+        ignore_empty: true
+      });
+      return templateId ? getEntityRecord("postType", TEMPLATE_POST_TYPE, templateId)?.content?.raw : void 0;
+    },
+    [slug, isCustom]
+  );
+}
+function useStartPatterns(fallbackContent) {
+  const { slug, patterns } = useSelect((select) => {
+    const { getCurrentPostType, getCurrentPostId } = select(editorStore);
+    const { getEntityRecord, getBlockPatterns } = select(coreStore);
+    const postId = getCurrentPostId();
+    const postType = getCurrentPostType();
+    const record = getEntityRecord("postType", postType, postId);
+    return {
+      slug: record.slug,
+      patterns: getBlockPatterns()
+    };
+  }, []);
+  const currentThemeStylesheet = useSelect(
+    (select) => select(coreStore).getCurrentTheme().stylesheet
+  );
+  function injectThemeAttributeInBlockTemplateContent(block) {
+    if (block.innerBlocks.find(
+      (innerBlock) => innerBlock.name === "core/template-part"
+    )) {
+      block.innerBlocks = block.innerBlocks.map((innerBlock) => {
+        if (innerBlock.name === "core/template-part" && innerBlock.attributes.theme === void 0) {
+          innerBlock.attributes.theme = currentThemeStylesheet;
+        }
+        return innerBlock;
+      });
+    }
+    if (block.name === "core/template-part" && block.attributes.theme === void 0) {
+      block.attributes.theme = currentThemeStylesheet;
+    }
+    return block;
+  }
+  return useMemo(() => {
+    return [
+      {
+        name: "fallback",
+        blocks: parse(fallbackContent),
+        title: __("Fallback content")
+      },
+      ...patterns.filter((pattern) => {
+        return Array.isArray(pattern.templateTypes) && pattern.templateTypes.some(
+          (templateType) => slug.startsWith(templateType)
+        );
+      }).map((pattern) => {
+        return {
+          ...pattern,
+          blocks: parse(pattern.content).map(
+            (block) => injectThemeAttributeInBlockTemplateContent(block)
+          )
+        };
+      })
+    ];
+  }, [fallbackContent, slug, patterns]);
+}
+function PatternSelection({ fallbackContent, onChoosePattern, postType }) {
+  const [, , onChange] = useEntityBlockEditor("postType", postType);
+  const blockPatterns = useStartPatterns(fallbackContent);
+  return /* @__PURE__ */ jsx(
+    BlockPatternsList,
+    {
+      blockPatterns,
+      onClickPattern: (pattern, blocks) => {
+        onChange(blocks, { selection: void 0 });
+        onChoosePattern();
+      }
+    }
+  );
+}
+function StartModal({ slug, isCustom, onClose, postType }) {
+  const fallbackContent = useFallbackTemplateContent(slug, isCustom);
+  if (!fallbackContent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      className: "editor-start-template-options__modal",
+      title: __("Choose a pattern"),
+      closeLabel: __("Cancel"),
+      focusOnMount: "firstElement",
+      onRequestClose: onClose,
+      isFullScreen: true,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "editor-start-template-options__modal-content", children: /* @__PURE__ */ jsx(
+          PatternSelection,
+          {
+            fallbackContent,
+            slug,
+            isCustom,
+            postType,
+            onChoosePattern: () => {
+              onClose();
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            className: "editor-start-template-options__modal__actions",
+            justify: "flex-end",
+            expanded: false,
+            children: /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                __next40pxDefaultSize: true,
+                variant: "tertiary",
+                onClick: onClose,
+                children: __("Skip")
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+function StartTemplateOptions() {
+  const [isClosed, setIsClosed] = useState(false);
+  const { shouldOpenModal, slug, isCustom, postType, postId } = useSelect(
+    (select) => {
+      const { getCurrentPostType, getCurrentPostId } = select(editorStore);
+      const _postType = getCurrentPostType();
+      const _postId = getCurrentPostId();
+      const { getEditedEntityRecord, hasEditsForEntityRecord } = select(coreStore);
+      const templateRecord = getEditedEntityRecord(
+        "postType",
+        _postType,
+        _postId
+      );
+      const hasEdits = hasEditsForEntityRecord(
+        "postType",
+        _postType,
+        _postId
+      );
+      return {
+        shouldOpenModal: !hasEdits && "" === templateRecord.content && TEMPLATE_POST_TYPE === _postType,
+        slug: templateRecord.slug,
+        isCustom: templateRecord.is_custom,
+        postType: _postType,
+        postId: _postId
+      };
+    },
+    []
+  );
+  useEffect(() => {
+    setIsClosed(false);
+  }, [postType, postId]);
+  if (!shouldOpenModal || isClosed) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    StartModal,
+    {
+      slug,
+      isCustom,
+      postType,
+      onClose: () => setIsClosed(true)
+    }
+  );
+}
+export {
+  StartTemplateOptions as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/style-book/categories.mjs

@@ -0,0 +1,65 @@
+// packages/editor/src/components/style-book/categories.ts
+import { getCategories } from "@wordpress/blocks";
+import {
+  STYLE_BOOK_CATEGORIES,
+  STYLE_BOOK_THEME_SUBCATEGORIES
+} from "./constants.mjs";
+function getExamplesByCategory(categoryDefinition, examples) {
+  if (!categoryDefinition?.slug || !examples?.length) {
+    return;
+  }
+  const categories = categoryDefinition?.subcategories ?? [];
+  if (categories.length) {
+    return categories.reduce(
+      (acc, subcategoryDefinition) => {
+        const subcategoryExamples = getExamplesByCategory(
+          subcategoryDefinition,
+          examples
+        );
+        if (subcategoryExamples) {
+          if (!acc.subcategories) {
+            acc.subcategories = [];
+          }
+          acc.subcategories = [
+            ...acc.subcategories,
+            subcategoryExamples
+          ];
+        }
+        return acc;
+      },
+      {
+        title: categoryDefinition.title,
+        slug: categoryDefinition.slug
+      }
+    );
+  }
+  const blocksToInclude = categoryDefinition?.blocks || [];
+  const blocksToExclude = categoryDefinition?.exclude || [];
+  const categoryExamples = examples.filter((example) => {
+    return !blocksToExclude.includes(example.name) && (example.category === categoryDefinition.slug || blocksToInclude.includes(example.name));
+  });
+  if (!categoryExamples.length) {
+    return;
+  }
+  return {
+    title: categoryDefinition.title,
+    slug: categoryDefinition.slug,
+    examples: categoryExamples
+  };
+}
+function getTopLevelStyleBookCategories() {
+  const reservedCategories = [
+    ...STYLE_BOOK_THEME_SUBCATEGORIES,
+    ...STYLE_BOOK_CATEGORIES
+  ].map(({ slug }) => slug);
+  const extraCategories = getCategories();
+  const extraCategoriesFiltered = extraCategories.filter(
+    ({ slug }) => !reservedCategories.includes(slug)
+  );
+  return [...STYLE_BOOK_CATEGORIES, ...extraCategoriesFiltered];
+}
+export {
+  getExamplesByCategory,
+  getTopLevelStyleBookCategories
+};
+//# sourceMappingURL=categories.mjs.map

package/build-module/components/style-book/color-examples.mjs

@@ -0,0 +1,38 @@
+// packages/editor/src/components/style-book/color-examples.tsx
+import clsx from "clsx";
+import { __experimentalGrid as Grid } from "@wordpress/components";
+import {
+  getColorClassName,
+  __experimentalGetGradientClass
+} from "@wordpress/block-editor";
+import { jsx } from "react/jsx-runtime";
+var ColorExamples = ({
+  colors,
+  type,
+  templateColumns = "1fr 1fr",
+  itemHeight = "52px"
+}) => {
+  if (!colors) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Grid, { templateColumns, rowGap: 8, columnGap: 16, children: colors.map((color) => {
+    const className = type === "gradients" ? __experimentalGetGradientClass(color.slug) : getColorClassName("background-color", color.slug);
+    const classes = clsx(
+      "editor-style-book__color-example",
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes,
+        style: { height: itemHeight }
+      },
+      color.slug
+    );
+  }) });
+};
+var color_examples_default = ColorExamples;
+export {
+  color_examples_default as default
+};
+//# sourceMappingURL=color-examples.mjs.map