@wordpress/edit-site 5.3.7 → 5.3.8

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;
@@ -2449,7 +2458,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;
 }
@@ -2516,6 +2525,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 +2567,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;
@@ -2449,7 +2458,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;
 }
@@ -2516,6 +2525,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 +2567,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.8",
 	"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.8",
+		"@wordpress/block-library": "^8.3.8",
 		"@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.8",
 		"@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.8",
 		"@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.8",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d14fea64bd9ad9d2d86047936974dbed39a5b5b3"
+	"gitHead": "446428841b54f47e5373d6e9723ef7ec24cf11b3"
 }

package/src/components/add-new-template/new-template.js

@@ -7,7 +7,8 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	NavigableMenu,
+	Tooltip,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -179,6 +180,11 @@ export default function NewTemplate( {
 	if ( ! missingTemplates.length ) {
 		return null;
 	}
+
+	const customTemplateDescription = __(
+		'A custom template can be manually applied to any post or page.'
+	);
+
 	return (
 		<>
 			<DropdownMenu
@@ -196,7 +202,7 @@ export default function NewTemplate( {
 						{ isCreatingTemplate && (
 							<TemplateActionsLoadingScreen />
 						) }
-						<NavigableMenu className="edit-site-new-template-dropdown__popover">
+						<div className="edit-site-new-template-dropdown__menu-groups">
 							<MenuGroup label={ postType.labels.add_new_item }>
 								{ missingTemplates.map( ( template ) => {
 									const {
@@ -207,44 +213,63 @@ export default function NewTemplate( {
 										icon,
 									} = template;
 									return (
-										<MenuItem
-											icon={
-												icon ||
-												TEMPLATE_ICONS[ slug ] ||
-												post
-											}
-											iconPosition="left"
-											info={ description }
+										<Tooltip
 											key={ slug }
-											onClick={ () =>
-												onClick
-													? onClick( template )
-													: createTemplate( template )
-											}
+											position="top right"
+											text={ description }
+											className="edit-site-new-template-dropdown__menu-item-tooltip"
 										>
-											{ title }
-										</MenuItem>
+											<MenuItem
+												icon={
+													icon ||
+													TEMPLATE_ICONS[ slug ] ||
+													post
+												}
+												iconPosition="left"
+												onClick={ () =>
+													onClick
+														? onClick( template )
+														: createTemplate(
+																template
+														  )
+												}
+											>
+												{ title }
+												{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+												 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+												<VisuallyHidden>
+													{ description }
+												</VisuallyHidden>
+											</MenuItem>
+										</Tooltip>
 									);
 								} ) }
 							</MenuGroup>
 							<MenuGroup>
-								<MenuItem
-									icon={ customGenericTemplateIcon }
-									iconPosition="left"
-									info={ __(
-										'Custom templates can be applied to any post or page.'
-									) }
-									key="custom-template"
-									onClick={ () =>
-										setShowCustomGenericTemplateModal(
-											true
-										)
-									}
+								<Tooltip
+									position="top right"
+									text={ customTemplateDescription }
+									className="edit-site-new-template-dropdown__menu-item-tooltip"
 								>
-									{ __( 'Custom template' ) }
-								</MenuItem>
+									<MenuItem
+										icon={ customGenericTemplateIcon }
+										iconPosition="left"
+										onClick={ () =>
+											setShowCustomGenericTemplateModal(
+												true
+											)
+										}
+									>
+										{ __( 'Custom template' ) }
+										{ /* TODO: This probably won't be needed if the <Tooltip> component is accessible.
+										 * @see https://github.com/WordPress/gutenberg/issues/48222 */ }
+										<VisuallyHidden>
+											{ customTemplateDescription }
+										</VisuallyHidden>
+									</MenuItem>
+								</Tooltip>
 							</MenuGroup>
-						</NavigableMenu>
+						</div>
 					</>
 				) }
 			</DropdownMenu>

package/src/components/add-new-template/style.scss

@@ -1,9 +1,20 @@
 .edit-site-new-template-dropdown {
-	.edit-site-new-template-dropdown__popover {
+	.edit-site-new-template-dropdown__menu-groups {
 		@include break-small() {
 			min-width: 300px;
 		}
 	}
+
+	// The specificity is needed to override the default tooltip styles.
+	&__menu-item-tooltip.components-tooltip .components-popover__content {
+		max-width: 320px;
+		padding: $grid-unit-10 $grid-unit-15;
+		border-radius: 2px;
+		white-space: pre-wrap;
+		min-width: 0;
+		width: auto;
+		text-align: left;
+	}
 }
 
 .edit-site-custom-template-modal {

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -5,10 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import {
-	BlockEditorProvider,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { BlockEditorProvider } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -17,7 +14,6 @@ import { createBlock } from '@wordpress/blocks';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useHistory } from '../routes';
 import NavigationMenuContent from './navigation-menu-content';
-import SidebarButton from '../sidebar-button';
 import { NavigationMenuLoader } from './loader';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
@@ -38,11 +34,6 @@ function SidebarNavigationScreenWrapper( { children, actions } ) {
 	);
 }
 
-const prioritizedInserterBlocks = [
-	'core/navigation-link/page',
-	'core/navigation-link',
-];
-
 export default function SidebarNavigationScreenNavigationMenus() {
 	const history = useHistory();
 	const { navigationMenus, hasResolvedNavigationMenus, storedSettings } =
@@ -109,18 +100,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		},
 		[ history ]
 	);
-	const orderInitialBlockItems = useCallback( ( items ) => {
-		items.sort( ( { id: aName }, { id: bName } ) => {
-			// 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 (
@@ -137,7 +116,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 			</SidebarNavigationScreenWrapper>
 		);
 	}
-	const { PrivateInserter } = unlock( blockEditorPrivateApis );
+
 	return (
 		<BlockEditorProvider
 			settings={ storedSettings }
@@ -145,23 +124,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 			onChange={ noop }
 			onInput={ noop }
 		>
-			<SidebarNavigationScreenWrapper
-				actions={
-					<PrivateInserter
-						rootClientId={ blocks[ 0 ].clientId }
-						position="bottom right"
-						isAppender
-						selectBlockOnInsert={ false }
-						shouldDirectInsert={ false }
-						__experimentalIsQuick
-						toggleProps={ {
-							as: SidebarButton,
-							label: __( 'Add menu item' ),
-						} }
-						orderInitialBlockItems={ orderInitialBlockItems }
-					/>
-				}
-			>
+			<SidebarNavigationScreenWrapper>
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
 					<NavigationMenuContent
 						rootClientId={ blocks[ 0 ].clientId }

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -61,3 +61,7 @@
 		}
 	}
 }
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
+	display: none;
+}

package/src/components/site-hub/style.scss

@@ -11,7 +11,7 @@
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
-	width: $header-height + 4px;
+	width: $header-height;
 	flex-shrink: 0;
 	background: $gray-900;
 }