@wordpress/block-library 7.12.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.js

@@ -27,6 +27,7 @@ import {
 	useOutdentListItem,
 	useSplit,
 	useMerge,
+	useCopy,
 } from './hooks';
 import { convertToListItems } from './utils';
 
@@ -61,7 +62,7 @@ export default function ListItemEdit( {
 	clientId,
 } ) {
 	const { placeholder, content } = attributes;
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
 	} );

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/index.js

@@ -4,3 +4,4 @@ export { default as useEnter } from './use-enter';
 export { default as useSpace } from './use-space';
 export { default as useSplit } from './use-split';
 export { default as useMerge } from './use-merge';
+export { default as useCopy } from './use-copy';

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+export default function useCopy( clientId ) {
+	const { getBlockRootClientId, getBlockName, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	return useRefEffect( ( node ) => {
+		function onCopy( event ) {
+			// The event propagates through all nested lists, so don't override
+			// when copying nested list items.
+			if ( event.clipboardData.getData( '__unstableWrapperBlockName' ) ) {
+				return;
+			}
+
+			const rootClientId = getBlockRootClientId( clientId );
+			event.clipboardData.setData(
+				'__unstableWrapperBlockName',
+				getBlockName( rootClientId )
+			);
+			event.clipboardData.setData(
+				'__unstableWrapperBlockAttributes',
+				JSON.stringify( getBlockAttributes( rootClientId ) )
+			);
+		}
+
+		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/list-style-type.native.js

@@ -8,6 +8,7 @@ import { View, Text } from 'react-native';
  */
 import { Icon } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -109,9 +110,15 @@ export default function ListStyleType( {
 		style?.fontSize ? style.fontSize : defaultFontSize,
 		10
 	);
+
+	const colorWithPreferredScheme = usePreferredColorSchemeStyle(
+		styles[ 'wp-block-list-item__list-item--default' ],
+		styles[ 'wp-block-list-item__list-item--default--dark' ]
+	);
+
 	const defaultColor = style?.baseColors?.color?.text
 		? style.baseColors.color.text
-		: styles[ 'wp-block-list-item__list-item--default' ].color;
+		: colorWithPreferredScheme.color;
 	const color = style?.color ? style.color : defaultColor;
 
 	if ( ordered ) {

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

@@ -28,6 +28,10 @@
 	font-size: $editor-font-size;
 }
 
+.wp-block-list-item__list-item--default--dark {
+	color: $white;
+}
+
 .wp-block-list-item__list-item-ordered--default {
 	margin-top: 2;
 }
@@ -43,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/media-text/block.json

@@ -97,6 +97,23 @@
 				"background": true,
 				"text": true
 			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-media-text-editor",