@wordpress/block-library 7.16.0 → 7.17.0

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

@@ -3,6 +3,7 @@
  */
 import {
 	changeTextOfRichText,
+	changeAndSelectTextOfRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -18,6 +19,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { BACKSPACE } from '@wordpress/keycodes';
 
 describe( 'List block', () => {
 	beforeAll( () => {
@@ -210,7 +212,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -238,7 +240,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -277,7 +279,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -311,4 +313,101 @@ describe( 'List block', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'merges with other lists', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list --><!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const listItemBlock = within( listBlock ).getByA11yLabel(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// With cursor positioned at the beginning of the first List Item, press
+		// backward delete
+		const listItemField =
+			within( listItemBlock ).getByA11yLabel( /Text input. .*Two.*/ );
+		changeAndSelectTextOfRichText( listItemField, 'Two' );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		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 -->"
+		` );
+	} );
+
+	it( 'unwraps list items when attempting to merge with non-list block', async () => {
+		const initialHtml = `<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+		<!-- 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,
+		} );
+
+		// Select List block
+		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const listItemBlock = within( listBlock ).getByA11yLabel(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// With cursor positioned at the beginning of the first List Item, press
+		// backward delete
+		const listItemField =
+			within( listItemBlock ).getByA11yLabel( /Text input. .*One.*/ );
+		changeAndSelectTextOfRichText( listItemField, 'One' );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>One</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>Two</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );

package/src/list/transforms.js

@@ -114,6 +114,17 @@ const transforms = {
 				);
 			},
 		} ) ),
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( _attributes, childBlocks ) => {
+				return getListContentFlat( childBlocks ).map( ( content ) =>
+					createBlock( 'core/paragraph', {
+						content,
+					} )
+				);
+			},
+		},
 	],
 };
 

package/src/list-item/block.json

@@ -21,6 +21,19 @@
 	},
 	"supports": {
 		"className": false,
-		"__experimentalSelector": "li"
+		"__experimentalSelector": "li",
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	}
 }

package/src/list-item/edit.js

@@ -60,6 +60,7 @@ export default function ListItemEdit( {
 	setAttributes,
 	onReplace,
 	clientId,
+	mergeBlocks,
 } ) {
 	const { placeholder, content } = attributes;
 	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
@@ -70,7 +71,7 @@ export default function ListItemEdit( {
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );
 	const onSplit = useSplit( clientId );
-	const onMerge = useMerge( clientId );
+	const onMerge = useMerge( clientId, mergeBlocks );
 	return (
 		<>
 			<li { ...innerBlocksProps }>

package/src/list-item/edit.native.js

@@ -35,6 +35,7 @@ export default function ListItemEdit( {
 	onReplace,
 	clientId,
 	style,
+	mergeBlocks,
 } ) {
 	const [ contentWidth, setContentWidth ] = useState();
 	const { placeholder, content } = attributes;
@@ -119,7 +120,7 @@ export default function ListItemEdit( {
 	const preventDefault = useRef( false );
 	const { onEnter } = useEnter( { content, clientId }, preventDefault );
 	const onSplit = useSplit( clientId );
-	const onMerge = useMerge( clientId );
+	const onMerge = useMerge( clientId, mergeBlocks );
 	const onSplitList = useCallback(
 		( value ) => {
 			if ( ! preventDefault.current ) {

package/src/list-item/hooks/use-merge.js

@@ -3,7 +3,6 @@
  */
 import { useRegistry, useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { getDefaultBlockName, switchToBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,7 +11,7 @@ import useOutdentListItem from './use-outdent-list-item';
 
 import { name as listItemName } from '../block.json';
 
-export default function useMerge( clientId ) {
+export default function useMerge( clientId, onMerge ) {
 	const registry = useRegistry();
 	const {
 		getPreviousBlockClientId,
@@ -20,9 +19,8 @@ export default function useMerge( clientId ) {
 		getBlockOrder,
 		getBlockRootClientId,
 		getBlockName,
-		getBlock,
 	} = useSelect( blockEditorStore );
-	const { mergeBlocks, moveBlocksToPosition, replaceBlock, selectBlock } =
+	const { mergeBlocks, moveBlocksToPosition } =
 		useDispatch( blockEditorStore );
 	const [ , outdentListItem ] = useOutdentListItem( clientId );
 
@@ -79,29 +77,12 @@ export default function useMerge( clientId ) {
 		return getBlockOrder( order[ 0 ] )[ 0 ];
 	}
 
-	function switchToDefaultBlockType( forward ) {
-		const rootClientId = getBlockRootClientId( clientId );
-		const replacement = switchToBlockType(
-			getBlock( rootClientId ),
-			getDefaultBlockName()
-		);
-		const indexToSelect = forward ? replacement.length - 1 : 0;
-		const initialPosition = forward ? -1 : 0;
-		registry.batch( () => {
-			replaceBlock( rootClientId, replacement );
-			selectBlock(
-				replacement[ indexToSelect ].clientId,
-				initialPosition
-			);
-		} );
-	}
-
 	return ( forward ) => {
 		if ( forward ) {
 			const nextBlockClientId = getNextId( clientId );
 
 			if ( ! nextBlockClientId ) {
-				switchToDefaultBlockType( forward );
+				onMerge( forward );
 				return;
 			}
 
@@ -134,7 +115,7 @@ export default function useMerge( clientId ) {
 					mergeBlocks( trailingId, clientId );
 				} );
 			} else {
-				switchToDefaultBlockType( forward );
+				onMerge( forward );
 			}
 		}
 	};

package/src/list-item/hooks/use-outdent-list-item.js

@@ -20,12 +20,16 @@ export default function useOutdentListItem( clientId ) {
 	const registry = useRegistry();
 	const { canOutdent } = useSelect(
 		( innerSelect ) => {
-			const { getBlockRootClientId } = innerSelect( blockEditorStore );
+			const { getBlockRootClientId, getBlockName } =
+				innerSelect( blockEditorStore );
 			const grandParentId = getBlockRootClientId(
 				getBlockRootClientId( clientId )
 			);
+			const grandParentName = getBlockName( grandParentId );
+			const isListItem = grandParentName === listItemName;
+
 			return {
-				canOutdent: !! grandParentId,
+				canOutdent: isListItem,
 			};
 		},
 		[ clientId ]

package/src/navigation/block.json

@@ -67,6 +67,10 @@
 		"maxNestingLevel": {
 			"type": "number",
 			"default": 5
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ]
 		}
 	},
 	"providesContext": {
@@ -88,7 +92,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
 		"inserter": true,
 		"typography": {

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 false;
+		}
 
-	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.
@@ -476,7 +496,7 @@ function Navigation( {
 			);
 		} catch {
 			showMenuAutoPublishDraftNotice(
-				__( 'Error ocurred while publishing the navigation menu.' )
+				__( 'Error occurred while publishing the navigation menu.' )
 			);
 		}
 	}, [ isDraftNavigationMenu, navigationMenu ] );
@@ -642,7 +662,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {
@@ -686,6 +707,7 @@ function Navigation( {
 					<UnsavedInnerBlocks
 						blocks={ uncontrolledInnerBlocks }
 						clientId={ clientId }
+						templateLock={ templateLock }
 						navigationMenus={ navigationMenus }
 						hasSelection={ isSelected || isInnerBlockSelected }
 						hasSavedUnsavedInnerBlocks={
@@ -723,7 +745,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {
@@ -808,7 +831,8 @@ function Navigation( {
 					onSelectClassicMenu={ async ( classicMenu ) => {
 						const navMenu = await convertClassicMenu(
 							classicMenu.id,
-							classicMenu.name
+							classicMenu.name,
+							'draft'
 						);
 						if ( navMenu ) {
 							handleUpdateMenu( navMenu.id, {
@@ -836,7 +860,8 @@ function Navigation( {
 							onSelectClassicMenu={ async ( classicMenu ) => {
 								const navMenu = await convertClassicMenu(
 									classicMenu.id,
-									classicMenu.name
+									classicMenu.name,
+									'draft'
 								);
 								if ( navMenu ) {
 									handleUpdateMenu( navMenu.id, {
@@ -921,6 +946,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/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

@@ -291,6 +291,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.