@wordpress/block-library 7.1.0 → 7.3.0

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

@@ -0,0 +1,186 @@
+/**
+ * External dependencies
+ */
+import { last } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+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' ] ];
+
+/**
+ * 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';
+
+	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 (
+		<>
+			<TagName
+				reversed={ reversed }
+				start={ start }
+				{ ...innerBlocksProps }
+			/>
+			{ controls }
+			{ ordered && (
+				<OrderedListSettings
+					setAttributes={ setAttributes }
+					ordered={ ordered }
+					reversed={ reversed }
+					start={ start }
+				/>
+			) }
+		</>
+	);
+}
+
+export default Edit;

package/src/list/v2/index.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { list as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+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/v2/save.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { ordered, reversed, start } = attributes;
+	const TagName = ordered ? 'ol' : 'ul';
+	return (
+		<TagName
+			reversed={ reversed }
+			start={ start }
+			{ ...useBlockProps.save() }
+		>
+			<InnerBlocks.Content />
+		</TagName>
+	);
+}

package/src/list/v2/transforms.js

@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import {
+	__UNSTABLE_LINE_SEPARATOR,
+	create,
+	split,
+	toHTMLString,
+} from '@wordpress/rich-text';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ 'core/paragraph', 'core/heading' ],
+			transform: ( blockAttributes ) => {
+				let childBlocks = [];
+				if ( blockAttributes.length > 1 ) {
+					childBlocks = blockAttributes.map( ( { content } ) => {
+						return createBlock( 'core/list-item', { content } );
+					} );
+				} else if ( blockAttributes.length === 1 ) {
+					const value = create( {
+						html: blockAttributes[ 0 ].content,
+					} );
+					childBlocks = split( value, '\n' ).map( ( result ) => {
+						return createBlock( 'core/list-item', {
+							content: toHTMLString( { value: result } ),
+						} );
+					} );
+				}
+				return createBlock(
+					'core/list',
+					{
+						anchor: blockAttributes.anchor,
+					},
+					childBlocks
+				);
+			},
+		},
+		{
+			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,
+			transform( content ) {
+				return createBlock( 'core/list', {}, [
+					createBlock( 'core/list-item', { content } ),
+				] );
+			},
+		} ) ),
+		...[ '1.', '1)' ].map( ( prefix ) => ( {
+			type: 'prefix',
+			prefix,
+			transform( content ) {
+				return createBlock(
+					'core/list',
+					{
+						ordered: true,
+					},
+					[ createBlock( 'core/list-item', { content } ) ]
+				);
+			},
+		} ) ),
+	],
+	to: [
+		...[ 'core/paragraph', 'core/heading' ].map( ( block ) => ( {
+			type: 'block',
+			blocks: [ block ],
+			transform: ( _attributes, childBlocks ) => {
+				return childBlocks
+					.filter( ( { name } ) => name === 'core/list-item' )
+					.map( ( { attributes } ) =>
+						createBlock( block, {
+							content: attributes.content,
+						} )
+					);
+			},
+		} ) ),
+		...[ 'core/quote', 'core/pullquote' ].map( ( block ) => ( {
+			type: 'block',
+			blocks: [ block ],
+			transform: ( attributes, innerBlocks ) => {
+				return switchToBlockType(
+					switchToBlockType(
+						createBlock( 'core/list', attributes, innerBlocks ),
+						'core/paragraph'
+					),
+					block
+				);
+			},
+		} ) ),
+	],
+};
+
+export default transforms;

package/src/list-item/block.json

@@ -0,0 +1,26 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/list-item",
+	"title": "List item",
+	"category": "text",
+	"parent": [ "core/list" ],
+	"description": "Create a list item.",
+	"textdomain": "default",
+	"attributes": {
+		"placeholder": {
+			"type": "string"
+		},
+		"content": {
+			"type": "string",
+			"source": "html",
+    		"selector": "li",
+			"default": "",
+			"__experimentalRole": "content"
+		}
+	},
+	"supports": {
+		"className": false,
+		"__experimentalSelector": "li"
+	}
+}