@wordpress/block-library 6.0.18 → 6.0.24

package/build-style/post-template/style.css

@@ -82,64 +82,37 @@
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template li,
-.wp-block-query-loop li {
-  clear: both;
-}
 .wp-block-post-template.is-flex-container,
 .wp-block-query-loop.is-flex-container {
   flex-direction: row;
   display: flex;
   flex-wrap: wrap;
+  gap: 1.25em;
 }
 .wp-block-post-template.is-flex-container li,
 .wp-block-query-loop.is-flex-container li {
-  margin: 0 0 1.25em 0;
+  margin: 0;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-post-template.is-flex-container li,
-.wp-block-query-loop.is-flex-container li {
-    margin-right: 1.25em;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n) {
-    margin-right: 0;
-  }
 }

package/build-style/style-rtl.css

@@ -1557,6 +1557,7 @@ ul.has-background {
 .wp-block-navigation.is-vertical {
   --navigation-layout-direction: column;
   --navigation-layout-justify: initial;
+  --navigation-layout-align: flex-start;
 }
 .wp-block-navigation.no-wrap {
   --navigation-layout-wrap: nowrap;
@@ -1959,10 +1960,10 @@ html.has-modal-open {
 
 .wp-block-navigation .wp-block-page-list {
   display: flex;
-  flex-direction: var(--layout-direction, initial);
-  justify-content: var(--layout-justify, initial);
-  align-items: var(--layout-align, initial);
-  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {
@@ -2264,66 +2265,39 @@ p.has-background {
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template li,
-.wp-block-query-loop li {
-  clear: both;
-}
 .wp-block-post-template.is-flex-container,
 .wp-block-query-loop.is-flex-container {
   flex-direction: row;
   display: flex;
   flex-wrap: wrap;
+  gap: 1.25em;
 }
 .wp-block-post-template.is-flex-container li,
 .wp-block-query-loop.is-flex-container li {
-  margin: 0 0 1.25em 0;
+  margin: 0;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-post-template.is-flex-container li,
-.wp-block-query-loop.is-flex-container li {
-    margin-left: 1.25em;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n) {
-    margin-left: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n) {
-    margin-left: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n) {
-    margin-left: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n) {
-    margin-left: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n) {
-    margin-left: 0;
-  }
 }
 
 .wp-block-query-pagination > .wp-block-query-pagination-next,
@@ -3122,11 +3096,11 @@ pre.wp-block-verse {
 }
 
 .has-normal-font-size {
-  font-size: var(--wp--preset--font-size--normal) !important;
+  font-size: var(--wp--preset--font-size--normal);
 }
 
 .has-huge-font-size {
-  font-size: var(--wp--preset--font-size--huge) !important;
+  font-size: var(--wp--preset--font-size--huge);
 }
 
 .has-text-align-center {

package/build-style/style.css

@@ -1579,6 +1579,7 @@ ul.has-background {
 .wp-block-navigation.is-vertical {
   --navigation-layout-direction: column;
   --navigation-layout-justify: initial;
+  --navigation-layout-align: flex-start;
 }
 .wp-block-navigation.no-wrap {
   --navigation-layout-wrap: nowrap;
@@ -1981,10 +1982,10 @@ html.has-modal-open {
 
 .wp-block-navigation .wp-block-page-list {
   display: flex;
-  flex-direction: var(--layout-direction, initial);
-  justify-content: var(--layout-justify, initial);
-  align-items: var(--layout-align, initial);
-  flex-wrap: var(--layout-wrap, wrap);
+  flex-direction: var(--navigation-layout-direction, initial);
+  justify-content: var(--navigation-layout-justify, initial);
+  align-items: var(--navigation-layout-align, initial);
+  flex-wrap: var(--navigation-layout-wrap, wrap);
   background-color: inherit;
 }
 .wp-block-navigation .wp-block-navigation-item {
@@ -2286,66 +2287,39 @@ p.has-background {
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template li,
-.wp-block-query-loop li {
-  clear: both;
-}
 .wp-block-post-template.is-flex-container,
 .wp-block-query-loop.is-flex-container {
   flex-direction: row;
   display: flex;
   flex-wrap: wrap;
+  gap: 1.25em;
 }
 .wp-block-post-template.is-flex-container li,
 .wp-block-query-loop.is-flex-container li {
-  margin: 0 0 1.25em 0;
+  margin: 0;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-post-template.is-flex-container li,
-.wp-block-query-loop.is-flex-container li {
-    margin-right: 1.25em;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li:nth-child(2n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li:nth-child(3n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li:nth-child(4n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li:nth-child(5n) {
-    margin-right: 0;
-  }
   .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
 .wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n),
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li:nth-child(6n) {
-    margin-right: 0;
-  }
 }
 
 .wp-block-query-pagination > .wp-block-query-pagination-next,
@@ -3149,11 +3123,11 @@ pre.wp-block-verse {
 }
 
 .has-normal-font-size {
-  font-size: var(--wp--preset--font-size--normal) !important;
+  font-size: var(--wp--preset--font-size--normal);
 }
 
 .has-huge-font-size {
-  font-size: var(--wp--preset--font-size--huge) !important;
+  font-size: var(--wp--preset--font-size--huge);
 }
 
 .has-text-align-center {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.18",
+	"version": "6.0.24",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,9 +37,9 @@
 		"@wordpress/api-fetch": "^5.2.6",
 		"@wordpress/autop": "^3.2.3",
 		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-editor": "^8.0.13",
+		"@wordpress/block-editor": "^8.0.15",
 		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.0",
+		"@wordpress/components": "^19.2.2",
 		"@wordpress/compose": "^5.0.7",
 		"@wordpress/core-data": "^4.0.9",
 		"@wordpress/data": "^6.1.5",
@@ -52,14 +52,13 @@
 		"@wordpress/html-entities": "^3.2.3",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.15",
 		"@wordpress/is-shallow-equal": "^4.2.1",
 		"@wordpress/keycodes": "^3.2.4",
 		"@wordpress/notices": "^3.2.8",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.19",
-		"@wordpress/rich-text": "^5.0.7",
-		"@wordpress/server-side-render": "^3.0.17",
+		"@wordpress/reusable-blocks": "^3.0.21",
+		"@wordpress/rich-text": "^5.0.8",
+		"@wordpress/server-side-render": "^3.0.19",
 		"@wordpress/url": "^3.3.1",
 		"@wordpress/viewport": "^4.0.7",
 		"classnames": "^2.3.1",
@@ -67,11 +66,11 @@
 		"fast-average-color": "4.3.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
-		"micromodal": "^0.4.9",
+		"micromodal": "^0.4.10",
 		"moment": "^2.22.1"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f70f4664ac641bd107481c5c67ee6f5556a0a381"
+	"gitHead": "823b3225e81748f8febb808e780e2b71478bc854"
 }

package/src/common.scss

@@ -22,11 +22,11 @@
 }
 
 .has-normal-font-size {
-	font-size: var(--wp--preset--font-size--normal) !important;
+	font-size: var(--wp--preset--font-size--normal);
 }
 
 .has-huge-font-size {
-	font-size: var(--wp--preset--font-size--huge) !important;
+	font-size: var(--wp--preset--font-size--huge);
 }
 
 // Text alignments.

package/src/editor.scss

@@ -70,11 +70,11 @@
 }
 
 .editor-styles-wrapper .has-normal-font-size {
-	font-size: var(--wp--preset--font-size--normal) !important;
+	font-size: var(--wp--preset--font-size--normal);
 }
 
 .editor-styles-wrapper .has-huge-font-size {
-	font-size: var(--wp--preset--font-size--huge) !important;
+	font-size: var(--wp--preset--font-size--huge);
 }
 
 /**

package/src/gallery/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map, some } from 'lodash';
+import { map, some, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -97,11 +97,8 @@ function runV2Migration( attributes ) {
 
 	return [
 		{
-			caption: attributes.caption,
-			columns: attributes.columns,
-			imageCrop: attributes.imageCrop,
+			...omit( attributes, [ 'images', 'ids' ] ),
 			linkTo,
-			sizeSlug: attributes.sizeSlug,
 			allowResize: false,
 		},
 		imageBlocks,

package/src/gallery/edit.js

@@ -53,11 +53,6 @@ import useShortCodeTransform from './use-short-code-transform';
 import useGetNewImages from './use-get-new-images';
 import useGetMedia from './use-get-media';
 
-/**
- * Internal dependencies
- */
-import useMobileWarning from './use-mobile-warning';
-
 const MAX_COLUMNS = 8;
 const linkOptions = [
 	{ value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) },
@@ -139,8 +134,6 @@ function GalleryEdit( props ) {
 
 	const newImages = useGetNewImages( images, imageData );
 
-	useMobileWarning( newImages );
-
 	useEffect( () => {
 		newImages?.forEach( ( newImage ) => {
 			updateBlockAttributes( newImage.clientId, {

package/src/navigation/block.json

@@ -92,7 +92,6 @@
 			"__experimentalFontWeight": true,
 			"__experimentalTextTransform": true,
 			"__experimentalFontFamily": true,
-			"__experimentalTextDecoration": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/navigation/edit/index.js

@@ -45,6 +45,7 @@ import { __ } from '@wordpress/i18n';
  */
 import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
+import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
 import PlaceholderPreview from './placeholder/placeholder-preview';
 import ResponsiveWrapper from './responsive-wrapper';
@@ -151,6 +152,10 @@ function Navigation( {
 		`navigationMenu/${ ref }`
 	);
 
+	// Preload classic menus, so that they don't suddenly pop-in when viewing
+	// the Select Menu dropdown.
+	useNavigationEntities();
+
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
@@ -474,12 +479,15 @@ function Navigation( {
 							>
 								{ ( { onClose } ) => (
 									<NavigationMenuSelector
+										clientId={ clientId }
 										onSelect={ ( { id } ) => {
 											setRef( id );
 											onClose();
 										} }
 										onCreateNew={ startWithEmptyMenu }
-										showCreate={ canUserCreateNavigation }
+										canUserCreateNavigation={
+											canUserCreateNavigation
+										}
 									/>
 								) }
 							</ToolbarDropdownMenu>

package/src/navigation/edit/navigation-menu-selector.js

@@ -11,18 +11,47 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
+import useNavigationEntities from '../use-navigation-entities';
+import useConvertClassicMenu from '../use-convert-classic-menu';
+import useCreateNavigationMenu from './use-create-navigation-menu';
 
 export default function NavigationMenuSelector( {
+	clientId,
 	onSelect,
 	onCreateNew,
-	showCreate = false,
+	canUserCreateNavigation = false,
 } ) {
+	const {
+		menus: classicMenus,
+		hasMenus: hasClassicMenus,
+	} = useNavigationEntities();
 	const { navigationMenus } = useNavigationMenu();
 	const ref = useEntityId( 'postType', 'wp_navigation' );
 
+	const createNavigationMenu = useCreateNavigationMenu( clientId );
+
+	const onFinishMenuCreation = async (
+		blocks,
+		navigationMenuTitle = null
+	) => {
+		if ( ! canUserCreateNavigation ) {
+			return;
+		}
+
+		const navigationMenu = await createNavigationMenu(
+			navigationMenuTitle,
+			blocks
+		);
+		onSelect( navigationMenu );
+	};
+
+	const convertClassicMenuToBlocks = useConvertClassicMenu(
+		onFinishMenuCreation
+	);
+
 	return (
 		<>
-			<MenuGroup>
+			<MenuGroup label={ __( 'Menus' ) }>
 				<MenuItemsChoice
 					value={ ref }
 					onSelect={ ( selectedId ) =>
@@ -46,19 +75,40 @@ export default function NavigationMenuSelector( {
 					} ) }
 				/>
 			</MenuGroup>
-			{ showCreate && (
-				<MenuGroup>
-					<MenuItem onClick={ onCreateNew }>
-						{ __( 'Create new menu' ) }
-					</MenuItem>
-					<MenuItem
-						href={ addQueryArgs( 'edit.php', {
-							post_type: 'wp_navigation',
-						} ) }
-					>
-						{ __( 'Manage menus' ) }
-					</MenuItem>
-				</MenuGroup>
+			{ canUserCreateNavigation && (
+				<>
+					{ hasClassicMenus && (
+						<MenuGroup label={ __( 'Classic Menus' ) }>
+							{ classicMenus.map( ( menu ) => {
+								return (
+									<MenuItem
+										onClick={ () => {
+											convertClassicMenuToBlocks(
+												menu.id,
+												menu.name
+											);
+										} }
+										key={ menu.id }
+									>
+										{ decodeEntities( menu.name ) }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+					) }
+					<MenuGroup label={ __( 'Tools' ) }>
+						<MenuItem onClick={ onCreateNew }>
+							{ __( 'Create new menu' ) }
+						</MenuItem>
+						<MenuItem
+							href={ addQueryArgs( 'edit.php', {
+								post_type: 'wp_navigation',
+							} ) }
+						>
+							{ __( 'Manage menus' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
 			) }
 		</>
 	);

package/src/navigation/edit/placeholder/index.js

@@ -9,7 +9,6 @@ import {
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
-import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -20,14 +19,13 @@ import { decodeEntities } from '@wordpress/html-entities';
 
 import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
-import menuItemsToBlocks from '../../menu-items-to-blocks';
 import useNavigationMenu from '../../use-navigation-menu';
 import useCreateNavigationMenu from '../use-create-navigation-menu';
+import useConvertClassicMenu from '../../use-convert-classic-menu';
 
 const ExistingMenusDropdown = ( {
 	canSwitchNavigationMenu,
 	navigationMenus,
-	setSelectedMenu,
 	onFinish,
 	menus,
 	onCreateFromMenu,
@@ -53,7 +51,6 @@ const ExistingMenusDropdown = ( {
 								return (
 									<MenuItem
 										onClick={ () => {
-											setSelectedMenu( menu.id );
 											onFinish( menu );
 										} }
 										onClose={ onClose }
@@ -72,8 +69,10 @@ const ExistingMenusDropdown = ( {
 								return (
 									<MenuItem
 										onClick={ () => {
-											setSelectedMenu( menu.id );
-											onCreateFromMenu( menu.name );
+											onCreateFromMenu(
+												menu.id,
+												menu.name
+											);
 										} }
 										onClose={ onClose }
 										key={ menu.id }
@@ -97,9 +96,6 @@ export default function NavigationPlaceholder( {
 	hasResolvedNavigationMenus,
 	canUserCreateNavigation = false,
 } ) {
-	const [ selectedMenu, setSelectedMenu ] = useState();
-	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-	const [ menuName, setMenuName ] = useState( '' );
 	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
 	const onFinishMenuCreation = async (
@@ -117,39 +113,18 @@ export default function NavigationPlaceholder( {
 		onFinish( navigationMenu, blocks );
 	};
 
+	const convertClassicMenu = useConvertClassicMenu( onFinishMenuCreation );
+
 	const {
 		isResolvingPages,
 		menus,
 		isResolvingMenus,
-		menuItems,
-		hasResolvedMenuItems,
 		hasPages,
 		hasMenus,
-	} = useNavigationEntities( selectedMenu );
+	} = useNavigationEntities();
 
 	const isStillLoading = isResolvingPages || isResolvingMenus;
 
-	const createFromMenu = useCallback(
-		( name ) => {
-			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
-			onFinishMenuCreation( blocks, name );
-		},
-		[ menuItems, menuItemsToBlocks, onFinish ]
-	);
-
-	const onCreateFromMenu = ( name ) => {
-		// If we have menu items, create the block right away.
-		if ( hasResolvedMenuItems ) {
-			createFromMenu( name );
-			return;
-		}
-
-		// Otherwise, create the block when resolution finishes.
-		setIsCreatingFromMenu( true );
-		// Store the name to use later.
-		setMenuName( name );
-	};
-
 	const onCreateEmptyMenu = () => {
 		onFinishMenuCreation( [] );
 	};
@@ -159,15 +134,6 @@ export default function NavigationPlaceholder( {
 		onFinishMenuCreation( block );
 	};
 
-	useEffect( () => {
-		// If the user selected a menu but we had to wait for menu items to
-		// finish resolving, then create the block once resolution finishes.
-		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
-			createFromMenu( menuName );
-			setIsCreatingFromMenu( false );
-		}
-	}, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] );
-
 	const { navigationMenus } = useNavigationMenu();
 
 	return (
@@ -194,10 +160,9 @@ export default function NavigationPlaceholder( {
 											canSwitchNavigationMenu
 										}
 										navigationMenus={ navigationMenus }
-										setSelectedMenu={ setSelectedMenu }
 										onFinish={ onFinish }
 										menus={ menus }
-										onCreateFromMenu={ onCreateFromMenu }
+										onCreateFromMenu={ convertClassicMenu }
 										showClassicMenus={
 											canUserCreateNavigation
 										}

package/src/navigation/style.scss

@@ -117,6 +117,7 @@ $navigation-icon-size: 24px;
 	&.is-vertical {
 		--navigation-layout-direction: column;
 		--navigation-layout-justify: initial;
+		--navigation-layout-align: flex-start;
 	}
 
 	&.no-wrap {