@wordpress/block-library 7.12.0 → 7.13.1-next.957ca95e4c.0

package/src/latest-posts/block.json

@@ -84,7 +84,20 @@
 	},
 	"supports": {
 		"align": true,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-latest-posts-editor",
 	"style": "wp-block-latest-posts"

package/src/list/block.json

@@ -58,6 +58,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"__unstablePasteTextInline": true,
 		"__experimentalSelector": "ol,ul",
 		"__experimentalSlashInserter": true

package/src/list/deprecated.js

@@ -7,6 +7,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import { migrateToListV2 } from './utils';
 
 const v0 = {
 	attributes: {
@@ -68,6 +69,75 @@ const v0 = {
 	},
 };
 
+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.
@@ -76,4 +146,4 @@ const v0 = {
  *
  * See block-deprecation.md
  */
-export default [ v0 ];
+export default [ v1, v0 ];

package/src/list/edit.js

@@ -1,177 +1,190 @@
+/**
+ * External dependencies
+ */
+import { last } from 'lodash';
+
 /**
  * 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( 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 }
+			/>
 		</>
 	);
+}
 
+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,
+		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,6 +2,7 @@
  * WordPress dependencies
  */
 import { list as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -11,41 +12,41 @@ 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 };

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 -->"
 `;