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

package/src/list/edit.js

@@ -1,177 +1,186 @@
 /**
  * WordPress dependencies
  */
-import { __, _x, isRTL } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 import {
-	RichText,
 	BlockControls,
-	RichTextShortcut,
 	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToolbarButton } from '@wordpress/components';
-import {
-	__unstableCanIndentListItems as canIndentListItems,
-	__unstableCanOutdentListItems as canOutdentListItems,
-	__unstableIndentListItems as indentListItems,
-	__unstableOutdentListItems as outdentListItems,
-	__unstableChangeListType as changeListType,
-	__unstableIsListRootSelected as isListRootSelected,
-	__unstableIsActiveListType as isActiveListType,
-} from '@wordpress/rich-text';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { isRTL, __ } from '@wordpress/i18n';
 import {
 	formatListBullets,
 	formatListBulletsRTL,
 	formatListNumbered,
 	formatListNumberedRTL,
-	formatIndent,
-	formatIndentRTL,
 	formatOutdent,
 	formatOutdentRTL,
 } from '@wordpress/icons';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback, useEffect, Platform } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import { name } from './';
 import OrderedListSettings from './ordered-list-settings';
+import { migrateToListV2 } from './utils';
+import TagName from './tag-name';
 
-export default function ListEdit( {
-	attributes,
-	setAttributes,
-	mergeBlocks,
-	onReplace,
-	style,
-} ) {
-	const { ordered, values, type, reversed, start, placeholder } = attributes;
-	const tagName = ordered ? 'ol' : 'ul';
+const TEMPLATE = [ [ 'core/list-item' ] ];
+const NATIVE_MARGIN_SPACING = 8;
 
-	const controls = ( { value, onChange, onFocus } ) => (
-		<>
-			<RichTextShortcut
-				type="primary"
-				character="["
-				onUse={ () => {
-					onChange( outdentListItems( value ) );
-				} }
-			/>
-			<RichTextShortcut
-				type="primary"
-				character="]"
-				onUse={ () => {
-					onChange( indentListItems( value, { type: tagName } ) );
-				} }
-			/>
-			<RichTextShortcut
-				type="primary"
-				character="m"
-				onUse={ () => {
-					onChange( indentListItems( value, { type: tagName } ) );
-				} }
-			/>
-			<RichTextShortcut
-				type="primaryShift"
-				character="m"
-				onUse={ () => {
-					onChange( outdentListItems( value ) );
-				} }
-			/>
-			<BlockControls group="block">
-				<ToolbarButton
-					icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
-					title={ __( 'Unordered' ) }
-					describedBy={ __( 'Convert to unordered list' ) }
-					isActive={ isActiveListType( value, 'ul', tagName ) }
-					onClick={ () => {
-						onChange( changeListType( value, { type: 'ul' } ) );
-						onFocus();
+/**
+ * At the moment, deprecations don't handle create blocks from attributes
+ * (like when using CPT templates). For this reason, this hook is necessary
+ * to avoid breaking templates using the old list block format.
+ *
+ * @param {Object} attributes Block attributes.
+ * @param {string} clientId   Block client ID.
+ */
+function useMigrateOnLoad( attributes, clientId ) {
+	const registry = useRegistry();
+	const { updateBlockAttributes, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
 
-						if ( isListRootSelected( value ) ) {
-							setAttributes( { ordered: false } );
-						}
-					} }
-				/>
-				<ToolbarButton
-					icon={
-						isRTL() ? formatListNumberedRTL : formatListNumbered
-					}
-					title={ __( 'Ordered' ) }
-					describedBy={ __( 'Convert to ordered list' ) }
-					isActive={ isActiveListType( value, 'ol', tagName ) }
-					onClick={ () => {
-						onChange( changeListType( value, { type: 'ol' } ) );
-						onFocus();
+	useEffect( () => {
+		// As soon as the block is loaded, migrate it to the new version.
 
-						if ( isListRootSelected( value ) ) {
-							setAttributes( { ordered: true } );
-						}
-					} }
-				/>
-				<ToolbarButton
-					icon={ isRTL() ? formatOutdentRTL : formatOutdent }
-					title={ __( 'Outdent' ) }
-					describedBy={ __( 'Outdent list item' ) }
-					shortcut={ _x( 'Backspace', 'keyboard key' ) }
-					isDisabled={ ! canOutdentListItems( value ) }
-					onClick={ () => {
-						onChange( outdentListItems( value ) );
-						onFocus();
-					} }
-				/>
-				<ToolbarButton
-					icon={ isRTL() ? formatIndentRTL : formatIndent }
-					title={ __( 'Indent' ) }
-					describedBy={ __( 'Indent list item' ) }
-					shortcut={ _x( 'Space', 'keyboard key' ) }
-					isDisabled={ ! canIndentListItems( value ) }
-					onClick={ () => {
-						onChange( indentListItems( value, { type: tagName } ) );
-						onFocus();
-					} }
-				/>
-			</BlockControls>
+		if ( ! attributes.values ) {
+			return;
+		}
+
+		const [ newAttributes, newInnerBlocks ] = migrateToListV2( attributes );
+
+		deprecated( 'Value attribute on the list block', {
+			since: '6.0',
+			version: '6.5',
+			alternative: 'inner blocks',
+		} );
+
+		registry.batch( () => {
+			updateBlockAttributes( clientId, newAttributes );
+			replaceInnerBlocks( clientId, newInnerBlocks );
+		} );
+	}, [ attributes.values ] );
+}
+
+function useOutdentList( clientId ) {
+	const { canOutdent } = useSelect(
+		( innerSelect ) => {
+			const { getBlockRootClientId, getBlock } =
+				innerSelect( blockEditorStore );
+			const parentId = getBlockRootClientId( clientId );
+			return {
+				canOutdent:
+					!! parentId &&
+					getBlock( parentId ).name === 'core/list-item',
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { getBlockRootClientId, getBlockAttributes, getBlock } =
+		useSelect( blockEditorStore );
+
+	return [
+		canOutdent,
+		useCallback( () => {
+			const parentBlockId = getBlockRootClientId( clientId );
+			const parentBlockAttributes = getBlockAttributes( parentBlockId );
+			// Create a new parent block without the inner blocks.
+			const newParentBlock = createBlock(
+				'core/list-item',
+				parentBlockAttributes
+			);
+			const { innerBlocks } = getBlock( clientId );
+			// Replace the parent block with a new parent block without inner blocks,
+			// and make the inner blocks siblings of the parent.
+			replaceBlocks(
+				[ parentBlockId ],
+				[ newParentBlock, ...innerBlocks ]
+			);
+			// Select the last child of the list being outdent.
+			selectionChange( innerBlocks[ innerBlocks.length - 1 ].clientId );
+		}, [ clientId ] ),
+	];
+}
+
+function IndentUI( { clientId } ) {
+	const [ canOutdent, outdentList ] = useOutdentList( clientId );
+	return (
+		<>
+			<ToolbarButton
+				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
+				title={ __( 'Outdent' ) }
+				describedBy={ __( 'Outdent list item' ) }
+				disabled={ ! canOutdent }
+				onClick={ outdentList }
+			/>
 		</>
 	);
+}
 
+export default function Edit( { attributes, setAttributes, clientId, style } ) {
 	const blockProps = useBlockProps( {
-		style,
+		...( Platform.isNative && { style } ),
 	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list-item' ],
+		template: TEMPLATE,
+		templateLock: false,
+		templateInsertUpdatesSelection: true,
+		...( Platform.isNative && {
+			marginVertical: NATIVE_MARGIN_SPACING,
+			marginHorizontal: NATIVE_MARGIN_SPACING,
+			useCompactList: true,
+		} ),
+	} );
+	useMigrateOnLoad( attributes, clientId );
+	const { ordered, type, reversed, start } = attributes;
+
+	const controls = (
+		<BlockControls group="block">
+			<ToolbarButton
+				icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
+				title={ __( 'Unordered' ) }
+				describedBy={ __( 'Convert to unordered list' ) }
+				isActive={ ordered === false }
+				onClick={ () => {
+					setAttributes( { ordered: false } );
+				} }
+			/>
+			<ToolbarButton
+				icon={ isRTL() ? formatListNumberedRTL : formatListNumbered }
+				title={ __( 'Ordered' ) }
+				describedBy={ __( 'Convert to ordered list' ) }
+				isActive={ ordered === true }
+				onClick={ () => {
+					setAttributes( { ordered: true } );
+				} }
+			/>
+			<IndentUI clientId={ clientId } />
+		</BlockControls>
+	);
 
 	return (
 		<>
-			<RichText
-				identifier="values"
-				multiline="li"
-				tagName={ tagName }
-				onChange={ ( nextValues ) =>
-					setAttributes( { values: nextValues } )
-				}
-				value={ values }
-				aria-label={ __( 'List text' ) }
-				placeholder={ placeholder || __( 'List' ) }
-				onMerge={ mergeBlocks }
-				onSplit={ ( value ) =>
-					createBlock( name, { ...attributes, values: value } )
-				}
-				__unstableOnSplitMiddle={ () =>
-					createBlock( 'core/paragraph' )
-				}
-				onReplace={ onReplace }
-				onRemove={ () => onReplace( [] ) }
-				start={ start }
+			<TagName
+				ordered={ ordered }
 				reversed={ reversed }
+				start={ start }
 				type={ type }
-				{ ...blockProps }
-			>
-				{ controls }
-			</RichText>
+				{ ...innerBlocksProps }
+			/>
+			{ controls }
 			{ ordered && (
 				<OrderedListSettings
 					setAttributes={ setAttributes }
 					ordered={ ordered }
 					reversed={ reversed }
 					start={ start }
-					placeholder={ placeholder }
 				/>
 			) }
 		</>

package/src/list/index.js

@@ -2,50 +2,54 @@
  * WordPress dependencies
  */
 import { list as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
-import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name, settingsV2 };
+export { metadata, name };
 
-const settingsV1 = {
+const settings = {
 	icon,
 	example: {
-		attributes: {
-			values: '<li>Alice.</li><li>The White Rabbit.</li><li>The Cheshire Cat.</li><li>The Mad Hatter.</li><li>The Queen of Hearts.</li>',
-		},
+		innerBlocks: [
+			{
+				name: 'core/list-item',
+				attributes: { content: __( 'Alice.' ) },
+			},
+			{
+				name: 'core/list-item',
+				attributes: { content: __( 'The White Rabbit.' ) },
+			},
+			{
+				name: 'core/list-item',
+				attributes: { content: __( 'The Cheshire Cat.' ) },
+			},
+			{
+				name: 'core/list-item',
+				attributes: { content: __( 'The Mad Hatter.' ) },
+			},
+			{
+				name: 'core/list-item',
+				attributes: { content: __( 'The Queen of Hearts.' ) },
+			},
+		],
 	},
 	transforms,
-	merge( attributes, attributesToMerge ) {
-		const { values } = attributesToMerge;
-
-		if ( ! values || values === '<li></li>' ) {
-			return attributes;
-		}
-
-		return {
-			...attributes,
-			values: attributes.values + values,
-		};
-	},
 	edit,
 	save,
 	deprecated,
 };
 
-let settings = settingsV1;
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	settings = window?.__experimentalEnableListBlockV2
-		? settingsV2
-		: settingsV1;
-}
 export { settings };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/list/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/list/save.js

@@ -1,15 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { ordered, values, type, reversed, start } = attributes;
+	const { ordered, type, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
-
 	return (
 		<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
-			<RichText.Content value={ values } multiline="li" />
+			<InnerBlocks.Content />
 		</TagName>
 	);
 }

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

@@ -122,12 +122,24 @@ exports[`List V2 block shows different indentation levels 1`] = `
 
 exports[`List block inserts block 1`] = `
 "<!-- wp:list -->
-<ul><li></li></ul>
+<ul><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
 `;
 
 exports[`List block renders a list with a few items 1`] = `
 "<!-- wp:list -->
-<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
+<ul><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 3</li>
+<!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
 `;

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

@@ -119,20 +119,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
@@ -180,61 +166,18 @@ describe( 'List V2 block', () => {
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
 
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
 		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
 			/List item Block\. Row 2/
 		);
-
-		fireEvent(
-			within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 350,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select second level list
 		const secondNestedLevelBlock = within(
 			firstNestedLevelBlock
 		).getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( secondNestedLevelBlock ).getByTestId(
-				'block-list-wrapper'
-			),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( secondNestedLevelBlock );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -256,20 +199,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select Secont List Item block
@@ -300,40 +229,12 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
 		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
 			/List item Block\. Row 1/
 		);
-
-		fireEvent(
-			within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 350,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select Inner block List
@@ -341,19 +242,6 @@ describe( 'List V2 block', () => {
 			/List Block\. Row 1/
 		);
 
-		fireEvent(
-			within( innerBlockList ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		// Select nested List Item block
 		const listItemBlock = within( innerBlockList ).getByA11yLabel(
 			/List item Block\. Row 1/
@@ -386,20 +274,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
@@ -428,20 +302,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
@@ -481,20 +341,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list