@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/src/page-list/edit.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -9,14 +10,11 @@ import classnames from 'classnames';
 import {
 	BlockControls,
 	useBlockProps,
-	store as blockEditorStore,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import ServerSideRender from '@wordpress/server-side-render';
-import { ToolbarButton } from '@wordpress/components';
+import { ToolbarButton, Placeholder, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useEffect, useState, memo } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -24,103 +22,39 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import ConvertToLinksModal from './convert-to-links-modal';
+import { ItemSubmenuIcon } from '../navigation-link/icons';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 
-export default function PageListEdit( {
-	context,
-	clientId,
-	attributes,
-	setAttributes,
-} ) {
-	// Copy context to attributes to make it accessible in the editor's
-	// ServerSideRender
-	useEffect( () => {
-		const {
-			textColor,
-			customTextColor,
-			backgroundColor,
-			customBackgroundColor,
-			overlayTextColor,
-			customOverlayTextColor,
-			overlayBackgroundColor,
-			customOverlayBackgroundColor,
-		} = context;
-		setAttributes( {
-			textColor,
-			customTextColor,
-			backgroundColor,
-			customBackgroundColor,
-			overlayTextColor,
-			customOverlayTextColor,
-			overlayBackgroundColor,
-			customOverlayBackgroundColor,
-		} );
-	}, [
-		context.textColor,
-		context.customTextColor,
-		context.backgroundColor,
-		context.customBackgroundColor,
-		context.overlayTextColor,
-		context.customOverlayTextColor,
-		context.overlayBackgroundColor,
-		context.customOverlayBackgroundColor,
-	] );
-
-	const { textColor, backgroundColor, showSubmenuIcon, style } =
-		context || {};
-
-	const [ allowConvertToLinks, setAllowConvertToLinks ] = useState( false );
+export default function PageListEdit( { context, clientId } ) {
+	const { pagesByParentId, totalPages } = usePagesByParentId();
+
+	const isNavigationChild = 'showSubmenuIcon' in context;
+	const allowConvertToLinks =
+		isNavigationChild && totalPages <= MAX_PAGE_COUNT;
+
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
-			'has-text-color': !! textColor,
-			[ getColorClassName( 'color', textColor ) ]: !! textColor,
-			'has-background': !! backgroundColor,
+		className: classnames( 'wp-block-page-list', {
+			'has-text-color': !! context.textColor,
+			[ getColorClassName(
+				'color',
+				context.textColor
+			) ]: !! context.textColor,
+			'has-background': !! context.backgroundColor,
 			[ getColorClassName(
 				'background-color',
-				backgroundColor
-			) ]: !! backgroundColor,
-			'show-submenu-icons': !! showSubmenuIcon,
+				context.backgroundColor
+			) ]: !! context.backgroundColor,
 		} ),
-		style: { ...style?.color },
+		style: { ...context.style?.color },
 	} );
 
-	const isParentNavigation = useSelect(
-		( select ) => {
-			const { getBlockParentsByBlockName } = select( blockEditorStore );
-			return (
-				getBlockParentsByBlockName( clientId, 'core/navigation' )
-					.length > 0
-			);
-		},
-		[ clientId ]
-	);
-
-	useEffect( () => {
-		if ( isParentNavigation ) {
-			apiFetch( {
-				path: addQueryArgs( '/wp/v2/pages', {
-					per_page: 1,
-					_fields: [ 'id' ],
-				} ),
-				parse: false,
-			} ).then( ( res ) => {
-				setAllowConvertToLinks(
-					res.headers.get( 'X-WP-Total' ) <= MAX_PAGE_COUNT
-				);
-			} );
-		} else {
-			setAllowConvertToLinks( false );
-		}
-	}, [ isParentNavigation ] );
-
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
-
 	return (
 		<>
 			{ allowConvertToLinks && (
@@ -136,12 +70,150 @@ export default function PageListEdit( {
 					clientId={ clientId }
 				/>
 			) }
-			<div { ...blockProps }>
-				<ServerSideRender
-					block="core/page-list"
-					attributes={ attributes }
-				/>
-			</div>
+			{ totalPages === null && (
+				<div { ...blockProps }>
+					<Placeholder>
+						<Spinner />
+					</Placeholder>
+				</div>
+			) }
+			{ totalPages === 0 && (
+				<div { ...blockProps }>
+					<span>{ __( 'Page List: No pages to show.' ) }</span>
+				</div>
+			) }
+			{ totalPages > 0 && (
+				<ul { ...blockProps }>
+					<PageItems
+						context={ context }
+						pagesByParentId={ pagesByParentId }
+					/>
+				</ul>
+			) }
 		</>
 	);
 }
+
+function usePagesByParentId() {
+	const [ pagesByParentId, setPagesByParentId ] = useState( null );
+	const [ totalPages, setTotalPages ] = useState( null );
+
+	useEffect( () => {
+		async function performFetch() {
+			setPagesByParentId( null );
+			setTotalPages( null );
+
+			let pages = await apiFetch( {
+				path: addQueryArgs( '/wp/v2/pages', {
+					orderby: 'menu_order',
+					order: 'asc',
+					_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
+					per_page: -1,
+				} ),
+			} );
+
+			// TODO: Once the REST API supports passing multiple values to
+			// 'orderby', this can be removed.
+			// https://core.trac.wordpress.org/ticket/39037
+			pages = sortBy( pages, [ 'menu_order', 'title.rendered' ] );
+
+			setPagesByParentId(
+				pages.reduce( ( accumulator, page ) => {
+					const { parent } = page;
+					if ( accumulator.has( parent ) ) {
+						accumulator.get( parent ).push( page );
+					} else {
+						accumulator.set( parent, [ page ] );
+					}
+					return accumulator;
+				}, new Map() )
+			);
+			setTotalPages( pages.length );
+		}
+		performFetch();
+	}, [] );
+
+	return {
+		pagesByParentId,
+		totalPages,
+	};
+}
+
+const PageItems = memo( function PageItems( {
+	context,
+	pagesByParentId,
+	parentId = 0,
+	depth = 0,
+} ) {
+	const pages = pagesByParentId.get( parentId );
+
+	if ( ! pages?.length ) {
+		return [];
+	}
+
+	return pages.map( ( page ) => {
+		const hasChildren = pagesByParentId.has( page.id );
+		const isNavigationChild = 'showSubmenuIcon' in context;
+		return (
+			<li
+				key={ page.id }
+				className={ classnames( 'wp-block-pages-list__item', {
+					'has-child': hasChildren,
+					'wp-block-navigation-item': isNavigationChild,
+					'open-on-click': context.openSubmenusOnClick,
+					'open-on-hover-click':
+						! context.openSubmenusOnClick &&
+						context.showSubmenuIcon,
+				} ) }
+			>
+				{ hasChildren && context.openSubmenusOnClick ? (
+					<ItemSubmenuToggle title={ page.title?.rendered } />
+				) : (
+					<a
+						className={ classnames(
+							'wp-block-pages-list__item__link',
+							{
+								'wp-block-navigation-item__content': isNavigationChild,
+							}
+						) }
+						href={ page.link }
+					>
+						{ page.title?.rendered }
+					</a>
+				) }
+				{ hasChildren && (
+					<>
+						{ ! context.openSubmenusOnClick &&
+							context.showSubmenuIcon && <ItemSubmenuToggle /> }
+						<ul
+							className={ classnames( 'submenu-container', {
+								'wp-block-navigation__submenu-container': isNavigationChild,
+							} ) }
+						>
+							<PageItems
+								context={ context }
+								pagesByParentId={ pagesByParentId }
+								parentId={ page.id }
+								depth={ depth + 1 }
+							/>
+						</ul>
+					</>
+				) }
+			</li>
+		);
+	} );
+} );
+
+function ItemSubmenuToggle( { title } ) {
+	return (
+		<button
+			className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+			aria-expanded="false"
+		>
+			{ title }
+			<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
+				<ItemSubmenuIcon />
+			</span>
+		</button>
+	);
+}

package/src/page-list/editor.scss

@@ -50,3 +50,17 @@
 		margin-left: $grid-unit-15;
 	}
 }
+
+// Simulate open on click behaviour in the editor by opening on focus instead.
+
+.wp-block-page-list {
+	.open-on-click:focus-within {
+		> .wp-block-navigation__submenu-container {
+			visibility: visible;
+			opacity: 1;
+			width: auto;
+			height: auto;
+			min-width: 200px;
+		}
+	}
+}

package/src/page-list/index.php

@@ -22,8 +22,8 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 	);
 
 	// Text color.
-	$has_named_text_color  = array_key_exists( 'textColor', $attributes );
-	$has_picked_text_color = array_key_exists( 'customTextColor', $attributes );
+	$has_named_text_color  = array_key_exists( 'textColor', $context );
+	$has_picked_text_color = array_key_exists( 'customTextColor', $context );
 	$has_custom_text_color = isset( $context['style']['color']['text'] );
 
 	// If has text color.
@@ -34,17 +34,17 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	if ( $has_named_text_color ) {
 		// Add the color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $attributes['textColor'] ) );
+		$colors['css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['textColor'] ) );
 	} elseif ( $has_picked_text_color ) {
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['customTextColor'] );
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
 	} elseif ( $has_custom_text_color ) {
 		// Add the custom color inline style.
 		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] );
 	}
 
 	// Background color.
-	$has_named_background_color  = array_key_exists( 'backgroundColor', $attributes );
-	$has_picked_background_color = array_key_exists( 'customBackgroundColor', $attributes );
+	$has_named_background_color  = array_key_exists( 'backgroundColor', $context );
+	$has_picked_background_color = array_key_exists( 'customBackgroundColor', $context );
 	$has_custom_background_color = isset( $context['style']['color']['background'] );
 
 	// If has background color.
@@ -55,17 +55,17 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	if ( $has_named_background_color ) {
 		// Add the background-color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $attributes['backgroundColor'] ) );
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['backgroundColor'] ) );
 	} elseif ( $has_picked_background_color ) {
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
 	} elseif ( $has_custom_background_color ) {
 		// Add the custom background-color inline style.
 		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] );
 	}
 
 	// Overlay text color.
-	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $attributes );
-	$has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $attributes );
+	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $context );
+	$has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $context );
 
 	// If it has a text color.
 	if ( $has_named_overlay_text_color || $has_picked_overlay_text_color ) {
@@ -74,14 +74,14 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	// Give overlay colors priority, fall back to Navigation block colors, then global styles.
 	if ( $has_named_overlay_text_color ) {
-		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $attributes['overlayTextColor'] ) );
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['overlayTextColor'] ) );
 	} elseif ( $has_picked_overlay_text_color ) {
-		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $attributes['customOverlayTextColor'] );
+		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] );
 	}
 
 	// Overlay background colors.
-	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $attributes );
-	$has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $attributes );
+	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $context );
+	$has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $context );
 
 	// If has background color.
 	if ( $has_named_overlay_background_color || $has_picked_overlay_background_color ) {
@@ -89,9 +89,9 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 	}
 
 	if ( $has_named_overlay_background_color ) {
-		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $attributes['overlayBackgroundColor'] ) );
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['overlayBackgroundColor'] ) );
 	} elseif ( $has_picked_overlay_background_color ) {
-		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customOverlayBackgroundColor'] );
+		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] );
 	}
 
 	return $colors;
@@ -128,6 +128,9 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 /**
  * Outputs Page list markup from an array of pages with nested children.
  *
+ * @param boolean $open_submenus_on_click Whether to open submenus on click instead of hover.
+ * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
+ * @param boolean $is_navigation_child If block is a child of Navigation block.
  * @param array   $nested_pages The array of nested pages.
  * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
  * @param array   $colors Color information for overlay styles.
@@ -135,13 +138,14 @@ function block_core_page_list_build_css_font_sizes( $context ) {
  *
  * @return string List markup.
  */
-function block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
+function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
 	$markup = '';
 	foreach ( (array) $nested_pages as $page ) {
 		$css_class       = $page['is_active'] ? ' current-menu-item' : '';
+		$aria_current    = $page['is_active'] ? ' aria-current="page"' : '';
 		$style_attribute = '';
 
 		$css_class .= in_array( $page['page_id'], $active_page_ancestor_ids, true ) ? ' current-menu-ancestor' : '';
@@ -149,6 +153,18 @@ function block_core_page_list_render_nested_page_list( $nested_pages, $active_pa
 			$css_class .= ' has-child';
 		}
 
+		if ( $is_navigation_child ) {
+			$css_class .= ' wp-block-navigation-item';
+
+			if ( $open_submenus_on_click ) {
+				$css_class .= ' open-on-click';
+			} elseif ( $show_submenu_icons ) {
+				$css_class .= ' open-on-hover-click';
+			}
+		}
+
+		$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
+
 		// If this is the first level of submenus, include the overlay colors.
 		if ( 1 === $depth && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
 			$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
@@ -158,13 +174,32 @@ function block_core_page_list_render_nested_page_list( $nested_pages, $active_pa
 		}
 
 		$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
-		$markup .= '<a class="wp-block-pages-list__item__link" href="' . esc_url( $page['link'] ) . '">' . wp_kses(
-			$page['title'],
-			wp_kses_allowed_html( 'post' )
-		) . '</a>';
+
+		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
+			$markup .= '<button class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . wp_kses(
+				$page['title'],
+				wp_kses_allowed_html( 'post' )
+			) . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
+			'</button>';
+		} else {
+			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses(
+				$page['title'],
+				wp_kses_allowed_html( 'post' )
+			) . '</a>';
+		}
+
 		if ( isset( $page['children'] ) ) {
-			$markup .= '<span class="wp-block-page-list__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
-			$markup .= '<ul class="submenu-container">' . block_core_page_list_render_nested_page_list( $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
+			if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
+				$markup .= '<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
+				$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
+				$markup .= '</button>';
+			}
+			$markup .= '<ul class="submenu-container';
+			// Extra classname is added when the block is a child of Navigation.
+			if ( $is_navigation_child ) {
+				$markup .= ' wp-block-navigation__submenu-container';
+			}
+			$markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
 		}
 		$markup .= '</li>';
 	}
@@ -204,18 +239,18 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	static $block_id = 0;
 	$block_id++;
 
-	// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby values is resolved,
-	// update 'sort_column' to 'menu_order, post_title'. Sorting by both menu_order and post_title ensures a stable sort.
-	// Otherwise with pages that have the same menu_order value, we can see different ordering depending on how DB
-	// queries are constructed internally. For example we might see a different order when a limit is set to <499
-	// versus >= 500.
 	$all_pages = get_pages(
 		array(
-			'sort_column' => 'menu_order',
+			'sort_column' => 'menu_order,post_title',
 			'order'       => 'asc',
 		)
 	);
 
+	// If thare are no pages, there is nothing to show.
+	if ( empty( $all_pages ) ) {
+		return;
+	}
+
 	$top_level_pages = array();
 
 	$pages_with_children = array();
@@ -258,13 +293,15 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
-	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+	$is_navigation_child = array_key_exists( 'showSubmenuIcon', $block->context );
 
-	$items_markup = block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids, $colors );
+	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $block->context ) ? $block->context['openSubmenusOnClick'] : false;
 
-	if ( $block->context && $block->context['showSubmenuIcon'] ) {
-		$css_classes .= ' show-submenu-icons';
-	}
+	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $block->context ) ? $block->context['showSubmenuIcon'] : false;
+
+	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+
+	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(

package/src/page-list/style.scss

@@ -1,48 +1,14 @@
 // The Page List block should inherit navigation styles when nested within it
 .wp-block-navigation {
 	.wp-block-page-list {
-		display: flex;
+		display: contents;
 		flex-wrap: wrap;
 		background-color: inherit;
 	}
 
 	// Menu items generated by the page list do not get `has-[x]-background-color`,
 	// and must therefore inherit from the parent.
-	.wp-block-pages-list__item {
+	.wp-block-navigation-item {
 		background-color: inherit;
 	}
-
-	// Submenu icon indicator.
-	// The specific styles for the submenu indicator are inherited from the navigation block style.
-	.wp-block-page-list__submenu-icon {
-		display: none;
-	}
-
-	.show-submenu-icons {
-		.wp-block-page-list__submenu-icon {
-			display: inline-block;
-		}
-	}
-}
-
-.is-vertical .wp-block-navigation__container,
-.is-open .wp-block-navigation__container {
-	.wp-block-page-list {
-		display: block;
-	}
-}
-
-.is-open .wp-block-navigation__container {
-	.wp-block-page-list {
-		@include break-mobile() {
-			display: flex;
-		}
-	}
-}
-
-// space-between justification.
-.wp-block-page-list {
-	.items-justified-space-between & {
-		display: contents;
-	}
 }

package/src/page-list/test/convert-to-links-modal.js

@@ -149,7 +149,7 @@ describe( 'page list convert to links', () => {
 							name: 'core/navigation-link',
 						},
 					],
-					name: 'core/navigation-link',
+					name: 'core/navigation-submenu',
 				},
 				{
 					attributes: {
@@ -193,10 +193,10 @@ describe( 'page list convert to links', () => {
 									name: 'core/navigation-link',
 								},
 							],
-							name: 'core/navigation-link',
+							name: 'core/navigation-submenu',
 						},
 					],
-					name: 'core/navigation-link',
+					name: 'core/navigation-submenu',
 				},
 			] );
 		} );
@@ -344,7 +344,7 @@ describe( 'page list convert to links', () => {
 							name: 'core/navigation-link',
 						},
 					],
-					name: 'core/navigation-link',
+					name: 'core/navigation-submenu',
 				},
 				{
 					attributes: {
@@ -388,10 +388,10 @@ describe( 'page list convert to links', () => {
 									name: 'core/navigation-link',
 								},
 							],
-							name: 'core/navigation-link',
+							name: 'core/navigation-submenu',
 						},
 					],
-					name: 'core/navigation-link',
+					name: 'core/navigation-submenu',
 				},
 			] );
 		} );

package/src/paragraph/block.json

@@ -37,7 +37,14 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		},
 		"__experimentalSelector": "p",
 		"__unstablePasteTextInline": true

package/src/paragraph/edit.native.js

@@ -83,6 +83,7 @@ function ParagraphBlock( {
 				onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 				placeholder={ placeholder || __( 'Start writing…' ) }
 				textAlign={ align }
+				__unstableEmbedURLOnPaste
 			/>
 		</>
 	);