@wordpress/block-library 7.2.0 → 7.3.0

package/src/index.js

@@ -191,6 +191,7 @@ export const __experimentalGetCoreBlocks = () => [
 	siteTagline,
 	query,
 	templatePart,
+	avatar,
 	postTitle,
 	postExcerpt,
 	postFeaturedImage,
@@ -204,7 +205,21 @@ export const __experimentalGetCoreBlocks = () => [
 	queryPaginationNext,
 	queryPaginationNumbers,
 	queryPaginationPrevious,
+	queryNoResults,
+	readMore,
+	commentAuthorName,
+	commentContent,
+	commentDate,
+	commentEditLink,
+	commentReplyLink,
+	commentTemplate,
+	commentsQueryLoop,
+	commentsPagination,
+	commentsPaginationNext,
+	commentsPaginationNumbers,
+	commentsPaginationPrevious,
 	postComments,
+	homeLink,
 	logInOut,
 	termDescription,
 	queryTitle,
@@ -252,31 +267,16 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 	? ( { enableFSEBlocks } = {} ) => {
 			[
 				// Experimental blocks.
-				avatar,
-				homeLink,
 				postAuthorName,
-				queryNoResults,
 				// Full Site Editing blocks.
 				...( enableFSEBlocks
 					? [
 							commentAuthorAvatar,
-							commentAuthorName,
-							commentContent,
-							commentDate,
-							commentEditLink,
-							commentReplyLink,
-							commentTemplate,
-							commentsQueryLoop,
-							commentsPagination,
-							commentsPaginationNext,
-							commentsPaginationNumbers,
-							commentsPaginationPrevious,
 							navigationArea,
 							postComment,
 							postCommentsCount,
 							postCommentsForm,
 							postCommentsLink,
-							readMore,
 					  ]
 					: [] ),
 			].forEach( registerBlock );

package/src/list/deprecated.js

@@ -8,7 +8,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
  */
 import migrateFontFamily from '../utils/migrate-font-family';
 
-const v1 = {
+const v0 = {
 	attributes: {
 		ordered: {
 			type: 'boolean',
@@ -76,4 +76,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v0 ];

package/src/list/style.scss

@@ -1,7 +1,6 @@
 ol,
 ul {
-	// Break long strings of text without spaces so they don't overflow the block.
-	overflow-wrap: break-word;
+	box-sizing: border-box;
 
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;

package/src/list/test/migrate.js

@@ -0,0 +1,159 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { migrateToListV2 } from '../v2/migrate';
+import * as listItem from '../../list-item';
+import * as list from '../../list';
+import listV2 from '../../list/v2';
+
+describe( 'Migrate list block', () => {
+	beforeAll( () => {
+		const prev = window.__experimentalEnableListBlockV2;
+
+		// force list and list item block registration.
+		registerBlockType(
+			{ name: listItem.name, ...listItem.metadata },
+			listItem.settings
+		);
+		registerBlockType( { name: list.name, ...list.metadata }, listV2 );
+
+		window.__experimentalEnableListBlockV2 = prev;
+	} );
+
+	it( 'should migrate the values attribute to inner blocks', () => {
+		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
+			values:
+				'<li>test</li><li>test</li><li>test<ol><li>test test</li><li>test est eesssss</li></ol></li>',
+			ordered: false,
+		} );
+
+		expect( updatedAttributes ).toEqual( {
+			ordered: false,
+			// Ideally the values attributes shouldn't be here
+			// but since we didn't enable v2 by default yet,
+			// we're keeping the old default value in block.json
+			values: '',
+		} );
+		expect( serialize( updatedInnerBlocks ) )
+			.toEqual( `<!-- wp:list-item -->
+<li>test</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>test</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>test<!-- wp:list {\"ordered\":true} -->
+<ol><!-- wp:list-item -->
+<li>test test</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>test est eesssss</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->` );
+	} );
+
+	it( 'should handle empty space properly', () => {
+		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
+			values: `<li>Europe</li>
+                <li>
+                    \tAfrica
+                    <ol>
+                        <li>Algeria</li>
+                    </ol>
+                    \t
+                </li>`,
+			ordered: false,
+		} );
+
+		expect( updatedAttributes ).toEqual( {
+			ordered: false,
+			// Ideally the values attributes shouldn't be here
+			// but since we didn't enable v2 by default yet,
+			// we're keeping the old default value in block.json
+			values: '',
+		} );
+		expect( serialize( updatedInnerBlocks ) )
+			.toEqual( `<!-- wp:list-item -->
+<li>Europe</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Africa<!-- wp:list {\"ordered\":true} -->
+<ol><!-- wp:list-item -->
+<li>Algeria</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->` );
+	} );
+
+	it( 'should handle formats properly', () => {
+		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
+			values: `<li>Europe<ul><li>France<ul><li>Lyon <strong>Rhone</strong>s</li><li>Paris <em>Ile de france</em><ul><li><em>1er</em></li></ul></li></ul></li></ul></li></ul></li>`,
+			ordered: false,
+		} );
+
+		expect( updatedAttributes ).toEqual( {
+			ordered: false,
+			// Ideally the values attributes shouldn't be here
+			// but since we didn't enable v2 by default yet,
+			// we're keeping the old default value in block.json
+			values: '',
+		} );
+		expect( serialize( updatedInnerBlocks ) )
+			.toEqual( `<!-- wp:list-item -->
+<li>Europe<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>France<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Lyon <strong>Rhone</strong>s</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Paris <em>Ile de france</em><!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><em>1er</em></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->` );
+	} );
+
+	it( 'should not add random space', () => {
+		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
+			values: `<li>Europe<ul><li>F<strong>ranc</strong>e<ul><li>Paris</li></ul></li></ul></li>`,
+			ordered: false,
+		} );
+
+		expect( updatedAttributes ).toEqual( {
+			ordered: false,
+			// Ideally the values attributes shouldn't be here
+			// but since we didn't enable v2 by default yet,
+			// we're keeping the old default value in block.json
+			values: '',
+		} );
+		expect( serialize( updatedInnerBlocks ) )
+			.toEqual( `<!-- wp:list-item -->
+<li>Europe<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>F<strong>ranc</strong>e<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Paris</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->` );
+	} );
+} );

package/src/list/v2/deprecated.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import initialDeprecations from '../deprecated';
+import { migrateToListV2 } from './migrate';
+
+const v1 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			__experimentalRole: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			__experimentalRole: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			__experimentalFontFamily: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalSlashInserter: true,
+	},
+	save( { attributes } ) {
+		const { ordered, values, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+
+		return (
+			<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+				<RichText.Content value={ values } multiline="li" />
+			</TagName>
+		);
+	},
+	migrate: migrateToListV2,
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v1, ...initialDeprecations ];

package/src/list/v2/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { last } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -5,29 +10,132 @@ import {
 	BlockControls,
 	useBlockProps,
 	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToolbarButton } from '@wordpress/components';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { isRTL, __ } from '@wordpress/i18n';
 import {
 	formatListBullets,
 	formatListBulletsRTL,
 	formatListNumbered,
 	formatListNumberedRTL,
+	formatOutdent,
+	formatOutdentRTL,
 } from '@wordpress/icons';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback, useEffect } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import OrderedListSettings from '../ordered-list-settings';
+import { migrateToListV2 } from './migrate';
 
 const TEMPLATE = [ [ 'core/list-item' ] ];
 
-function Edit( { attributes, setAttributes } ) {
+/**
+ * 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
+	);
+
+	useEffect( () => {
+		// As soon as the block is loaded, migrate it to the new version.
+
+		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( last( innerBlocks ).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 }
+			/>
+		</>
+	);
+}
+
+function Edit( { attributes, setAttributes, clientId } ) {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
 	} );
+	useMigrateOnLoad( attributes, clientId );
 	const { ordered, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
 
@@ -51,6 +159,7 @@ function Edit( { attributes, setAttributes } ) {
 					setAttributes( { ordered: true } );
 				} }
 			/>
+			<IndentUI clientId={ clientId } />
 		</BlockControls>
 	);
 

package/src/list/v2/index.js

@@ -9,12 +9,14 @@ import { list as icon } from '@wordpress/icons';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
+import deprecated from './deprecated';
 
 const settings = {
 	icon,
 	edit,
 	save,
 	transforms,
+	deprecated,
 };
 
 export default settings;

package/src/list/v2/migrate.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+function createListBlockFromDOMElement( listElement ) {
+	const listAttributes = {
+		ordered: 'OL' === listElement.tagName,
+		start: listElement.getAttribute( 'start' )
+			? parseInt( listElement.getAttribute( 'start' ), 10 )
+			: undefined,
+		reversed:
+			listElement.getAttribute( 'reversed' ) === true ? true : undefined,
+		type: listElement.getAttribute( 'type' ) ?? undefined,
+	};
+
+	const innerBlocks = Array.from( listElement.children ).map(
+		( listItem ) => {
+			const children = Array.from( listItem.childNodes ).filter(
+				( node ) =>
+					node.nodeType !== node.TEXT_NODE ||
+					node.textContent.trim().length !== 0
+			);
+			children.reverse();
+			const [ nestedList, ...nodes ] = children;
+
+			const hasNestedList =
+				nestedList.tagName === 'UL' || nestedList.tagName === 'OL';
+			if ( ! hasNestedList ) {
+				return createBlock( 'core/list-item', {
+					content: listItem.innerHTML,
+				} );
+			}
+			const htmlNodes = nodes.map( ( node ) => {
+				if ( node.nodeType === node.TEXT_NODE ) {
+					return node.textContent;
+				}
+				return node.outerHTML;
+			} );
+			htmlNodes.reverse();
+			const childAttributes = {
+				content: htmlNodes.join( '' ).trim(),
+			};
+			const childInnerBlocks = [
+				createListBlockFromDOMElement( nestedList ),
+			];
+			return createBlock(
+				'core/list-item',
+				childAttributes,
+				childInnerBlocks
+			);
+		}
+	);
+
+	return createBlock( 'core/list', listAttributes, innerBlocks );
+}
+
+export function migrateToListV2( attributes ) {
+	const { values, start, reversed, ordered, type } = attributes;
+
+	const list = document.createElement( ordered ? 'ol' : 'ul' );
+	list.innerHTML = values;
+	if ( start ) {
+		list.setAttribute( 'start', start );
+	}
+	if ( reversed ) {
+		list.setAttribute( 'reversed', true );
+	}
+	if ( type ) {
+		list.setAttribute( 'type', type );
+	}
+
+	const listBlock = createListBlockFromDOMElement( list );
+
+	return [
+		{
+			...omit( attributes, [ 'values' ] ),
+			...listBlock.attributes,
+		},
+		listBlock.innerBlocks,
+	];
+}

package/src/list-item/edit.js

@@ -5,9 +5,47 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
+	BlockControls,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
+import { ToolbarButton } from '@wordpress/components';
+import {
+	formatOutdent,
+	formatOutdentRTL,
+	formatIndentRTL,
+	formatIndent,
+} from '@wordpress/icons';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useEnter, useIndentListItem, useOutdentListItem } from './hooks';
+
+function IndentUI( { clientId } ) {
+	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
+	const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId );
+
+	return (
+		<>
+			<ToolbarButton
+				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
+				title={ __( 'Outdent' ) }
+				describedBy={ __( 'Outdent list item' ) }
+				disabled={ ! canOutdent }
+				onClick={ outdentListItem }
+			/>
+			<ToolbarButton
+				icon={ isRTL() ? formatIndentRTL : formatIndent }
+				title={ __( 'Indent' ) }
+				describedBy={ __( 'Indent list item' ) }
+				isDisabled={ ! canIndent }
+				onClick={ indentListItem }
+			/>
+		</>
+	);
+}
 
 export default function ListItemEdit( {
 	name,
@@ -15,33 +53,41 @@ export default function ListItemEdit( {
 	setAttributes,
 	mergeBlocks,
 	onReplace,
+	clientId,
 } ) {
+	const { placeholder, content } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
 	} );
-
+	const useEnterRef = useEnter( { content, clientId } );
 	return (
-		<li { ...innerBlocksProps }>
-			<RichText
-				identifier="content"
-				tagName="div"
-				onChange={ ( nextContent ) =>
-					setAttributes( { content: nextContent } )
-				}
-				value={ attributes.content }
-				aria-label={ __( 'List text' ) }
-				placeholder={ attributes.placeholder || __( 'List' ) }
-				onSplit={ ( value ) =>
-					createBlock( name, {
-						...attributes,
-						content: value,
-					} )
-				}
-				onMerge={ mergeBlocks }
-				onReplace={ onReplace }
-			/>
-			{ innerBlocksProps.children }
-		</li>
+		<>
+			<li { ...innerBlocksProps }>
+				<RichText
+					ref={ useMergeRefs( [ useEnterRef ] ) }
+					identifier="content"
+					tagName="div"
+					onChange={ ( nextContent ) =>
+						setAttributes( { content: nextContent } )
+					}
+					value={ content }
+					aria-label={ __( 'List text' ) }
+					placeholder={ placeholder || __( 'List' ) }
+					onSplit={ ( value ) => {
+						return createBlock( name, {
+							...attributes,
+							content: value,
+						} );
+					} }
+					onMerge={ mergeBlocks }
+					onReplace={ onReplace }
+				/>
+				{ innerBlocksProps.children }
+			</li>
+			<BlockControls group="block">
+				<IndentUI clientId={ clientId } />
+			</BlockControls>
+		</>
 	);
 }