@wordpress/block-library 7.16.0 → 7.18.0

package/src/navigation/edit/index.js

@@ -86,6 +86,7 @@ function Navigation( {
 		openSubmenusOnClick,
 		overlayMenu,
 		showSubmenuIcon,
+		templateLock,
 		layout: {
 			justifyContent,
 			orientation = 'horizontal',
@@ -107,7 +108,7 @@ function Navigation( {
 
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
-	useNavigationEntities();
+	const { menus: classicMenus } = useNavigationEntities();
 
 	const [ showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice ] =
 		useNavigationNotice( {
@@ -216,6 +217,20 @@ function Navigation( {
 	const navMenuResolvedButMissing =
 		hasResolvedNavigationMenus && isNavigationMenuMissing;
 
+	const {
+		convert: convertClassicMenu,
+		status: classicMenuConversionStatus,
+		error: classicMenuConversionError,
+	} = useConvertClassicToBlockMenu( clientId );
+
+	const isConvertingClassicMenu =
+		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
+
+	// Only autofallback to published menus.
+	const fallbackNavigationMenus = navigationMenus?.filter(
+		( menu ) => menu.status === 'publish'
+	);
+
 	// Attempt to retrieve and prioritize any existing navigation menu unless:
 	// - the are uncontrolled inner blocks already present in the block.
 	// - the user is creating a new menu.
@@ -228,23 +243,17 @@ function Navigation( {
 			hasUncontrolledInnerBlocks ||
 			isCreatingNavigationMenu ||
 			ref ||
-			! navigationMenus?.length
+			! fallbackNavigationMenus?.length
 		) {
 			return;
 		}
 
-		navigationMenus.sort( ( menuA, menuB ) => {
+		fallbackNavigationMenus.sort( ( menuA, menuB ) => {
 			const menuADate = new Date( menuA.date );
 			const menuBDate = new Date( menuB.date );
 			return menuADate.getTime() < menuBDate.getTime();
 		} );
 
-		// Only autofallback to published menus.
-		const fallbackNavigationMenus = navigationMenus.filter(
-			( menu ) => menu.status === 'publish'
-		);
-		if ( fallbackNavigationMenus.length === 0 ) return;
-
 		/**
 		 *  This fallback displays (both in editor and on front)
 		 *  a list of pages only if no menu (user assigned or
@@ -256,16 +265,26 @@ function Navigation( {
 		setRef( fallbackNavigationMenus[ 0 ].id );
 	}, [ navigationMenus ] );
 
-	const navRef = useRef();
+	useEffect( () => {
+		if (
+			! hasResolvedNavigationMenus ||
+			isConvertingClassicMenu ||
+			fallbackNavigationMenus?.length > 0 ||
+			classicMenus?.length !== 1
+		) {
+			return;
+		}
 
-	const {
-		convert: convertClassicMenu,
-		status: classicMenuConversionStatus,
-		error: classicMenuConversionError,
-	} = useConvertClassicToBlockMenu( clientId );
+		// If there's non fallback navigation menus and
+		// only one classic menu then create a new navigation menu based on it.
+		convertClassicMenu(
+			classicMenus[ 0 ].id,
+			classicMenus[ 0 ].name,
+			'publish'
+		);
+	}, [ hasResolvedNavigationMenus ] );
 
-	const isConvertingClassicMenu =
-		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
+	const navRef = useRef();
 
 	// The standard HTML5 tag for the block wrapper.
 	const TagName = 'nav';
@@ -280,10 +299,11 @@ function Navigation( {
 		! isCreatingNavigationMenu &&
 		! isConvertingClassicMenu &&
 		hasResolvedNavigationMenus &&
+		classicMenus?.length === 0 &&
 		! hasUncontrolledInnerBlocks;
 
 	useEffect( () => {
-		if ( isPlaceholder && ! ref ) {
+		if ( isPlaceholder ) {
 			/**
 			 *  this fallback only displays (both in editor and on front)
 			 *  the list of pages block if no menu is available as a fallback.
@@ -461,24 +481,22 @@ function Navigation( {
 
 	// Prompt the user to publish the menu they have set as a draft
 	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
-	useEffect( async () => {
+	useEffect( () => {
 		hideMenuAutoPublishDraftNotice();
-		if ( ! isDraftNavigationMenu ) return;
-		try {
-			await editEntityRecord(
-				'postType',
-				'wp_navigation',
-				navigationMenu?.id,
-				{
-					status: 'publish',
-				},
-				{ throwOnError: true }
-			);
-		} catch {
+		if ( ! isDraftNavigationMenu ) {
+			return;
+		}
+		editEntityRecord(
+			'postType',
+			'wp_navigation',
+			navigationMenu?.id,
+			{ status: 'publish' },
+			{ throwOnError: true }
+		).catch( () => {
 			showMenuAutoPublishDraftNotice(
-				__( 'Error ocurred while publishing the navigation menu.' )
+				__( 'Error occurred while publishing the navigation menu.' )
 			);
-		}
+		} );
 	}, [ isDraftNavigationMenu, navigationMenu ] );
 
 	const stylingInspectorControls = (
@@ -642,7 +660,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {
@@ -686,6 +705,7 @@ function Navigation( {
 					<UnsavedInnerBlocks
 						blocks={ uncontrolledInnerBlocks }
 						clientId={ clientId }
+						templateLock={ templateLock }
 						navigationMenus={ navigationMenus }
 						hasSelection={ isSelected || isInnerBlockSelected }
 						hasSavedUnsavedInnerBlocks={
@@ -723,7 +743,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {
@@ -808,7 +829,8 @@ function Navigation( {
 					onSelectClassicMenu={ async ( classicMenu ) => {
 						const navMenu = await convertClassicMenu(
 							classicMenu.id,
-							classicMenu.name
+							classicMenu.name,
+							'draft'
 						);
 						if ( navMenu ) {
 							handleUpdateMenu( navMenu.id, {
@@ -836,7 +858,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {
@@ -921,6 +944,7 @@ function Navigation( {
 									hasCustomPlaceholder={
 										!! CustomPlaceholder
 									}
+									templateLock={ templateLock }
 									orientation={ orientation }
 								/>
 							) }

package/src/navigation/edit/inner-blocks.js

@@ -40,6 +40,7 @@ export default function NavigationInnerBlocks( {
 	clientId,
 	hasCustomPlaceholder,
 	orientation,
+	templateLock,
 } ) {
 	const {
 		isImmediateParentOfSelectedBlock,
@@ -115,6 +116,7 @@ export default function NavigationInnerBlocks( {
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: shouldDirectInsert,
 			orientation,
+			templateLock,
 
 			// As an exception to other blocks which feature nesting, show
 			// the block appender even when a child block is selected.
@@ -129,11 +131,6 @@ export default function NavigationInnerBlocks( {
 				parentOrChildHasSelection
 					? InnerBlocks.ButtonBlockAppender
 					: false,
-
-			// Template lock set to false here so that the Nav
-			// Block on the experimental menus screen does not
-			// inherit templateLock={ 'all' }.
-			templateLock: false,
 			__experimentalLayout: LAYOUT,
 			placeholder: showPlaceholder ? placeholder : undefined,
 		}

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -172,8 +172,15 @@ export default function UnsavedInnerBlocks( {
 
 	return (
 		<>
-			<Wrapper { ...innerBlocksProps } />
-			{ isSaving && <Spinner /> }
+			{ isSaving ? (
+				<Spinner
+					className={
+						'wp-block-navigation__uncontrolled-inner-blocks-loading-indicator'
+					}
+				/>
+			) : (
+				<Wrapper { ...innerBlocksProps } />
+			) }
 		</>
 	);
 }

package/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -17,6 +17,10 @@ export const CLASSIC_MENU_CONVERSION_ERROR = 'error';
 export const CLASSIC_MENU_CONVERSION_PENDING = 'pending';
 export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
 
+// This is needed to ensure that multiple components using this hook
+// do not import the same classic menu twice.
+let classicMenuBeingConvertedId = null;
+
 function useConvertClassicToBlockMenu( clientId ) {
 	/*
 	 * The wp_navigation post is created as a draft so the changes on the frontend and
@@ -32,7 +36,11 @@ function useConvertClassicToBlockMenu( clientId ) {
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
 	const [ error, setError ] = useState( null );
 
-	async function convertClassicMenuToBlockMenu( menuId, menuName ) {
+	async function convertClassicMenuToBlockMenu(
+		menuId,
+		menuName,
+		postStatus = 'publish'
+	) {
 		let navigationMenu;
 		let classicMenuItems;
 
@@ -76,7 +84,8 @@ function useConvertClassicToBlockMenu( clientId ) {
 		try {
 			navigationMenu = await createNavigationMenu(
 				menuName,
-				innerBlocks
+				innerBlocks,
+				postStatus
 			);
 
 			/**
@@ -91,7 +100,7 @@ function useConvertClassicToBlockMenu( clientId ) {
 				'wp_navigation',
 				navigationMenu.id,
 				{
-					status: 'publish',
+					status: postStatus,
 				},
 				{ throwOnError: true }
 			);
@@ -111,7 +120,15 @@ function useConvertClassicToBlockMenu( clientId ) {
 		return navigationMenu;
 	}
 
-	const convert = useCallback( async ( menuId, menuName ) => {
+	const convert = useCallback( async ( menuId, menuName, postStatus ) => {
+		// Check whether this classic menu is being imported already.
+		if ( classicMenuBeingConvertedId === menuId ) {
+			return;
+		}
+
+		// Set the ID for the currently importing classic menu.
+		classicMenuBeingConvertedId = menuId;
+
 		if ( ! menuId || ! menuName ) {
 			setError( 'Unable to convert menu. Missing menu details.' );
 			setStatus( CLASSIC_MENU_CONVERSION_ERROR );
@@ -121,15 +138,25 @@ function useConvertClassicToBlockMenu( clientId ) {
 		setStatus( CLASSIC_MENU_CONVERSION_PENDING );
 		setError( null );
 
-		return await convertClassicMenuToBlockMenu( menuId, menuName )
+		return await convertClassicMenuToBlockMenu(
+			menuId,
+			menuName,
+			postStatus
+		)
 			.then( ( navigationMenu ) => {
 				setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+				// Reset the ID for the currently importing classic menu.
+				classicMenuBeingConvertedId = null;
 				return navigationMenu;
 			} )
 			.catch( ( err ) => {
 				setError( err?.message );
+				// Reset the ID for the currently importing classic menu.
 				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
 
+				// Reset the ID for the currently importing classic menu.
+				classicMenuBeingConvertedId = null;
+
 				// Rethrow error for debugging.
 				throw new Error(
 					sprintf(

package/src/navigation/edit/use-create-navigation-menu.js

@@ -16,10 +16,7 @@ export const CREATE_NAVIGATION_MENU_ERROR = 'error';
 export const CREATE_NAVIGATION_MENU_PENDING = 'pending';
 export const CREATE_NAVIGATION_MENU_IDLE = 'idle';
 
-export default function useCreateNavigationMenu(
-	clientId,
-	postStatus = 'publish'
-) {
+export default function useCreateNavigationMenu( clientId ) {
 	const [ status, setStatus ] = useState( CREATE_NAVIGATION_MENU_IDLE );
 	const [ value, setValue ] = useState( null );
 	const [ error, setError ] = useState( null );
@@ -30,7 +27,7 @@ export default function useCreateNavigationMenu(
 	// This callback uses data from the two placeholder steps and only creates
 	// a new navigation menu when the user completes the final step.
 	const create = useCallback(
-		async ( title = null, blocks = [] ) => {
+		async ( title = null, blocks = [], postStatus ) => {
 			// Guard against creating Navigations without a title.
 			// Note you can pass no title, but if one is passed it must be
 			// a string otherwise the title may end up being empty.

package/src/navigation/editor.scss

@@ -261,10 +261,6 @@ $color-control-label-height: 20px;
 	}
 }
 
-.wp-block-navigation-placeholder .components-spinner {
-	margin-top: 0;
-}
-
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
@@ -291,6 +287,7 @@ $color-control-label-height: 20px;
 		bottom: 0;
 		left: 0;
 		pointer-events: none;
+		border: $border-width dashed currentColor;
 		@include placeholder-style();
 
 		// Inherit border radius from style variations.
@@ -566,6 +563,10 @@ body.editor-styles-wrapper
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
+.wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
+	margin-top: 0;
+}
+
 @keyframes fadeouthalf {
 	0% {
 		opacity: 1;

package/src/navigation/index.php

@@ -248,6 +248,99 @@ function block_core_navigation_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
+/**
+ * Get the classic navigation menu to use as a fallback.
+ *
+ * @return object WP_Term The classic navigation.
+ */
+function block_core_navigation_get_classic_menu_fallback() {
+	$classic_nav_menus = wp_get_nav_menus();
+
+	// If menus exist.
+	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) && count( $classic_nav_menus ) === 1 ) {
+		// Use the first classic menu only. Handles simple use case where user has a single
+		// classic menu and switches to a block theme. In future this maybe expanded to
+		// determine the most appropriate classic menu to be used based on location.
+		return $classic_nav_menus[0];
+	}
+}
+
+/**
+ * Converts a classic navigation to blocks.
+ *
+ * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
+	// BEGIN: Code that already exists in wp_nav_menu().
+	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
+
+	// Set up the $menu_item variables.
+	_wp_menu_item_classes_by_context( $menu_items );
+
+	$sorted_menu_items = array();
+	foreach ( (array) $menu_items as $menu_item ) {
+		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
+	}
+
+	unset( $menu_items, $menu_item );
+
+	// END: Code that already exists in wp_nav_menu().
+
+	$menu_items_by_parent_id = array();
+	foreach ( $sorted_menu_items as $menu_item ) {
+		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
+	}
+
+	$inner_blocks = block_core_navigation_parse_blocks_from_menu_items(
+		isset( $menu_items_by_parent_id[0] )
+			? $menu_items_by_parent_id[0]
+			: array(),
+		$menu_items_by_parent_id
+	);
+
+	return serialize_blocks( $inner_blocks );
+}
+
+/**
+ * If there's a the classic menu then use it as a fallback.
+ *
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_maybe_use_classic_menu_fallback() {
+	// See if we have a classic menu.
+	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
+
+	if ( ! $classic_nav_menu ) {
+		return;
+	}
+
+	// If we have a classic menu then convert it to blocks.
+	$classic_nav_menu_blocks = block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu );
+
+	if ( empty( $classic_nav_menu_blocks ) ) {
+		return;
+	}
+
+	// Create a new navigation menu from the classic menu.
+	$wp_insert_post_result = wp_insert_post(
+		array(
+			'post_content' => $classic_nav_menu_blocks,
+			'post_title'   => $classic_nav_menu->slug,
+			'post_name'    => $classic_nav_menu->slug,
+			'post_status'  => 'publish',
+			'post_type'    => 'wp_navigation',
+		),
+		true // So that we can check whether the result is an error.
+	);
+
+	if ( is_wp_error( $wp_insert_post_result ) ) {
+		return;
+	}
+
+	// Fetch the most recently published navigation which will be the classic one created above.
+	return block_core_navigation_get_most_recently_published_navigation();
+}
 
 /**
  * Finds the most recently published `wp_navigation` Post.
@@ -255,7 +348,8 @@ function block_core_navigation_render_submenu_icon() {
  * @return WP_Post|null the first non-empty Navigation or null.
  */
 function block_core_navigation_get_most_recently_published_navigation() {
-	// We default to the most recently created menu.
+
+	// Default to the most recently created menu.
 	$parsed_args = array(
 		'post_type'      => 'wp_navigation',
 		'no_found_rows'  => true,
@@ -307,9 +401,6 @@ function block_core_navigation_get_fallback_blocks() {
 	$page_list_fallback = array(
 		array(
 			'blockName' => 'core/page-list',
-			'attrs'     => array(
-				'__unstableMaxPages' => 4,
-			),
 		),
 	);
 
@@ -322,7 +413,13 @@ function block_core_navigation_get_fallback_blocks() {
 
 	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
 
-	// Prefer using the first non-empty Navigation as fallback if available.
+	// If there are no navigation posts then try to find a classic menu
+	// and convert it into a block based navigation menu.
+	if ( ! $navigation_post ) {
+		$navigation_post = block_core_navigation_maybe_use_classic_menu_fallback();
+	}
+
+	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
 		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( parse_blocks( $navigation_post->post_content ) );
 
@@ -649,7 +746,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$toggle_aria_label_close,
 		esc_attr( implode( ' ', $responsive_container_classes ) ),
 		esc_attr( implode( ' ', $open_button_classes ) ),
-		safecss_filter_attr( $colors['overlay_inline_styles'] ),
+		esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
 		__( 'Menu' ),
 		$toggle_button_content,
 		$toggle_close_button_content

package/src/navigation/style.scss

@@ -359,7 +359,9 @@ button.wp-block-navigation-item__content {
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
 :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),
-:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content) {
 	padding: 0.5em 1em;
 }
 

package/src/navigation-link/edit.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, unescape } from 'lodash';
+import escapeHtml from 'escape-html';
+import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -262,8 +263,8 @@ export const updateNavigationLinkBlockAttributes = (
 	// - https://github.com/WordPress/gutenberg/pull/41063
 	// - https://github.com/WordPress/gutenberg/pull/18617.
 	const label = useNewLabel
-		? escape( newLabel )
-		: originalLabel || escape( newUrlWithoutHttp );
+		? escapeHtml( newLabel )
+		: originalLabel || escapeHtml( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -467,7 +468,7 @@ export default function NavigationLinkEdit( {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
-	const itemLabelPlaceholder = __( 'Add link…' );
+	const itemLabelPlaceholder = __( 'Add label…' );
 	const ref = useRef();
 
 	const pagesPermissions = useResourcePermissions( 'pages' );
@@ -846,7 +847,7 @@ export default function NavigationLinkEdit( {
 					) }
 					{ isLinkOpen && (
 						<Popover
-							position="bottom center"
+							placement="bottom"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							shift

package/src/navigation-link/index.php

@@ -98,7 +98,14 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
 	}
 
 	return $font_sizes;

package/src/navigation-submenu/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, without } from 'lodash';
+import escapeHtml from 'escape-html';
 
 /**
  * WordPress dependencies
@@ -248,8 +248,8 @@ export const updateNavigationLinkBlockAttributes = (
 		normalizedTitle !== normalizedURL &&
 		originalLabel !== title;
 	const label = escapeTitle
-		? escape( title )
-		: originalLabel || escape( normalizedURL );
+		? escapeHtml( title )
+		: originalLabel || escapeHtml( normalizedURL );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -486,7 +486,9 @@ export default function NavigationSubmenuEdit( {
 	const innerBlocksColors = getColors( context, true );
 
 	const allowedBlocks = isAtMaxNesting
-		? without( ALLOWED_BLOCKS, 'core/navigation-submenu' )
+		? ALLOWED_BLOCKS.filter(
+				( blockName ) => blockName !== 'core/navigation-submenu'
+		  )
 		: ALLOWED_BLOCKS;
 
 	const innerBlocksProps = useInnerBlocksProps(
@@ -631,7 +633,7 @@ export default function NavigationSubmenuEdit( {
 					}
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<Popover
-							position="bottom center"
+							placement="bottom"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							shift

package/src/navigation-submenu/index.php

@@ -98,7 +98,14 @@ function block_core_navigation_submenu_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
 	}
 
 	return $font_sizes;

package/src/page-list/block.json

@@ -7,11 +7,7 @@
 	"description": "Display a list of all pages.",
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
-	"attributes": {
-		"__unstableMaxPages": {
-			"type": "number"
-		}
-	},
+	"attributes": {},
 	"usesContext": [
 		"textColor",
 		"customTextColor",