@wordpress/block-library 7.10.0 → 7.11.0

package/src/list-item/edit.js

@@ -22,12 +22,13 @@ import { useMergeRefs } from '@wordpress/compose';
  */
 import {
 	useEnter,
-	useBackspace,
 	useSpace,
 	useIndentListItem,
 	useOutdentListItem,
 	useSplit,
+	useMerge,
 } from './hooks';
+import { convertToListItems } from './utils';
 
 function IndentUI( { clientId } ) {
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
@@ -40,14 +41,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,7 +57,6 @@ function IndentUI( { clientId } ) {
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	mergeBlocks,
 	onReplace,
 	clientId,
 } ) {
@@ -66,18 +66,14 @@ export default function ListItemEdit( {
 		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 +83,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/hooks/index.js

@@ -1,6 +1,6 @@
 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';

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

package/src/list-item/utils.js

@@ -1,14 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, switchToBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { name as listItemName } from './block.json';
+import { name as listName } from '../list/block.json';
 
 export function createListItem( listItemAttributes, listAttributes, children ) {
 	return createBlock(
-		'core/list-item',
+		listItemName,
 		listItemAttributes,
 		! children?.length
 			? []
-			: [ createBlock( 'core/list', listAttributes, children ) ]
+			: [ createBlock( listName, listAttributes, children ) ]
 	);
 }
+
+export function convertToListItems( blocks ) {
+	const listItems = [];
+
+	for ( let block of blocks ) {
+		if ( block.name === listItemName ) {
+			listItems.push( block );
+		} else if ( block.name === listName ) {
+			listItems.push( ...block.innerBlocks );
+		} else if ( ( block = switchToBlockType( block, listName ) ) ) {
+			for ( const { innerBlocks } of block ) {
+				listItems.push( ...innerBlocks );
+			}
+		}
+	}
+
+	return listItems;
+}

package/src/media-text/deprecated.js

@@ -7,12 +7,18 @@ import { isEmpty, omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	getColorClassName,
+	useInnerBlocksProps,
+	useBlockProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { imageFillStyles } from './media-container';
+import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
 const noop = () => {};
@@ -68,6 +74,147 @@ const baseAttributes = {
 };
 
 export default [
+	// Version with CSS grid
+	{
+		attributes: {
+			...baseAttributes,
+			mediaUrl: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure video,figure img',
+				attribute: 'src',
+			},
+			mediaLink: {
+				type: 'string',
+			},
+			linkDestination: {
+				type: 'string',
+			},
+			linkTarget: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'target',
+			},
+			href: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'href',
+			},
+			rel: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'rel',
+			},
+			linkClass: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'figure a',
+				attribute: 'class',
+			},
+			verticalAlignment: {
+				type: 'string',
+			},
+			imageFill: {
+				type: 'boolean',
+			},
+			focalPoint: {
+				type: 'object',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				isStackedOnMobile,
+				mediaAlt,
+				mediaPosition,
+				mediaType,
+				mediaUrl,
+				mediaWidth,
+				mediaId,
+				verticalAlignment,
+				imageFill,
+				focalPoint,
+				linkClass,
+				href,
+				linkTarget,
+				rel,
+			} = attributes;
+			const mediaSizeSlug =
+				attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+			const newRel = isEmpty( rel ) ? undefined : rel;
+
+			const imageClasses = classnames( {
+				[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+				[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+			} );
+
+			let image = (
+				<img
+					src={ mediaUrl }
+					alt={ mediaAlt }
+					className={ imageClasses || null }
+				/>
+			);
+
+			if ( href ) {
+				image = (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				);
+			}
+
+			const mediaTypeRenders = {
+				image: () => image,
+				video: () => <video controls src={ mediaUrl } />,
+			};
+
+			const className = classnames( {
+				'has-media-on-the-right': 'right' === mediaPosition,
+				'is-stacked-on-mobile': isStackedOnMobile,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
+				'is-image-fill': imageFill,
+			} );
+			const backgroundStyles = imageFill
+				? imageFillStyles( mediaUrl, focalPoint )
+				: {};
+
+			let gridTemplateColumns;
+			if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+				gridTemplateColumns =
+					'right' === mediaPosition
+						? `auto ${ mediaWidth }%`
+						: `${ mediaWidth }% auto`;
+			}
+			const style = {
+				gridTemplateColumns,
+			};
+
+			return (
+				<div { ...useBlockProps.save( { className, style } ) }>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...baseAttributes,

package/src/media-text/edit.js

@@ -354,6 +354,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 				) }
 			</BlockControls>
 			<div { ...blockProps }>
+				{ mediaPosition === 'right' && <div { ...innerBlocksProps } /> }
 				<MediaContainer
 					className="wp-block-media-text__media"
 					onSelectMedia={ onSelectMedia }
@@ -373,7 +374,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 						mediaWidth,
 					} }
 				/>
-				<div { ...innerBlocksProps } />
+				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }
 			</div>
 		</>
 	);

package/src/media-text/save.js

@@ -88,6 +88,24 @@ export default function save( { attributes } ) {
 	const style = {
 		gridTemplateColumns,
 	};
+
+	if ( 'right' === mediaPosition ) {
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+			</div>
+		);
+	}
 	return (
 		<div { ...useBlockProps.save( { className, style } ) }>
 			<figure

package/src/more/save.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,8 @@ export default function save( { attributes: { customText, noTeaser } } ) {
 	const noTeaserTag = noTeaser ? '<!--noteaser-->' : '';
 
 	return (
-		<RawHTML>{ compact( [ moreTag, noTeaserTag ] ).join( '\n' ) }</RawHTML>
+		<RawHTML>
+			{ [ moreTag, noTeaserTag ].filter( Boolean ).join( '\n' ) }
+		</RawHTML>
 	);
 }