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

package/src/list/transforms.js

@@ -1,15 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, getBlockAttributes } from '@wordpress/blocks';
-import {
-	__UNSTABLE_LINE_SEPARATOR,
-	create,
-	join,
-	replace,
-	split,
-	toHTMLString,
-} from '@wordpress/rich-text';
+import { createBlock } from '@wordpress/blocks';
+import { create, split, toHTMLString } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { createListBlockFromDOMElement } from './utils';
 
 function getListContentSchema( { phrasingContentSchema } ) {
 	const listContentSchema = {
@@ -32,6 +30,15 @@ function getListContentSchema( { phrasingContentSchema } ) {
 	return listContentSchema;
 }
 
+function getListContentFlat( blocks ) {
+	return blocks.flatMap( ( { name, attributes, innerBlocks = [] } ) => {
+		if ( name === 'core/list-item' ) {
+			return [ attributes.content, ...getListContentFlat( innerBlocks ) ];
+		}
+		return getListContentFlat( innerBlocks );
+	} );
+}
+
 const transforms = {
 	from: [
 		{
@@ -39,30 +46,28 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph', 'core/heading' ],
 			transform: ( blockAttributes ) => {
-				return createBlock( 'core/list', {
-					values: toHTMLString( {
-						value: join(
-							blockAttributes.map( ( { content } ) => {
-								const value = create( { html: content } );
-
-								if ( blockAttributes.length > 1 ) {
-									return value;
-								}
-
-								// When converting only one block, transform
-								// every line to a list item.
-								return replace(
-									value,
-									/\n/g,
-									__UNSTABLE_LINE_SEPARATOR
-								);
-							} ),
-							__UNSTABLE_LINE_SEPARATOR
-						),
-						multilineTag: 'li',
-					} ),
-					anchor: blockAttributes.anchor,
-				} );
+				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
+				);
 			},
 		},
 		{
@@ -72,102 +77,43 @@ const transforms = {
 				ol: getListContentSchema( args ).ol,
 				ul: getListContentSchema( args ).ul,
 			} ),
-			transform( node ) {
-				const attributes = {
-					ordered: node.nodeName === 'OL',
-					anchor: node.id === '' ? undefined : node.id,
-				};
-
-				if ( attributes.ordered ) {
-					const type = node.getAttribute( 'type' );
-
-					if ( type ) {
-						attributes.type = type;
-					}
-
-					if ( node.getAttribute( 'reversed' ) !== null ) {
-						attributes.reversed = true;
-					}
-
-					const start = parseInt( node.getAttribute( 'start' ), 10 );
-
-					if (
-						! isNaN( start ) &&
-						// start=1 only makes sense if the list is reversed.
-						( start !== 1 || attributes.reversed )
-					) {
-						attributes.start = start;
-					}
-				}
-
-				return createBlock( 'core/list', {
-					...getBlockAttributes( 'core/list', node.outerHTML ),
-					...attributes,
-				} );
-			},
+			transform: createListBlockFromDOMElement,
 		},
 		...[ '*', '-' ].map( ( prefix ) => ( {
 			type: 'prefix',
 			prefix,
 			transform( content ) {
-				return createBlock( 'core/list', {
-					values: `<li>${ content }</li>`,
-				} );
+				return createBlock( 'core/list', {}, [
+					createBlock( 'core/list-item', { content } ),
+				] );
 			},
 		} ) ),
 		...[ '1.', '1)' ].map( ( prefix ) => ( {
 			type: 'prefix',
 			prefix,
 			transform( content ) {
-				return createBlock( 'core/list', {
-					ordered: true,
-					values: `<li>${ content }</li>`,
-				} );
+				return createBlock(
+					'core/list',
+					{
+						ordered: true,
+					},
+					[ createBlock( 'core/list-item', { content } ) ]
+				);
 			},
 		} ) ),
 	],
 	to: [
-		{
+		...[ 'core/paragraph', 'core/heading' ].map( ( block ) => ( {
 			type: 'block',
-			blocks: [ 'core/paragraph' ],
-			transform: ( { values } ) =>
-				split(
-					create( {
-						html: values,
-						multilineTag: 'li',
-						multilineWrapperTags: [ 'ul', 'ol' ],
-					} ),
-					__UNSTABLE_LINE_SEPARATOR
-				).map( ( piece ) =>
-					createBlock( 'core/paragraph', {
-						content: toHTMLString( { value: piece } ),
+			blocks: [ block ],
+			transform: ( _attributes, childBlocks ) => {
+				return getListContentFlat( childBlocks ).map( ( content ) =>
+					createBlock( block, {
+						content,
 					} )
-				),
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/heading' ],
-			transform: ( { values } ) =>
-				split(
-					create( {
-						html: values,
-						multilineTag: 'li',
-						multilineWrapperTags: [ 'ul', 'ol' ],
-					} ),
-					__UNSTABLE_LINE_SEPARATOR
-				).map( ( piece ) =>
-					createBlock( 'core/heading', {
-						content: toHTMLString( { value: piece } ),
-					} )
-				),
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/table-of-contents' ],
-			transform: () => {
-				return createBlock( 'core/table-of-contents' );
+				);
 			},
-		},
+		} ) ),
 	],
 };
 

package/src/list/transforms.native.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
 
 const transforms = {
 	...webTransforms,

package/src/list/{v2/migrate.js → utils.js}

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,11 +6,11 @@ import { createBlock } from '@wordpress/blocks';
 export function createListBlockFromDOMElement( listElement ) {
 	const listAttributes = {
 		ordered: 'OL' === listElement.tagName,
+		anchor: listElement.id === '' ? undefined : listElement.id,
 		start: listElement.getAttribute( 'start' )
 			? parseInt( listElement.getAttribute( 'start' ), 10 )
 			: undefined,
-		reversed:
-			listElement.getAttribute( 'reversed' ) === true ? true : undefined,
+		reversed: listElement.hasAttribute( 'reversed' ) ? true : undefined,
 		type: listElement.getAttribute( 'type' ) ?? undefined,
 	};
 
@@ -30,7 +25,7 @@ export function createListBlockFromDOMElement( listElement ) {
 			const [ nestedList, ...nodes ] = children;
 
 			const hasNestedList =
-				nestedList.tagName === 'UL' || nestedList.tagName === 'OL';
+				nestedList?.tagName === 'UL' || nestedList?.tagName === 'OL';
 			if ( ! hasNestedList ) {
 				return createBlock( 'core/list-item', {
 					content: listItem.innerHTML,
@@ -77,9 +72,11 @@ export function migrateToListV2( attributes ) {
 
 	const listBlock = createListBlockFromDOMElement( list );
 
+	const { values: omittedValues, ...restAttributes } = attributes;
+
 	return [
 		{
-			...omit( attributes, [ 'values' ] ),
+			...restAttributes,
 			...listBlock.attributes,
 		},
 		listBlock.innerBlocks,

package/src/list-item/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"__experimental": "list-v2",
 	"name": "core/list-item",
 	"title": "List item",
 	"category": "text",

package/src/list-item/edit.native.js

@@ -14,18 +14,21 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useSplit, useMerge } from './hooks';
+import { useSplit, useMerge, useEnter } from './hooks';
 import { convertToListItems } from './utils';
 import { IndentUI } from './edit.js';
 import styles from './style.scss';
 import ListStyleType from './list-style-type';
 
+const OPACITY = '9e';
+
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
@@ -84,13 +87,55 @@ export default function ListItemEdit( {
 	const blockProps = useBlockProps( {
 		...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ),
 	} );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
-		renderAppender: false,
+		useCompactList: true,
 	} );
 
+	// Set default placeholder text color from light/dark scheme or base colors
+	const defaultPlaceholderFromScheme = usePreferredColorSchemeStyle(
+		styles[ 'wp-block-list-item__list-item-placeholder' ],
+		styles[ 'wp-block-list-item__list-item-placeholder--dark' ]
+	);
+
+	const currentTextColor = style?.color || style?.baseColors?.color?.text;
+
+	const defaultPlaceholderTextColor = currentTextColor
+		? currentTextColor
+		: defaultPlaceholderFromScheme?.color;
+
+	// Add hex opacity to default placeholder text color and style object
+	const defaultPlaceholderTextColorWithOpacity =
+		defaultPlaceholderTextColor + OPACITY;
+
+	const styleWithPlaceholderOpacity = {
+		...style,
+		...( style?.color && {
+			placeholderColor: style.color + OPACITY,
+		} ),
+	};
+
+	const preventDefault = useRef( false );
+	const { onEnter } = useEnter( { content, clientId }, preventDefault );
 	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId );
+	const onSplitList = useCallback(
+		( value ) => {
+			if ( ! preventDefault.current ) {
+				return onSplit( value );
+			}
+		},
+		[ clientId, onSplit ]
+	);
+	const onReplaceList = useCallback(
+		( blocks, ...args ) => {
+			if ( ! preventDefault.current ) {
+				onReplace( convertToListItems( blocks ), ...args );
+			}
+		},
+		[ clientId, onReplace, convertToListItems ]
+	);
 	const onLayout = useCallback( ( { nativeEvent } ) => {
 		setContentWidth( ( prevState ) => {
 			const { width } = nativeEvent.layout;
@@ -128,12 +173,14 @@ export default function ListItemEdit( {
 						}
 						value={ content }
 						placeholder={ placeholder || __( 'List' ) }
-						onSplit={ onSplit }
+						placeholderTextColor={
+							defaultPlaceholderTextColorWithOpacity
+						}
+						onSplit={ onSplitList }
 						onMerge={ onMerge }
-						onReplace={ ( blocks, ...args ) => {
-							onReplace( convertToListItems( blocks ), ...args );
-						} }
-						style={ style }
+						onReplace={ onReplaceList }
+						onEnter={ onEnter }
+						style={ styleWithPlaceholderOpacity }
 						deleteEnter={ true }
 						containerWidth={ contentWidth }
 					/>

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

@@ -29,8 +29,10 @@ export default function useCopy( clientId ) {
 		}
 
 		node.addEventListener( 'copy', onCopy );
+		node.addEventListener( 'cut', onCopy );
 		return () => {
 			node.removeEventListener( 'copy', onCopy );
+			node.removeEventListener( 'cut', onCopy );
 		};
 	}, [] );
 }

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

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getDefaultBlockName,
+	cloneBlock,
+} from '@wordpress/blocks';
+import { useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useOutdentListItem from './use-outdent-list-item';
+
+export default function useEnter( props, preventDefault ) {
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { getBlock, getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	const [ canOutdent, outdentListItem ] = useOutdentListItem(
+		propsRef.current.clientId
+	);
+
+	return {
+		onEnter() {
+			const { content, clientId } = propsRef.current;
+			if ( content.length ) {
+				return;
+			}
+			preventDefault.current = true;
+			if ( canOutdent ) {
+				outdentListItem();
+				return;
+			}
+			// Here we are in top level list so we need to split.
+			const topParentListBlock = getBlock(
+				getBlockRootClientId( clientId )
+			);
+			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(
+				topParentListBlock.clientId,
+				[ head, middle, ...tail ],
+				1
+			);
+			// We manually change the selection here because we are replacing
+			// a different block than the selected one.
+			selectionChange( middle.clientId );
+		},
+	};
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { first, last, castArray } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -61,7 +61,7 @@ export default function useOutdentListItem( clientId ) {
 
 			if ( ! clientIds.length ) return;
 
-			const firstClientId = first( clientIds );
+			const firstClientId = clientIds[ 0 ];
 
 			// Can't outdent if it's not a list item.
 			if ( getBlockName( firstClientId ) !== listItemName ) return;
@@ -72,7 +72,7 @@ export default function useOutdentListItem( clientId ) {
 			if ( ! parentListItemId ) return;
 
 			const parentListId = getBlockRootClientId( firstClientId );
-			const lastClientId = last( clientIds );
+			const lastClientId = clientIds[ clientIds.length - 1 ];
 			const order = getBlockOrder( parentListId );
 			const followingListItems = order.slice(
 				getBlockIndex( lastClientId ) + 1
@@ -80,7 +80,7 @@ export default function useOutdentListItem( clientId ) {
 
 			registry.batch( () => {
 				if ( followingListItems.length ) {
-					let nestedListId = first( getBlockOrder( firstClientId ) );
+					let nestedListId = getBlockOrder( firstClientId )[ 0 ];
 
 					if ( ! nestedListId ) {
 						const nestedListBlock = cloneBlock(

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

@@ -19,13 +19,21 @@ export default function useSpace( clientId ) {
 	return useRefEffect(
 		( element ) => {
 			function onKeyDown( event ) {
+				const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event;
+
 				if (
 					event.defaultPrevented ||
-					event.keyCode !== SPACE ||
-					! canIndent
+					! canIndent ||
+					keyCode !== SPACE ||
+					// Only override when no modifiers are pressed.
+					shiftKey ||
+					altKey ||
+					metaKey ||
+					ctrlKey
 				) {
 					return;
 				}
+
 				const selectionStart = getSelectionStart();
 				const selectionEnd = getSelectionEnd();
 				if (

package/src/list-item/index.js

@@ -6,6 +6,7 @@ import { listItem as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
@@ -25,3 +26,5 @@ export const settings = {
 		};
 	},
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/list-item/init.js

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

package/src/list-item/style.native.scss

@@ -47,3 +47,11 @@
 .wp-block-list-item__list-item-container {
 	margin-right: 8;
 }
+
+.wp-block-list-item__list-item-placeholder {
+	color: $gray;
+}
+
+.wp-block-list-item__list-item-placeholder--dark {
+	color: $gray-50;
+}

package/src/loginout/index.js

@@ -6,6 +6,7 @@ import { login as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';
 
@@ -16,3 +17,5 @@ export const settings = {
 	icon,
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/loginout/init.js

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

package/src/media-text/block.json

@@ -17,20 +17,23 @@
 			"source": "attribute",
 			"selector": "figure img",
 			"attribute": "alt",
-			"default": ""
+			"default": "",
+			"__experimentalRole": "content"
 		},
 		"mediaPosition": {
 			"type": "string",
 			"default": "left"
 		},
 		"mediaId": {
-			"type": "number"
+			"type": "number",
+			"__experimentalRole": "content"
 		},
 		"mediaUrl": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure video,figure img",
-			"attribute": "src"
+			"attribute": "src",
+			"__experimentalRole": "content"
 		},
 		"mediaLink": {
 			"type": "string"
@@ -48,7 +51,8 @@
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure a",
-			"attribute": "href"
+			"attribute": "href",
+			"__experimentalRole": "content"
 		},
 		"rel": {
 			"type": "string",
@@ -63,7 +67,8 @@
 			"attribute": "class"
 		},
 		"mediaType": {
-			"type": "string"
+			"type": "string",
+			"__experimentalRole": "content"
 		},
 		"mediaWidth": {
 			"type": "number",
@@ -98,6 +103,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/media-text/index.js

@@ -7,6 +7,7 @@ import { mediaAndText as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -48,3 +49,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/media-text/init.js

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