@wordpress/block-library 7.2.0 → 7.3.2

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>
+		</>
 	);
 }

package/src/list-item/hooks/index.js

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

package/src/list-item/hooks/use-enter.js

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getDefaultBlockName,
+	cloneBlock,
+} from '@wordpress/blocks';
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { ENTER } from '@wordpress/keycodes';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useIndentListItem from './use-indent-list-item';
+
+export default function useEnter( props ) {
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const {
+		getBlock,
+		getBlockRootClientId,
+		getBlockParents,
+		getBlockIndex,
+	} = useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	const [ canIndent, indentListItem ] = useIndentListItem(
+		propsRef.current.clientId
+	);
+	return useRefEffect(
+		( element ) => {
+			function onKeyDown( event ) {
+				if ( event.defaultPrevented || event.keyCode !== ENTER ) {
+					return;
+				}
+				const { content, clientId } = propsRef.current;
+				if ( content.length ) {
+					return;
+				}
+				event.preventDefault();
+				if ( canIndent ) {
+					indentListItem();
+					return;
+				}
+				// Here we are in top level list so we need to split.
+				const blockRootClientId = getBlockRootClientId( clientId );
+				const blockParents = getBlockParents( clientId );
+				const topParentListBlockClientId = blockParents[ 0 ];
+				const topParentListBlock = getBlock(
+					topParentListBlockClientId
+				);
+				const blockIndex = getBlockIndex( clientId );
+				const head = cloneBlock( {
+					...topParentListBlock,
+					innerBlocks: topParentListBlock.innerBlocks.slice(
+						0,
+						blockIndex
+					),
+				} );
+				const middle = createBlock( getDefaultBlockName() );
+				// Last list item might contain a `list` block innerBlock
+				// In that case append remaining innerBlocks blocks.
+				const after = [
+					...( topParentListBlock.innerBlocks[ blockIndex ]
+						.innerBlocks[ 0 ]?.innerBlocks || [] ),
+					...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
+				];
+				const tail = after.length
+					? [
+							cloneBlock( {
+								...topParentListBlock,
+								innerBlocks: after,
+							} ),
+					  ]
+					: [];
+				replaceBlocks(
+					blockRootClientId,
+					[ head, middle, ...tail ],
+					1,
+					0
+				);
+			}
+
+			element.addEventListener( 'keydown', onKeyDown );
+			return () => {
+				element.removeEventListener( 'keydown', onKeyDown );
+			};
+		},
+		[ canIndent ]
+	);
+}

package/src/list-item/hooks/use-indent-list-item.js

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { first } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { createListItem } from '../utils';
+
+export default function useIndentListItem( clientId ) {
+	const { canIndent } = useSelect(
+		( innerSelect ) => {
+			const { getBlockIndex } = innerSelect( blockEditorStore );
+			return {
+				canIndent: getBlockIndex( clientId ) > 0,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlock,
+		getBlockOrder,
+		getSelectionStart,
+		getSelectionEnd,
+		getBlockIndex,
+	} = useSelect( blockEditorStore );
+
+	return [
+		canIndent,
+		useCallback( () => {
+			const selectionStart = getSelectionStart();
+			const selectionEnd = getSelectionEnd();
+
+			const parentId = getBlockRootClientId( clientId );
+			const previousSiblingId = getBlockOrder( parentId )[
+				getBlockIndex( clientId ) - 1
+			];
+			const previousSibling = getBlock( previousSiblingId );
+			const previousSiblingChildren =
+				first( previousSibling.innerBlocks )?.innerBlocks || [];
+			const previousSiblingListAttributes =
+				first( previousSibling.innerBlocks )?.attributes || {};
+			const block = getBlock( clientId );
+
+			const childListAttributes = first( block.innerBlocks )?.attributes;
+			const childItemBlocks =
+				first( block.innerBlocks )?.innerBlocks || [];
+
+			const newBlock = createListItem(
+				block.attributes,
+				childListAttributes,
+				childItemBlocks
+			);
+			// Replace the previous sibling of the block being indented and the indented block,
+			// with a new block whose attributes are equal to the ones of the previous sibling and
+			// whose descendants are the children of the previous sibling, followed by the indented block.
+			replaceBlocks(
+				[ previousSiblingId, clientId ],
+				[
+					createListItem(
+						previousSibling.attributes,
+						previousSiblingListAttributes,
+						[ ...previousSiblingChildren, newBlock ]
+					),
+				]
+			);
+
+			// Restore the selection state.
+			selectionChange(
+				newBlock.clientId,
+				selectionEnd.attributeKey,
+				selectionEnd.clientId === selectionStart.clientId
+					? selectionStart.offset
+					: selectionEnd.offset,
+				selectionEnd.offset
+			);
+		}, [ clientId ] ),
+	];
+}

package/src/list-item/hooks/use-outdent-list-item.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { createListItem } from '../utils';
+
+export default function useOutdentListItem( clientId ) {
+	const { canOutdent } = useSelect(
+		( innerSelect ) => {
+			const { getBlockRootClientId } = innerSelect( blockEditorStore );
+			const grandParentId = getBlockRootClientId(
+				getBlockRootClientId( clientId )
+			);
+			return {
+				canOutdent: !! grandParentId,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockAttributes,
+		getBlock,
+		getBlockIndex,
+		getSelectionStart,
+		getSelectionEnd,
+	} = useSelect( blockEditorStore );
+
+	return [
+		canOutdent,
+		useCallback( () => {
+			const selectionStart = getSelectionStart();
+			const selectionEnd = getSelectionEnd();
+
+			const listParentId = getBlockRootClientId( clientId );
+			const listAttributes = getBlockAttributes( listParentId );
+			const listItemParentId = getBlockRootClientId( listParentId );
+			const listItemParentAttributes = getBlockAttributes(
+				listItemParentId
+			);
+
+			const index = getBlockIndex( clientId );
+			const siblingBlocks = getBlock( listParentId ).innerBlocks;
+			const previousSiblings = siblingBlocks.slice( 0, index );
+			const afterSiblings = siblingBlocks.slice( index + 1 );
+
+			// Create a new parent list item block with just the siblings
+			// that existed before the child item being outdent.
+			const newListItemParent = createListItem(
+				listItemParentAttributes,
+				listAttributes,
+				previousSiblings
+			);
+
+			const block = getBlock( clientId );
+			const childList = block.innerBlocks[ 0 ];
+			const childItems = childList?.innerBlocks || [];
+			const hasChildItems = !! childItems.length;
+
+			// Create a new list item block whose attributes are equal to the
+			// block being outdent and whose children are the children that it had (if any)
+			// followed by the siblings that existed after it.
+			const newItem = createListItem(
+				block.attributes,
+				hasChildItems ? childList.attributes : listAttributes,
+				[ ...childItems, ...afterSiblings ]
+			);
+
+			// Replace the parent list item block, with a new block containing
+			// the previous siblings, followed by another block containing after siblings
+			// in relation to the block being outdent.
+			replaceBlocks(
+				[ listItemParentId ],
+				[ newListItemParent, newItem ]
+			);
+
+			// Restore the selection state.
+			selectionChange(
+				newItem.clientId,
+				selectionEnd.attributeKey,
+				selectionEnd.clientId === selectionStart.clientId
+					? selectionStart.offset
+					: selectionEnd.offset,
+				selectionEnd.offset
+			);
+		}, [ clientId ] ),
+	];
+}

package/src/list-item/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { list as icon } from '@wordpress/icons';
+import { listItem as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

package/src/list-item/utils.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+export function createListItem( listItemAttributes, listAttributes, children ) {
+	return createBlock(
+		'core/list-item',
+		listItemAttributes,
+		! children || ! children.length
+			? []
+			: [ createBlock( 'core/list', listAttributes, children ) ]
+	);
+}

package/src/media-text/media-container.native.js

@@ -26,8 +26,6 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -152,10 +150,6 @@ class MediaContainer extends Component {
 	}
 
 	finishMediaUploadWithFailure() {
-		const { createErrorNotice } = this.props;
-
-		createErrorNotice( __( 'Failed to insert media.' ) );
-
 		this.setState( { isUploadInProgress: false } );
 	}
 
@@ -381,11 +375,4 @@ class MediaContainer extends Component {
 	}
 }
 
-export default compose( [
-	withDispatch( ( dispatch ) => {
-		const { createErrorNotice } = dispatch( noticesStore );
-
-		return { createErrorNotice };
-	} ),
-	withPreferredColorScheme,
-] )( MediaContainer );
+export default compose( [ withPreferredColorScheme ] )( MediaContainer );

package/src/navigation/block.json

@@ -59,6 +59,10 @@
 		},
 		"customOverlayTextColor": {
 			"type": "string"
+		},
+		"maxNestingLevel": {
+			"type": "number",
+			"default": 5
 		}
 	},
 	"usesContext": [ "navigationArea" ],
@@ -76,7 +80,8 @@
 		"showSubmenuIcon": "showSubmenuIcon",
 		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
-		"orientation": "orientation"
+		"orientation": "orientation",
+		"maxNestingLevel": "maxNestingLevel"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
@@ -90,6 +95,8 @@
 			"__experimentalFontWeight": true,
 			"__experimentalTextTransform": true,
 			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalSkipSerialization": [ "textDecoration" ],
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
@@ -104,6 +111,7 @@
 		"__experimentalLayout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
+			"allowVerticalAlignment": false,
 			"default": {
 				"type": "flex"
 			}