@wordpress/edit-site 5.3.7 → 5.3.9

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

@@ -1,4 +1,5 @@
-import { createElement } from "@wordpress/element";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -8,10 +9,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { Button, TabPanel, createSlotFill, __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import { Button, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem, Disabled, TabPanel, createSlotFill, __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { getCategories, getBlockTypes, getBlockFromExample, createBlock } from '@wordpress/blocks';
-import { BlockPreview, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { BlockList, privateApis as blockEditorPrivateApis, store as blockEditorStore, __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { useResizeObserver, useFocusOnMount, useFocusReturn, useMergeRefs } from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
@@ -22,13 +24,83 @@ import { ESCAPE } from '@wordpress/keycodes';
 
 import { unlock } from '../../private-apis';
 const {
+  ExperimentalBlockEditorProvider,
   useGlobalStyle
 } = unlock(blockEditorPrivateApis);
 const SLOT_FILL_NAME = 'EditSiteStyleBook';
 const {
   Slot: StyleBookSlot,
   Fill: StyleBookFill
-} = createSlotFill(SLOT_FILL_NAME);
+} = createSlotFill(SLOT_FILL_NAME); // 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;
+	}
+
+	.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 getExamples() {
   // Use our own example for the Heading block so that we can show multiple
@@ -87,6 +159,10 @@ function StyleBook(_ref) {
     title: category.title,
     icon: category.icon
   })), [examples]);
+  const originalSettings = useSelect(select => select(blockEditorStore).getSettings(), []);
+  const settings = useMemo(() => ({ ...originalSettings,
+    __unstableIsPreviewMode: true
+  }), [originalSettings]);
 
   function closeOnEscape(event) {
     if (event.keyCode === ESCAPE && !event.defaultPrevented) {
@@ -115,25 +191,48 @@ function StyleBook(_ref) {
   }), createElement(TabPanel, {
     className: "edit-site-style-book__tab-panel",
     tabs: tabs
-  }, tab => createElement(Examples, {
+  }, tab => createElement(Iframe, {
+    className: "edit-site-style-book__iframe",
+    head: createElement(Fragment, null, createElement(EditorStyles, {
+      styles: settings.styles
+    }), createElement("style", null, // 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)),
+    name: "style-book-canvas",
+    tabIndex: 0
+  }, settings.svgFilters, createElement(Examples, {
+    className: classnames('edit-site-style-book__examples', {
+      'is-wide': sizes.width > 600
+    }),
     examples: examples,
     category: tab.name,
+    label: sprintf( // translators: %s: Category of blocks, e.g. Text.
+    __('Examples of blocks in the %s category'), tab.title),
     isSelected: isSelected,
     onSelect: onSelect
-  }))));
+  })))));
 }
 
 const Examples = memo(_ref2 => {
   let {
+    className,
     examples,
     category,
+    label,
     isSelected,
     onSelect
   } = _ref2;
-  return createElement("div", {
-    className: "edit-site-style-book__examples"
-  }, examples.filter(example => example.category === category).map(example => createElement(Example, {
+  const composite = useCompositeState({
+    orientation: 'vertical'
+  });
+  return createElement(Composite, _extends({}, composite, {
+    className: className,
+    "aria-label": label
+  }), examples.filter(example => example.category === category).map(example => createElement(Example, {
     key: example.name,
+    id: `example-${example.name}`,
+    composite: composite,
     title: example.title,
     blocks: example.blocks,
     isSelected: isSelected(example.name),
@@ -142,32 +241,46 @@ const Examples = memo(_ref2 => {
     }
   })));
 });
-const Example = memo(_ref3 => {
+
+const Example = _ref3 => {
   let {
+    composite,
+    id,
     title,
     blocks,
     isSelected,
     onClick
   } = _ref3;
-  return createElement("button", {
+  const originalSettings = useSelect(select => select(blockEditorStore).getSettings(), []);
+  const settings = useMemo(() => ({ ...originalSettings,
+    __unstableIsPreviewMode: true
+  }), [originalSettings]); // Cache the list of blocks to avoid additional processing when the component is re-rendered.
+
+  const renderedBlocks = useMemo(() => Array.isArray(blocks) ? blocks : [blocks], [blocks]);
+  return createElement(CompositeItem, _extends({}, composite, {
     className: classnames('edit-site-style-book__example', {
       'is-selected': isSelected
     }),
+    id: id,
     "aria-label": sprintf( // translators: %s: Title of a block, e.g. Heading.
     __('Open %s styles in Styles panel'), title),
-    onClick: onClick
-  }, createElement("span", {
+    onClick: onClick,
+    role: "button",
+    as: "div"
+  }), createElement("span", {
     className: "edit-site-style-book__example-title"
   }, title), createElement("div", {
-    className: "edit-site-style-book__example-preview"
-  }, createElement(BlockPreview, {
-    blocks: blocks,
-    viewportWidth: 0,
-    additionalStyles: [{
-      css: '.wp-block:first-child { margin-top: 0; }' + '.wp-block:last-child { margin-bottom: 0; }'
-    }]
-  })));
-});
+    className: "edit-site-style-book__example-preview",
+    "aria-hidden": true
+  }, createElement(Disabled, {
+    className: "edit-site-style-book__example-preview__content"
+  }, createElement(ExperimentalBlockEditorProvider, {
+    value: renderedBlocks,
+    settings: settings
+  }, createElement(BlockList, {
+    renderAppender: false
+  })))));
+};
 
 function useHasStyleBook() {
   const fills = useSlotFills(SLOT_FILL_NAME);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"names":["classnames","Button","TabPanel","createSlotFill","__experimentalUseSlotFills","useSlotFills","__","sprintf","getCategories","getBlockTypes","getBlockFromExample","createBlock","BlockPreview","privateApis","blockEditorPrivateApis","closeSmall","useResizeObserver","useFocusOnMount","useFocusReturn","useMergeRefs","useMemo","memo","ESCAPE","unlock","useGlobalStyle","SLOT_FILL_NAME","Slot","StyleBookSlot","Fill","StyleBookFill","getExamples","headingsExample","name","title","category","blocks","content","level","otherExamples","filter","blockType","example","supports","inserter","map","StyleBook","isSelected","onSelect","onClose","resizeObserver","sizes","focusOnMountRef","sectionFocusReturnRef","textColor","backgroundColor","examples","tabs","some","slug","icon","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","width","color","background","tab","Examples","Example","onClick","css","useHasStyleBook","fills","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tTabPanel,\n\tcreateSlotFill,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\nimport {\n\tBlockPreview,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { closeSmall } from '@wordpress/icons';\nimport {\n\tuseResizeObserver,\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useMemo, memo } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst SLOT_FILL_NAME = 'EditSiteStyleBook';\nconst { Slot: StyleBookSlot, Fill: StyleBookFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\n\nfunction getExamples() {\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: [\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 1,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 2,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 3,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 4,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 5,\n\t\t\t} ),\n\t\t],\n\t};\n\n\tconst otherExamples = 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\treturn [ headingsExample, ...otherExamples ];\n}\n\nfunction StyleBook( { isSelected, onSelect, onClose } ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst sectionFocusReturnRef = useFocusReturn();\n\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst examples = useMemo( 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\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t}\n\t}\n\n\treturn (\n\t\t<StyleBookFill>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<section\n\t\t\t\tclassName={ classnames( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\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\taria-label={ __( 'Style Book' ) }\n\t\t\t\tonKeyDown={ closeOnEscape }\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tsectionFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"edit-site-style-book__close-button\"\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close Style Book' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t/>\n\t\t\t\t<TabPanel\n\t\t\t\t\tclassName=\"edit-site-style-book__tab-panel\"\n\t\t\t\t\ttabs={ tabs }\n\t\t\t\t>\n\t\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t\t<Examples\n\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</TabPanel>\n\t\t\t</section>\n\t\t</StyleBookFill>\n\t);\n}\n\nconst Examples = memo( ( { examples, category, isSelected, onSelect } ) => (\n\t<div className=\"edit-site-style-book__examples\">\n\t\t{ examples\n\t\t\t.filter( ( example ) => example.category === category )\n\t\t\t.map( ( example ) => (\n\t\t\t\t<Example\n\t\t\t\t\tkey={ example.name }\n\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonSelect( example.name );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t</div>\n) );\n\nconst Example = memo( ( { title, blocks, isSelected, onClick } ) => (\n\t<button\n\t\tclassName={ classnames( 'edit-site-style-book__example', {\n\t\t\t'is-selected': isSelected,\n\t\t} ) }\n\t\taria-label={ sprintf(\n\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\ttitle\n\t\t) }\n\t\tonClick={ onClick }\n\t>\n\t\t<span className=\"edit-site-style-book__example-title\">{ title }</span>\n\t\t<div className=\"edit-site-style-book__example-preview\">\n\t\t\t<BlockPreview\n\t\t\t\tblocks={ blocks }\n\t\t\t\tviewportWidth={ 0 }\n\t\t\t\tadditionalStyles={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tcss:\n\t\t\t\t\t\t\t'.wp-block:first-child { margin-top: 0; }' +\n\t\t\t\t\t\t\t'.wp-block:last-child { margin-bottom: 0; }',\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t</div>\n\t</button>\n) );\n\nfunction useHasStyleBook() {\n\tconst fills = useSlotFills( SLOT_FILL_NAME );\n\treturn !! fills?.length;\n}\n\nStyleBook.Slot = StyleBookSlot;\nexport default StyleBook;\nexport { useHasStyleBook };\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"names":["classnames","Button","__unstableComposite","Composite","__unstableUseCompositeState","useCompositeState","__unstableCompositeItem","CompositeItem","Disabled","TabPanel","createSlotFill","__experimentalUseSlotFills","useSlotFills","__","sprintf","getCategories","getBlockTypes","getBlockFromExample","createBlock","BlockList","privateApis","blockEditorPrivateApis","store","blockEditorStore","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","useSelect","closeSmall","useResizeObserver","useFocusOnMount","useFocusReturn","useMergeRefs","useMemo","memo","ESCAPE","unlock","ExperimentalBlockEditorProvider","useGlobalStyle","SLOT_FILL_NAME","Slot","StyleBookSlot","Fill","StyleBookFill","STYLE_BOOK_IFRAME_STYLES","getExamples","headingsExample","name","title","category","blocks","content","level","otherExamples","filter","blockType","example","supports","inserter","map","StyleBook","isSelected","onSelect","onClose","resizeObserver","sizes","focusOnMountRef","sectionFocusReturnRef","textColor","backgroundColor","examples","tabs","some","slug","icon","originalSettings","select","getSettings","settings","__unstableIsPreviewMode","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","width","color","background","tab","styles","svgFilters","Examples","className","label","composite","orientation","Example","id","onClick","renderedBlocks","Array","isArray","useHasStyleBook","fills","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableCompositeItem as CompositeItem,\n\tDisabled,\n\tTabPanel,\n\tcreateSlotFill,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\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 { useSelect } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\nimport {\n\tuseResizeObserver,\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useMemo, memo } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst SLOT_FILL_NAME = 'EditSiteStyleBook';\nconst { Slot: StyleBookSlot, Fill: StyleBookFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\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}\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 getExamples() {\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: [\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 1,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 2,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 3,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 4,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 5,\n\t\t\t} ),\n\t\t],\n\t};\n\n\tconst otherExamples = 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\treturn [ headingsExample, ...otherExamples ];\n}\n\nfunction StyleBook( { isSelected, onSelect, onClose } ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst sectionFocusReturnRef = useFocusReturn();\n\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst examples = useMemo( 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\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t}\n\t}\n\n\treturn (\n\t\t<StyleBookFill>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<section\n\t\t\t\tclassName={ classnames( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\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\taria-label={ __( 'Style Book' ) }\n\t\t\t\tonKeyDown={ closeOnEscape }\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tsectionFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"edit-site-style-book__close-button\"\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close Style Book' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t/>\n\t\t\t\t<TabPanel\n\t\t\t\t\tclassName=\"edit-site-style-book__tab-panel\"\n\t\t\t\t\ttabs={ tabs }\n\t\t\t\t>\n\t\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t\t<Iframe\n\t\t\t\t\t\t\tclassName=\"edit-site-style-book__iframe\"\n\t\t\t\t\t\t\thead={\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\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\t\t\t\t\t\t`.is-root-container { display: flow-root; }\n\t\t\t\t\t\t\t\t\t\t\tbody { position: relative; padding: 32px !important; }` +\n\t\t\t\t\t\t\t\t\t\t\t\tSTYLE_BOOK_IFRAME_STYLES\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tname=\"style-book-canvas\"\n\t\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }\n\t\t\t\t\t\t\t{ settings.svgFilters }\n\t\t\t\t\t\t\t<Examples\n\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t'edit-site-style-book__examples',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\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\t__(\n\t\t\t\t\t\t\t\t\t\t'Examples of blocks in the %s category'\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\ttab.title\n\t\t\t\t\t\t\t\t) }\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</Iframe>\n\t\t\t\t\t) }\n\t\t\t\t</TabPanel>\n\t\t\t</section>\n\t\t</StyleBookFill>\n\t);\n}\n\nconst Examples = memo(\n\t( { className, examples, category, label, isSelected, onSelect } ) => {\n\t\tconst composite = useCompositeState( { orientation: 'vertical' } );\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\t{ ...composite }\n\t\t\t\tclassName={ className }\n\t\t\t\taria-label={ label }\n\t\t\t>\n\t\t\t\t{ examples\n\t\t\t\t\t.filter( ( example ) => example.category === category )\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\tcomposite={ composite }\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 = ( { composite, 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() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\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<CompositeItem\n\t\t\t{ ...composite }\n\t\t\tclassName={ classnames( 'edit-site-style-book__example', {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t} ) }\n\t\t\tid={ id }\n\t\t\taria-label={ sprintf(\n\t\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\t\ttitle\n\t\t\t) }\n\t\t\tonClick={ onClick }\n\t\t\trole=\"button\"\n\t\t\tas=\"div\"\n\t\t>\n\t\t\t<span className=\"edit-site-style-book__example-title\">\n\t\t\t\t{ title }\n\t\t\t</span>\n\t\t\t<div className=\"edit-site-style-book__example-preview\" aria-hidden>\n\t\t\t\t<Disabled className=\"edit-site-style-book__example-preview__content\">\n\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\tvalue={ renderedBlocks }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t</Disabled>\n\t\t\t</div>\n\t\t</CompositeItem>\n\t);\n};\n\nfunction useHasStyleBook() {\n\tconst fills = useSlotFills( SLOT_FILL_NAME );\n\treturn !! fills?.length;\n}\n\nStyleBook.Slot = StyleBookSlot;\nexport default StyleBook;\nexport { useHasStyleBook };\n"]}

package/build-style/style-rtl.css

@@ -568,10 +568,19 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 @media (min-width: 600px) {
-  .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover {
+  .edit-site-new-template-dropdown .edit-site-new-template-dropdown__menu-groups {
     min-width: 300px;
   }
 }
+.edit-site-new-template-dropdown__menu-item-tooltip.components-tooltip .components-popover__content {
+  max-width: 320px;
+  padding: 8px 12px;
+  border-radius: 2px;
+  white-space: pre-wrap;
+  min-width: 0;
+  width: auto;
+  text-align: right;
+}
 
 .edit-site-custom-template-modal__contents > .components-button {
   padding: 24px;
@@ -2370,12 +2379,11 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-item.components-item {
   color: #949494;
-  border-width: 1.5px;
+  margin: 0 4px;
 }
 .edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current] {
   color: #fff;
   background: #2f2f2f;
-  border-width: 1.5px;
 }
 .edit-site-sidebar-navigation-item.components-item[aria-current] {
   background: var(--wp-admin-theme-color);
@@ -2383,7 +2391,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
   cursor: grab;
-  width: calc(100% - 2px);
   padding: 8px;
 }
 
@@ -2449,7 +2456,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-site-hub__view-mode-toggle-container {
   height: 60px;
-  width: 64px;
+  width: 60px;
   flex-shrink: 0;
   background: #1e1e1e;
 }
@@ -2464,6 +2471,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   overflow: hidden;
 }
 
+.edit-site-site-hub__site-title {
+  margin-right: 4px;
+}
+
 .edit-site-sidebar-navigation-screen__description {
   margin: 0 16px 32px 0;
 }
@@ -2516,6 +2527,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #fff;
 }
 
+.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
+  display: none;
+}
+
 .edit-site-site-icon__icon {
   fill: currentColor;
 }
@@ -2554,53 +2569,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   bottom: 0;
   right: 0;
   overflow: auto;
-  padding: 32px;
+  padding: 0;
   position: absolute;
   left: 0;
   top: 48px;
 }
 
-.edit-site-style-book__examples {
-  max-width: 900px;
-  margin: 0 auto;
-}
-
-.edit-site-style-book__example {
-  background: none;
-  border-radius: 2px;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  margin-bottom: 40px;
-  padding: 16px;
-  width: 100%;
-}
-.edit-site-style-book__example.is-selected {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
-.edit-site-style-book.is-wide .edit-site-style-book__example {
-  flex-direction: row;
-}
-
-.edit-site-style-book__example-title {
-  font-size: 11px;
-  font-weight: 500;
-  margin: 0;
-  text-align: right;
-  text-transform: uppercase;
-}
-.edit-site-style-book.is-wide .edit-site-style-book__example-title {
-  text-align: left;
-  width: 120px;
-}
-
-.edit-site-style-book__example-preview {
-  width: 100%;
-}
-
 .edit-site-push-changes-to-global-styles-control .components-button {
   justify-content: center;
   width: 100%;

package/build-style/style.css

@@ -568,10 +568,19 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 @media (min-width: 600px) {
-  .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover {
+  .edit-site-new-template-dropdown .edit-site-new-template-dropdown__menu-groups {
     min-width: 300px;
   }
 }
+.edit-site-new-template-dropdown__menu-item-tooltip.components-tooltip .components-popover__content {
+  max-width: 320px;
+  padding: 8px 12px;
+  border-radius: 2px;
+  white-space: pre-wrap;
+  min-width: 0;
+  width: auto;
+  text-align: left;
+}
 
 .edit-site-custom-template-modal__contents > .components-button {
   padding: 24px;
@@ -2370,12 +2379,11 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-item.components-item {
   color: #949494;
-  border-width: 1.5px;
+  margin: 0 4px;
 }
 .edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current] {
   color: #fff;
   background: #2f2f2f;
-  border-width: 1.5px;
 }
 .edit-site-sidebar-navigation-item.components-item[aria-current] {
   background: var(--wp-admin-theme-color);
@@ -2383,7 +2391,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
   cursor: grab;
-  width: calc(100% - 2px);
   padding: 8px;
 }
 
@@ -2449,7 +2456,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-site-hub__view-mode-toggle-container {
   height: 60px;
-  width: 64px;
+  width: 60px;
   flex-shrink: 0;
   background: #1e1e1e;
 }
@@ -2464,6 +2471,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   overflow: hidden;
 }
 
+.edit-site-site-hub__site-title {
+  margin-left: 4px;
+}
+
 .edit-site-sidebar-navigation-screen__description {
   margin: 0 0 32px 16px;
 }
@@ -2516,6 +2527,10 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #fff;
 }
 
+.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
+  display: none;
+}
+
 .edit-site-site-icon__icon {
   fill: currentColor;
 }
@@ -2554,53 +2569,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   bottom: 0;
   left: 0;
   overflow: auto;
-  padding: 32px;
+  padding: 0;
   position: absolute;
   right: 0;
   top: 48px;
 }
 
-.edit-site-style-book__examples {
-  max-width: 900px;
-  margin: 0 auto;
-}
-
-.edit-site-style-book__example {
-  background: none;
-  border-radius: 2px;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  margin-bottom: 40px;
-  padding: 16px;
-  width: 100%;
-}
-.edit-site-style-book__example.is-selected {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
-.edit-site-style-book.is-wide .edit-site-style-book__example {
-  flex-direction: row;
-}
-
-.edit-site-style-book__example-title {
-  font-size: 11px;
-  font-weight: 500;
-  margin: 0;
-  text-align: left;
-  text-transform: uppercase;
-}
-.edit-site-style-book.is-wide .edit-site-style-book__example-title {
-  text-align: right;
-  width: 120px;
-}
-
-.edit-site-style-book__example-preview {
-  width: 100%;
-}
-
 .edit-site-push-changes-to-global-styles-control .components-button {
   justify-content: center;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.3.7",
+	"version": "5.3.9",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,33 +29,33 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.26.1",
 		"@wordpress/api-fetch": "^6.23.1",
-		"@wordpress/block-editor": "^11.3.7",
-		"@wordpress/block-library": "^8.3.7",
+		"@wordpress/block-editor": "^11.3.9",
+		"@wordpress/block-library": "^8.3.9",
 		"@wordpress/blocks": "^12.3.3",
-		"@wordpress/components": "^23.3.5",
+		"@wordpress/components": "^23.3.6",
 		"@wordpress/compose": "^6.3.3",
 		"@wordpress/core-data": "^6.3.3",
 		"@wordpress/data": "^8.3.3",
 		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/editor": "^13.3.7",
+		"@wordpress/editor": "^13.3.9",
 		"@wordpress/element": "^5.3.2",
 		"@wordpress/hooks": "^3.26.1",
 		"@wordpress/html-entities": "^3.26.1",
 		"@wordpress/i18n": "^4.26.1",
 		"@wordpress/icons": "^9.17.2",
-		"@wordpress/interface": "^5.3.6",
+		"@wordpress/interface": "^5.3.7",
 		"@wordpress/keyboard-shortcuts": "^4.3.3",
 		"@wordpress/keycodes": "^3.26.2",
 		"@wordpress/media-utils": "^4.17.2",
 		"@wordpress/notices": "^3.26.3",
 		"@wordpress/plugins": "^5.3.3",
-		"@wordpress/preferences": "^3.3.5",
+		"@wordpress/preferences": "^3.3.6",
 		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/reusable-blocks": "^4.3.7",
+		"@wordpress/reusable-blocks": "^4.3.9",
 		"@wordpress/style-engine": "^1.9.1",
 		"@wordpress/url": "^3.27.1",
 		"@wordpress/viewport": "^5.3.3",
-		"@wordpress/widgets": "^3.3.7",
+		"@wordpress/widgets": "^3.3.9",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d14fea64bd9ad9d2d86047936974dbed39a5b5b3"
+	"gitHead": "f22a3cbf0cd8f48c7ef800a09b69212a893b99b8"
 }