@wordpress/edit-site 6.8.8 → 6.10.0

package/build-module/components/style-book/constants.js

@@ -0,0 +1,145 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+export const STYLE_BOOK_THEME_SUBCATEGORIES = [{
+  slug: 'site-identity',
+  title: __('Site Identity'),
+  blocks: ['core/site-logo', 'core/site-title', 'core/site-tagline']
+}, {
+  slug: 'design',
+  title: __('Design'),
+  blocks: ['core/navigation', 'core/avatar', 'core/post-time-to-read'],
+  exclude: ['core/home-link', 'core/navigation-link']
+}, {
+  slug: 'posts',
+  title: __('Posts'),
+  blocks: ['core/post-title', 'core/post-excerpt', 'core/post-author', 'core/post-author-name', 'core/post-author-biography', 'core/post-date', 'core/post-terms', 'core/term-description', 'core/query-title', 'core/query-no-results', 'core/query-pagination', 'core/query-numbers']
+}, {
+  slug: 'comments',
+  title: __('Comments'),
+  blocks: ['core/comments-title', 'core/comments-pagination', 'core/comments-pagination-numbers', 'core/comments', 'core/comments-author-name', 'core/comment-content', 'core/comment-date', 'core/comment-edit-link', 'core/comment-reply-link', 'core/comment-template', 'core/post-comments-count', 'core/post-comments-link']
+}];
+export const STYLE_BOOK_CATEGORIES = [{
+  slug: 'text',
+  title: __('Text'),
+  blocks: ['core/post-content', 'core/home-link', 'core/navigation-link']
+}, {
+  slug: 'colors',
+  title: __('Colors'),
+  blocks: ['custom/colors']
+}, {
+  slug: 'theme',
+  title: __('Theme'),
+  subcategories: STYLE_BOOK_THEME_SUBCATEGORIES
+}, {
+  slug: 'media',
+  title: __('Media'),
+  blocks: ['core/post-featured-image']
+}, {
+  slug: 'widgets',
+  title: __('Widgets'),
+  blocks: []
+}, {
+  slug: 'embed',
+  title: __('Embeds'),
+  include: []
+}];
+
+// The content area of the Style Book is rendered within an iframe so that global styles
+// are applied to elements within the entire content area. To support elements that are
+// not part of the block previews, such as headings and layout for the block previews,
+// additional CSS rules need to be passed into the iframe. These are hard-coded below.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.edit-site-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
+export const STYLE_BOOK_IFRAME_STYLES = `
+	// Forming a "block formatting context" to prevent margin collapsing.
+	// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+	.is-root-container {
+		display: flow-root;
+	}
+	
+	body {
+		position: relative;
+		padding: 32px !important;
+	}
+
+	.edit-site-style-book__examples {
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.edit-site-style-book__example {
+	    max-width: 900px;
+		border-radius: 2px;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+		scroll-margin-top: 32px;
+		scroll-margin-bottom: 32px;
+		margin: 0 auto 40px auto;
+	}
+
+	.edit-site-style-book__example.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+
+	.edit-site-style-book__example:focus:not(:disabled) {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
+		flex-direction: row;
+	}
+	
+	.edit-site-style-book__subcategory-title,
+	.edit-site-style-book__example-title {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 11px;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		text-transform: uppercase;
+	}
+	
+	.edit-site-style-book__subcategory-title {
+		font-size: 16px;
+		margin-bottom: 40px;
+    	border-bottom: 1px solid #ddd;
+    	padding-bottom: 8px;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+		text-align: right;
+		width: 120px;
+	}
+
+	.edit-site-style-book__example-preview {
+		width: 100%;
+	}
+
+	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
+	.edit-site-style-book__example-preview .block-list-appender {
+		display: none;
+	}
+
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+		margin-top: 0;
+	}
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+		margin-bottom: 0;
+	}
+`;
+//# sourceMappingURL=constants.js.map

package/build-module/components/style-book/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","STYLE_BOOK_THEME_SUBCATEGORIES","slug","title","blocks","exclude","STYLE_BOOK_CATEGORIES","subcategories","include","STYLE_BOOK_IFRAME_STYLES"],"sources":["@wordpress/edit-site/src/components/style-book/constants.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { StyleBookCategory } from './types';\n\nexport const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<\n\tStyleBookCategory,\n\t'subcategories'\n>[] = [\n\t{\n\t\tslug: 'site-identity',\n\t\ttitle: __( 'Site Identity' ),\n\t\tblocks: [ 'core/site-logo', 'core/site-title', 'core/site-tagline' ],\n\t},\n\t{\n\t\tslug: 'design',\n\t\ttitle: __( 'Design' ),\n\t\tblocks: [ 'core/navigation', 'core/avatar', 'core/post-time-to-read' ],\n\t\texclude: [ 'core/home-link', 'core/navigation-link' ],\n\t},\n\t{\n\t\tslug: 'posts',\n\t\ttitle: __( 'Posts' ),\n\t\tblocks: [\n\t\t\t'core/post-title',\n\t\t\t'core/post-excerpt',\n\t\t\t'core/post-author',\n\t\t\t'core/post-author-name',\n\t\t\t'core/post-author-biography',\n\t\t\t'core/post-date',\n\t\t\t'core/post-terms',\n\t\t\t'core/term-description',\n\t\t\t'core/query-title',\n\t\t\t'core/query-no-results',\n\t\t\t'core/query-pagination',\n\t\t\t'core/query-numbers',\n\t\t],\n\t},\n\t{\n\t\tslug: 'comments',\n\t\ttitle: __( 'Comments' ),\n\t\tblocks: [\n\t\t\t'core/comments-title',\n\t\t\t'core/comments-pagination',\n\t\t\t'core/comments-pagination-numbers',\n\t\t\t'core/comments',\n\t\t\t'core/comments-author-name',\n\t\t\t'core/comment-content',\n\t\t\t'core/comment-date',\n\t\t\t'core/comment-edit-link',\n\t\t\t'core/comment-reply-link',\n\t\t\t'core/comment-template',\n\t\t\t'core/post-comments-count',\n\t\t\t'core/post-comments-link',\n\t\t],\n\t},\n];\n\nexport const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [\n\t{\n\t\tslug: 'text',\n\t\ttitle: __( 'Text' ),\n\t\tblocks: [\n\t\t\t'core/post-content',\n\t\t\t'core/home-link',\n\t\t\t'core/navigation-link',\n\t\t],\n\t},\n\t{\n\t\tslug: 'colors',\n\t\ttitle: __( 'Colors' ),\n\t\tblocks: [ 'custom/colors' ],\n\t},\n\t{\n\t\tslug: 'theme',\n\t\ttitle: __( 'Theme' ),\n\t\tsubcategories: STYLE_BOOK_THEME_SUBCATEGORIES,\n\t},\n\t{\n\t\tslug: 'media',\n\t\ttitle: __( 'Media' ),\n\t\tblocks: [ 'core/post-featured-image' ],\n\t},\n\t{\n\t\tslug: 'widgets',\n\t\ttitle: __( 'Widgets' ),\n\t\tblocks: [],\n\t},\n\t{\n\t\tslug: 'embed',\n\t\ttitle: __( 'Embeds' ),\n\t\tinclude: [],\n\t},\n];\n\n// The content area of the Style Book is rendered within an iframe so that global styles\n// are applied to elements within the entire content area. To support elements that are\n// not part of the block previews, such as headings and layout for the block previews,\n// additional CSS rules need to be passed into the iframe. These are hard-coded below.\n// Note that button styles are unset, and then focus rules from the `Button` component are\n// applied to the `button` element, targeted via `.edit-site-style-book__example`.\n// This is to ensure that browser default styles for buttons are not applied to the previews.\nexport const STYLE_BOOK_IFRAME_STYLES = `\n\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t.is-root-container {\n\t\tdisplay: flow-root;\n\t}\n\t\n\tbody {\n\t\tposition: relative;\n\t\tpadding: 32px !important;\n\t}\n\n\t.edit-site-style-book__examples {\n\t\tmax-width: 1200px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.edit-site-style-book__example {\n\t    max-width: 900px;\n\t\tborder-radius: 2px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 40px;\n\t\tpadding: 16px;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tscroll-margin-top: 32px;\n\t\tscroll-margin-bottom: 32px;\n\t\tmargin: 0 auto 40px auto;\n\t}\n\n\t.edit-site-style-book__example.is-selected {\n\t\tbox-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t}\n\n\t.edit-site-style-book__example:focus:not(:disabled) {\n\t\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t\toutline: 3px solid transparent;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example {\n\t\tflex-direction: row;\n\t}\n\t\n\t.edit-site-style-book__subcategory-title,\n\t.edit-site-style-book__example-title {\n\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t\tfont-size: 11px;\n\t\tfont-weight: 500;\n\t\tline-height: normal;\n\t\tmargin: 0;\n\t\ttext-align: left;\n\t\ttext-transform: uppercase;\n\t}\n\t\n\t.edit-site-style-book__subcategory-title {\n\t\tfont-size: 16px;\n\t\tmargin-bottom: 40px;\n    \tborder-bottom: 1px solid #ddd;\n    \tpadding-bottom: 8px;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {\n\t\ttext-align: right;\n\t\twidth: 120px;\n\t}\n\n\t.edit-site-style-book__example-preview {\n\t\twidth: 100%;\n\t}\n\n\t.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,\n\t.edit-site-style-book__example-preview .block-list-appender {\n\t\tdisplay: none;\n\t}\n\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {\n\t\tmargin-top: 0;\n\t}\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {\n\t\tmargin-bottom: 0;\n\t}\n`;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;;AAGA,OAAO,MAAMC,8BAGV,GAAG,CACL;EACCC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAEH,EAAE,CAAE,eAAgB,CAAC;EAC5BI,MAAM,EAAE,CAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB;AACnE,CAAC,EACD;EACCF,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEH,EAAE,CAAE,QAAS,CAAC;EACrBI,MAAM,EAAE,CAAE,iBAAiB,EAAE,aAAa,EAAE,wBAAwB,CAAE;EACtEC,OAAO,EAAE,CAAE,gBAAgB,EAAE,sBAAsB;AACpD,CAAC,EACD;EACCH,IAAI,EAAE,OAAO;EACbC,KAAK,EAAEH,EAAE,CAAE,OAAQ,CAAC;EACpBI,MAAM,EAAE,CACP,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,gBAAgB,EAChB,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB;AAEtB,CAAC,EACD;EACCF,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAEH,EAAE,CAAE,UAAW,CAAC;EACvBI,MAAM,EAAE,CACP,qBAAqB,EACrB,0BAA0B,EAC1B,kCAAkC,EAClC,eAAe,EACf,2BAA2B,EAC3B,sBAAsB,EACtB,mBAAmB,EACnB,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB;AAE3B,CAAC,CACD;AAED,OAAO,MAAME,qBAA0C,GAAG,CACzD;EACCJ,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEH,EAAE,CAAE,MAAO,CAAC;EACnBI,MAAM,EAAE,CACP,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB;AAExB,CAAC,EACD;EACCF,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEH,EAAE,CAAE,QAAS,CAAC;EACrBI,MAAM,EAAE,CAAE,eAAe;AAC1B,CAAC,EACD;EACCF,IAAI,EAAE,OAAO;EACbC,KAAK,EAAEH,EAAE,CAAE,OAAQ,CAAC;EACpBO,aAAa,EAAEN;AAChB,CAAC,EACD;EACCC,IAAI,EAAE,OAAO;EACbC,KAAK,EAAEH,EAAE,CAAE,OAAQ,CAAC;EACpBI,MAAM,EAAE,CAAE,0BAA0B;AACrC,CAAC,EACD;EACCF,IAAI,EAAE,SAAS;EACfC,KAAK,EAAEH,EAAE,CAAE,SAAU,CAAC;EACtBI,MAAM,EAAE;AACT,CAAC,EACD;EACCF,IAAI,EAAE,OAAO;EACbC,KAAK,EAAEH,EAAE,CAAE,QAAS,CAAC;EACrBQ,OAAO,EAAE;AACV,CAAC,CACD;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/build-module/components/style-book/examples.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { getBlockType, getBlockTypes, getBlockFromExample, createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Returns a list of examples for registered block types.
+ *
+ * @return {BlockExample[]} An array of block examples.
+ */
+export function getExamples() {
+  const nonHeadingBlockExamples = getBlockTypes().filter(blockType => {
+    const {
+      name,
+      example,
+      supports
+    } = blockType;
+    return name !== 'core/heading' && !!example && supports.inserter !== false;
+  }).map(blockType => ({
+    name: blockType.name,
+    title: blockType.title,
+    category: blockType.category,
+    blocks: getBlockFromExample(blockType.name, blockType.example)
+  }));
+  const isHeadingBlockRegistered = !!getBlockType('core/heading');
+  if (!isHeadingBlockRegistered) {
+    return nonHeadingBlockExamples;
+  }
+
+  // Use our own example for the Heading block so that we can show multiple
+  // heading levels.
+  const headingsExample = {
+    name: 'core/heading',
+    title: __('Headings'),
+    category: 'text',
+    blocks: [1, 2, 3, 4, 5, 6].map(level => {
+      return createBlock('core/heading', {
+        content: sprintf(
+        // translators: %d: heading level e.g: "1", "2", "3"
+        __('Heading %d'), level),
+        level
+      });
+    })
+  };
+  return [headingsExample, ...nonHeadingBlockExamples];
+}
+//# sourceMappingURL=examples.js.map

package/build-module/components/style-book/examples.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","sprintf","getBlockType","getBlockTypes","getBlockFromExample","createBlock","getExamples","nonHeadingBlockExamples","filter","blockType","name","example","supports","inserter","map","title","category","blocks","isHeadingBlockRegistered","headingsExample","level","content"],"sources":["@wordpress/edit-site/src/components/style-book/examples.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetBlockType,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport type { BlockExample } from './types';\n\n/**\n * Returns a list of examples for registered block types.\n *\n * @return {BlockExample[]} An array of block examples.\n */\nexport function getExamples(): BlockExample[] {\n\tconst nonHeadingBlockExamples = getBlockTypes()\n\t\t.filter( ( blockType ) => {\n\t\t\tconst { name, example, supports } = blockType;\n\t\t\treturn (\n\t\t\t\tname !== 'core/heading' &&\n\t\t\t\t!! example &&\n\t\t\t\tsupports.inserter !== false\n\t\t\t);\n\t\t} )\n\t\t.map( ( blockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\tblocks: getBlockFromExample( blockType.name, blockType.example ),\n\t\t} ) );\n\tconst isHeadingBlockRegistered = !! getBlockType( 'core/heading' );\n\n\tif ( ! isHeadingBlockRegistered ) {\n\t\treturn nonHeadingBlockExamples;\n\t}\n\n\t// Use our own example for the Heading block so that we can show multiple\n\t// heading levels.\n\tconst headingsExample = {\n\t\tname: 'core/heading',\n\t\ttitle: __( 'Headings' ),\n\t\tcategory: 'text',\n\t\tblocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {\n\t\t\treturn createBlock( 'core/heading', {\n\t\t\t\tcontent: sprintf(\n\t\t\t\t\t// translators: %d: heading level e.g: \"1\", \"2\", \"3\"\n\t\t\t\t\t__( 'Heading %d' ),\n\t\t\t\t\tlevel\n\t\t\t\t),\n\t\t\t\tlevel,\n\t\t\t} );\n\t\t} ),\n\t};\n\n\treturn [ headingsExample, ...nonHeadingBlockExamples ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SACCC,YAAY,EACZC,aAAa,EACbC,mBAAmB,EACnBC,WAAW,QACL,mBAAmB;;AAE1B;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAA,EAAmB;EAC7C,MAAMC,uBAAuB,GAAGJ,aAAa,CAAC,CAAC,CAC7CK,MAAM,CAAIC,SAAS,IAAM;IACzB,MAAM;MAAEC,IAAI;MAAEC,OAAO;MAAEC;IAAS,CAAC,GAAGH,SAAS;IAC7C,OACCC,IAAI,KAAK,cAAc,IACvB,CAAC,CAAEC,OAAO,IACVC,QAAQ,CAACC,QAAQ,KAAK,KAAK;EAE7B,CAAE,CAAC,CACFC,GAAG,CAAIL,SAAS,KAAQ;IACxBC,IAAI,EAAED,SAAS,CAACC,IAAI;IACpBK,KAAK,EAAEN,SAAS,CAACM,KAAK;IACtBC,QAAQ,EAAEP,SAAS,CAACO,QAAQ;IAC5BC,MAAM,EAAEb,mBAAmB,CAAEK,SAAS,CAACC,IAAI,EAAED,SAAS,CAACE,OAAQ;EAChE,CAAC,CAAG,CAAC;EACN,MAAMO,wBAAwB,GAAG,CAAC,CAAEhB,YAAY,CAAE,cAAe,CAAC;EAElE,IAAK,CAAEgB,wBAAwB,EAAG;IACjC,OAAOX,uBAAuB;EAC/B;;EAEA;EACA;EACA,MAAMY,eAAe,GAAG;IACvBT,IAAI,EAAE,cAAc;IACpBK,KAAK,EAAEf,EAAE,CAAE,UAAW,CAAC;IACvBgB,QAAQ,EAAE,MAAM;IAChBC,MAAM,EAAE,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACH,GAAG,CAAIM,KAAK,IAAM;MAC9C,OAAOf,WAAW,CAAE,cAAc,EAAE;QACnCgB,OAAO,EAAEpB,OAAO;QACf;QACAD,EAAE,CAAE,YAAa,CAAC,EAClBoB,KACD,CAAC;QACDA;MACD,CAAE,CAAC;IACJ,CAAE;EACH,CAAC;EAED,OAAO,CAAED,eAAe,EAAE,GAAGZ,uBAAuB,CAAE;AACvD","ignoreList":[]}

package/build-module/components/style-book/index.js

@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import { Disabled, Composite, privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { getCategories, getBlockType, getBlockTypes, getBlockFromExample, createBlock } from '@wordpress/blocks';
 import { BlockList, privateApis as blockEditorPrivateApis, store as blockEditorStore, __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe } from '@wordpress/block-editor';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
@@ -21,8 +20,10 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { STYLE_BOOK_IFRAME_STYLES } from './constants';
+import { getExamplesByCategory, getTopLevelStyleBookCategories } from './categories';
+import { getExamples } from './examples';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   ExperimentalBlockEditorProvider,
   useGlobalStyle,
@@ -35,117 +36,9 @@ const {
 const {
   Tabs
 } = unlock(componentsPrivateApis);
-
-// The content area of the Style Book is rendered within an iframe so that global styles
-// are applied to elements within the entire content area. To support elements that are
-// not part of the block previews, such as headings and layout for the block previews,
-// additional CSS rules need to be passed into the iframe. These are hard-coded below.
-// Note that button styles are unset, and then focus rules from the `Button` component are
-// applied to the `button` element, targeted via `.edit-site-style-book__example`.
-// This is to ensure that browser default styles for buttons are not applied to the previews.
-const STYLE_BOOK_IFRAME_STYLES = `
-	.edit-site-style-book__examples {
-		max-width: 900px;
-		margin: 0 auto;
-	}
-
-	.edit-site-style-book__example {
-		border-radius: 2px;
-		cursor: pointer;
-		display: flex;
-		flex-direction: column;
-		gap: 40px;
-		margin-bottom: 40px;
-		padding: 16px;
-		width: 100%;
-		box-sizing: border-box;
-		scroll-margin-top: 32px;
-		scroll-margin-bottom: 32px;
-	}
-
-	.edit-site-style-book__example.is-selected {
-		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-	}
-
-	.edit-site-style-book__example:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-		outline: 3px solid transparent;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
-		flex-direction: row;
-	}
-
-	.edit-site-style-book__example-title {
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-		font-size: 11px;
-		font-weight: 500;
-		line-height: normal;
-		margin: 0;
-		text-align: left;
-		text-transform: uppercase;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
-		text-align: right;
-		width: 120px;
-	}
-
-	.edit-site-style-book__example-preview {
-		width: 100%;
-	}
-
-	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
-	.edit-site-style-book__example-preview .block-list-appender {
-		display: none;
-	}
-
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
-		margin-top: 0;
-	}
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
-		margin-bottom: 0;
-	}
-`;
 function isObjectEmpty(object) {
   return !object || Object.keys(object).length === 0;
 }
-function getExamples() {
-  const nonHeadingBlockExamples = getBlockTypes().filter(blockType => {
-    const {
-      name,
-      example,
-      supports
-    } = blockType;
-    return name !== 'core/heading' && !!example && supports.inserter !== false;
-  }).map(blockType => ({
-    name: blockType.name,
-    title: blockType.title,
-    category: blockType.category,
-    blocks: getBlockFromExample(blockType.name, blockType.example)
-  }));
-  const isHeadingBlockRegistered = !!getBlockType('core/heading');
-  if (!isHeadingBlockRegistered) {
-    return nonHeadingBlockExamples;
-  }
-
-  // Use our own example for the Heading block so that we can show multiple
-  // heading levels.
-  const headingsExample = {
-    name: 'core/heading',
-    title: __('Headings'),
-    category: 'text',
-    blocks: [1, 2, 3, 4, 5, 6].map(level => {
-      return createBlock('core/heading', {
-        content: sprintf(
-        // translators: %d: heading level e.g: "1", "2", "3"
-        __('Heading %d'), level),
-        level
-      });
-    })
-  };
-  return [headingsExample, ...nonHeadingBlockExamples];
-}
 function StyleBook({
   enableResizing = true,
   isSelected,
@@ -160,11 +53,7 @@ function StyleBook({
   const [textColor] = useGlobalStyle('color.text');
   const [backgroundColor] = useGlobalStyle('color.background');
   const [examples] = useState(getExamples);
-  const tabs = useMemo(() => getCategories().filter(category => examples.some(example => example.category === category.slug)).map(category => ({
-    name: category.slug,
-    title: category.title,
-    icon: category.icon
-  })), [examples]);
+  const tabs = useMemo(() => getTopLevelStyleBookCategories().filter(category => examples.some(example => example.category === category.slug)), [examples]);
   const {
     base: baseConfig
   } = useContext(GlobalStylesContext);
@@ -200,16 +89,19 @@ function StyleBook({
       children: [resizeObserver, showTabs ? /*#__PURE__*/_jsx("div", {
         className: "edit-site-style-book__tabs",
         children: /*#__PURE__*/_jsxs(Tabs, {
-          children: [/*#__PURE__*/_jsx(Tabs.TabList, {
-            children: tabs.map(tab => /*#__PURE__*/_jsx(Tabs.Tab, {
-              tabId: tab.name,
-              children: tab.title
-            }, tab.name))
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "edit-site-style-book__tablist-container",
+            children: /*#__PURE__*/_jsx(Tabs.TabList, {
+              children: tabs.map(tab => /*#__PURE__*/_jsx(Tabs.Tab, {
+                tabId: tab.slug,
+                children: tab.title
+              }, tab.slug))
+            })
           }), tabs.map(tab => /*#__PURE__*/_jsx(Tabs.TabPanel, {
-            tabId: tab.name,
+            tabId: tab.slug,
             focusable: false,
             children: /*#__PURE__*/_jsx(StyleBookBody, {
-              category: tab.name,
+              category: tab.slug,
               examples: examples,
               isSelected: isSelected,
               onSelect: onSelect,
@@ -217,7 +109,7 @@ function StyleBook({
               sizes: sizes,
               title: tab.title
             })
-          }, tab.name))]
+          }, tab.slug))]
         })
       }) : /*#__PURE__*/_jsx(StyleBookBody, {
         examples: examples,
@@ -271,7 +163,6 @@ const StyleBookBody = ({
     },
     readonly: true
   };
-  const buttonModeStyles = onClick ? 'body { cursor: pointer; } body * { pointer-events: none; }' : '';
   return /*#__PURE__*/_jsxs(Iframe, {
     className: clsx('edit-site-style-book__iframe', {
       'is-focused': isFocused && !!onClick,
@@ -282,12 +173,8 @@ const StyleBookBody = ({
     ...(onClick ? buttonModeProps : {}),
     children: [/*#__PURE__*/_jsx(EditorStyles, {
       styles: settings.styles
-    }), /*#__PURE__*/_jsx("style", {
-      children:
-      // Forming a "block formatting context" to prevent margin collapsing.
-      // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-      `.is-root-container { display: flow-root; }
-						body { position: relative; padding: 32px !important; }` + STYLE_BOOK_IFRAME_STYLES + buttonModeStyles
+    }), /*#__PURE__*/_jsxs("style", {
+      children: [STYLE_BOOK_IFRAME_STYLES, !!onClick && 'body { cursor: pointer; } body * { pointer-events: none; }']
     }), /*#__PURE__*/_jsx(Examples, {
       className: clsx('edit-site-style-book__examples', {
         'is-wide': sizes.width > 600
@@ -310,12 +197,16 @@ const Examples = memo(({
   isSelected,
   onSelect
 }) => {
-  return /*#__PURE__*/_jsx(Composite, {
+  const categoryDefinition = category ? getTopLevelStyleBookCategories().find(_category => _category.slug === category) : null;
+  const filteredExamples = categoryDefinition ? getExamplesByCategory(categoryDefinition, examples) : {
+    examples
+  };
+  return /*#__PURE__*/_jsxs(Composite, {
     orientation: "vertical",
     className: className,
     "aria-label": label,
     role: "grid",
-    children: examples.filter(example => category ? example.category === category : true).map(example => /*#__PURE__*/_jsx(Example, {
+    children: [!!filteredExamples?.examples?.length && filteredExamples.examples.map(example => /*#__PURE__*/_jsx(Example, {
       id: `example-${example.name}`,
       title: example.title,
       blocks: example.blocks,
@@ -323,9 +214,36 @@ const Examples = memo(({
       onClick: () => {
         onSelect?.(example.name);
       }
-    }, example.name))
+    }, example.name)), !!filteredExamples?.subcategories?.length && filteredExamples.subcategories.map(subcategory => /*#__PURE__*/_jsxs(Composite.Group, {
+      className: "edit-site-style-book__subcategory",
+      children: [/*#__PURE__*/_jsx(Composite.GroupLabel, {
+        children: /*#__PURE__*/_jsx("h2", {
+          className: "edit-site-style-book__subcategory-title",
+          children: subcategory.title
+        })
+      }), /*#__PURE__*/_jsx(Subcategory, {
+        examples: subcategory.examples,
+        isSelected: isSelected,
+        onSelect: onSelect
+      })]
+    }, `subcategory-${subcategory.slug}`))]
   });
 });
+const Subcategory = ({
+  examples,
+  isSelected,
+  onSelect
+}) => {
+  return !!examples?.length && examples.map(example => /*#__PURE__*/_jsx(Example, {
+    id: `example-${example.name}`,
+    title: example.title,
+    blocks: example.blocks,
+    isSelected: isSelected(example.name),
+    onClick: () => {
+      onSelect?.(example.name);
+    }
+  }, example.name));
+};
 const Example = ({
   id,
   title,

package/build-module/components/style-book/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","Disabled","Composite","privateApis","componentsPrivateApis","__","sprintf","getCategories","getBlockType","getBlockTypes","getBlockFromExample","createBlock","BlockList","blockEditorPrivateApis","store","blockEditorStore","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","editorPrivateApis","useSelect","useResizeObserver","useMemo","useState","memo","useContext","ENTER","SPACE","unlock","EditorCanvasContainer","jsx","_jsx","jsxs","_jsxs","ExperimentalBlockEditorProvider","useGlobalStyle","GlobalStylesContext","useGlobalStylesOutputWithConfig","mergeBaseAndUserConfigs","Tabs","STYLE_BOOK_IFRAME_STYLES","isObjectEmpty","object","Object","keys","length","getExamples","nonHeadingBlockExamples","filter","blockType","name","example","supports","inserter","map","title","category","blocks","isHeadingBlockRegistered","headingsExample","level","content","StyleBook","enableResizing","isSelected","onClick","onSelect","showCloseButton","onClose","showTabs","userConfig","resizeObserver","sizes","textColor","backgroundColor","examples","tabs","some","slug","icon","base","baseConfig","mergedConfig","originalSettings","select","getSettings","settings","__unstableIsPreviewMode","globalStyles","styles","closeButtonLabel","children","className","width","style","color","background","TabList","tab","Tab","tabId","TabPanel","focusable","StyleBookBody","isFocused","setIsFocused","buttonModeProps","role","onFocus","onBlur","onKeyDown","event","defaultPrevented","keyCode","preventDefault","readonly","buttonModeStyles","tabIndex","Examples","label","orientation","Example","id","focusMode","renderedBlocks","Array","isArray","Item","render","value","renderAppender"],"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDisabled,\n\tComposite,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\n\tgetBlockType,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\nimport {\n\tBlockList,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n} from '@wordpress/block-editor';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { useMemo, useState, memo, useContext } from '@wordpress/element';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport EditorCanvasContainer from '../editor-canvas-container';\n\nconst {\n\tExperimentalBlockEditorProvider,\n\tuseGlobalStyle,\n\tGlobalStylesContext,\n\tuseGlobalStylesOutputWithConfig,\n} = unlock( blockEditorPrivateApis );\nconst { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\n// The content area of the Style Book is rendered within an iframe so that global styles\n// are applied to elements within the entire content area. To support elements that are\n// not part of the block previews, such as headings and layout for the block previews,\n// additional CSS rules need to be passed into the iframe. These are hard-coded below.\n// Note that button styles are unset, and then focus rules from the `Button` component are\n// applied to the `button` element, targeted via `.edit-site-style-book__example`.\n// This is to ensure that browser default styles for buttons are not applied to the previews.\nconst STYLE_BOOK_IFRAME_STYLES = `\n\t.edit-site-style-book__examples {\n\t\tmax-width: 900px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.edit-site-style-book__example {\n\t\tborder-radius: 2px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 40px;\n\t\tmargin-bottom: 40px;\n\t\tpadding: 16px;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tscroll-margin-top: 32px;\n\t\tscroll-margin-bottom: 32px;\n\t}\n\n\t.edit-site-style-book__example.is-selected {\n\t\tbox-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t}\n\n\t.edit-site-style-book__example:focus:not(:disabled) {\n\t\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t\toutline: 3px solid transparent;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example {\n\t\tflex-direction: row;\n\t}\n\n\t.edit-site-style-book__example-title {\n\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t\tfont-size: 11px;\n\t\tfont-weight: 500;\n\t\tline-height: normal;\n\t\tmargin: 0;\n\t\ttext-align: left;\n\t\ttext-transform: uppercase;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {\n\t\ttext-align: right;\n\t\twidth: 120px;\n\t}\n\n\t.edit-site-style-book__example-preview {\n\t\twidth: 100%;\n\t}\n\n\t.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,\n\t.edit-site-style-book__example-preview .block-list-appender {\n\t\tdisplay: none;\n\t}\n\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {\n\t\tmargin-top: 0;\n\t}\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {\n\t\tmargin-bottom: 0;\n\t}\n`;\n\nfunction isObjectEmpty( object ) {\n\treturn ! object || Object.keys( object ).length === 0;\n}\n\nfunction getExamples() {\n\tconst nonHeadingBlockExamples = getBlockTypes()\n\t\t.filter( ( blockType ) => {\n\t\t\tconst { name, example, supports } = blockType;\n\t\t\treturn (\n\t\t\t\tname !== 'core/heading' &&\n\t\t\t\t!! example &&\n\t\t\t\tsupports.inserter !== false\n\t\t\t);\n\t\t} )\n\t\t.map( ( blockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\tblocks: getBlockFromExample( blockType.name, blockType.example ),\n\t\t} ) );\n\n\tconst isHeadingBlockRegistered = !! getBlockType( 'core/heading' );\n\n\tif ( ! isHeadingBlockRegistered ) {\n\t\treturn nonHeadingBlockExamples;\n\t}\n\n\t// Use our own example for the Heading block so that we can show multiple\n\t// heading levels.\n\tconst headingsExample = {\n\t\tname: 'core/heading',\n\t\ttitle: __( 'Headings' ),\n\t\tcategory: 'text',\n\t\tblocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {\n\t\t\treturn createBlock( 'core/heading', {\n\t\t\t\tcontent: sprintf(\n\t\t\t\t\t// translators: %d: heading level e.g: \"1\", \"2\", \"3\"\n\t\t\t\t\t__( 'Heading %d' ),\n\t\t\t\t\tlevel\n\t\t\t\t),\n\t\t\t\tlevel,\n\t\t\t} );\n\t\t} ),\n\t};\n\n\treturn [ headingsExample, ...nonHeadingBlockExamples ];\n}\n\nfunction StyleBook( {\n\tenableResizing = true,\n\tisSelected,\n\tonClick,\n\tonSelect,\n\tshowCloseButton = true,\n\tonClose,\n\tshowTabs = true,\n\tuserConfig = {},\n} ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ examples ] = useState( getExamples );\n\tconst tabs = useMemo(\n\t\t() =>\n\t\t\tgetCategories()\n\t\t\t\t.filter( ( category ) =>\n\t\t\t\t\texamples.some(\n\t\t\t\t\t\t( example ) => example.category === category.slug\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.map( ( category ) => ( {\n\t\t\t\t\tname: category.slug,\n\t\t\t\t\ttitle: category.title,\n\t\t\t\t\ticon: category.icon,\n\t\t\t\t} ) ),\n\t\t[ examples ]\n\t);\n\tconst { base: baseConfig } = useContext( GlobalStylesContext );\n\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {\n\t\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t\t}\n\t\treturn {};\n\t}, [ baseConfig, userConfig ] );\n\n\t// Copied from packages/edit-site/src/components/revisions/index.js\n\t// could we create a shared hook?\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\tconst [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );\n\n\tsettings.styles =\n\t\t! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )\n\t\t\t? globalStyles\n\t\t\t: settings.styles;\n\n\treturn (\n\t\t<EditorCanvasContainer\n\t\t\tonClose={ onClose }\n\t\t\tenableResizing={ enableResizing }\n\t\t\tcloseButtonLabel={ showCloseButton ? __( 'Close' ) : null }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t\t'is-button': !! onClick,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: textColor,\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t{ showTabs ? (\n\t\t\t\t\t<div className=\"edit-site-style-book__tabs\">\n\t\t\t\t\t\t<Tabs>\n\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<StyleBookBody\n\t\t\t\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\t\t\t\tsizes={ sizes }\n\t\t\t\t\t\t\t\t\t\ttitle={ tab.title }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<StyleBookBody\n\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tsizes={ sizes }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</EditorCanvasContainer>\n\t);\n}\n\nconst StyleBookBody = ( {\n\tcategory,\n\texamples,\n\tisSelected,\n\tonClick,\n\tonSelect,\n\tsettings,\n\tsizes,\n\ttitle,\n} ) => {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\t// The presence of an `onClick` prop indicates that the Style Book is being used as a button.\n\t// In this case, add additional props to the iframe to make it behave like a button.\n\tconst buttonModeProps = {\n\t\trole: 'button',\n\t\tonFocus: () => setIsFocused( true ),\n\t\tonBlur: () => setIsFocused( false ),\n\t\tonKeyDown: ( event ) => {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst { keyCode } = event;\n\t\t\tif ( onClick && ( keyCode === ENTER || keyCode === SPACE ) ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonClick( event );\n\t\t\t}\n\t\t},\n\t\tonClick: ( event ) => {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( onClick ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonClick( event );\n\t\t\t}\n\t\t},\n\t\treadonly: true,\n\t};\n\n\tconst buttonModeStyles = onClick\n\t\t? 'body { cursor: pointer; } body * { pointer-events: none; }'\n\t\t: '';\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName={ clsx( 'edit-site-style-book__iframe', {\n\t\t\t\t'is-focused': isFocused && !! onClick,\n\t\t\t\t'is-button': !! onClick,\n\t\t\t} ) }\n\t\t\tname=\"style-book-canvas\"\n\t\t\ttabIndex={ 0 }\n\t\t\t{ ...( onClick ? buttonModeProps : {} ) }\n\t\t>\n\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t<style>\n\t\t\t\t{\n\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t`.is-root-container { display: flow-root; }\n\t\t\t\t\t\tbody { position: relative; padding: 32px !important; }` +\n\t\t\t\t\t\tSTYLE_BOOK_IFRAME_STYLES +\n\t\t\t\t\t\tbuttonModeStyles\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<Examples\n\t\t\t\tclassName={ clsx( 'edit-site-style-book__examples', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t} ) }\n\t\t\t\texamples={ examples }\n\t\t\t\tcategory={ category }\n\t\t\t\tlabel={\n\t\t\t\t\ttitle\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Category of blocks, e.g. Text.\n\t\t\t\t\t\t\t\t__( 'Examples of blocks in the %s category' ),\n\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: __( 'Examples of blocks' )\n\t\t\t\t}\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tkey={ category }\n\t\t\t/>\n\t\t</Iframe>\n\t);\n};\n\nconst Examples = memo(\n\t( { className, examples, category, label, isSelected, onSelect } ) => {\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\torientation=\"vertical\"\n\t\t\t\tclassName={ className }\n\t\t\t\taria-label={ label }\n\t\t\t\trole=\"grid\"\n\t\t\t>\n\t\t\t\t{ examples\n\t\t\t\t\t.filter( ( example ) =>\n\t\t\t\t\t\tcategory ? example.category === category : true\n\t\t\t\t\t)\n\t\t\t\t\t.map( ( example ) => (\n\t\t\t\t\t\t<Example\n\t\t\t\t\t\t\tkey={ example.name }\n\t\t\t\t\t\t\tid={ `example-${ example.name }` }\n\t\t\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonSelect?.( example.name );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t</Composite>\n\t\t);\n\t}\n);\n\nconst Example = ( { id, title, blocks, isSelected, onClick } ) => {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( {\n\t\t\t...originalSettings,\n\t\t\tfocusMode: false, // Disable \"Spotlight mode\".\n\t\t\t__unstableIsPreviewMode: true,\n\t\t} ),\n\t\t[ originalSettings ]\n\t);\n\n\t// Cache the list of blocks to avoid additional processing when the component is re-rendered.\n\tconst renderedBlocks = useMemo(\n\t\t() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),\n\t\t[ blocks ]\n\t);\n\n\treturn (\n\t\t<div role=\"row\">\n\t\t\t<div role=\"gridcell\">\n\t\t\t\t<Composite.Item\n\t\t\t\t\tclassName={ clsx( 'edit-site-style-book__example', {\n\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t} ) }\n\t\t\t\t\tid={ id }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\t\t\t\ttitle\n\t\t\t\t\t) }\n\t\t\t\t\trender={ <div /> }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"edit-site-style-book__example-title\">\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</span>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"edit-site-style-book__example-preview\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t>\n\t\t\t\t\t\t<Disabled className=\"edit-site-style-book__example-preview__content\">\n\t\t\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\t\t\tvalue={ renderedBlocks }\n\t\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t\t\t</Disabled>\n\t\t\t\t\t</div>\n\t\t\t\t</Composite.Item>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default StyleBook;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","Disabled","Composite","privateApis","componentsPrivateApis","__","sprintf","BlockList","blockEditorPrivateApis","store","blockEditorStore","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","editorPrivateApis","useSelect","useResizeObserver","useMemo","useState","memo","useContext","ENTER","SPACE","unlock","EditorCanvasContainer","STYLE_BOOK_IFRAME_STYLES","getExamplesByCategory","getTopLevelStyleBookCategories","getExamples","jsx","_jsx","jsxs","_jsxs","ExperimentalBlockEditorProvider","useGlobalStyle","GlobalStylesContext","useGlobalStylesOutputWithConfig","mergeBaseAndUserConfigs","Tabs","isObjectEmpty","object","Object","keys","length","StyleBook","enableResizing","isSelected","onClick","onSelect","showCloseButton","onClose","showTabs","userConfig","resizeObserver","sizes","textColor","backgroundColor","examples","tabs","filter","category","some","example","slug","base","baseConfig","mergedConfig","originalSettings","select","getSettings","settings","__unstableIsPreviewMode","globalStyles","styles","closeButtonLabel","children","className","width","style","color","background","TabList","map","tab","Tab","tabId","title","TabPanel","focusable","StyleBookBody","isFocused","setIsFocused","buttonModeProps","role","onFocus","onBlur","onKeyDown","event","defaultPrevented","keyCode","preventDefault","readonly","name","tabIndex","Examples","label","categoryDefinition","find","_category","filteredExamples","orientation","Example","id","blocks","subcategories","subcategory","Group","GroupLabel","Subcategory","focusMode","renderedBlocks","Array","isArray","Item","render","value","renderAppender"],"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDisabled,\n\tComposite,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tBlockList,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n} from '@wordpress/block-editor';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { useMemo, useState, memo, useContext } from '@wordpress/element';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport EditorCanvasContainer from '../editor-canvas-container';\nimport { STYLE_BOOK_IFRAME_STYLES } from './constants';\nimport {\n\tgetExamplesByCategory,\n\tgetTopLevelStyleBookCategories,\n} from './categories';\nimport { getExamples } from './examples';\n\nconst {\n\tExperimentalBlockEditorProvider,\n\tuseGlobalStyle,\n\tGlobalStylesContext,\n\tuseGlobalStylesOutputWithConfig,\n} = unlock( blockEditorPrivateApis );\nconst { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nfunction isObjectEmpty( object ) {\n\treturn ! object || Object.keys( object ).length === 0;\n}\n\nfunction StyleBook( {\n\tenableResizing = true,\n\tisSelected,\n\tonClick,\n\tonSelect,\n\tshowCloseButton = true,\n\tonClose,\n\tshowTabs = true,\n\tuserConfig = {},\n} ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ examples ] = useState( getExamples );\n\tconst tabs = useMemo(\n\t\t() =>\n\t\t\tgetTopLevelStyleBookCategories().filter( ( category ) =>\n\t\t\t\texamples.some(\n\t\t\t\t\t( example ) => example.category === category.slug\n\t\t\t\t)\n\t\t\t),\n\t\t[ examples ]\n\t);\n\tconst { base: baseConfig } = useContext( GlobalStylesContext );\n\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {\n\t\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t\t}\n\t\treturn {};\n\t}, [ baseConfig, userConfig ] );\n\n\t// Copied from packages/edit-site/src/components/revisions/index.js\n\t// could we create a shared hook?\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\tconst [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );\n\n\tsettings.styles =\n\t\t! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )\n\t\t\t? globalStyles\n\t\t\t: settings.styles;\n\n\treturn (\n\t\t<EditorCanvasContainer\n\t\t\tonClose={ onClose }\n\t\t\tenableResizing={ enableResizing }\n\t\t\tcloseButtonLabel={ showCloseButton ? __( 'Close' ) : null }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t\t'is-button': !! onClick,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: textColor,\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t{ showTabs ? (\n\t\t\t\t\t<div className=\"edit-site-style-book__tabs\">\n\t\t\t\t\t\t<Tabs>\n\t\t\t\t\t\t\t<div className=\"edit-site-style-book__tablist-container\">\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\t\t\t\ttabId={ tab.slug }\n\t\t\t\t\t\t\t\t\t\t\tkey={ tab.slug }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\tkey={ tab.slug }\n\t\t\t\t\t\t\t\t\ttabId={ tab.slug }\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<StyleBookBody\n\t\t\t\t\t\t\t\t\t\tcategory={ tab.slug }\n\t\t\t\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\t\t\t\tsizes={ sizes }\n\t\t\t\t\t\t\t\t\t\ttitle={ tab.title }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<StyleBookBody\n\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tsizes={ sizes }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</EditorCanvasContainer>\n\t);\n}\n\nconst StyleBookBody = ( {\n\tcategory,\n\texamples,\n\tisSelected,\n\tonClick,\n\tonSelect,\n\tsettings,\n\tsizes,\n\ttitle,\n} ) => {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\t// The presence of an `onClick` prop indicates that the Style Book is being used as a button.\n\t// In this case, add additional props to the iframe to make it behave like a button.\n\tconst buttonModeProps = {\n\t\trole: 'button',\n\t\tonFocus: () => setIsFocused( true ),\n\t\tonBlur: () => setIsFocused( false ),\n\t\tonKeyDown: ( event ) => {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst { keyCode } = event;\n\t\t\tif ( onClick && ( keyCode === ENTER || keyCode === SPACE ) ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonClick( event );\n\t\t\t}\n\t\t},\n\t\tonClick: ( event ) => {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( onClick ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonClick( event );\n\t\t\t}\n\t\t},\n\t\treadonly: true,\n\t};\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName={ clsx( 'edit-site-style-book__iframe', {\n\t\t\t\t'is-focused': isFocused && !! onClick,\n\t\t\t\t'is-button': !! onClick,\n\t\t\t} ) }\n\t\t\tname=\"style-book-canvas\"\n\t\t\ttabIndex={ 0 }\n\t\t\t{ ...( onClick ? buttonModeProps : {} ) }\n\t\t>\n\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t<style>\n\t\t\t\t{ STYLE_BOOK_IFRAME_STYLES }\n\t\t\t\t{ !! onClick &&\n\t\t\t\t\t'body { cursor: pointer; } body * { pointer-events: none; }' }\n\t\t\t</style>\n\t\t\t<Examples\n\t\t\t\tclassName={ clsx( 'edit-site-style-book__examples', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t} ) }\n\t\t\t\texamples={ examples }\n\t\t\t\tcategory={ category }\n\t\t\t\tlabel={\n\t\t\t\t\ttitle\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Category of blocks, e.g. Text.\n\t\t\t\t\t\t\t\t__( 'Examples of blocks in the %s category' ),\n\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: __( 'Examples of blocks' )\n\t\t\t\t}\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tkey={ category }\n\t\t\t/>\n\t\t</Iframe>\n\t);\n};\n\nconst Examples = memo(\n\t( { className, examples, category, label, isSelected, onSelect } ) => {\n\t\tconst categoryDefinition = category\n\t\t\t? getTopLevelStyleBookCategories().find(\n\t\t\t\t\t( _category ) => _category.slug === category\n\t\t\t  )\n\t\t\t: null;\n\n\t\tconst filteredExamples = categoryDefinition\n\t\t\t? getExamplesByCategory( categoryDefinition, examples )\n\t\t\t: { examples };\n\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\torientation=\"vertical\"\n\t\t\t\tclassName={ className }\n\t\t\t\taria-label={ label }\n\t\t\t\trole=\"grid\"\n\t\t\t>\n\t\t\t\t{ !! filteredExamples?.examples?.length &&\n\t\t\t\t\tfilteredExamples.examples.map( ( example ) => (\n\t\t\t\t\t\t<Example\n\t\t\t\t\t\t\tkey={ example.name }\n\t\t\t\t\t\t\tid={ `example-${ example.name }` }\n\t\t\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonSelect?.( example.name );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t{ !! filteredExamples?.subcategories?.length &&\n\t\t\t\t\tfilteredExamples.subcategories.map( ( subcategory ) => (\n\t\t\t\t\t\t<Composite.Group\n\t\t\t\t\t\t\tclassName=\"edit-site-style-book__subcategory\"\n\t\t\t\t\t\t\tkey={ `subcategory-${ subcategory.slug }` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Composite.GroupLabel>\n\t\t\t\t\t\t\t\t<h2 className=\"edit-site-style-book__subcategory-title\">\n\t\t\t\t\t\t\t\t\t{ subcategory.title }\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t</Composite.GroupLabel>\n\t\t\t\t\t\t\t<Subcategory\n\t\t\t\t\t\t\t\texamples={ subcategory.examples }\n\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Composite.Group>\n\t\t\t\t\t) ) }\n\t\t\t</Composite>\n\t\t);\n\t}\n);\n\nconst Subcategory = ( { examples, isSelected, onSelect } ) => {\n\treturn (\n\t\t!! examples?.length &&\n\t\texamples.map( ( example ) => (\n\t\t\t<Example\n\t\t\t\tkey={ example.name }\n\t\t\t\tid={ `example-${ example.name }` }\n\t\t\t\ttitle={ example.title }\n\t\t\t\tblocks={ example.blocks }\n\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonSelect?.( example.name );\n\t\t\t\t} }\n\t\t\t/>\n\t\t) )\n\t);\n};\n\nconst Example = ( { id, title, blocks, isSelected, onClick } ) => {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( {\n\t\t\t...originalSettings,\n\t\t\tfocusMode: false, // Disable \"Spotlight mode\".\n\t\t\t__unstableIsPreviewMode: true,\n\t\t} ),\n\t\t[ originalSettings ]\n\t);\n\n\t// Cache the list of blocks to avoid additional processing when the component is re-rendered.\n\tconst renderedBlocks = useMemo(\n\t\t() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),\n\t\t[ blocks ]\n\t);\n\n\treturn (\n\t\t<div role=\"row\">\n\t\t\t<div role=\"gridcell\">\n\t\t\t\t<Composite.Item\n\t\t\t\t\tclassName={ clsx( 'edit-site-style-book__example', {\n\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t} ) }\n\t\t\t\t\tid={ id }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\t\t\t\ttitle\n\t\t\t\t\t) }\n\t\t\t\t\trender={ <div /> }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"edit-site-style-book__example-title\">\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</span>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"edit-site-style-book__example-preview\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t>\n\t\t\t\t\t\t<Disabled className=\"edit-site-style-book__example-preview__content\">\n\t\t\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\t\t\tvalue={ renderedBlocks }\n\t\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t\t\t</Disabled>\n\t\t\t\t\t</div>\n\t\t\t\t</Composite.Item>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default StyleBook;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SACCC,QAAQ,EACRC,SAAS,EACTC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SACCC,SAAS,EACTJ,WAAW,IAAIK,sBAAsB,EACrCC,KAAK,IAAIC,gBAAgB,EACzBC,sBAAsB,IAAIC,YAAY,EACtCC,gBAAgB,IAAIC,MAAM,QACpB,yBAAyB;AAChC,SAASX,WAAW,IAAIY,iBAAiB,QAAQ,mBAAmB;AACpE,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,OAAO,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,UAAU,QAAQ,oBAAoB;AACxE,SAASC,KAAK,EAAEC,KAAK,QAAQ,qBAAqB;;AAElD;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,qBAAqB,MAAM,4BAA4B;AAC9D,SAASC,wBAAwB,QAAQ,aAAa;AACtD,SACCC,qBAAqB,EACrBC,8BAA8B,QACxB,cAAc;AACrB,SAASC,WAAW,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzC,MAAM;EACLC,+BAA+B;EAC/BC,cAAc;EACdC,mBAAmB;EACnBC;AACD,CAAC,GAAGb,MAAM,CAAEhB,sBAAuB,CAAC;AACpC,MAAM;EAAE8B;AAAwB,CAAC,GAAGd,MAAM,CAAET,iBAAkB,CAAC;AAE/D,MAAM;EAAEwB;AAAK,CAAC,GAAGf,MAAM,CAAEpB,qBAAsB,CAAC;AAEhD,SAASoC,aAAaA,CAAEC,MAAM,EAAG;EAChC,OAAO,CAAEA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAAEF,MAAO,CAAC,CAACG,MAAM,KAAK,CAAC;AACtD;AAEA,SAASC,SAASA,CAAE;EACnBC,cAAc,GAAG,IAAI;EACrBC,UAAU;EACVC,OAAO;EACPC,QAAQ;EACRC,eAAe,GAAG,IAAI;EACtBC,OAAO;EACPC,QAAQ,GAAG,IAAI;EACfC,UAAU,GAAG,CAAC;AACf,CAAC,EAAG;EACH,MAAM,CAAEC,cAAc,EAAEC,KAAK,CAAE,GAAGtC,iBAAiB,CAAC,CAAC;EACrD,MAAM,CAAEuC,SAAS,CAAE,GAAGrB,cAAc,CAAE,YAAa,CAAC;EACpD,MAAM,CAAEsB,eAAe,CAAE,GAAGtB,cAAc,CAAE,kBAAmB,CAAC;EAChE,MAAM,CAAEuB,QAAQ,CAAE,GAAGvC,QAAQ,CAAEU,WAAY,CAAC;EAC5C,MAAM8B,IAAI,GAAGzC,OAAO,CACnB,MACCU,8BAA8B,CAAC,CAAC,CAACgC,MAAM,CAAIC,QAAQ,IAClDH,QAAQ,CAACI,IAAI,CACVC,OAAO,IAAMA,OAAO,CAACF,QAAQ,KAAKA,QAAQ,CAACG,IAC9C,CACD,CAAC,EACF,CAAEN,QAAQ,CACX,CAAC;EACD,MAAM;IAAEO,IAAI,EAAEC;EAAW,CAAC,GAAG7C,UAAU,CAAEe,mBAAoB,CAAC;EAE9D,MAAM+B,YAAY,GAAGjD,OAAO,CAAE,MAAM;IACnC,IAAK,CAAEsB,aAAa,CAAEa,UAAW,CAAC,IAAI,CAAEb,aAAa,CAAE0B,UAAW,CAAC,EAAG;MACrE,OAAO5B,uBAAuB,CAAE4B,UAAU,EAAEb,UAAW,CAAC;IACzD;IACA,OAAO,CAAC,CAAC;EACV,CAAC,EAAE,CAAEa,UAAU,EAAEb,UAAU,CAAG,CAAC;;EAE/B;EACA;EACA,MAAMe,gBAAgB,GAAGpD,SAAS,CAC/BqD,MAAM,IAAMA,MAAM,CAAE3D,gBAAiB,CAAC,CAAC4D,WAAW,CAAC,CAAC,EACtD,EACD,CAAC;EAED,MAAMC,QAAQ,GAAGrD,OAAO,CACvB,OAAQ;IAAE,GAAGkD,gBAAgB;IAAEI,uBAAuB,EAAE;EAAK,CAAC,CAAE,EAChE,CAAEJ,gBAAgB,CACnB,CAAC;EAED,MAAM,CAAEK,YAAY,CAAE,GAAGpC,+BAA+B,CAAE8B,YAAa,CAAC;EAExEI,QAAQ,CAACG,MAAM,GACd,CAAElC,aAAa,CAAEiC,YAAa,CAAC,IAAI,CAAEjC,aAAa,CAAEa,UAAW,CAAC,GAC7DoB,YAAY,GACZF,QAAQ,CAACG,MAAM;EAEnB,oBACC3C,IAAA,CAACN,qBAAqB;IACrB0B,OAAO,EAAGA,OAAS;IACnBL,cAAc,EAAGA,cAAgB;IACjC6B,gBAAgB,EAAGzB,eAAe,GAAG7C,EAAE,CAAE,OAAQ,CAAC,GAAG,IAAM;IAAAuE,QAAA,eAE3D3C,KAAA;MACC4C,SAAS,EAAG7E,IAAI,CAAE,sBAAsB,EAAE;QACzC,SAAS,EAAEuD,KAAK,CAACuB,KAAK,GAAG,GAAG;QAC5B,WAAW,EAAE,CAAC,CAAE9B;MACjB,CAAE,CAAG;MACL+B,KAAK,EAAG;QACPC,KAAK,EAAExB,SAAS;QAChByB,UAAU,EAAExB;MACb,CAAG;MAAAmB,QAAA,GAEDtB,cAAc,EACdF,QAAQ,gBACTrB,IAAA;QAAK8C,SAAS,EAAC,4BAA4B;QAAAD,QAAA,eAC1C3C,KAAA,CAACM,IAAI;UAAAqC,QAAA,gBACJ7C,IAAA;YAAK8C,SAAS,EAAC,yCAAyC;YAAAD,QAAA,eACvD7C,IAAA,CAACQ,IAAI,CAAC2C,OAAO;cAAAN,QAAA,EACVjB,IAAI,CAACwB,GAAG,CAAIC,GAAG,iBAChBrD,IAAA,CAACQ,IAAI,CAAC8C,GAAG;gBACRC,KAAK,EAAGF,GAAG,CAACpB,IAAM;gBAAAY,QAAA,EAGhBQ,GAAG,CAACG;cAAK,GAFLH,GAAG,CAACpB,IAGD,CACT;YAAC,CACU;UAAC,CACX,CAAC,EACJL,IAAI,CAACwB,GAAG,CAAIC,GAAG,iBAChBrD,IAAA,CAACQ,IAAI,CAACiD,QAAQ;YAEbF,KAAK,EAAGF,GAAG,CAACpB,IAAM;YAClByB,SAAS,EAAG,KAAO;YAAAb,QAAA,eAEnB7C,IAAA,CAAC2D,aAAa;cACb7B,QAAQ,EAAGuB,GAAG,CAACpB,IAAM;cACrBN,QAAQ,EAAGA,QAAU;cACrBX,UAAU,EAAGA,UAAY;cACzBE,QAAQ,EAAGA,QAAU;cACrBsB,QAAQ,EAAGA,QAAU;cACrBhB,KAAK,EAAGA,KAAO;cACfgC,KAAK,EAAGH,GAAG,CAACG;YAAO,CACnB;UAAC,GAZIH,GAAG,CAACpB,IAaI,CACd,CAAC;QAAA,CACE;MAAC,CACH,CAAC,gBAENjC,IAAA,CAAC2D,aAAa;QACbhC,QAAQ,EAAGA,QAAU;QACrBX,UAAU,EAAGA,UAAY;QACzBC,OAAO,EAAGA,OAAS;QACnBC,QAAQ,EAAGA,QAAU;QACrBsB,QAAQ,EAAGA,QAAU;QACrBhB,KAAK,EAAGA;MAAO,CACf,CACD;IAAA,CACG;EAAC,CACgB,CAAC;AAE1B;AAEA,MAAMmC,aAAa,GAAGA,CAAE;EACvB7B,QAAQ;EACRH,QAAQ;EACRX,UAAU;EACVC,OAAO;EACPC,QAAQ;EACRsB,QAAQ;EACRhB,KAAK;EACLgC;AACD,CAAC,KAAM;EACN,MAAM,CAAEI,SAAS,EAAEC,YAAY,CAAE,GAAGzE,QAAQ,CAAE,KAAM,CAAC;;EAErD;EACA;EACA,MAAM0E,eAAe,GAAG;IACvBC,IAAI,EAAE,QAAQ;IACdC,OAAO,EAAEA,CAAA,KAAMH,YAAY,CAAE,IAAK,CAAC;IACnCI,MAAM,EAAEA,CAAA,KAAMJ,YAAY,CAAE,KAAM,CAAC;IACnCK,SAAS,EAAIC,KAAK,IAAM;MACvB,IAAKA,KAAK,CAACC,gBAAgB,EAAG;QAC7B;MACD;MACA,MAAM;QAAEC;MAAQ,CAAC,GAAGF,KAAK;MACzB,IAAKlD,OAAO,KAAMoD,OAAO,KAAK9E,KAAK,IAAI8E,OAAO,KAAK7E,KAAK,CAAE,EAAG;QAC5D2E,KAAK,CAACG,cAAc,CAAC,CAAC;QACtBrD,OAAO,CAAEkD,KAAM,CAAC;MACjB;IACD,CAAC;IACDlD,OAAO,EAAIkD,KAAK,IAAM;MACrB,IAAKA,KAAK,CAACC,gBAAgB,EAAG;QAC7B;MACD;MACA,IAAKnD,OAAO,EAAG;QACdkD,KAAK,CAACG,cAAc,CAAC,CAAC;QACtBrD,OAAO,CAAEkD,KAAM,CAAC;MACjB;IACD,CAAC;IACDI,QAAQ,EAAE;EACX,CAAC;EAED,oBACCrE,KAAA,CAACnB,MAAM;IACN+D,SAAS,EAAG7E,IAAI,CAAE,8BAA8B,EAAE;MACjD,YAAY,EAAE2F,SAAS,IAAI,CAAC,CAAE3C,OAAO;MACrC,WAAW,EAAE,CAAC,CAAEA;IACjB,CAAE,CAAG;IACLuD,IAAI,EAAC,mBAAmB;IACxBC,QAAQ,EAAG,CAAG;IAAA,IACPxD,OAAO,GAAG6C,eAAe,GAAG,CAAC,CAAC;IAAAjB,QAAA,gBAErC7C,IAAA,CAACnB,YAAY;MAAC8D,MAAM,EAAGH,QAAQ,CAACG;IAAQ,CAAE,CAAC,eAC3CzC,KAAA;MAAA2C,QAAA,GACGlD,wBAAwB,EACxB,CAAC,CAAEsB,OAAO,IACX,4DAA4D;IAAA,CACvD,CAAC,eACRjB,IAAA,CAAC0E,QAAQ;MACR5B,SAAS,EAAG7E,IAAI,CAAE,gCAAgC,EAAE;QACnD,SAAS,EAAEuD,KAAK,CAACuB,KAAK,GAAG;MAC1B,CAAE,CAAG;MACLpB,QAAQ,EAAGA,QAAU;MACrBG,QAAQ,EAAGA,QAAU;MACrB6C,KAAK,EACJnB,KAAK,GACFjF,OAAO;MACP;MACAD,EAAE,CAAE,uCAAwC,CAAC,EAC7CkF,KACA,CAAC,GACDlF,EAAE,CAAE,oBAAqB,CAC5B;MACD0C,UAAU,EAAGA,UAAY;MACzBE,QAAQ,EAAGA;IAAU,GACfY,QACN,CAAC;EAAA,CACK,CAAC;AAEX,CAAC;AAED,MAAM4C,QAAQ,GAAGrF,IAAI,CACpB,CAAE;EAAEyD,SAAS;EAAEnB,QAAQ;EAAEG,QAAQ;EAAE6C,KAAK;EAAE3D,UAAU;EAAEE;AAAS,CAAC,KAAM;EACrE,MAAM0D,kBAAkB,GAAG9C,QAAQ,GAChCjC,8BAA8B,CAAC,CAAC,CAACgF,IAAI,CACnCC,SAAS,IAAMA,SAAS,CAAC7C,IAAI,KAAKH,QACpC,CAAC,GACD,IAAI;EAEP,MAAMiD,gBAAgB,GAAGH,kBAAkB,GACxChF,qBAAqB,CAAEgF,kBAAkB,EAAEjD,QAAS,CAAC,GACrD;IAAEA;EAAS,CAAC;EAEf,oBACCzB,KAAA,CAAC/B,SAAS;IACT6G,WAAW,EAAC,UAAU;IACtBlC,SAAS,EAAGA,SAAW;IACvB,cAAa6B,KAAO;IACpBZ,IAAI,EAAC,MAAM;IAAAlB,QAAA,GAET,CAAC,CAAEkC,gBAAgB,EAAEpD,QAAQ,EAAEd,MAAM,IACtCkE,gBAAgB,CAACpD,QAAQ,CAACyB,GAAG,CAAIpB,OAAO,iBACvChC,IAAA,CAACiF,OAAO;MAEPC,EAAE,EAAG,WAAYlD,OAAO,CAACwC,IAAI,EAAK;MAClChB,KAAK,EAAGxB,OAAO,CAACwB,KAAO;MACvB2B,MAAM,EAAGnD,OAAO,CAACmD,MAAQ;MACzBnE,UAAU,EAAGA,UAAU,CAAEgB,OAAO,CAACwC,IAAK,CAAG;MACzCvD,OAAO,EAAGA,CAAA,KAAM;QACfC,QAAQ,GAAIc,OAAO,CAACwC,IAAK,CAAC;MAC3B;IAAG,GAPGxC,OAAO,CAACwC,IAQd,CACA,CAAC,EACF,CAAC,CAAEO,gBAAgB,EAAEK,aAAa,EAAEvE,MAAM,IAC3CkE,gBAAgB,CAACK,aAAa,CAAChC,GAAG,CAAIiC,WAAW,iBAChDnF,KAAA,CAAC/B,SAAS,CAACmH,KAAK;MACfxC,SAAS,EAAC,mCAAmC;MAAAD,QAAA,gBAG7C7C,IAAA,CAAC7B,SAAS,CAACoH,UAAU;QAAA1C,QAAA,eACpB7C,IAAA;UAAI8C,SAAS,EAAC,yCAAyC;UAAAD,QAAA,EACpDwC,WAAW,CAAC7B;QAAK,CAChB;MAAC,CACgB,CAAC,eACvBxD,IAAA,CAACwF,WAAW;QACX7D,QAAQ,EAAG0D,WAAW,CAAC1D,QAAU;QACjCX,UAAU,EAAGA,UAAY;QACzBE,QAAQ,EAAGA;MAAU,CACrB,CAAC;IAAA,GAXI,eAAgBmE,WAAW,CAACpD,IAAI,EAYtB,CAChB,CAAC;EAAA,CACM,CAAC;AAEd,CACD,CAAC;AAED,MAAMuD,WAAW,GAAGA,CAAE;EAAE7D,QAAQ;EAAEX,UAAU;EAAEE;AAAS,CAAC,KAAM;EAC7D,OACC,CAAC,CAAES,QAAQ,EAAEd,MAAM,IACnBc,QAAQ,CAACyB,GAAG,CAAIpB,OAAO,iBACtBhC,IAAA,CAACiF,OAAO;IAEPC,EAAE,EAAG,WAAYlD,OAAO,CAACwC,IAAI,EAAK;IAClChB,KAAK,EAAGxB,OAAO,CAACwB,KAAO;IACvB2B,MAAM,EAAGnD,OAAO,CAACmD,MAAQ;IACzBnE,UAAU,EAAGA,UAAU,CAAEgB,OAAO,CAACwC,IAAK,CAAG;IACzCvD,OAAO,EAAGA,CAAA,KAAM;MACfC,QAAQ,GAAIc,OAAO,CAACwC,IAAK,CAAC;IAC3B;EAAG,GAPGxC,OAAO,CAACwC,IAQd,CACA,CAAC;AAEL,CAAC;AAED,MAAMS,OAAO,GAAGA,CAAE;EAAEC,EAAE;EAAE1B,KAAK;EAAE2B,MAAM;EAAEnE,UAAU;EAAEC;AAAQ,CAAC,KAAM;EACjE,MAAMoB,gBAAgB,GAAGpD,SAAS,CAC/BqD,MAAM,IAAMA,MAAM,CAAE3D,gBAAiB,CAAC,CAAC4D,WAAW,CAAC,CAAC,EACtD,EACD,CAAC;EACD,MAAMC,QAAQ,GAAGrD,OAAO,CACvB,OAAQ;IACP,GAAGkD,gBAAgB;IACnBoD,SAAS,EAAE,KAAK;IAAE;IAClBhD,uBAAuB,EAAE;EAC1B,CAAC,CAAE,EACH,CAAEJ,gBAAgB,CACnB,CAAC;;EAED;EACA,MAAMqD,cAAc,GAAGvG,OAAO,CAC7B,MAAQwG,KAAK,CAACC,OAAO,CAAET,MAAO,CAAC,GAAGA,MAAM,GAAG,CAAEA,MAAM,CAAI,EACvD,CAAEA,MAAM,CACT,CAAC;EAED,oBACCnF,IAAA;IAAK+D,IAAI,EAAC,KAAK;IAAAlB,QAAA,eACd7C,IAAA;MAAK+D,IAAI,EAAC,UAAU;MAAAlB,QAAA,eACnB3C,KAAA,CAAC/B,SAAS,CAAC0H,IAAI;QACd/C,SAAS,EAAG7E,IAAI,CAAE,+BAA+B,EAAE;UAClD,aAAa,EAAE+C;QAChB,CAAE,CAAG;QACLkE,EAAE,EAAGA,EAAI;QACT,cAAa3G,OAAO;QACnB;QACAD,EAAE,CAAE,gCAAiC,CAAC,EACtCkF,KACD,CAAG;QACHsC,MAAM,eAAG9F,IAAA,UAAM,CAAG;QAClB+D,IAAI,EAAC,QAAQ;QACb9C,OAAO,EAAGA,OAAS;QAAA4B,QAAA,gBAEnB7C,IAAA;UAAM8C,SAAS,EAAC,qCAAqC;UAAAD,QAAA,EAClDW;QAAK,CACF,CAAC,eACPxD,IAAA;UACC8C,SAAS,EAAC,uCAAuC;UACjD,mBAAW;UAAAD,QAAA,eAEX7C,IAAA,CAAC9B,QAAQ;YAAC4E,SAAS,EAAC,gDAAgD;YAAAD,QAAA,eACnE7C,IAAA,CAACG,+BAA+B;cAC/B4F,KAAK,EAAGL,cAAgB;cACxBlD,QAAQ,EAAGA,QAAU;cAAAK,QAAA,eAErB7C,IAAA,CAACxB,SAAS;gBAACwH,cAAc,EAAG;cAAO,CAAE;YAAC,CACN;UAAC,CACzB;QAAC,CACP,CAAC;MAAA,CACS;IAAC,CACb;EAAC,CACF,CAAC;AAER,CAAC;AAED,eAAelF,SAAS","ignoreList":[]}

package/build-module/components/style-book/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/components/style-book/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/edit-site/src/components/style-book/types.ts"],"sourcesContent":["type Block = {\n\tname: string;\n\tattributes: Record< string, unknown >;\n\tinnerBlocks?: Block[];\n};\n\nexport type StyleBookCategory = {\n\ttitle: string;\n\tslug: string;\n\tblocks?: string[];\n\texclude?: string[];\n\tsubcategories?: StyleBookCategory[];\n};\n\nexport type BlockExample = {\n\tname: string;\n\ttitle: string;\n\tcategory: string;\n\tblocks: Block | Block[];\n};\n\nexport type CategoryExamples = {\n\ttitle: string;\n\tslug: string;\n\texamples?: BlockExample[];\n\tsubcategories?: CategoryExamples[];\n};\n"],"mappings":"","ignoreList":[]}