Editor: Update @wordpress packages for 6.2 RC1.

Updates the `@wordpress` packages to include the following changes:

- Site Editor: Move "Add Template"'s descriptions to tooltips
- Update template descriptions with more detail
- Distraction Free Mode: Don't show the metaboxes
- Remove actions from SidebarNavigationScreenWrapper
- Fix: Navigation sidebar shows a wrong submenu popover.
- Fix: Site button metrics
- Fix navigation block off-canvas appender for empty menus
- Style Book: Move iframe to root of content area to support styles that overflow block previews
- Fix navigation block off-canvas appender for empty

Reference:
* [446428841b Package publish commit in Gutenberg]

Follow-up to [55475].

Props mamaduka.
See #57471.
Built from https://develop.svn.wordpress.org/trunk@55496


git-svn-id: http://core.svn.wordpress.org/trunk@55029 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/dist/edit-site/style-rtl.css

@@ -459,10 +459,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{
+  border-radius:2px;
+  max-width:320px;
+  min-width:0;
+  padding:8px 12px;
+  text-align:right;
+  white-space:pre-wrap;
+  width:auto;
+}
 
 .edit-site-custom-template-modal__contents>.components-button{
   border-radius:2px;
@@ -2282,7 +2291,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar{
   background:#1e1e1e;
   flex-shrink:0;
   height:60px;
-  width:64px;
+  width:60px;
 }
 
 .edit-site-site-hub__text-content{
@@ -2347,6 +2356,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;
 }
@@ -2385,53 +2398,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{
-  margin:0 auto;
-  max-width:900px;
-}
-
-.edit-site-style-book__example{
-  background:none;
-  border:none;
-  border-radius:2px;
-  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%;

wp-includes/css/dist/edit-site/style.css

@@ -459,10 +459,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{
+  border-radius:2px;
+  max-width:320px;
+  min-width:0;
+  padding:8px 12px;
+  text-align:left;
+  white-space:pre-wrap;
+  width:auto;
+}
 
 .edit-site-custom-template-modal__contents>.components-button{
   border-radius:2px;
@@ -2282,7 +2291,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar{
   background:#1e1e1e;
   flex-shrink:0;
   height:60px;
-  width:64px;
+  width:60px;
 }
 
 .edit-site-site-hub__text-content{
@@ -2347,6 +2356,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;
 }
@@ -2385,53 +2398,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{
-  margin:0 auto;
-  max-width:900px;
-}
-
-.edit-site-style-book__example{
-  background:none;
-  border:none;
-  border-radius:2px;
-  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%;

wp-includes/js/dist/block-editor.js

@@ -57237,6 +57237,7 @@ const off_canvas_editor_BLOCK_LIST_ITEM_HEIGHT = 36;
  *
  * @param {Object}  props                 Components props.
  * @param {string}  props.id              An HTML element id for the root element of ListView.
+ * @param {string}  props.parentClientId  The client id of the parent block.
  * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {boolean} props.showBlockMovers Flag to enable block movers
  * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
@@ -57250,6 +57251,7 @@ const off_canvas_editor_BLOCK_LIST_ITEM_HEIGHT = 36;
 function OffCanvasEditor(_ref, ref) {
   let {
     id,
+    parentClientId,
     blocks,
     showBlockMovers = false,
     isExpanded = false,
@@ -57381,6 +57383,7 @@ function OffCanvasEditor(_ref, ref) {
   }, (0,external_wp_element_namespaceObject.createElement)(context_ListViewContext.Provider, {
     value: contextValue
   }, (0,external_wp_element_namespaceObject.createElement)(off_canvas_editor_branch, {
+    parentId: parentClientId,
     blocks: clientIdsTree,
     selectBlock: selectEditorBlock,
     showBlockMovers: showBlockMovers,

wp-includes/js/dist/block-library.js

@@ -31854,6 +31854,7 @@ const MainContent = _ref => {
   (0,external_wp_i18n_namespaceObject.__)('Structure for navigation menu: %s'), (navigationMenu === null || navigationMenu === void 0 ? void 0 : navigationMenu.title) || (0,external_wp_i18n_namespaceObject.__)('Untitled menu')) : (0,external_wp_i18n_namespaceObject.__)('You have not yet created any menus. Displaying a list of your Pages');
   return (0,external_wp_element_namespaceObject.createElement)(OffCanvasEditor, {
     blocks: clientIdsTree,
+    parentClientId: clientId,
     isExpanded: true,
     LeafMoreMenu: LeafMoreMenu,
     description: description

wp-includes/js/dist/edit-post.js

@@ -7367,7 +7367,7 @@ function PostTemplateCreateModal(_ref) {
     onChange: setTitle,
     placeholder: DEFAULT_TITLE,
     disabled: isBusy,
-    help: (0,external_wp_i18n_namespaceObject.__)('Describe the template, e.g. "Post with sidebar". Custom templates can be applied to any post or page.')
+    help: (0,external_wp_i18n_namespaceObject.__)('Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.')
   }), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.__experimentalHStack, {
     justify: "right"
   }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Button, {
@@ -9309,7 +9309,7 @@ function Layout(_ref) {
     isInserterOpened,
     isListViewOpened,
     showIconLabels,
-    isDistractionFreeMode,
+    isDistractionFree,
     showBlockBreadcrumbs,
     isTemplateMode,
     documentLabel
@@ -9333,13 +9333,12 @@ function Layout(_ref) {
       previousShortcut: select(external_wp_keyboardShortcuts_namespaceObject.store).getAllShortcutKeyCombinations('core/edit-post/previous-region'),
       nextShortcut: select(external_wp_keyboardShortcuts_namespaceObject.store).getAllShortcutKeyCombinations('core/edit-post/next-region'),
       showIconLabels: select(store_store).isFeatureActive('showIconLabels'),
-      isDistractionFreeMode: select(store_store).isFeatureActive('distractionFree'),
+      isDistractionFree: select(store_store).isFeatureActive('distractionFree'),
       showBlockBreadcrumbs: select(store_store).isFeatureActive('showBlockBreadcrumbs'),
       // translators: Default label for the Document in the Block Breadcrumb.
       documentLabel: postTypeLabel || (0,external_wp_i18n_namespaceObject._x)('Document', 'noun')
     };
   }, []);
-  const isDistractionFree = isDistractionFreeMode && isLargeViewport;
 
   const openSidebarPanel = () => openGeneralSidebar(hasBlockSelected ? 'edit-post/block' : 'edit-post/document'); // Inserter and Sidebars are mutually exclusive
 
@@ -9369,7 +9368,7 @@ function Layout(_ref) {
     'has-fixed-toolbar': hasFixedToolbar,
     'has-metaboxes': hasActiveMetaboxes,
     'show-icon-labels': showIconLabels,
-    'is-distraction-free': isDistractionFree,
+    'is-distraction-free': isDistractionFree && isLargeViewport,
     'is-entity-save-view-open': !!entitiesSavedStatesCallback
   });
   const secondarySidebarLabel = isListViewOpened ? (0,external_wp_i18n_namespaceObject.__)('Document Overview') : (0,external_wp_i18n_namespaceObject.__)('Block Library');
@@ -9395,7 +9394,7 @@ function Layout(_ref) {
   return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(fullscreen_mode, {
     isActive: isFullscreenActive
   }), (0,external_wp_element_namespaceObject.createElement)(browser_url, null), (0,external_wp_element_namespaceObject.createElement)(external_wp_editor_namespaceObject.UnsavedChangesWarning, null), (0,external_wp_element_namespaceObject.createElement)(external_wp_editor_namespaceObject.AutosaveMonitor, null), (0,external_wp_element_namespaceObject.createElement)(external_wp_editor_namespaceObject.LocalAutosaveMonitor, null), (0,external_wp_element_namespaceObject.createElement)(keyboard_shortcuts, null), (0,external_wp_element_namespaceObject.createElement)(external_wp_editor_namespaceObject.EditorKeyboardShortcutsRegister, null), (0,external_wp_element_namespaceObject.createElement)(settings_sidebar, null), (0,external_wp_element_namespaceObject.createElement)(interface_skeleton, {
-    isDistractionFree: isDistractionFree,
+    isDistractionFree: isDistractionFree && isLargeViewport,
     className: className,
     labels: { ...interfaceLabels,
       secondarySidebar: secondarySidebarLabel
@@ -9418,14 +9417,14 @@ function Layout(_ref) {
     notices: (0,external_wp_element_namespaceObject.createElement)(external_wp_editor_namespaceObject.EditorSnackbars, null),
     content: (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, !isDistractionFree && (0,external_wp_element_namespaceObject.createElement)(external_wp_editor_namespaceObject.EditorNotices, null), (mode === 'text' || !isRichEditingEnabled) && (0,external_wp_element_namespaceObject.createElement)(TextEditor, null), isRichEditingEnabled && mode === 'visual' && (0,external_wp_element_namespaceObject.createElement)(VisualEditor, {
       styles: styles
-    }), !isTemplateMode && (0,external_wp_element_namespaceObject.createElement)("div", {
+    }), !isDistractionFree && !isTemplateMode && (0,external_wp_element_namespaceObject.createElement)("div", {
       className: "edit-post-layout__metaboxes"
     }, (0,external_wp_element_namespaceObject.createElement)(MetaBoxes, {
       location: "normal"
     }), (0,external_wp_element_namespaceObject.createElement)(MetaBoxes, {
       location: "advanced"
     })), isMobileViewport && sidebarIsOpened && (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.ScrollLock, null)),
-    footer: !isDistractionFree && showBlockBreadcrumbs && !isMobileViewport && isRichEditingEnabled && mode === 'visual' && (0,external_wp_element_namespaceObject.createElement)("div", {
+    footer: !isDistractionFree && !isMobileViewport && showBlockBreadcrumbs && isRichEditingEnabled && mode === 'visual' && (0,external_wp_element_namespaceObject.createElement)("div", {
       className: "edit-post-layout__footer"
     }, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.BlockBreadcrumb, {
       rootLabelText: documentLabel

wp-includes/js/dist/edit-site.js

@@ -7059,6 +7059,8 @@ function NewTemplate(_ref) {
     return null;
   }
 
+  const customTemplateDescription = (0,external_wp_i18n_namespaceObject.__)('A custom template can be manually applied to any post or page.');
+
   return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.DropdownMenu, {
     className: "edit-site-new-template-dropdown",
     icon: showIcon ? library_plus : null,
@@ -7068,8 +7070,8 @@ function NewTemplate(_ref) {
       noArrow: false
     },
     toggleProps: toggleProps
-  }, () => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isCreatingTemplate && (0,external_wp_element_namespaceObject.createElement)(TemplateActionsLoadingScreen, null), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.NavigableMenu, {
-    className: "edit-site-new-template-dropdown__popover"
+  }, () => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isCreatingTemplate && (0,external_wp_element_namespaceObject.createElement)(TemplateActionsLoadingScreen, null), (0,external_wp_element_namespaceObject.createElement)("div", {
+    className: "edit-site-new-template-dropdown__menu-groups"
   }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.MenuGroup, {
     label: postType.labels.add_new_item
   }, missingTemplates.map(template => {
@@ -7080,20 +7082,25 @@ function NewTemplate(_ref) {
       onClick,
       icon
     } = template;
-    return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.MenuItem, {
+    return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Tooltip, {
+      key: slug,
+      position: "top right",
+      text: description,
+      className: "edit-site-new-template-dropdown__menu-item-tooltip"
+    }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.MenuItem, {
       icon: icon || TEMPLATE_ICONS[slug] || library_post,
       iconPosition: "left",
-      info: description,
-      key: slug,
       onClick: () => onClick ? onClick(template) : createTemplate(template)
-    }, title);
-  })), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.MenuGroup, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.MenuItem, {
+    }, title, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.VisuallyHidden, null, description)));
+  })), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.MenuGroup, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Tooltip, {
+    position: "top right",
+    text: customTemplateDescription,
+    className: "edit-site-new-template-dropdown__menu-item-tooltip"
+  }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.MenuItem, {
     icon: library_layout,
     iconPosition: "left",
-    info: (0,external_wp_i18n_namespaceObject.__)('Custom templates can be applied to any post or page.'),
-    key: "custom-template",
     onClick: () => setShowCustomGenericTemplateModal(true)
-  }, (0,external_wp_i18n_namespaceObject.__)('Custom template')))))), showCustomTemplateModal && (0,external_wp_element_namespaceObject.createElement)(add_custom_template_modal, {
+  }, (0,external_wp_i18n_namespaceObject.__)('Custom template'), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.VisuallyHidden, null, customTemplateDescription))))))), showCustomTemplateModal && (0,external_wp_element_namespaceObject.createElement)(add_custom_template_modal, {
     onClose: () => setShowCustomTemplateModal(false),
     onSelect: createTemplate,
     entityForSuggestions: entityForSuggestions,
@@ -7879,7 +7886,6 @@ function NavigationMenuContent(_ref) {
 
 
 
-
 const sidebar_navigation_screen_navigation_menus_noop = () => {};
 
 const NAVIGATION_MENUS_QUERY = {
@@ -7900,7 +7906,6 @@ function SidebarNavigationScreenWrapper(_ref) {
   });
 }
 
-const prioritizedInserterBlocks = ['core/navigation-link/page', 'core/navigation-link'];
 function SidebarNavigationScreenNavigationMenus() {
   var _orderedNavigationMen;
 
@@ -7958,24 +7963,6 @@ function SidebarNavigationScreenNavigationMenus() {
       });
     }
   }, [history]);
-  const orderInitialBlockItems = (0,external_wp_element_namespaceObject.useCallback)(items => {
-    items.sort((_ref2, _ref3) => {
-      let {
-        id: aName
-      } = _ref2;
-      let {
-        id: bName
-      } = _ref3;
-      // Sort block items according to `prioritizedInserterBlocks`.
-      let aIndex = prioritizedInserterBlocks.indexOf(aName);
-      let bIndex = prioritizedInserterBlocks.indexOf(bName); // All other block items should come after that.
-
-      if (aIndex < 0) aIndex = prioritizedInserterBlocks.length;
-      if (bIndex < 0) bIndex = prioritizedInserterBlocks.length;
-      return aIndex - bIndex;
-    });
-    return items;
-  }, []);
 
   if (hasResolvedNavigationMenus && !hasNavigationMenus) {
     return (0,external_wp_element_namespaceObject.createElement)(SidebarNavigationScreenWrapper, null, (0,external_wp_i18n_namespaceObject.__)('There are no Navigation Menus.'));
@@ -7985,29 +7972,12 @@ function SidebarNavigationScreenNavigationMenus() {
     return (0,external_wp_element_namespaceObject.createElement)(SidebarNavigationScreenWrapper, null, (0,external_wp_element_namespaceObject.createElement)(NavigationMenuLoader, null));
   }
 
-  const {
-    PrivateInserter
-  } = unlock(external_wp_blockEditor_namespaceObject.privateApis);
   return (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.BlockEditorProvider, {
     settings: storedSettings,
     value: blocks,
     onChange: sidebar_navigation_screen_navigation_menus_noop,
     onInput: sidebar_navigation_screen_navigation_menus_noop
-  }, (0,external_wp_element_namespaceObject.createElement)(SidebarNavigationScreenWrapper, {
-    actions: (0,external_wp_element_namespaceObject.createElement)(PrivateInserter, {
-      rootClientId: blocks[0].clientId,
-      position: "bottom right",
-      isAppender: true,
-      selectBlockOnInsert: false,
-      shouldDirectInsert: false,
-      __experimentalIsQuick: true,
-      toggleProps: {
-        as: SidebarButton,
-        label: (0,external_wp_i18n_namespaceObject.__)('Add menu item')
-      },
-      orderInitialBlockItems: orderInitialBlockItems
-    })
-  }, (0,external_wp_element_namespaceObject.createElement)("div", {
+  }, (0,external_wp_element_namespaceObject.createElement)(SidebarNavigationScreenWrapper, null, (0,external_wp_element_namespaceObject.createElement)("div", {
     className: "edit-site-sidebar-navigation-screen-navigation-menus__content"
   }, (0,external_wp_element_namespaceObject.createElement)(NavigationMenuContent, {
     rootClientId: blocks[0].clientId,
@@ -12203,6 +12173,7 @@ function ScreenBorder(_ref) {
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/edit-site/build-module/components/style-book/index.js
 
 
+
 /**
  * External dependencies
  */
@@ -12219,19 +12190,90 @@ function ScreenBorder(_ref) {
 
 
 
+
 /**
  * Internal dependencies
  */
 
 
 const {
+  ExperimentalBlockEditorProvider,
   useGlobalStyle: style_book_useGlobalStyle
 } = unlock(external_wp_blockEditor_namespaceObject.privateApis);
 const SLOT_FILL_NAME = 'EditSiteStyleBook';
 const {
   Slot: StyleBookSlot,
   Fill: StyleBookFill
-} = (0,external_wp_components_namespaceObject.createSlotFill)(SLOT_FILL_NAME);
+} = (0,external_wp_components_namespaceObject.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
@@ -12290,6 +12332,10 @@ function StyleBook(_ref) {
     title: category.title,
     icon: category.icon
   })), [examples]);
+  const originalSettings = (0,external_wp_data_namespaceObject.useSelect)(select => select(external_wp_blockEditor_namespaceObject.store).getSettings(), []);
+  const settings = (0,external_wp_element_namespaceObject.useMemo)(() => ({ ...originalSettings,
+    __unstableIsPreviewMode: true
+  }), [originalSettings]);
 
   function closeOnEscape(event) {
     if (event.keyCode === external_wp_keycodes_namespaceObject.ESCAPE && !event.defaultPrevented) {
@@ -12318,25 +12364,48 @@ function StyleBook(_ref) {
   }), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.TabPanel, {
     className: "edit-site-style-book__tab-panel",
     tabs: tabs
-  }, tab => (0,external_wp_element_namespaceObject.createElement)(Examples, {
+  }, tab => (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.__unstableIframe, {
+    className: "edit-site-style-book__iframe",
+    head: (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.__unstableEditorStyles, {
+      styles: settings.styles
+    }), (0,external_wp_element_namespaceObject.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, (0,external_wp_element_namespaceObject.createElement)(Examples, {
+    className: classnames_default()('edit-site-style-book__examples', {
+      'is-wide': sizes.width > 600
+    }),
     examples: examples,
     category: tab.name,
+    label: (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: Category of blocks, e.g. Text.
+    (0,external_wp_i18n_namespaceObject.__)('Examples of blocks in the %s category'), tab.title),
     isSelected: isSelected,
     onSelect: onSelect
-  }))));
+  })))));
 }
 
 const Examples = (0,external_wp_element_namespaceObject.memo)(_ref2 => {
   let {
+    className,
     examples,
     category,
+    label,
     isSelected,
     onSelect
   } = _ref2;
-  return (0,external_wp_element_namespaceObject.createElement)("div", {
-    className: "edit-site-style-book__examples"
-  }, examples.filter(example => example.category === category).map(example => (0,external_wp_element_namespaceObject.createElement)(Example, {
+  const composite = (0,external_wp_components_namespaceObject.__unstableUseCompositeState)({
+    orientation: 'vertical'
+  });
+  return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.__unstableComposite, extends_extends({}, composite, {
+    className: className,
+    "aria-label": label
+  }), examples.filter(example => example.category === category).map(example => (0,external_wp_element_namespaceObject.createElement)(Example, {
     key: example.name,
+    id: `example-${example.name}`,
+    composite: composite,
     title: example.title,
     blocks: example.blocks,
     isSelected: isSelected(example.name),
@@ -12345,32 +12414,46 @@ const Examples = (0,external_wp_element_namespaceObject.memo)(_ref2 => {
     }
   })));
 });
-const Example = (0,external_wp_element_namespaceObject.memo)(_ref3 => {
+
+const Example = _ref3 => {
   let {
+    composite,
+    id,
     title,
     blocks,
     isSelected,
     onClick
   } = _ref3;
-  return (0,external_wp_element_namespaceObject.createElement)("button", {
+  const originalSettings = (0,external_wp_data_namespaceObject.useSelect)(select => select(external_wp_blockEditor_namespaceObject.store).getSettings(), []);
+  const settings = (0,external_wp_element_namespaceObject.useMemo)(() => ({ ...originalSettings,
+    __unstableIsPreviewMode: true
+  }), [originalSettings]); // Cache the list of blocks to avoid additional processing when the component is re-rendered.
+
+  const renderedBlocks = (0,external_wp_element_namespaceObject.useMemo)(() => Array.isArray(blocks) ? blocks : [blocks], [blocks]);
+  return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.__unstableCompositeItem, extends_extends({}, composite, {
     className: classnames_default()('edit-site-style-book__example', {
       'is-selected': isSelected
     }),
+    id: id,
     "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: Title of a block, e.g. Heading.
     (0,external_wp_i18n_namespaceObject.__)('Open %s styles in Styles panel'), title),
-    onClick: onClick
-  }, (0,external_wp_element_namespaceObject.createElement)("span", {
+    onClick: onClick,
+    role: "button",
+    as: "div"
+  }), (0,external_wp_element_namespaceObject.createElement)("span", {
     className: "edit-site-style-book__example-title"
   }, title), (0,external_wp_element_namespaceObject.createElement)("div", {
-    className: "edit-site-style-book__example-preview"
-  }, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.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
+  }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Disabled, {
+    className: "edit-site-style-book__example-preview__content"
+  }, (0,external_wp_element_namespaceObject.createElement)(ExperimentalBlockEditorProvider, {
+    value: renderedBlocks,
+    settings: settings
+  }, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.BlockList, {
+    renderAppender: false
+  })))));
+};
 
 function useHasStyleBook() {
   const fills = (0,external_wp_components_namespaceObject.__experimentalUseSlotFills)(SLOT_FILL_NAME);
@@ -13930,7 +14013,7 @@ function EditorCanvas(_ref) {
 
 
 const {
-  ExperimentalBlockEditorProvider
+  ExperimentalBlockEditorProvider: block_editor_ExperimentalBlockEditorProvider
 } = unlock(external_wp_blockEditor_namespaceObject.privateApis);
 const LAYOUT = {
   type: 'default',
@@ -14005,7 +14088,7 @@ function BlockEditor() {
   !isMobileViewport;
   const isViewMode = canvasMode === 'view';
   const showBlockAppender = isTemplatePart && hasBlocks || isViewMode ? false : undefined;
-  return (0,external_wp_element_namespaceObject.createElement)(ExperimentalBlockEditorProvider, {
+  return (0,external_wp_element_namespaceObject.createElement)(block_editor_ExperimentalBlockEditorProvider, {
     settings: settings,
     value: blocks,
     onInput: onInput,

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.2-beta5-55495';
+$wp_version = '6.2-beta5-55496';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.