@wordpress/block-library 8.14.0 → 8.16.0

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import {
+	act,
 	selectRangeInRichText,
 	typeInRichText,
 	fireEvent,
@@ -19,7 +20,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 +339,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 +465,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 () => {
@@ -481,21 +578,25 @@ describe( 'List block', () => {
 			preventDefault() {},
 			keyCode: BACKSPACE,
 		} );
+		// Inner blocks batch store updates with microtasks.
+		// To avoid `act` warnings, we let queued microtasks to be executed.
+		// Reference: https://t.ly/b95nA
+		await act( async () => {} );
 
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- 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/list-item/hooks/use-merge.js

@@ -107,11 +107,18 @@ export default function useMerge( clientId, onMerge ) {
 			} else if ( previousBlockClientId ) {
 				const trailingId = getTrailingId( previousBlockClientId );
 				registry.batch( () => {
-					moveBlocksToPosition(
-						getBlockOrder( clientId ),
-						clientId,
-						previousBlockClientId
-					);
+					// When merging a list item with a previous trailing list
+					// item, we also need to move any nested list items. First,
+					// check if there's a listed list. If there's a nested list,
+					// append its nested list items to the trailing list.
+					const [ nestedListClientId ] = getBlockOrder( clientId );
+					if ( nestedListClientId ) {
+						moveBlocksToPosition(
+							getBlockOrder( nestedListClientId ),
+							nestedListClientId,
+							getBlockRootClientId( trailingId )
+						);
+					}
 					mergeBlocks( trailingId, clientId );
 				} );
 			} else {

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

@@ -7,7 +7,11 @@ exports[`Missing block renders without crashing 1`] = `
   accessibilityRole="button"
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
     }
   }
   accessible={true}
@@ -24,7 +28,25 @@ exports[`Missing block renders without crashing 1`] = `
     accessibilityHint="Tap here to show help"
     accessibilityLabel="Help button"
     accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
+    collapsable={false}
     focusable={true}
     onClick={[Function]}
     onResponderGrant={[Function]}
@@ -33,6 +55,11 @@ exports[`Missing block renders without crashing 1`] = `
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
   >
     <Svg
       height={24}
@@ -45,19 +72,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/menu-inspector-controls.js

@@ -103,7 +103,7 @@ const MainContent = ( {
 		? sprintf(
 				/* translators: %s: The name of a menu. */
 				__( 'Structure for navigation menu: %s' ),
-				navigationMenu?.title?.rendered || __( 'Untitled menu' )
+				navigationMenu?.title || __( 'Untitled menu' )
 		  )
 		: __(
 				'You have not yet created any menus. Displaying a list of your Pages'

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

@@ -20,19 +20,19 @@ import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
 function buildMenuLabel( title, id, status ) {
-	if ( ! title?.rendered ) {
+	if ( ! title ) {
 		/* translators: %s is the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
 	if ( status === 'publish' ) {
-		return decodeEntities( title?.rendered );
+		return decodeEntities( title );
 	}
 
 	return sprintf(
 		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
 		__( '%1$s (%2$s)' ),
-		decodeEntities( title?.rendered ),
+		decodeEntities( title ),
 		status
 	);
 }
@@ -72,7 +72,11 @@ function NavigationMenuSelector( {
 	const menuChoices = useMemo( () => {
 		return (
 			navigationMenus?.map( ( { id, title, status }, index ) => {
-				const label = buildMenuLabel( title, index + 1, status );
+				const label = buildMenuLabel(
+					title?.rendered,
+					index + 1,
+					status
+				);
 
 				return {
 					value: id,

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,
 		}
 	);