@wordpress/edit-site 6.10.0 → 6.11.0

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _components = require("@wordpress/components");
+var _primitives = require("@wordpress/primitives");
+var _blockEditor = require("@wordpress/block-editor");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const ColorExamples = ({
+  colors,
+  type
+}) => {
+  if (!colors) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalGrid, {
+    columns: 2,
+    rowGap: 8,
+    columnGap: 16,
+    children: colors.map(color => {
+      const className = type === 'gradients' ? (0, _blockEditor.__experimentalGetGradientClass)(color.slug) : (0, _blockEditor.getColorClassName)('background-color', color.slug);
+      const classes = (0, _clsx.default)('edit-site-style-book__color-example', className);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.View, {
+        className: classes
+      }, color.slug);
+    })
+  });
+};
+var _default = exports.default = ColorExamples;
+//# sourceMappingURL=color-examples.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_primitives","_blockEditor","_jsxRuntime","ColorExamples","colors","type","jsx","__experimentalGrid","columns","rowGap","columnGap","children","map","color","className","__experimentalGetGradientClass","slug","getColorClassName","classes","clsx","View","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/style-book/color-examples.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { View } from '@wordpress/primitives';\nimport {\n\tgetColorClassName,\n\t__experimentalGetGradientClass,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport type { Color, Gradient } from './types';\n\nconst ColorExamples = ( { colors, type } ): JSX.Element | null => {\n\tif ( ! colors ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }>\n\t\t\t{ colors.map( ( color: Color | Gradient ) => {\n\t\t\t\tconst className =\n\t\t\t\t\ttype === 'gradients'\n\t\t\t\t\t\t? __experimentalGetGradientClass( color.slug )\n\t\t\t\t\t\t: getColorClassName( 'background-color', color.slug );\n\t\t\t\tconst classes = clsx(\n\t\t\t\t\t'edit-site-style-book__color-example',\n\t\t\t\t\tclassName\n\t\t\t\t);\n\n\t\t\t\treturn <View key={ color.slug } className={ classes } />;\n\t\t\t} ) }\n\t\t</Grid>\n\t);\n};\n\nexport default ColorExamples;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAGiC,IAAAI,WAAA,GAAAJ,OAAA;AAbjC;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,MAAMK,aAAa,GAAGA,CAAE;EAAEC,MAAM;EAAEC;AAAK,CAAC,KAA0B;EACjE,IAAK,CAAED,MAAM,EAAG;IACf,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAF,WAAA,CAAAI,GAAA,EAACP,WAAA,CAAAQ,kBAAI;IAACC,OAAO,EAAG,CAAG;IAACC,MAAM,EAAG,CAAG;IAACC,SAAS,EAAG,EAAI;IAAAC,QAAA,EAC9CP,MAAM,CAACQ,GAAG,CAAIC,KAAuB,IAAM;MAC5C,MAAMC,SAAS,GACdT,IAAI,KAAK,WAAW,GACjB,IAAAU,2CAA8B,EAAEF,KAAK,CAACG,IAAK,CAAC,GAC5C,IAAAC,8BAAiB,EAAE,kBAAkB,EAAEJ,KAAK,CAACG,IAAK,CAAC;MACvD,MAAME,OAAO,GAAG,IAAAC,aAAI,EACnB,qCAAqC,EACrCL,SACD,CAAC;MAED,oBAAO,IAAAZ,WAAA,CAAAI,GAAA,EAACN,WAAA,CAAAoB,IAAI;QAAoBN,SAAS,EAAGI;MAAS,GAAlCL,KAAK,CAACG,IAA8B,CAAC;IACzD,CAAE;EAAC,CACE,CAAC;AAET,CAAC;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEapB,aAAa","ignoreList":[]}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STYLE_BOOK_THEME_SUBCATEGORIES = exports.STYLE_BOOK_IFRAME_STYLES = exports.STYLE_BOOK_CATEGORIES = void 0;
+exports.STYLE_BOOK_THEME_SUBCATEGORIES = exports.STYLE_BOOK_IFRAME_STYLES = exports.STYLE_BOOK_COLOR_GROUPS = exports.STYLE_BOOK_CATEGORIES = void 0;
 var _i18n = require("@wordpress/i18n");
 /**
  * WordPress dependencies
@@ -13,6 +13,43 @@ var _i18n = require("@wordpress/i18n");
  * Internal dependencies
  */
 
+const STYLE_BOOK_COLOR_GROUPS = exports.STYLE_BOOK_COLOR_GROUPS = [{
+  slug: 'theme-colors',
+  title: (0, _i18n.__)('Theme Colors'),
+  origin: 'theme',
+  type: 'colors'
+}, {
+  slug: 'theme-gradients',
+  title: (0, _i18n.__)('Theme Gradients'),
+  origin: 'theme',
+  type: 'gradients'
+}, {
+  slug: 'custom-colors',
+  title: (0, _i18n.__)('Custom Colors'),
+  origin: 'custom',
+  type: 'colors'
+}, {
+  slug: 'custom-gradients',
+  title: (0, _i18n.__)('Custom Gradients'),
+  origin: 'custom',
+  // User.
+  type: 'gradients'
+}, {
+  slug: 'duotones',
+  title: (0, _i18n.__)('Duotones'),
+  origin: 'theme',
+  type: 'duotones'
+}, {
+  slug: 'default-colors',
+  title: (0, _i18n.__)('Default Colors'),
+  origin: 'default',
+  type: 'colors'
+}, {
+  slug: 'default-gradients',
+  title: (0, _i18n.__)('Default Gradients'),
+  origin: 'default',
+  type: 'gradients'
+}];
 const STYLE_BOOK_THEME_SUBCATEGORIES = exports.STYLE_BOOK_THEME_SUBCATEGORIES = [{
   slug: 'site-identity',
   title: (0, _i18n.__)('Site Identity'),
@@ -38,7 +75,7 @@ const STYLE_BOOK_CATEGORIES = exports.STYLE_BOOK_CATEGORIES = [{
 }, {
   slug: 'colors',
   title: (0, _i18n.__)('Colors'),
-  blocks: ['custom/colors']
+  blocks: []
 }, {
   slug: 'theme',
   title: (0, _i18n.__)('Theme'),
@@ -57,6 +94,13 @@ const STYLE_BOOK_CATEGORIES = exports.STYLE_BOOK_CATEGORIES = [{
   include: []
 }];
 
+// Forming a "block formatting context" to prevent margin collapsing.
+// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+const ROOT_CONTAINER = `
+	.is-root-container {
+		display: flow-root;
+	}
+`;
 // 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,
@@ -65,17 +109,13 @@ const STYLE_BOOK_CATEGORIES = exports.STYLE_BOOK_CATEGORIES = [{
 // 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 = exports.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;
 	}
 
+	${ROOT_CONTAINER}
+
 	.edit-site-style-book__examples {
 		max-width: 1200px;
 		margin: 0 auto;
@@ -100,15 +140,40 @@ const STYLE_BOOK_IFRAME_STYLES = exports.STYLE_BOOK_IFRAME_STYLES = `
 		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 	}
 
+	.edit-site-style-book__example.is-disabled-example {
+		pointer-events: none;
+	}
+
 	.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__duotone-example > div:first-child {
+		display: flex;
+		aspect-ratio: 16 / 9;
+		grid-row: span 1;
+		grid-column: span 2;
+	}
+	.edit-site-style-book__duotone-example img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.edit-site-style-book__duotone-example > div:not(:first-child) {
+		height: 20px;
+		border: 1px solid #ddd;
+	}
+
+	.edit-site-style-book__color-example {
+		height: 52px;
+		border: 1px solid #ddd;
+	}
+
 	.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;
@@ -119,7 +184,7 @@ const STYLE_BOOK_IFRAME_STYLES = exports.STYLE_BOOK_IFRAME_STYLES = `
 		text-align: left;
 		text-transform: uppercase;
 	}
-	
+
 	.edit-site-style-book__subcategory-title {
 		font-size: 16px;
 		margin-bottom: 40px;

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","STYLE_BOOK_THEME_SUBCATEGORIES","exports","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":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,MAAMC,8BAGV,GAAAC,OAAA,CAAAD,8BAAA,GAAG,CACL;EACCE,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,IAAAC,QAAE,EAAE,eAAgB,CAAC;EAC5BC,MAAM,EAAE,CAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB;AACnE,CAAC,EACD;EACCH,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EACrBC,MAAM,EAAE,CAAE,iBAAiB,EAAE,aAAa,EAAE,wBAAwB,CAAE;EACtEC,OAAO,EAAE,CAAE,gBAAgB,EAAE,sBAAsB;AACpD,CAAC,EACD;EACCJ,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EACpBC,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;EACCH,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,IAAAC,QAAE,EAAE,UAAW,CAAC;EACvBC,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;AAEM,MAAME,qBAA0C,GAAAN,OAAA,CAAAM,qBAAA,GAAG,CACzD;EACCL,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,IAAAC,QAAE,EAAE,MAAO,CAAC;EACnBC,MAAM,EAAE,CACP,mBAAmB,EACnB,gBAAgB,EAChB,sBAAsB;AAExB,CAAC,EACD;EACCH,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EACrBC,MAAM,EAAE,CAAE,eAAe;AAC1B,CAAC,EACD;EACCH,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EACpBI,aAAa,EAAER;AAChB,CAAC,EACD;EACCE,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE,IAAAC,QAAE,EAAE,OAAQ,CAAC;EACpBC,MAAM,EAAE,CAAE,0BAA0B;AACrC,CAAC,EACD;EACCH,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU,CAAC;EACtBC,MAAM,EAAE;AACT,CAAC,EACD;EACCH,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EACrBK,OAAO,EAAE;AACV,CAAC,CACD;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,wBAAwB,GAAAT,OAAA,CAAAS,wBAAA,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":[]}
+{"version":3,"names":["_i18n","require","STYLE_BOOK_COLOR_GROUPS","exports","slug","title","__","origin","type","STYLE_BOOK_THEME_SUBCATEGORIES","blocks","exclude","STYLE_BOOK_CATEGORIES","subcategories","include","ROOT_CONTAINER","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, StyleBookColorGroup } from './types';\n\nexport const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [\n\t{\n\t\tslug: 'theme-colors',\n\t\ttitle: __( 'Theme Colors' ),\n\t\torigin: 'theme',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'theme-gradients',\n\t\ttitle: __( 'Theme Gradients' ),\n\t\torigin: 'theme',\n\t\ttype: 'gradients',\n\t},\n\t{\n\t\tslug: 'custom-colors',\n\t\ttitle: __( 'Custom Colors' ),\n\t\torigin: 'custom',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'custom-gradients',\n\t\ttitle: __( 'Custom Gradients' ),\n\t\torigin: 'custom', // User.\n\t\ttype: 'gradients',\n\t},\n\t{\n\t\tslug: 'duotones',\n\t\ttitle: __( 'Duotones' ),\n\t\torigin: 'theme',\n\t\ttype: 'duotones',\n\t},\n\t{\n\t\tslug: 'default-colors',\n\t\ttitle: __( 'Default Colors' ),\n\t\torigin: 'default',\n\t\ttype: 'colors',\n\t},\n\t{\n\t\tslug: 'default-gradients',\n\t\ttitle: __( 'Default Gradients' ),\n\t\torigin: 'default',\n\t\ttype: 'gradients',\n\t},\n];\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: [],\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// Forming a \"block formatting context\" to prevent margin collapsing.\n// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\nconst ROOT_CONTAINER = `\n\t.is-root-container {\n\t\tdisplay: flow-root;\n\t}\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\tbody {\n\t\tposition: relative;\n\t\tpadding: 32px !important;\n\t}\n\n\t${ ROOT_CONTAINER }\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.is-disabled-example {\n\t\tpointer-events: none;\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__duotone-example > div:first-child {\n\t\tdisplay: flex;\n\t\taspect-ratio: 16 / 9;\n\t\tgrid-row: span 1;\n\t\tgrid-column: span 2;\n\t}\n\t.edit-site-style-book__duotone-example img {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t}\n\t.edit-site-style-book__duotone-example > div:not(:first-child) {\n\t\theight: 20px;\n\t\tborder: 1px solid #ddd;\n\t}\n\n\t.edit-site-style-book__color-example {\n\t\theight: 52px;\n\t\tborder: 1px solid #ddd;\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__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\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":"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CD;EACCN,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE,IAAAC,QAAE,EAAE,QAAS,CAAC;EACrBQ,OAAO,EAAE;AACV,CAAC,CACD;;AAED;AACA;AACA,MAAMC,cAAc,GAAG;AACvB;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,wBAAwB,GAAAb,OAAA,CAAAa,wBAAA,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,GAAID,cAAc;AAClB;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _primitives = require("@wordpress/primitives");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const DuotoneExamples = ({
+  duotones
+}) => {
+  if (!duotones) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalGrid, {
+    columns: 2,
+    rowGap: 16,
+    columnGap: 16,
+    children: duotones.map(duotone => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalGrid, {
+        className: "edit-site-style-book__duotone-example",
+        columns: 2,
+        rowGap: 8,
+        columnGap: 8,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.View, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            alt: `Duotone example: ${duotone.slug}`,
+            src: "https://s.w.org/images/core/5.3/MtBlanc1.jpg",
+            style: {
+              filter: `url(#wp-duotone-${duotone.slug})`
+            }
+          })
+        }), duotone.colors.map(color => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.View, {
+            className: "edit-site-style-book__color-example",
+            style: {
+              backgroundColor: color
+            }
+          }, color);
+        })]
+      }, duotone.slug);
+    })
+  });
+};
+var _default = exports.default = DuotoneExamples;
+//# sourceMappingURL=duotone-examples.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_primitives","_jsxRuntime","DuotoneExamples","duotones","jsx","__experimentalGrid","columns","rowGap","columnGap","children","map","duotone","jsxs","className","View","alt","slug","src","style","filter","colors","color","backgroundColor","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/style-book/duotone-examples.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { View } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport type { Duotone } from './types';\n\nconst DuotoneExamples = ( { duotones } ): JSX.Element | null => {\n\tif ( ! duotones ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Grid columns={ 2 } rowGap={ 16 } columnGap={ 16 }>\n\t\t\t{ duotones.map( ( duotone: Duotone ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Grid\n\t\t\t\t\t\tkey={ duotone.slug }\n\t\t\t\t\t\tclassName=\"edit-site-style-book__duotone-example\"\n\t\t\t\t\t\tcolumns={ 2 }\n\t\t\t\t\t\trowGap={ 8 }\n\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View>\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\talt={ `Duotone example: ${ duotone.slug }` }\n\t\t\t\t\t\t\t\tsrc=\"https://s.w.org/images/core/5.3/MtBlanc1.jpg\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfilter: `url(#wp-duotone-${ duotone.slug })`,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t\t{ duotone.colors.map( ( color ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\tkey={ color }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-style-book__color-example\"\n\t\t\t\t\t\t\t\t\tstyle={ { backgroundColor: color } }\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</Grid>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Grid>\n\t);\n};\n\nexport default DuotoneExamples;\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAA6C,IAAAE,WAAA,GAAAF,OAAA;AAJ7C;AACA;AACA;;AAIA;AACA;AACA;;AAGA,MAAMG,eAAe,GAAGA,CAAE;EAAEC;AAAS,CAAC,KAA0B;EAC/D,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAF,WAAA,CAAAG,GAAA,EAACN,WAAA,CAAAO,kBAAI;IAACC,OAAO,EAAG,CAAG;IAACC,MAAM,EAAG,EAAI;IAACC,SAAS,EAAG,EAAI;IAAAC,QAAA,EAC/CN,QAAQ,CAACO,GAAG,CAAIC,OAAgB,IAAM;MACvC,oBACC,IAAAV,WAAA,CAAAW,IAAA,EAACd,WAAA,CAAAO,kBAAI;QAEJQ,SAAS,EAAC,uCAAuC;QACjDP,OAAO,EAAG,CAAG;QACbC,MAAM,EAAG,CAAG;QACZC,SAAS,EAAG,CAAG;QAAAC,QAAA,gBAEf,IAAAR,WAAA,CAAAG,GAAA,EAACJ,WAAA,CAAAc,IAAI;UAAAL,QAAA,eACJ,IAAAR,WAAA,CAAAG,GAAA;YACCW,GAAG,EAAG,oBAAqBJ,OAAO,CAACK,IAAI,EAAK;YAC5CC,GAAG,EAAC,8CAA8C;YAClDC,KAAK,EAAG;cACPC,MAAM,EAAE,mBAAoBR,OAAO,CAACK,IAAI;YACzC;UAAG,CACH;QAAC,CACG,CAAC,EACLL,OAAO,CAACS,MAAM,CAACV,GAAG,CAAIW,KAAK,IAAM;UAClC,oBACC,IAAApB,WAAA,CAAAG,GAAA,EAACJ,WAAA,CAAAc,IAAI;YAEJD,SAAS,EAAC,qCAAqC;YAC/CK,KAAK,EAAG;cAAEI,eAAe,EAAED;YAAM;UAAG,GAF9BA,KAGN,CAAC;QAEJ,CAAE,CAAC;MAAA,GAvBGV,OAAO,CAACK,IAwBT,CAAC;IAET,CAAE;EAAC,CACE,CAAC;AAET,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEavB,eAAe","ignoreList":[]}

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

@@ -1,11 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getExamples = getExamples;
 var _i18n = require("@wordpress/i18n");
 var _blocks = require("@wordpress/blocks");
+var _colorExamples = _interopRequireDefault(require("./color-examples"));
+var _duotoneExamples = _interopRequireDefault(require("./duotone-examples"));
+var _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -14,19 +19,56 @@ var _blocks = require("@wordpress/blocks");
  * Internal dependencies
  */
 
+/**
+ * Returns examples color examples for each origin
+ * e.g. Core (Default), Theme, and User.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of color block examples.
+ */function getColorExamples(colors) {
+  if (!colors) {
+    return [];
+  }
+  const examples = [];
+  _constants.STYLE_BOOK_COLOR_GROUPS.forEach(group => {
+    const palette = colors[group.type].find(origin => origin.slug === group.origin);
+    if (palette?.[group.type]) {
+      const example = {
+        name: group.slug,
+        title: group.title,
+        category: 'colors'
+      };
+      if (group.type === 'duotones') {
+        example.content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_duotoneExamples.default, {
+          duotones: palette[group.type]
+        });
+        examples.push(example);
+      } else {
+        example.content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorExamples.default, {
+          colors: palette[group.type],
+          type: group.type
+        });
+        examples.push(example);
+      }
+    }
+  });
+  return examples;
+}
+
 /**
  * Returns a list of examples for registered block types.
  *
+ * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.
  * @return {BlockExample[]} An array of block examples.
  */
-function getExamples() {
+function getExamples(colors) {
   const nonHeadingBlockExamples = (0, _blocks.getBlockTypes)().filter(blockType => {
     const {
       name,
       example,
       supports
     } = blockType;
-    return name !== 'core/heading' && !!example && supports.inserter !== false;
+    return name !== 'core/heading' && !!example && supports?.inserter !== false;
   }).map(blockType => ({
     name: blockType.name,
     title: blockType.title,
@@ -53,6 +95,7 @@ function getExamples() {
       });
     })
   };
-  return [headingsExample, ...nonHeadingBlockExamples];
+  const colorExamples = getColorExamples(colors);
+  return [headingsExample, ...colorExamples, ...nonHeadingBlockExamples];
 }
 //# sourceMappingURL=examples.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_blocks","getExamples","nonHeadingBlockExamples","getBlockTypes","filter","blockType","name","example","supports","inserter","map","title","category","blocks","getBlockFromExample","isHeadingBlockRegistered","getBlockType","headingsExample","__","level","createBlock","content","sprintf"],"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":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AASA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACO,SAASE,WAAWA,CAAA,EAAmB;EAC7C,MAAMC,uBAAuB,GAAG,IAAAC,qBAAa,EAAC,CAAC,CAC7CC,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,EAAE,IAAAC,2BAAmB,EAAET,SAAS,CAACC,IAAI,EAAED,SAAS,CAACE,OAAQ;EAChE,CAAC,CAAG,CAAC;EACN,MAAMQ,wBAAwB,GAAG,CAAC,CAAE,IAAAC,oBAAY,EAAE,cAAe,CAAC;EAElE,IAAK,CAAED,wBAAwB,EAAG;IACjC,OAAOb,uBAAuB;EAC/B;;EAEA;EACA;EACA,MAAMe,eAAe,GAAG;IACvBX,IAAI,EAAE,cAAc;IACpBK,KAAK,EAAE,IAAAO,QAAE,EAAE,UAAW,CAAC;IACvBN,QAAQ,EAAE,MAAM;IAChBC,MAAM,EAAE,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACH,GAAG,CAAIS,KAAK,IAAM;MAC9C,OAAO,IAAAC,mBAAW,EAAE,cAAc,EAAE;QACnCC,OAAO,EAAE,IAAAC,aAAO;QACf;QACA,IAAAJ,QAAE,EAAE,YAAa,CAAC,EAClBC,KACD,CAAC;QACDA;MACD,CAAE,CAAC;IACJ,CAAE;EACH,CAAC;EAED,OAAO,CAAEF,eAAe,EAAE,GAAGf,uBAAuB,CAAE;AACvD","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_blocks","_colorExamples","_interopRequireDefault","_duotoneExamples","_constants","_jsxRuntime","getColorExamples","colors","examples","STYLE_BOOK_COLOR_GROUPS","forEach","group","palette","type","find","origin","slug","example","name","title","category","content","jsx","default","duotones","push","getExamples","nonHeadingBlockExamples","getBlockTypes","filter","blockType","supports","inserter","map","blocks","getBlockFromExample","isHeadingBlockRegistered","getBlockType","headingsExample","__","level","createBlock","sprintf","colorExamples"],"sources":["@wordpress/edit-site/src/components/style-book/examples.tsx"],"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, ColorOrigin, MultiOriginPalettes } from './types';\nimport ColorExamples from './color-examples';\nimport DuotoneExamples from './duotone-examples';\nimport { STYLE_BOOK_COLOR_GROUPS } from './constants';\n\n/**\n * Returns examples color examples for each origin\n * e.g. Core (Default), Theme, and User.\n *\n * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.\n * @return {BlockExample[]} An array of color block examples.\n */\nfunction getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {\n\tif ( ! colors ) {\n\t\treturn [];\n\t}\n\n\tconst examples: BlockExample[] = [];\n\n\tSTYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {\n\t\tconst palette = colors[ group.type ].find(\n\t\t\t( origin: ColorOrigin ) => origin.slug === group.origin\n\t\t);\n\n\t\tif ( palette?.[ group.type ] ) {\n\t\t\tconst example: BlockExample = {\n\t\t\t\tname: group.slug,\n\t\t\t\ttitle: group.title,\n\t\t\t\tcategory: 'colors',\n\t\t\t};\n\t\t\tif ( group.type === 'duotones' ) {\n\t\t\t\texample.content = (\n\t\t\t\t\t<DuotoneExamples duotones={ palette[ group.type ] } />\n\t\t\t\t);\n\t\t\t\texamples.push( example );\n\t\t\t} else {\n\t\t\t\texample.content = (\n\t\t\t\t\t<ColorExamples\n\t\t\t\t\t\tcolors={ palette[ group.type ] }\n\t\t\t\t\t\ttype={ group.type }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t\texamples.push( example );\n\t\t\t}\n\t\t}\n\t} );\n\n\treturn examples;\n}\n\n/**\n * Returns a list of examples for registered block types.\n *\n * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.\n * @return {BlockExample[]} An array of block examples.\n */\nexport function getExamples( colors: MultiOriginPalettes ): 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\tconst colorExamples = getColorExamples( colors );\n\n\treturn [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -47,6 +47,53 @@ const {
 function isObjectEmpty(object) {
   return !object || Object.keys(object).length === 0;
 }
+
+/**
+ * Retrieves colors, gradients, and duotone filters from Global Styles.
+ * The inclusion of default (Core) palettes is controlled by the relevant
+ * theme.json property e.g. defaultPalette, defaultGradients, defaultDuotone.
+ *
+ * @return {Object} Object containing properties for each type of palette.
+ */
+function useMultiOriginPalettes() {
+  const {
+    colors,
+    gradients
+  } = (0, _blockEditor.__experimentalUseMultipleOriginColorsAndGradients)();
+
+  // Add duotone filters to the palettes data.
+  const [shouldDisplayDefaultDuotones, customDuotones, themeDuotones, defaultDuotones] = (0, _blockEditor.useSettings)('color.defaultDuotone', 'color.duotone.custom', 'color.duotone.theme', 'color.duotone.default');
+  const palettes = (0, _element.useMemo)(() => {
+    const result = {
+      colors,
+      gradients,
+      duotones: []
+    };
+    if (themeDuotones && themeDuotones.length) {
+      result.duotones.push({
+        name: (0, _i18n._x)('Theme', 'Indicates these duotone filters come from the theme.'),
+        slug: 'theme',
+        duotones: themeDuotones
+      });
+    }
+    if (shouldDisplayDefaultDuotones && defaultDuotones && defaultDuotones.length) {
+      result.duotones.push({
+        name: (0, _i18n._x)('Default', 'Indicates these duotone filters come from WordPress.'),
+        slug: 'default',
+        duotones: defaultDuotones
+      });
+    }
+    if (customDuotones && customDuotones.length) {
+      result.duotones.push({
+        name: (0, _i18n._x)('Custom', 'Indicates these doutone filters are created by the user.'),
+        slug: 'custom',
+        duotones: customDuotones
+      });
+    }
+    return result;
+  }, [colors, gradients, customDuotones, themeDuotones, defaultDuotones, shouldDisplayDefaultDuotones]);
+  return palettes;
+}
 function StyleBook({
   enableResizing = true,
   isSelected,
@@ -60,7 +107,8 @@ function StyleBook({
   const [resizeObserver, sizes] = (0, _compose.useResizeObserver)();
   const [textColor] = useGlobalStyle('color.text');
   const [backgroundColor] = useGlobalStyle('color.background');
-  const [examples] = (0, _element.useState)(_examples.getExamples);
+  const colors = useMultiOriginPalettes();
+  const examples = (0, _element.useMemo)(() => (0, _examples.getExamples)(colors), [colors]);
   const tabs = (0, _element.useMemo)(() => (0, _categories.getTopLevelStyleBookCategories)().filter(category => examples.some(example => example.category === category.slug)), [examples]);
   const {
     base: baseConfig
@@ -75,12 +123,12 @@ function StyleBook({
   // Copied from packages/edit-site/src/components/revisions/index.js
   // could we create a shared hook?
   const originalSettings = (0, _data.useSelect)(select => select(_blockEditor.store).getSettings(), []);
+  const [globalStyles] = useGlobalStylesOutputWithConfig(mergedConfig);
   const settings = (0, _element.useMemo)(() => ({
     ...originalSettings,
-    __unstableIsPreviewMode: true
-  }), [originalSettings]);
-  const [globalStyles] = useGlobalStylesOutputWithConfig(mergedConfig);
-  settings.styles = !isObjectEmpty(globalStyles) && !isObjectEmpty(userConfig) ? globalStyles : settings.styles;
+    styles: !isObjectEmpty(globalStyles) && !isObjectEmpty(userConfig) ? globalStyles : originalSettings.styles,
+    isPreviewMode: true
+  }), [globalStyles, originalSettings, userConfig]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_editorCanvasContainer.default, {
     onClose: onClose,
     enableResizing: enableResizing,
@@ -94,31 +142,29 @@ function StyleBook({
         color: textColor,
         background: backgroundColor
       },
-      children: [resizeObserver, showTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "edit-site-style-book__tabs",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "edit-site-style-book__tablist-container",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabList, {
-              children: tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
-                tabId: tab.slug,
-                children: tab.title
-              }, tab.slug))
-            })
-          }), tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
-            tabId: tab.slug,
-            focusable: false,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleBookBody, {
-              category: tab.slug,
-              examples: examples,
-              isSelected: isSelected,
-              onSelect: onSelect,
-              settings: settings,
-              sizes: sizes,
-              title: tab.title
-            })
-          }, tab.slug))]
-        })
+      children: [resizeObserver, showTabs ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "edit-site-style-book__tablist-container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabList, {
+            children: tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
+              tabId: tab.slug,
+              children: tab.title
+            }, tab.slug))
+          })
+        }), tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
+          tabId: tab.slug,
+          focusable: false,
+          className: "edit-site-style-book__tabpanel",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleBookBody, {
+            category: tab.slug,
+            examples: examples,
+            isSelected: isSelected,
+            onSelect: onSelect,
+            settings: settings,
+            sizes: sizes,
+            title: tab.title
+          })
+        }, tab.slug))]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleBookBody, {
         examples: examples,
         isSelected: isSelected,
@@ -217,6 +263,7 @@ const Examples = (0, _element.memo)(({
     children: [!!filteredExamples?.examples?.length && filteredExamples.examples.map(example => /*#__PURE__*/(0, _jsxRuntime.jsx)(Example, {
       id: `example-${example.name}`,
       title: example.title,
+      content: example.content,
       blocks: example.blocks,
       isSelected: isSelected(example.name),
       onClick: () => {
@@ -245,6 +292,7 @@ const Subcategory = ({
   return !!examples?.length && examples.map(example => /*#__PURE__*/(0, _jsxRuntime.jsx)(Example, {
     id: `example-${example.name}`,
     title: example.title,
+    content: example.content,
     blocks: example.blocks,
     isSelected: isSelected(example.name),
     onClick: () => {
@@ -252,30 +300,37 @@ const Subcategory = ({
     }
   }, example.name));
 };
+const disabledExamples = ['example-duotones'];
 const Example = ({
   id,
   title,
   blocks,
   isSelected,
-  onClick
+  onClick,
+  content
 }) => {
   const originalSettings = (0, _data.useSelect)(select => select(_blockEditor.store).getSettings(), []);
   const settings = (0, _element.useMemo)(() => ({
     ...originalSettings,
     focusMode: false,
     // Disable "Spotlight mode".
-    __unstableIsPreviewMode: true
+    isPreviewMode: true
   }), [originalSettings]);
 
   // Cache the list of blocks to avoid additional processing when the component is re-rendered.
   const renderedBlocks = (0, _element.useMemo)(() => Array.isArray(blocks) ? blocks : [blocks], [blocks]);
+  const disabledProps = disabledExamples.includes(id) ? {
+    disabled: true,
+    accessibleWhenDisabled: true
+  } : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "row",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "gridcell",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Composite.Item, {
         className: (0, _clsx.default)('edit-site-style-book__example', {
-          'is-selected': isSelected
+          'is-selected': isSelected,
+          'is-disabled-example': !!disabledProps?.disabled
         }),
         id: id,
         "aria-label": (0, _i18n.sprintf)(
@@ -284,6 +339,7 @@ const Example = ({
         render: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}),
         role: "button",
         onClick: onClick,
+        ...disabledProps,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "edit-site-style-book__example-title",
           children: title
@@ -292,12 +348,12 @@ const Example = ({
           "aria-hidden": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Disabled, {
             className: "edit-site-style-book__example-preview__content",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExperimentalBlockEditorProvider, {
+            children: content ? content : /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExperimentalBlockEditorProvider, {
               value: renderedBlocks,
               settings: settings,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockList, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__unstableEditorStyles, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockList, {
                 renderAppender: false
-              })
+              })]
             })
           })
         })]