@wordpress/block-library 7.10.0 → 7.12.2-next.d6164808d3.0

package/src/list/v2/transforms.js

@@ -1,21 +1,8 @@
 /**
  * WordPress dependencies
  */
-/**
- * External dependencies
- */
-import { flatMap } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
-import {
-	__UNSTABLE_LINE_SEPARATOR,
-	create,
-	split,
-	toHTMLString,
-} from '@wordpress/rich-text';
+import { createBlock } from '@wordpress/blocks';
+import { create, split, toHTMLString } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -44,7 +31,7 @@ function getListContentSchema( { phrasingContentSchema } ) {
 }
 
 function getListContentFlat( blocks ) {
-	return flatMap( blocks, ( { name, attributes, innerBlocks = [] } ) => {
+	return blocks.flatMap( ( { name, attributes, innerBlocks = [] } ) => {
 		if ( name === 'core/list-item' ) {
 			return [ attributes.content, ...getListContentFlat( innerBlocks ) ];
 		}
@@ -83,26 +70,6 @@ const transforms = {
 				);
 			},
 		},
-		{
-			type: 'block',
-			blocks: [ 'core/quote', 'core/pullquote' ],
-			transform: ( { value, anchor } ) => {
-				return createBlock(
-					'core/list',
-					{
-						anchor,
-					},
-					split(
-						create( { html: value, multilineTag: 'p' } ),
-						__UNSTABLE_LINE_SEPARATOR
-					).map( ( result ) => {
-						return createBlock( 'core/list-item', {
-							content: toHTMLString( { value: result } ),
-						} );
-					} )
-				);
-			},
-		},
 		...[ '*', '-' ].map( ( prefix ) => ( {
 			type: 'prefix',
 			prefix,
@@ -147,19 +114,6 @@ const transforms = {
 				);
 			},
 		} ) ),
-		...[ 'core/quote', 'core/pullquote' ].map( ( block ) => ( {
-			type: 'block',
-			blocks: [ block ],
-			transform: ( attributes, innerBlocks ) => {
-				return switchToBlockType(
-					switchToBlockType(
-						createBlock( 'core/list', attributes, innerBlocks ),
-						'core/paragraph'
-					),
-					block
-				);
-			},
-		} ) ),
 	],
 };
 

package/src/list-item/edit.js

@@ -22,14 +22,16 @@ import { useMergeRefs } from '@wordpress/compose';
  */
 import {
 	useEnter,
-	useBackspace,
 	useSpace,
 	useIndentListItem,
 	useOutdentListItem,
 	useSplit,
+	useMerge,
+	useCopy,
 } from './hooks';
+import { convertToListItems } from './utils';
 
-function IndentUI( { clientId } ) {
+export function IndentUI( { clientId } ) {
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
 	const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId );
 
@@ -40,14 +42,14 @@ function IndentUI( { clientId } ) {
 				title={ __( 'Outdent' ) }
 				describedBy={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
-				onClick={ outdentListItem }
+				onClick={ () => outdentListItem() }
 			/>
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
 				describedBy={ __( 'Indent list item' ) }
 				isDisabled={ ! canIndent }
-				onClick={ indentListItem }
+				onClick={ () => indentListItem() }
 			/>
 		</>
 	);
@@ -56,28 +58,23 @@ function IndentUI( { clientId } ) {
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	mergeBlocks,
 	onReplace,
 	clientId,
 } ) {
 	const { placeholder, content } = attributes;
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
-	const useBackspaceRef = useBackspace( { clientId } );
 	const useSpaceRef = useSpace( clientId );
 	const onSplit = useSplit( clientId );
+	const onMerge = useMerge( clientId );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
 				<RichText
-					ref={ useMergeRefs( [
-						useEnterRef,
-						useBackspaceRef,
-						useSpaceRef,
-					] ) }
+					ref={ useMergeRefs( [ useEnterRef, useSpaceRef ] ) }
 					identifier="content"
 					tagName="div"
 					onChange={ ( nextContent ) =>
@@ -87,8 +84,10 @@ export default function ListItemEdit( {
 					aria-label={ __( 'List text' ) }
 					placeholder={ placeholder || __( 'List' ) }
 					onSplit={ onSplit }
-					onMerge={ mergeBlocks }
-					onReplace={ onReplace }
+					onMerge={ onMerge }
+					onReplace={ ( blocks, ...args ) => {
+						onReplace( convertToListItems( blocks ), ...args );
+					} }
 				/>
 				{ innerBlocksProps.children }
 			</li>

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

@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSplit, useMerge } from './hooks';
+import { convertToListItems } from './utils';
+import { IndentUI } from './edit.js';
+import styles from './style.scss';
+import ListStyleType from './list-style-type';
+
+export default function ListItemEdit( {
+	attributes,
+	setAttributes,
+	onReplace,
+	clientId,
+	style,
+} ) {
+	const [ contentWidth, setContentWidth ] = useState();
+	const { placeholder, content } = attributes;
+	const {
+		blockIndex,
+		hasInnerBlocks,
+		indentationLevel,
+		numberOfListItems,
+		ordered,
+		reversed,
+		start,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockCount,
+				getBlockIndex,
+				getBlockParentsByBlockName,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const currentIdentationLevel = getBlockParentsByBlockName(
+				clientId,
+				'core/list-item',
+				true
+			).length;
+			const currentBlockIndex = getBlockIndex( clientId );
+			const blockWithInnerBlocks = getBlockCount( clientId ) > 0;
+			const rootClientId = getBlockRootClientId( clientId );
+			const blockAttributes = getBlockAttributes( rootClientId );
+			const totalListItems = getBlockCount( rootClientId );
+			const {
+				ordered: isOrdered,
+				reversed: isReversed,
+				start: startValue,
+			} = blockAttributes || {};
+
+			return {
+				blockIndex: currentBlockIndex,
+				hasInnerBlocks: blockWithInnerBlocks,
+				indentationLevel: currentIdentationLevel,
+				numberOfListItems: totalListItems,
+				ordered: isOrdered,
+				reversed: isReversed,
+				start: startValue,
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockProps = useBlockProps( {
+		...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list' ],
+		renderAppender: false,
+	} );
+
+	const onSplit = useSplit( clientId );
+	const onMerge = useMerge( clientId );
+	const onLayout = useCallback( ( { nativeEvent } ) => {
+		setContentWidth( ( prevState ) => {
+			const { width } = nativeEvent.layout;
+
+			if ( ! prevState || prevState.width !== width ) {
+				return Math.floor( width );
+			}
+			return prevState;
+		} );
+	}, [] );
+
+	return (
+		<View style={ styles[ 'wp-block-list-item__list-item-parent' ] }>
+			<View style={ styles[ 'wp-block-list-item__list-item' ] }>
+				<View style={ styles[ 'wp-block-list-item__list-item-icon' ] }>
+					<ListStyleType
+						blockIndex={ blockIndex }
+						indentationLevel={ indentationLevel }
+						numberOfListItems={ numberOfListItems }
+						ordered={ ordered }
+						reversed={ reversed }
+						start={ start }
+						style={ style }
+					/>
+				</View>
+				<View
+					style={ styles[ 'wp-block-list-item__list-item-content' ] }
+					onLayout={ onLayout }
+				>
+					<RichText
+						identifier="content"
+						tagName="p"
+						onChange={ ( nextContent ) =>
+							setAttributes( { content: nextContent } )
+						}
+						value={ content }
+						placeholder={ placeholder || __( 'List' ) }
+						onSplit={ onSplit }
+						onMerge={ onMerge }
+						onReplace={ ( blocks, ...args ) => {
+							onReplace( convertToListItems( blocks ), ...args );
+						} }
+						style={ style }
+						deleteEnter={ true }
+						containerWidth={ contentWidth }
+					/>
+				</View>
+			</View>
+			<View { ...innerBlocksProps }></View>
+			<BlockControls group="block">
+				<IndentUI clientId={ clientId } />
+			</BlockControls>
+		</View>
+	);
+}

package/src/list-item/hooks/index.js

@@ -1,6 +1,7 @@
 export { default as useOutdentListItem } from './use-outdent-list-item';
 export { default as useIndentListItem } from './use-indent-list-item';
 export { default as useEnter } from './use-enter';
-export { default as useBackspace } from './use-backspace';
 export { default as useSpace } from './use-space';
 export { default as useSplit } from './use-split';
+export { default as useMerge } from './use-merge';
+export { default as useCopy } from './use-copy';

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

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+export default function useCopy( clientId ) {
+	const { getBlockRootClientId, getBlockName, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	return useRefEffect( ( node ) => {
+		function onCopy( event ) {
+			// The event propagates through all nested lists, so don't override
+			// when copying nested list items.
+			if ( event.clipboardData.getData( '__unstableWrapperBlockName' ) ) {
+				return;
+			}
+
+			const rootClientId = getBlockRootClientId( clientId );
+			event.clipboardData.setData(
+				'__unstableWrapperBlockName',
+				getBlockName( rootClientId )
+			);
+			event.clipboardData.setData(
+				'__unstableWrapperBlockAttributes',
+				JSON.stringify( getBlockAttributes( rootClientId ) )
+			);
+		}
+
+		node.addEventListener( 'copy', onCopy );
+		return () => {
+			node.removeEventListener( 'copy', onCopy );
+		};
+	}, [] );
+}

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

@@ -0,0 +1,141 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { getDefaultBlockName, switchToBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import useOutdentListItem from './use-outdent-list-item';
+
+import { name as listItemName } from '../block.json';
+
+export default function useMerge( clientId ) {
+	const registry = useRegistry();
+	const {
+		getPreviousBlockClientId,
+		getNextBlockClientId,
+		getBlockOrder,
+		getBlockRootClientId,
+		getBlockName,
+		getBlock,
+	} = useSelect( blockEditorStore );
+	const { mergeBlocks, moveBlocksToPosition, replaceBlock, selectBlock } =
+		useDispatch( blockEditorStore );
+	const [ , outdentListItem ] = useOutdentListItem( clientId );
+
+	function getTrailingId( id ) {
+		const order = getBlockOrder( id );
+
+		if ( ! order.length ) {
+			return id;
+		}
+
+		return getTrailingId( order[ order.length - 1 ] );
+	}
+
+	function getParentListItemId( id ) {
+		const listId = getBlockRootClientId( id );
+		const parentListItemId = getBlockRootClientId( listId );
+		if ( ! parentListItemId ) return;
+		if ( getBlockName( parentListItemId ) !== listItemName ) return;
+		return parentListItemId;
+	}
+
+	/**
+	 * Return the next list item with respect to the given list item. If none,
+	 * return the next list item of the parent list item if it exists.
+	 *
+	 * @param {string} id A list item client ID.
+	 * @return {string?} The client ID of the next list item.
+	 */
+	function _getNextId( id ) {
+		const next = getNextBlockClientId( id );
+		if ( next ) return next;
+		const parentListItemId = getParentListItemId( id );
+		if ( ! parentListItemId ) return;
+		return _getNextId( parentListItemId );
+	}
+
+	/**
+	 * Given a client ID, return the client ID of the list item on the next
+	 * line, regardless of indentation level.
+	 *
+	 * @param {string} id The client ID of the current list item.
+	 * @return {string?} The client ID of the next list item.
+	 */
+	function getNextId( id ) {
+		const order = getBlockOrder( id );
+
+		// If the list item does not have a nested list, return the next list
+		// item.
+		if ( ! order.length ) {
+			return _getNextId( id );
+		}
+
+		// Get the first list item in the nested list.
+		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 );
+				return;
+			}
+
+			if ( getParentListItemId( nextBlockClientId ) ) {
+				outdentListItem( nextBlockClientId );
+			} else {
+				registry.batch( () => {
+					moveBlocksToPosition(
+						getBlockOrder( nextBlockClientId ),
+						nextBlockClientId,
+						getPreviousBlockClientId( nextBlockClientId )
+					);
+					mergeBlocks( clientId, nextBlockClientId );
+				} );
+			}
+		} else {
+			// Merging is only done from the top level. For lowel levels, the
+			// list item is outdented instead.
+			const previousBlockClientId = getPreviousBlockClientId( clientId );
+			if ( getParentListItemId( clientId ) ) {
+				outdentListItem( clientId );
+			} else if ( previousBlockClientId ) {
+				const trailingId = getTrailingId( previousBlockClientId );
+				registry.batch( () => {
+					moveBlocksToPosition(
+						getBlockOrder( clientId ),
+						clientId,
+						previousBlockClientId
+					);
+					mergeBlocks( trailingId, clientId );
+				} );
+			} else {
+				switchToDefaultBlockType( forward );
+			}
+		}
+	};
+}

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

@@ -1,22 +1,23 @@
 /**
  * External dependencies
  */
-import { first, last } from 'lodash';
+import { first, last, castArray } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { cloneBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { createListItem } from '../utils';
+import { name as listItemName } from '../block.json';
 
 export default function useOutdentListItem( clientId ) {
+	const registry = useRegistry();
 	const { canOutdent } = useSelect(
 		( innerSelect ) => {
 			const { getBlockRootClientId } = innerSelect( blockEditorStore );
@@ -29,93 +30,90 @@ export default function useOutdentListItem( clientId ) {
 		},
 		[ clientId ]
 	);
-	const { replaceBlocks, selectionChange, multiSelect } =
-		useDispatch( blockEditorStore );
+	const {
+		moveBlocksToPosition,
+		removeBlock,
+		insertBlock,
+		updateBlockListSettings,
+	} = useDispatch( blockEditorStore );
 	const {
 		getBlockRootClientId,
-		getBlockAttributes,
-		getBlock,
+		getBlockName,
+		getBlockOrder,
 		getBlockIndex,
-		getSelectionStart,
-		getSelectionEnd,
-		hasMultiSelection,
-		getMultiSelectedBlockClientIds,
+		getSelectedBlockClientIds,
+		getBlock,
+		getBlockListSettings,
 	} = useSelect( blockEditorStore );
 
+	function getParentListItemId( id ) {
+		const listId = getBlockRootClientId( id );
+		const parentListItemId = getBlockRootClientId( listId );
+		if ( ! parentListItemId ) return;
+		if ( getBlockName( parentListItemId ) !== listItemName ) return;
+		return parentListItemId;
+	}
+
 	return [
 		canOutdent,
-		useCallback( () => {
-			const _hasMultiSelection = hasMultiSelection();
-			const clientIds = _hasMultiSelection
-				? getMultiSelectedBlockClientIds()
-				: [ clientId ];
+		useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
+			clientIds = castArray( clientIds );
 
-			const selectionStart = getSelectionStart();
-			const selectionEnd = getSelectionEnd();
+			if ( ! clientIds.length ) return;
 
-			const listParentId = getBlockRootClientId( clientId );
-			const listAttributes = getBlockAttributes( listParentId );
-			const listItemParentId = getBlockRootClientId( listParentId );
-			const listItemParentAttributes =
-				getBlockAttributes( listItemParentId );
+			const firstClientId = first( clientIds );
 
-			const firstIndex = getBlockIndex( first( clientIds ) );
-			const lastIndex = getBlockIndex( last( clientIds ) );
-			const siblingBlocks = getBlock( listParentId ).innerBlocks;
-			const previousSiblings = siblingBlocks.slice( 0, firstIndex );
-			const afterSiblings = siblingBlocks.slice( lastIndex + 1 );
+			// Can't outdent if it's not a list item.
+			if ( getBlockName( firstClientId ) !== listItemName ) return;
 
-			// Create a new parent list item block with just the siblings
-			// that existed before the first child item being outdent.
-			const newListItemParent = createListItem(
-				listItemParentAttributes,
-				listAttributes,
-				previousSiblings
-			);
+			const parentListItemId = getParentListItemId( firstClientId );
 
-			const lastBlock = getBlock( last( clientIds ) );
-			const childList = lastBlock.innerBlocks[ 0 ];
-			const childItems = childList?.innerBlocks || [];
-			const hasChildItems = !! childItems.length;
+			// Can't outdent if it's at the top level.
+			if ( ! parentListItemId ) return;
 
-			const newBlocksExcludingLast = clientIds
-				.slice( 0, -1 )
-				.map( ( _clientId ) => cloneBlock( getBlock( _clientId ) ) );
-
-			// Create a new list item block whose attributes are equal to the
-			// last block being outdent and whose children are the children that it had (if any)
-			// followed by the siblings that existed after it.
-			const newLastItem = createListItem(
-				lastBlock.attributes,
-				hasChildItems ? childList.attributes : listAttributes,
-				[ ...childItems, ...afterSiblings ]
+			const parentListId = getBlockRootClientId( firstClientId );
+			const lastClientId = last( clientIds );
+			const order = getBlockOrder( parentListId );
+			const followingListItems = order.slice(
+				getBlockIndex( lastClientId ) + 1
 			);
 
-			// Replace the parent list item block, with a new block containing
-			// the previous siblings before the first block being outdent,
-			// followed by the blocks being outdent with the after siblings added
-			// as children of the last block.
-			replaceBlocks(
-				[ listItemParentId ],
-				[ newListItemParent, ...newBlocksExcludingLast, newLastItem ]
-			);
+			registry.batch( () => {
+				if ( followingListItems.length ) {
+					let nestedListId = first( getBlockOrder( firstClientId ) );
 
-			// Restore the selection state.
-			if ( ! _hasMultiSelection ) {
-				selectionChange(
-					newLastItem.clientId,
-					selectionEnd.attributeKey,
-					selectionEnd.clientId === selectionStart.clientId
-						? selectionStart.offset
-						: selectionEnd.offset,
-					selectionEnd.offset
-				);
-			} else {
-				multiSelect(
-					first( newBlocksExcludingLast ).clientId,
-					newLastItem.clientId
+					if ( ! nestedListId ) {
+						const nestedListBlock = cloneBlock(
+							getBlock( parentListId ),
+							{},
+							[]
+						);
+						nestedListId = nestedListBlock.clientId;
+						insertBlock( nestedListBlock, 0, firstClientId, false );
+						// Immediately update the block list settings, otherwise
+						// blocks can't be moved here due to canInsert checks.
+						updateBlockListSettings(
+							nestedListId,
+							getBlockListSettings( parentListId )
+						);
+					}
+
+					moveBlocksToPosition(
+						followingListItems,
+						parentListId,
+						nestedListId
+					);
+				}
+				moveBlocksToPosition(
+					clientIds,
+					parentListId,
+					getBlockRootClientId( parentListItemId ),
+					getBlockIndex( parentListItemId ) + 1
 				);
-			}
-		}, [ clientId ] ),
+				if ( ! getBlockOrder( parentListId ).length ) {
+					removeBlock( parentListId );
+				}
+			} );
+		}, [] ),
 	];
 }