@wordpress/edit-site 6.32.0 → 6.32.1-next.b8c8708f3.0

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

@@ -1,48 +1,49 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalGrid as Grid } from '@wordpress/components';
-import { View } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { __experimentalGrid as Grid } from "@wordpress/components";
+import { View } from "@wordpress/primitives";
 const DuotoneExamples = ({
   duotones
 }) => {
   if (!duotones) {
     return null;
   }
-  return /*#__PURE__*/_jsx(Grid, {
-    columns: 2,
-    rowGap: 16,
-    columnGap: 16,
-    children: duotones.map(duotone => {
-      return /*#__PURE__*/_jsxs(Grid, {
+  return /* @__PURE__ */ jsx(Grid, { columns: 2, rowGap: 16, columnGap: 16, children: duotones.map((duotone) => {
+    return /* @__PURE__ */ jsxs(
+      Grid,
+      {
         className: "edit-site-style-book__duotone-example",
         columns: 2,
         rowGap: 8,
         columnGap: 8,
-        children: [/*#__PURE__*/_jsx(View, {
-          children: /*#__PURE__*/_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})`
+        children: [
+          /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ 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__ */ jsx(
+              View,
+              {
+                className: "edit-site-style-book__color-example",
+                style: { backgroundColor: color }
+              },
+              color
+            );
           })
-        }), duotone.colors.map(color => {
-          return /*#__PURE__*/_jsx(View, {
-            className: "edit-site-style-book__color-example",
-            style: {
-              backgroundColor: color
-            }
-          }, color);
-        })]
-      }, duotone.slug);
-    })
-  });
+        ]
+      },
+      duotone.slug
+    );
+  }) });
+};
+var duotone_examples_default = DuotoneExamples;
+export {
+  duotone_examples_default as default
 };
-export default DuotoneExamples;
-//# sourceMappingURL=duotone-examples.js.map
+//# sourceMappingURL=duotone-examples.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["__experimentalGrid","Grid","View","jsx","_jsx","jsxs","_jsxs","DuotoneExamples","duotones","columns","rowGap","columnGap","children","map","duotone","className","alt","slug","src","style","filter","colors","color","backgroundColor"],"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 = ( {\n\tduotones,\n}: {\n\tduotones: Duotone[];\n} ): 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":"AAAA;AACA;AACA;AACA,SAASA,kBAAkB,IAAIC,IAAI,QAAQ,uBAAuB;AAClE,SAASC,IAAI,QAAQ,uBAAuB;;AAE5C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKA,MAAMC,eAAe,GAAGA,CAAE;EACzBC;AAGD,CAAC,KAA0B;EAC1B,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAO,IAAI;EACZ;EAEA,oBACCJ,IAAA,CAACH,IAAI;IAACQ,OAAO,EAAG,CAAG;IAACC,MAAM,EAAG,EAAI;IAACC,SAAS,EAAG,EAAI;IAAAC,QAAA,EAC/CJ,QAAQ,CAACK,GAAG,CAAIC,OAAgB,IAAM;MACvC,oBACCR,KAAA,CAACL,IAAI;QAEJc,SAAS,EAAC,uCAAuC;QACjDN,OAAO,EAAG,CAAG;QACbC,MAAM,EAAG,CAAG;QACZC,SAAS,EAAG,CAAG;QAAAC,QAAA,gBAEfR,IAAA,CAACF,IAAI;UAAAU,QAAA,eACJR,IAAA;YACCY,GAAG,EAAG,oBAAqBF,OAAO,CAACG,IAAI,EAAK;YAC5CC,GAAG,EAAC,8CAA8C;YAClDC,KAAK,EAAG;cACPC,MAAM,EAAE,mBAAoBN,OAAO,CAACG,IAAI;YACzC;UAAG,CACH;QAAC,CACG,CAAC,EACLH,OAAO,CAACO,MAAM,CAACR,GAAG,CAAIS,KAAK,IAAM;UAClC,oBACClB,IAAA,CAACF,IAAI;YAEJa,SAAS,EAAC,qCAAqC;YAC/CI,KAAK,EAAG;cAAEI,eAAe,EAAED;YAAM;UAAG,GAF9BA,KAGN,CAAC;QAEJ,CAAE,CAAC;MAAA,GAvBGR,OAAO,CAACG,IAwBT,CAAC;IAET,CAAE;EAAC,CACE,CAAC;AAET,CAAC;AAED,eAAeV,eAAe","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../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 = ( {\n\tduotones,\n}: {\n\tduotones: Duotone[];\n} ): 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": "AAwBK,SAQE,KARF;AArBL,SAAS,sBAAsB,YAAY;AAC3C,SAAS,YAAY;AAOrB,MAAM,kBAAkB,CAAE;AAAA,EACzB;AACD,MAE2B;AAC1B,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,QAAK,SAAU,GAAI,QAAS,IAAK,WAAY,IAC3C,mBAAS,IAAK,CAAE,YAAsB;AACvC,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,WAAU;AAAA,QACV,SAAU;AAAA,QACV,QAAS;AAAA,QACT,WAAY;AAAA,QAEZ;AAAA,8BAAC,QACA;AAAA,YAAC;AAAA;AAAA,cACA,KAAM,oBAAqB,QAAQ,IAAK;AAAA,cACxC,KAAI;AAAA,cACJ,OAAQ;AAAA,gBACP,QAAQ,mBAAoB,QAAQ,IAAK;AAAA,cAC1C;AAAA;AAAA,UACD,GACD;AAAA,UACE,QAAQ,OAAO,IAAK,CAAE,UAAW;AAClC,mBACC;AAAA,cAAC;AAAA;AAAA,gBAEA,WAAU;AAAA,gBACV,OAAQ,EAAE,iBAAiB,MAAM;AAAA;AAAA,cAF3B;AAAA,YAGP;AAAA,UAEF,CAAE;AAAA;AAAA;AAAA,MAvBI,QAAQ;AAAA,IAwBf;AAAA,EAEF,CAAE,GACH;AAEF;AAEA,IAAO,2BAAQ;",
+  "names": []
+}

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

@@ -1,115 +1,113 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { getBlockType, getBlockTypes, getBlockFromExample, createBlock
-// @wordpress/blocks imports are not typed.
-// @ts-expect-error
-} from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-
-import ColorExamples from './color-examples';
-import DuotoneExamples from './duotone-examples';
-import { STYLE_BOOK_COLOR_GROUPS } from './constants';
-
-/**
- * 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.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { __, sprintf } from "@wordpress/i18n";
+import {
+  getBlockType,
+  getBlockTypes,
+  getBlockFromExample,
+  createBlock
+} from "@wordpress/blocks";
+import ColorExamples from "./color-examples";
+import DuotoneExamples from "./duotone-examples";
+import { STYLE_BOOK_COLOR_GROUPS } from "./constants";
 function getColorExamples(colors) {
   if (!colors) {
     return [];
   }
   const examples = [];
-  STYLE_BOOK_COLOR_GROUPS.forEach(group => {
+  STYLE_BOOK_COLOR_GROUPS.forEach((group) => {
     const palette = colors[group.type];
-    const paletteFiltered = Array.isArray(palette) ? palette.find(origin => origin.slug === group.origin) : undefined;
+    const paletteFiltered = Array.isArray(palette) ? palette.find(
+      (origin) => origin.slug === group.origin
+    ) : void 0;
     if (paletteFiltered?.[group.type]) {
       const example = {
         name: group.slug,
         title: group.title,
-        category: 'colors'
+        category: "colors"
       };
-      if (group.type === 'duotones') {
-        example.content = /*#__PURE__*/_jsx(DuotoneExamples, {
-          duotones: paletteFiltered[group.type]
-        });
+      if (group.type === "duotones") {
+        example.content = /* @__PURE__ */ jsx(
+          DuotoneExamples,
+          {
+            duotones: paletteFiltered[group.type]
+          }
+        );
         examples.push(example);
       } else {
-        example.content = /*#__PURE__*/_jsx(ColorExamples, {
-          colors: paletteFiltered[group.type],
-          type: group.type
-        });
+        example.content = /* @__PURE__ */ jsx(
+          ColorExamples,
+          {
+            colors: paletteFiltered[group.type],
+            type: group.type
+          }
+        );
         examples.push(example);
       }
     }
   });
   return examples;
 }
-
-/**
- * Returns examples for the overview page.
- *
- * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
- * @return {BlockExample[]} An array of block examples.
- */
 function getOverviewBlockExamples(colors) {
   const examples = [];
-
-  // Get theme palette from colors if they exist.
-  const themePalette = Array.isArray(colors?.colors) ? colors.colors.find(origin => origin.slug === 'theme') : undefined;
+  const themePalette = Array.isArray(colors?.colors) ? colors.colors.find(
+    (origin) => origin.slug === "theme"
+  ) : void 0;
   if (themePalette) {
     const themeColorexample = {
-      name: 'theme-colors',
-      title: __('Colors'),
-      category: 'overview',
-      content: /*#__PURE__*/_jsx(ColorExamples, {
-        colors: themePalette.colors,
-        type: "colors",
-        templateColumns: "repeat(auto-fill, minmax( 200px, 1fr ))",
-        itemHeight: "32px"
-      })
+      name: "theme-colors",
+      title: __("Colors"),
+      category: "overview",
+      content: /* @__PURE__ */ jsx(
+        ColorExamples,
+        {
+          colors: themePalette.colors,
+          type: "colors",
+          templateColumns: "repeat(auto-fill, minmax( 200px, 1fr ))",
+          itemHeight: "32px"
+        }
+      )
     };
     examples.push(themeColorexample);
   }
-
-  // Get examples for typography blocks.
   const typographyBlockExamples = [];
-  if (getBlockType('core/heading')) {
-    const headingBlock = createBlock('core/heading', {
+  if (getBlockType("core/heading")) {
+    const headingBlock = createBlock("core/heading", {
       // translators: Typography example. Your local alphabet, numbers and some common special characters.
-      content: __(`AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789X{(…)},.-<>?!*&:/A@HELFO™©`),
+      content: __(
+        `AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789X{(\u2026)},.-<>?!*&:/A@HELFO\u2122\xA9`
+      ),
       level: 1
     });
     typographyBlockExamples.push(headingBlock);
   }
-  if (getBlockType('core/paragraph')) {
-    const firstParagraphBlock = createBlock('core/paragraph', {
-      content: __(`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`)
+  if (getBlockType("core/paragraph")) {
+    const firstParagraphBlock = createBlock("core/paragraph", {
+      content: __(
+        `A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
+      )
     });
-    const secondParagraphBlock = createBlock('core/paragraph', {
-      content: __(`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`)
+    const secondParagraphBlock = createBlock("core/paragraph", {
+      content: __(
+        `Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
+      )
     });
-    if (getBlockType('core/group')) {
-      const groupBlock = createBlock('core/group', {
-        layout: {
-          type: 'grid',
-          columnCount: 2,
-          minimumColumnWidth: '12rem'
-        },
-        style: {
-          spacing: {
-            blockGap: '1.5rem'
+    if (getBlockType("core/group")) {
+      const groupBlock = createBlock(
+        "core/group",
+        {
+          layout: {
+            type: "grid",
+            columnCount: 2,
+            minimumColumnWidth: "12rem"
+          },
+          style: {
+            spacing: {
+              blockGap: "1.5rem"
+            }
           }
-        }
-      }, [firstParagraphBlock, secondParagraphBlock]);
+        },
+        [firstParagraphBlock, secondParagraphBlock]
+      );
       typographyBlockExamples.push(groupBlock);
     } else {
       typographyBlockExamples.push(firstParagraphBlock);
@@ -117,22 +115,26 @@ function getOverviewBlockExamples(colors) {
   }
   if (!!typographyBlockExamples.length) {
     examples.push({
-      name: 'typography',
-      title: __('Typography'),
-      category: 'overview',
+      name: "typography",
+      title: __("Typography"),
+      category: "overview",
       blocks: typographyBlockExamples
     });
   }
-  const otherBlockExamples = ['core/image', 'core/separator', 'core/buttons', 'core/pullquote', 'core/search'];
-
-  // Get examples for other blocks and put them in order of above array.
-  otherBlockExamples.forEach(blockName => {
+  const otherBlockExamples = [
+    "core/image",
+    "core/separator",
+    "core/buttons",
+    "core/pullquote",
+    "core/search"
+  ];
+  otherBlockExamples.forEach((blockName) => {
     const blockType = getBlockType(blockName);
     if (blockType && blockType.example) {
       const blockExample = {
         name: blockName,
         title: blockType.title,
-        category: 'overview',
+        category: "overview",
         /*
          * CSS generated from style attributes will take precedence over global styles CSS,
          * so remove the style attribute from the example to ensure the example
@@ -142,7 +144,7 @@ function getOverviewBlockExamples(colors) {
           ...blockType.example,
           attributes: {
             ...blockType.example.attributes,
-            style: undefined
+            style: void 0
           }
         })
       };
@@ -151,22 +153,11 @@ function getOverviewBlockExamples(colors) {
   });
   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.
- */
-export function getExamples(colors) {
-  const nonHeadingBlockExamples = getBlockTypes().filter(blockType => {
-    const {
-      name,
-      example,
-      supports
-    } = blockType;
-    return name !== 'core/heading' && !!example && supports?.inserter !== false;
-  }).map(blockType => ({
+function getExamples(colors) {
+  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,
@@ -179,32 +170,39 @@ export function getExamples(colors) {
       ...blockType.example,
       attributes: {
         ...blockType.example.attributes,
-        style: undefined
+        style: void 0
       }
     })
   }));
-  const isHeadingBlockRegistered = !!getBlockType('core/heading');
+  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', {
+    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),
+          // translators: %d: heading level e.g: "1", "2", "3"
+          __("Heading %d"),
+          level
+        ),
         level
       });
     })
   };
   const colorExamples = getColorExamples(colors);
   const overviewBlockExamples = getOverviewBlockExamples(colors);
-  return [headingsExample, ...colorExamples, ...nonHeadingBlockExamples, ...overviewBlockExamples];
+  return [
+    headingsExample,
+    ...colorExamples,
+    ...nonHeadingBlockExamples,
+    ...overviewBlockExamples
+  ];
 }
-//# sourceMappingURL=examples.js.map
+export {
+  getExamples
+};
+//# sourceMappingURL=examples.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["__","sprintf","getBlockType","getBlockTypes","getBlockFromExample","createBlock","ColorExamples","DuotoneExamples","STYLE_BOOK_COLOR_GROUPS","jsx","_jsx","getColorExamples","colors","examples","forEach","group","palette","type","paletteFiltered","Array","isArray","find","origin","slug","undefined","example","name","title","category","content","duotones","push","getOverviewBlockExamples","themePalette","themeColorexample","templateColumns","itemHeight","typographyBlockExamples","headingBlock","level","firstParagraphBlock","secondParagraphBlock","groupBlock","layout","columnCount","minimumColumnWidth","style","spacing","blockGap","length","blocks","otherBlockExamples","blockName","blockType","blockExample","attributes","getExamples","nonHeadingBlockExamples","filter","supports","inserter","map","isHeadingBlockRegistered","headingsExample","colorExamples","overviewBlockExamples"],"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\t// @wordpress/blocks imports are not typed.\n\t// @ts-expect-error\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tBlockExample,\n\tColorOrigin,\n\tMultiOriginPalettes,\n\tBlockType,\n} 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 as keyof MultiOriginPalettes ];\n\t\tconst paletteFiltered = Array.isArray( palette )\n\t\t\t? palette.find(\n\t\t\t\t\t( origin: ColorOrigin ) => origin.slug === group.origin\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\tif ( paletteFiltered?.[ 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\n\t\t\t\t\t\tduotones={ paletteFiltered[ group.type ] }\n\t\t\t\t\t/>\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={ paletteFiltered[ 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 examples for the overview page.\n *\n * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.\n * @return {BlockExample[]} An array of block examples.\n */\nfunction getOverviewBlockExamples(\n\tcolors: MultiOriginPalettes\n): BlockExample[] {\n\tconst examples: BlockExample[] = [];\n\n\t// Get theme palette from colors if they exist.\n\tconst themePalette = Array.isArray( colors?.colors )\n\t\t? colors.colors.find(\n\t\t\t\t( origin: ColorOrigin ) => origin.slug === 'theme'\n\t\t  )\n\t\t: undefined;\n\n\tif ( themePalette ) {\n\t\tconst themeColorexample: BlockExample = {\n\t\t\tname: 'theme-colors',\n\t\t\ttitle: __( 'Colors' ),\n\t\t\tcategory: 'overview',\n\t\t\tcontent: (\n\t\t\t\t<ColorExamples\n\t\t\t\t\tcolors={ themePalette.colors }\n\t\t\t\t\ttype=\"colors\"\n\t\t\t\t\ttemplateColumns=\"repeat(auto-fill, minmax( 200px, 1fr ))\"\n\t\t\t\t\titemHeight=\"32px\"\n\t\t\t\t/>\n\t\t\t),\n\t\t};\n\n\t\texamples.push( themeColorexample );\n\t}\n\n\t// Get examples for typography blocks.\n\tconst typographyBlockExamples: BlockType[] = [];\n\n\tif ( getBlockType( 'core/heading' ) ) {\n\t\tconst headingBlock = createBlock( 'core/heading', {\n\t\t\t// translators: Typography example. Your local alphabet, numbers and some common special characters.\n\t\t\tcontent: __(\n\t\t\t\t`AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789X{(…)},.-<>?!*&:/A@HELFO™©`\n\t\t\t),\n\t\t\tlevel: 1,\n\t\t} );\n\t\ttypographyBlockExamples.push( headingBlock );\n\t}\n\n\tif ( getBlockType( 'core/paragraph' ) ) {\n\t\tconst firstParagraphBlock = createBlock( 'core/paragraph', {\n\t\t\tcontent: __(\n\t\t\t\t`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`\n\t\t\t),\n\t\t} );\n\t\tconst secondParagraphBlock = createBlock( 'core/paragraph', {\n\t\t\tcontent: __(\n\t\t\t\t`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`\n\t\t\t),\n\t\t} );\n\n\t\tif ( getBlockType( 'core/group' ) ) {\n\t\t\tconst groupBlock = createBlock(\n\t\t\t\t'core/group',\n\t\t\t\t{\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\ttype: 'grid',\n\t\t\t\t\t\tcolumnCount: 2,\n\t\t\t\t\t\tminimumColumnWidth: '12rem',\n\t\t\t\t\t},\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tspacing: {\n\t\t\t\t\t\t\tblockGap: '1.5rem',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[ firstParagraphBlock, secondParagraphBlock ]\n\t\t\t);\n\t\t\ttypographyBlockExamples.push( groupBlock );\n\t\t} else {\n\t\t\ttypographyBlockExamples.push( firstParagraphBlock );\n\t\t}\n\t}\n\n\tif ( !! typographyBlockExamples.length ) {\n\t\texamples.push( {\n\t\t\tname: 'typography',\n\t\t\ttitle: __( 'Typography' ),\n\t\t\tcategory: 'overview',\n\t\t\tblocks: typographyBlockExamples,\n\t\t} );\n\t}\n\n\tconst otherBlockExamples = [\n\t\t'core/image',\n\t\t'core/separator',\n\t\t'core/buttons',\n\t\t'core/pullquote',\n\t\t'core/search',\n\t];\n\n\t// Get examples for other blocks and put them in order of above array.\n\totherBlockExamples.forEach( ( blockName ) => {\n\t\tconst blockType = getBlockType( blockName );\n\t\tif ( blockType && blockType.example ) {\n\t\t\tconst blockExample: BlockExample = {\n\t\t\t\tname: blockName,\n\t\t\t\ttitle: blockType.title,\n\t\t\t\tcategory: 'overview',\n\t\t\t\t/*\n\t\t\t\t * CSS generated from style attributes will take precedence over global styles CSS,\n\t\t\t\t * so remove the style attribute from the example to ensure the example\n\t\t\t\t * demonstrates changes to global styles.\n\t\t\t\t */\n\t\t\t\tblocks: getBlockFromExample( blockName, {\n\t\t\t\t\t...blockType.example,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\t...blockType.example.attributes,\n\t\t\t\t\t\tstyle: undefined,\n\t\t\t\t\t},\n\t\t\t\t} ),\n\t\t\t};\n\t\t\texamples.push( blockExample );\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: 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: BlockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\t/*\n\t\t\t * CSS generated from style attributes will take precedence over global styles CSS,\n\t\t\t * so remove the style attribute from the example to ensure the example\n\t\t\t * demonstrates changes to global styles.\n\t\t\t */\n\t\t\tblocks: getBlockFromExample( blockType.name, {\n\t\t\t\t...blockType.example,\n\t\t\t\tattributes: {\n\t\t\t\t\t...blockType.example.attributes,\n\t\t\t\t\tstyle: undefined,\n\t\t\t\t},\n\t\t\t} ),\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\tconst overviewBlockExamples = getOverviewBlockExamples( colors );\n\n\treturn [\n\t\theadingsExample,\n\t\t...colorExamples,\n\t\t...nonHeadingBlockExamples,\n\t\t...overviewBlockExamples,\n\t];\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../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\t// @wordpress/blocks imports are not typed.\n\t// @ts-expect-error\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tBlockExample,\n\tColorOrigin,\n\tMultiOriginPalettes,\n\tBlockType,\n} 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 as keyof MultiOriginPalettes ];\n\t\tconst paletteFiltered = Array.isArray( palette )\n\t\t\t? palette.find(\n\t\t\t\t\t( origin: ColorOrigin ) => origin.slug === group.origin\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\tif ( paletteFiltered?.[ 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\n\t\t\t\t\t\tduotones={ paletteFiltered[ group.type ] }\n\t\t\t\t\t/>\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={ paletteFiltered[ 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 examples for the overview page.\n *\n * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.\n * @return {BlockExample[]} An array of block examples.\n */\nfunction getOverviewBlockExamples(\n\tcolors: MultiOriginPalettes\n): BlockExample[] {\n\tconst examples: BlockExample[] = [];\n\n\t// Get theme palette from colors if they exist.\n\tconst themePalette = Array.isArray( colors?.colors )\n\t\t? colors.colors.find(\n\t\t\t\t( origin: ColorOrigin ) => origin.slug === 'theme'\n\t\t  )\n\t\t: undefined;\n\n\tif ( themePalette ) {\n\t\tconst themeColorexample: BlockExample = {\n\t\t\tname: 'theme-colors',\n\t\t\ttitle: __( 'Colors' ),\n\t\t\tcategory: 'overview',\n\t\t\tcontent: (\n\t\t\t\t<ColorExamples\n\t\t\t\t\tcolors={ themePalette.colors }\n\t\t\t\t\ttype=\"colors\"\n\t\t\t\t\ttemplateColumns=\"repeat(auto-fill, minmax( 200px, 1fr ))\"\n\t\t\t\t\titemHeight=\"32px\"\n\t\t\t\t/>\n\t\t\t),\n\t\t};\n\n\t\texamples.push( themeColorexample );\n\t}\n\n\t// Get examples for typography blocks.\n\tconst typographyBlockExamples: BlockType[] = [];\n\n\tif ( getBlockType( 'core/heading' ) ) {\n\t\tconst headingBlock = createBlock( 'core/heading', {\n\t\t\t// translators: Typography example. Your local alphabet, numbers and some common special characters.\n\t\t\tcontent: __(\n\t\t\t\t`AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789X{(\u2026)},.-<>?!*&:/A@HELFO\u2122\u00A9`\n\t\t\t),\n\t\t\tlevel: 1,\n\t\t} );\n\t\ttypographyBlockExamples.push( headingBlock );\n\t}\n\n\tif ( getBlockType( 'core/paragraph' ) ) {\n\t\tconst firstParagraphBlock = createBlock( 'core/paragraph', {\n\t\t\tcontent: __(\n\t\t\t\t`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`\n\t\t\t),\n\t\t} );\n\t\tconst secondParagraphBlock = createBlock( 'core/paragraph', {\n\t\t\tcontent: __(\n\t\t\t\t`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`\n\t\t\t),\n\t\t} );\n\n\t\tif ( getBlockType( 'core/group' ) ) {\n\t\t\tconst groupBlock = createBlock(\n\t\t\t\t'core/group',\n\t\t\t\t{\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\ttype: 'grid',\n\t\t\t\t\t\tcolumnCount: 2,\n\t\t\t\t\t\tminimumColumnWidth: '12rem',\n\t\t\t\t\t},\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tspacing: {\n\t\t\t\t\t\t\tblockGap: '1.5rem',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[ firstParagraphBlock, secondParagraphBlock ]\n\t\t\t);\n\t\t\ttypographyBlockExamples.push( groupBlock );\n\t\t} else {\n\t\t\ttypographyBlockExamples.push( firstParagraphBlock );\n\t\t}\n\t}\n\n\tif ( !! typographyBlockExamples.length ) {\n\t\texamples.push( {\n\t\t\tname: 'typography',\n\t\t\ttitle: __( 'Typography' ),\n\t\t\tcategory: 'overview',\n\t\t\tblocks: typographyBlockExamples,\n\t\t} );\n\t}\n\n\tconst otherBlockExamples = [\n\t\t'core/image',\n\t\t'core/separator',\n\t\t'core/buttons',\n\t\t'core/pullquote',\n\t\t'core/search',\n\t];\n\n\t// Get examples for other blocks and put them in order of above array.\n\totherBlockExamples.forEach( ( blockName ) => {\n\t\tconst blockType = getBlockType( blockName );\n\t\tif ( blockType && blockType.example ) {\n\t\t\tconst blockExample: BlockExample = {\n\t\t\t\tname: blockName,\n\t\t\t\ttitle: blockType.title,\n\t\t\t\tcategory: 'overview',\n\t\t\t\t/*\n\t\t\t\t * CSS generated from style attributes will take precedence over global styles CSS,\n\t\t\t\t * so remove the style attribute from the example to ensure the example\n\t\t\t\t * demonstrates changes to global styles.\n\t\t\t\t */\n\t\t\t\tblocks: getBlockFromExample( blockName, {\n\t\t\t\t\t...blockType.example,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\t...blockType.example.attributes,\n\t\t\t\t\t\tstyle: undefined,\n\t\t\t\t\t},\n\t\t\t\t} ),\n\t\t\t};\n\t\t\texamples.push( blockExample );\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: 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: BlockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\t/*\n\t\t\t * CSS generated from style attributes will take precedence over global styles CSS,\n\t\t\t * so remove the style attribute from the example to ensure the example\n\t\t\t * demonstrates changes to global styles.\n\t\t\t */\n\t\t\tblocks: getBlockFromExample( blockType.name, {\n\t\t\t\t...blockType.example,\n\t\t\t\tattributes: {\n\t\t\t\t\t...blockType.example.attributes,\n\t\t\t\t\tstyle: undefined,\n\t\t\t\t},\n\t\t\t} ),\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\tconst overviewBlockExamples = getOverviewBlockExamples( colors );\n\n\treturn [\n\t\theadingsExample,\n\t\t...colorExamples,\n\t\t...nonHeadingBlockExamples,\n\t\t...overviewBlockExamples,\n\t];\n}\n"],
+  "mappings": "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",
+  "names": []
+}