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

package/src/list/test/edit.native.js

@@ -119,20 +119,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
@@ -180,61 +166,18 @@ describe( 'List V2 block', () => {
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
 
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
 		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
 			/List item Block\. Row 2/
 		);
-
-		fireEvent(
-			within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 350,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select second level list
 		const secondNestedLevelBlock = within(
 			firstNestedLevelBlock
 		).getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( secondNestedLevelBlock ).getByTestId(
-				'block-list-wrapper'
-			),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( secondNestedLevelBlock );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -256,20 +199,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select Secont List Item block
@@ -300,40 +229,12 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Select List Item block
 		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
 			/List item Block\. Row 1/
 		);
-
-		fireEvent(
-			within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 350,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select Inner block List
@@ -341,19 +242,6 @@ describe( 'List V2 block', () => {
 			/List Block\. Row 1/
 		);
 
-		fireEvent(
-			within( innerBlockList ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		// Select nested List Item block
 		const listItemBlock = within( innerBlockList ).getByA11yLabel(
 			/List item Block\. Row 1/
@@ -386,20 +274,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
@@ -428,20 +302,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
@@ -481,20 +341,6 @@ describe( 'List V2 block', () => {
 
 		// Select List block
 		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
-
-		fireEvent(
-			within( listBlock ).getByTestId( 'block-list-wrapper' ),
-			'layout',
-			{
-				nativeEvent: {
-					layout: {
-						width: 100,
-						height: 50,
-					},
-				},
-			}
-		);
-
 		fireEvent.press( listBlock );
 
 		// Update to ordered list

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/{v2/migrate.js → utils.js}

@@ -11,11 +11,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,
 	};
 

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,6 +14,7 @@ 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';
 
@@ -26,6 +27,8 @@ 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,11 +87,35 @@ 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 onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId );
 	const onLayout = useCallback( ( { nativeEvent } ) => {
@@ -128,12 +155,15 @@ export default function ListItemEdit( {
 						}
 						value={ content }
 						placeholder={ placeholder || __( 'List' ) }
+						placeholderTextColor={
+							defaultPlaceholderTextColorWithOpacity
+						}
 						onSplit={ onSplit }
 						onMerge={ onMerge }
 						onReplace={ ( blocks, ...args ) => {
 							onReplace( convertToListItems( blocks ), ...args );
 						} }
-						style={ style }
+						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-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/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/navigation/edit/index.js

@@ -36,6 +36,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
+import { close, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -465,15 +466,25 @@ function Navigation( {
 								setOverlayMenuPreview( ! overlayMenuPreview );
 							} }
 						>
-							{ hasIcon && <OverlayMenuIcon /> }
-							{ ! hasIcon && <span>{ __( 'Menu' ) }</span> }
+							{ hasIcon && (
+								<>
+									<OverlayMenuIcon />
+									<Icon icon={ close } />
+								</>
+							) }
+							{ ! hasIcon && (
+								<>
+									<span>{ __( 'Menu' ) }</span>
+									<span>{ __( 'Close' ) }</span>
+								</>
+							) }
 						</Button>
 					) }
 					{ overlayMenuPreview && (
 						<ToggleControl
 							label={ __( 'Show icon button' ) }
 							help={ __(
-								'Configure the visual appearance of the button opening the overlay menu.'
+								'Configure the visual appearance of the button opening and closing the overlay menu.'
 							) }
 							onChange={ ( value ) =>
 								setAttributes( { hasIcon: value } )
@@ -633,7 +644,6 @@ function Navigation( {
 					overlayTextColor={ overlayTextColor }
 				>
 					<UnsavedInnerBlocks
-						blockProps={ blockProps }
 						blocks={ uncontrolledInnerBlocks }
 						clientId={ clientId }
 						navigationMenus={ navigationMenus }

package/src/navigation/edit/responsive-wrapper.js

@@ -79,7 +79,7 @@ export default function ResponsiveWrapper( {
 			{ ! isOpen && (
 				<Button
 					aria-haspopup="true"
-					aria-label={ __( 'Open menu' ) }
+					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
@@ -104,10 +104,15 @@ export default function ResponsiveWrapper( {
 					<div { ...dialogProps }>
 						<Button
 							className="wp-block-navigation__responsive-container-close"
-							aria-label={ __( 'Close menu' ) }
+							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }
 						>
-							<Icon icon={ close } />
+							{ hasIcon && <Icon icon={ close } /> }
+							{ ! hasIcon && (
+								<span className="wp-block-navigation__toggle_button_label">
+									{ __( 'Close' ) }
+								</span>
+							) }
 						</Button>
 						<div
 							className="wp-block-navigation__responsive-container-content"