@wordpress/block-library 8.14.0 → 8.15.0

package/src/latest-posts/edit.js

@@ -230,6 +230,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					displayPostContentRadio === 'excerpt' && (
 						<RangeControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label={ __( 'Max number of words' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -359,6 +360,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ postLayout === 'grid' && (
 					<RangeControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>

package/src/list/edit.js

@@ -177,10 +177,12 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 			{ controls }
 			{ ordered && (
 				<OrderedListSettings
-					setAttributes={ setAttributes }
-					ordered={ ordered }
-					reversed={ reversed }
-					start={ start }
+					{ ...{
+						setAttributes,
+						reversed,
+						start,
+						type,
+					} }
 				/>
 			) }
 		</>

package/src/list/test/edit.native.js

@@ -19,7 +19,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
-import { BACKSPACE } from '@wordpress/keycodes';
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 describe( 'List block', () => {
 	beforeAll( () => {
@@ -338,34 +338,125 @@ describe( 'List block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'merges with other lists', async () => {
+	it( 'splits empty list items into paragraphs', async () => {
+		// Arrange
 		const initialHtml = `<!-- wp:list -->
 		<ul><!-- wp:list-item -->
-		<li>One</li><!-- /wp:list-item --></ul>
-		<!-- /wp:list --><!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item -->
+		<!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
 
-		const screen = await initializeEditor( {
-			initialHtml,
-		} );
-
-		// Select List block
-		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
+		// Act
+		const listBlock = screen.getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 		await triggerBlockListLayout( listBlock );
+		const listItemField = screen.getByLabelText( /Text input. .*One.*/ );
+		selectRangeInRichText( listItemField, 3 );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		const listItemField2 = screen.getByLabelText( /Text input. Empty/ );
+		fireEvent( listItemField2, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
 
-		// Select List Item block
-		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
-			/List item Block\. Row 1/
-		);
-		fireEvent.press( listItemBlock );
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
 
-		// With cursor positioned at the beginning of the first List Item, press
-		// backward delete
-		const listItemField =
-			within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
+	} );
+
+	it( 'merges paragraphs into list items', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:paragraph -->
+		<p>Two</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		// Act
+		const paragraphField = screen.getByLabelText( /Text input. .*Two.*/ );
+		selectRangeInRichText( paragraphField, 0 );
+		fireEvent( paragraphField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
+	} );
+
+	it( 'merges lists into lists', async () => {
+		// Arrange
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		// Act
+		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
+		const listItemField = screen.getByLabelText( /Text input\..*Three/ );
 		selectRangeInRichText( listItemField, 0 );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
@@ -373,17 +464,22 @@ describe( 'List block', () => {
 			keyCode: BACKSPACE,
 		} );
 
+		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-			"<!-- wp:list -->
-			<ul><!-- wp:list-item -->
-			<li>One</li>
-			<!-- /wp:list-item -->
-
-			<!-- wp:list-item -->
-			<li>Two</li>
-			<!-- /wp:list-item --></ul>
-			<!-- /wp:list -->"
-		` );
+		"<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
 	} );
 
 	it( 'unwraps first item when attempting to merge with non-list block', async () => {
@@ -486,16 +582,16 @@ describe( 'List block', () => {
 		"<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
-		
+
 		<!-- wp:paragraph -->
 		<p>One</p>
 		<!-- /wp:paragraph -->
-		
+
 		<!-- wp:list -->
 		<ul><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item -->
-		
+
 		<!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></ul>

package/src/media-text/media-container.native.js

@@ -316,6 +316,7 @@ class MediaContainer extends Component {
 				onSelect={ this.onSelectMediaUploadOption }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onFocus={ this.props.onFocus }
+				className={ 'no-block-outline' }
 			/>
 		);
 	}

package/src/missing/edit.native.js

@@ -5,7 +5,7 @@ import {
 	View,
 	Text,
 	TouchableWithoutFeedback,
-	TouchableHighlight,
+	TouchableOpacity,
 } from 'react-native';
 
 /**
@@ -83,7 +83,7 @@ export class UnsupportedBlockEdit extends Component {
 		);
 
 		return (
-			<TouchableHighlight
+			<TouchableOpacity
 				onPress={ this.onHelpButtonPressed }
 				style={ styles.helpIconContainer }
 				accessibilityLabel={ __( 'Help button' ) }
@@ -94,9 +94,9 @@ export class UnsupportedBlockEdit extends Component {
 					className="unsupported-icon-help"
 					label={ __( 'Help icon' ) }
 					icon={ help }
-					color={ infoIconStyle.color }
+					fill={ infoIconStyle.color }
 				/>
-			</TouchableHighlight>
+			</TouchableOpacity>
 		);
 	}
 
@@ -282,12 +282,14 @@ export class UnsupportedBlockEdit extends Component {
 					) }
 				>
 					{ this.renderHelpIcon() }
-					<Icon
-						className={ iconClassName }
-						icon={ icon && icon.src ? icon.src : icon }
-						color={ iconStyle.color }
-					/>
-					<Text style={ titleStyle }>{ title }</Text>
+					<View style={ styles.unsupportedBlockHeader }>
+						<Icon
+							className={ iconClassName }
+							icon={ icon && icon.src ? icon.src : icon }
+							fill={ iconStyle.color }
+						/>
+						<Text style={ titleStyle }>{ title }</Text>
+					</View>
 					{ subtitle }
 					{ this.renderSheet( title, originalName ) }
 				</View>

package/src/missing/style.native.scss

@@ -31,11 +31,11 @@
 	height: 36;
 	padding-top: 8;
 	padding-bottom: 8;
-	color: $gray-darken-20;
+	color: $light-secondary;
 }
 
 .infoIconDark {
-	color: $gray-20;
+	color: $dark-tertiary;
 }
 
 .infoSheetIcon {
@@ -82,7 +82,8 @@
 }
 
 .unsupportedBlock {
-	background-color: $gray-lighten-30;
+	height: 142;
+	background-color: #e0e0e0; // $light-dim
 	padding-top: 24;
 	padding-bottom: 24;
 	padding-left: 8;
@@ -96,31 +97,37 @@
 }
 
 .unsupportedBlockDark {
-	background-color: $background-dark-secondary;
+	background-color: #1f1f1f; // $dark-dim
+}
+
+.unsupportedBlockHeader {
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4;
+	margin-bottom: 8;
 }
 
 .unsupportedBlockIcon {
-	color: $gray-dark;
+	color: $light-secondary;
 }
 
 .unsupportedBlockIconDark {
-	color: $white;
+	color: $dark-tertiary;
 }
 
 .unsupportedBlockMessage {
-	margin-top: 4;
 	text-align: center;
-	color: $gray-dark;
-	font-size: 14;
-	font-weight: 600;
+	color: $light-secondary;
+	font-size: 16;
+	font-weight: 400;
+	margin-left: 6;
 }
 
 .unsupportedBlockMessageDark {
-	color: $white;
+	color: $dark-tertiary;
 }
 
 .unsupportedBlockSubtitle {
-	margin-top: 2;
 	text-align: center;
 	color: $gray-darken-20;
 	font-size: 12;

package/src/missing/test/__snapshots__/edit.native.js.snap

@@ -25,6 +25,7 @@ exports[`Missing block renders without crashing 1`] = `
     accessibilityLabel="Help button"
     accessibilityRole="button"
     accessible={true}
+    collapsable={false}
     focusable={true}
     onClick={[Function]}
     onResponderGrant={[Function]}
@@ -33,6 +34,11 @@ exports[`Missing block renders without crashing 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
   >
     <Svg
       height={24}
@@ -45,19 +51,21 @@ exports[`Missing block renders without crashing 1`] = `
       Path
     </Svg>
   </View>
-  <Svg
-    color="white"
-    height={24}
-    style={{}}
-    viewBox="0 0 24 24"
-    width={24}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    Path
-  </Svg>
-  <Text>
-    missing/block/title
-  </Text>
+  <View>
+    <Svg
+      fill="white"
+      height={24}
+      style={{}}
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      Path
+    </Svg>
+    <Text>
+      missing/block/title
+    </Text>
+  </View>
   <Text>
     Unsupported
   </Text>

package/src/navigation/block.json

@@ -131,10 +131,9 @@
 					}
 				}
 			}
-		},
-		"interactivity": true
+		}
 	},
-	"viewScript": "file:./view.min.js",
+	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/constants.js

@@ -20,13 +20,19 @@ export const PRIORITIZED_INSERTER_BLOCKS = [
 	'core/navigation-link',
 ];
 
+// These parameters must be kept aligned with those in
+// lib/compat/wordpress-6.3/navigation-block-preloading.php
+// and
+// edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js
+export const PRELOADED_NAVIGATION_MENUS_QUERY = {
+	per_page: 100,
+	status: [ 'publish', 'draft' ],
+	order: 'desc',
+	orderby: 'date',
+};
+
 export const SELECT_NAVIGATION_MENUS_ARGS = [
 	'postType',
 	'wp_navigation',
-	{
-		per_page: 100,
-		status: [ 'publish', 'draft' ],
-		order: 'desc',
-		orderby: 'date',
-	},
+	PRELOADED_NAVIGATION_MENUS_QUERY,
 ];

package/src/navigation/edit/index.js

@@ -38,6 +38,7 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Button,
 	Spinner,
+	Notice,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
@@ -196,7 +197,7 @@ function Navigation( {
 		convert: convertClassicMenu,
 		status: classicMenuConversionStatus,
 		error: classicMenuConversionError,
-	} = useConvertClassicToBlockMenu( clientId );
+	} = useConvertClassicToBlockMenu( createNavigationMenu );
 
 	const isConvertingClassicMenu =
 		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
@@ -485,6 +486,21 @@ function Navigation( {
 		{ open: overlayMenuPreview }
 	);
 
+	const submenuAccessibilityNotice =
+		! showSubmenuIcon && ! openSubmenusOnClick
+			? __(
+					'The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.'
+			  )
+			: '';
+
+	const isFirstRender = useRef( true ); // Don't speak on first render.
+	useEffect( () => {
+		if ( ! isFirstRender.current && submenuAccessibilityNotice ) {
+			speak( submenuAccessibilityNotice );
+		}
+		isFirstRender.current = false;
+	}, [ submenuAccessibilityNotice ] );
+
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 	const stylingInspectorControls = (
 		<>
@@ -578,6 +594,18 @@ function Navigation( {
 									disabled={ attributes.openSubmenusOnClick }
 									label={ __( 'Show arrow' ) }
 								/>
+
+								{ submenuAccessibilityNotice && (
+									<div>
+										<Notice
+											spokenMessage={ null }
+											status="warning"
+											isDismissible={ false }
+										>
+											{ submenuAccessibilityNotice }
+										</Notice>
+									</div>
+								) }
 							</>
 						) }
 					</PanelBody>

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

@@ -98,8 +98,8 @@ export default function NavigationInnerBlocks( {
 			onChange,
 			allowedBlocks: ALLOWED_BLOCKS,
 			prioritizedInserterBlocks: PRIORITIZED_INSERTER_BLOCKS,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: shouldDirectInsert,
+			defaultBlock: DEFAULT_BLOCK,
+			directInsert: shouldDirectInsert,
 			orientation,
 			templateLock,
 

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

@@ -68,8 +68,8 @@ export default function UnsavedInnerBlocks( {
 		{
 			renderAppender: hasSelection ? undefined : false,
 			allowedBlocks: ALLOWED_BLOCKS,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: shouldDirectInsert,
+			defaultBlock: DEFAULT_BLOCK,
+			directInsert: shouldDirectInsert,
 		}
 	);
 

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

@@ -9,7 +9,6 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useCreateNavigationMenu from './use-create-navigation-menu';
 import menuItemsToBlocks from '../menu-items-to-blocks';
 
 export const CLASSIC_MENU_CONVERSION_SUCCESS = 'success';
@@ -21,15 +20,10 @@ export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
 // 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
-	 * the site editor are not permanent without a save interaction done by the user.
-	 */
-	const { create: createNavigationMenu } = useCreateNavigationMenu(
-		clientId,
-		'draft'
-	);
+function useConvertClassicToBlockMenu(
+	createNavigationMenu,
+	{ throwOnError = false } = {}
+) {
 	const registry = useRegistry();
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -158,19 +152,21 @@ function useConvertClassicToBlockMenu( clientId ) {
 					classicMenuBeingConvertedId = null;
 
 					// Rethrow error for debugging.
-					throw new Error(
-						sprintf(
-							// translators: %s: the name of a menu (e.g. Header navigation).
-							__( `Unable to create Navigation Menu "%s".` ),
-							menuName
-						),
-						{
-							cause: err,
-						}
-					);
+					if ( throwOnError ) {
+						throw new Error(
+							sprintf(
+								// translators: %s: the name of a menu (e.g. Header navigation).
+								__( `Unable to create Navigation Menu "%s".` ),
+								menuName
+							),
+							{
+								cause: err,
+							}
+						);
+					}
 				} );
 		},
-		[ convertClassicMenuToBlockMenu ]
+		[ convertClassicMenuToBlockMenu, throwOnError ]
 	);
 
 	return {

package/src/navigation/index.php

@@ -65,6 +65,9 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 
 		return $menu_items_by_parent_id;
 	}
+}
+
+if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) ) {
 
 	/**
 	 * Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor
@@ -138,8 +141,23 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 		}
 		return $w->get_updated_html();
 	};
-}
 
+	/**
+	 * Replaces view script for the Navigation block with version using Interactivity API.
+	 *
+	 * @param array $metadata Block metadata as read in via block.json.
+	 *
+	 * @return array Filtered block type metadata.
+	 */
+	function gutenberg_block_core_navigation_update_interactive_view_script( $metadata ) {
+		if ( 'core/navigation' === $metadata['name'] ) {
+			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
+			$metadata['supports']['interactivity'] = true;
+		}
+		return $metadata;
+	}
+	add_filter( 'block_type_metadata', 'gutenberg_block_core_navigation_update_interactive_view_script', 10, 1 );
+}
 
 
 /**
@@ -670,7 +688,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	// Add directives to the submenu if needed.
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $has_submenus && $should_load_view_script ) {
+	if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) && $has_submenus && $should_load_view_script ) {
 		$w                 = new WP_HTML_Tag_Processor( $inner_blocks_html );
 		$inner_blocks_html = block_core_navigation_add_directives_to_submenu( $w, $attributes );
 	}
@@ -718,7 +736,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_container_directives = '';
 	$responsive_dialog_directives    = '';
 	$close_button_directives         = '';
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
+	if ( gutenberg_should_block_use_interactivity_api( 'core/navigation' ) && $should_load_view_script ) {
 		$nav_element_directives          = '
 			data-wp-interactive
 			data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'
@@ -746,11 +764,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button>
+		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s" %11$s>%9$s</button>
 			<div class="%5$s" style="%7$s" id="%1$s" %12$s>
-				<div class="wp-block-navigation__responsive-close" tabindex="-1">
+				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
-							<button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
+							<button %4$s data-micromodal-close class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>