@wordpress/block-library 7.18.0 → 8.0.0

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

@@ -81,11 +81,12 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'Media File' ) );
 		fireEvent.press( screen.getByText( 'None' ) );
@@ -107,11 +108,12 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
@@ -133,11 +135,12 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
@@ -147,7 +150,7 @@ describe( 'Image Block', () => {
 			screen.getByPlaceholderText( 'Search or type URL' ),
 			'wordpress.org'
 		);
-		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
 		await waitFor(
 			() => new Promise( ( resolve ) => setTimeout( resolve, 100 ) )
 		);
@@ -169,15 +172,16 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
-		await waitFor( () => screen.getByText( 'Custom URL' ) );
+		await screen.findByText( 'Custom URL' );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );
@@ -185,9 +189,8 @@ describe( 'Image Block', () => {
 			screen.getByPlaceholderText( 'Search or type URL' ),
 			'wordpress.org'
 		);
-		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
-		await waitFor( () => screen.getByText( 'Custom URL' ) );
-		fireEvent.press( screen.getByText( 'Custom URL' ) );
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
+		fireEvent.press( await screen.findByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );
 		fireEvent.press( screen.getByText( 'Media File' ) );
@@ -211,15 +214,16 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
-		expect( screen.queryByA11yLabel( /https:\/\/cldup\.com/ ) ).toBeNull();
+		expect( screen.queryByLabelText( /https:\/\/cldup\.com/ ) ).toBeNull();
 	} );
 
 	it( 'sets link target', async () => {
@@ -235,10 +239,10 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		const imageBlock = screen.getByA11yLabel( /Image Block/ );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
 
-		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
+		const settingsButton = screen.getByLabelText( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );
@@ -266,10 +270,10 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		const imageBlock = screen.getByA11yLabel( /Image Block/ );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
 
-		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
+		const settingsButton = screen.getByLabelText( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );

package/src/index.js

@@ -67,6 +67,7 @@ import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
 import * as pageList from './page-list';
+import * as pageListItem from './page-list-item';
 import * as paragraph from './paragraph';
 import * as postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
@@ -155,6 +156,7 @@ const getAllBlocks = () =>
 		more,
 		nextpage,
 		pageList,
+		pageListItem,
 		pattern,
 		preformatted,
 		pullquote,

package/src/latest-comments/block.json

@@ -29,7 +29,11 @@
 	},
 	"supports": {
 		"align": true,
-		"html": false
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-latest-comments-editor",
 	"style": "wp-block-latest-comments"

package/src/latest-comments/edit.js

@@ -56,6 +56,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Number of comments' ) }
 						value={ commentsToShow }
 						onChange={ ( value ) =>
@@ -71,6 +72,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 				<ServerSideRender
 					block="core/latest-comments"
 					attributes={ attributes }
+					skipBlockSupportAttributes
 					// The preview uses the site's locale to make it more true to how
 					// the block appears on the frontend. Setting the locale
 					// explicitly prevents any middleware from setting it to 'user'.

package/src/latest-comments/style.scss

@@ -4,6 +4,9 @@ ol.wp-block-latest-comments {
 	// Due to low specificity this will be safely overriden
 	// by default wp-block layout styles in the Post/Site editor
 	margin-left: 0;
+
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 }
 
 // Higher specificity - target list via wrapper.

package/src/latest-posts/block.json

@@ -85,6 +85,19 @@
 	"supports": {
 		"align": true,
 		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/latest-posts/edit.js

@@ -234,6 +234,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ displayPostContent &&
 					displayPostContentRadio === 'excerpt' && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Max number of words in excerpt' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -355,6 +356,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 				{ postLayout === 'grid' && (
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>

package/src/latest-posts/style.scss

@@ -1,4 +1,7 @@
 .wp-block-latest-posts {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&.alignleft {
 		/*rtl:ignore*/
 		margin-right: 2em;

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

@@ -63,16 +63,18 @@ describe( 'List block', () => {
 		<li></li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = getByA11yLabel( /List item Block\. Row 1/ );
+		const [ listItemBlock ] = screen.getAllByLabelText(
+			/List item Block\. Row 1/
+		);
 		fireEvent.press( listItemBlock );
 
 		const listItemField =
@@ -109,25 +111,25 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
+		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select second level list
-		const secondNestedLevelBlock = within(
+		const [ secondNestedLevelBlock ] = within(
 			firstNestedLevelBlock
-		).getByA11yLabel( /List Block\. Row 1/ );
+		).getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( secondNestedLevelBlock );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -143,20 +145,22 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select Secont List Item block
-		const listItemBlock = getByA11yLabel( /List item Block\. Row 2/ );
+		const [ listItemBlock ] = screen.getAllByLabelText(
+			/List item Block\. Row 2/
+		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const indentButton = getByA11yLabel( 'Indent' );
+		const indentButton = screen.getByLabelText( 'Indent' );
 		fireEvent.press( indentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -173,33 +177,33 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
+		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select Inner block List
-		const innerBlockList = within( firstNestedLevelBlock ).getByA11yLabel(
-			/List Block\. Row 1/
-		);
+		const [ innerBlockList ] = within(
+			firstNestedLevelBlock
+		).getAllByLabelText( /List Block\. Row 1/ );
 
 		// Select nested List Item block
-		const listItemBlock = within( innerBlockList ).getByA11yLabel(
+		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const outdentButton = getByA11yLabel( 'Outdent' );
+		const outdentButton = screen.getByLabelText( 'Outdent' );
 		fireEvent.press( outdentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -218,16 +222,16 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByA11yLabel( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -246,27 +250,29 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByA11yLabel( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const reverseButton = getByA11yLabel( /Reverse list numbering\. Off/ );
+		const reverseButton = screen.getByLabelText(
+			/Reverse list numbering\. Off/
+		);
 		fireEvent.press( reverseButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -285,27 +291,27 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByA11yLabel( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const startValueButton = getByA11yLabel( /Start value\. Empty/ );
+		const startValueButton = screen.getByLabelText( /Start value\. Empty/ );
 		fireEvent.press( startValueButton );
 		const startValueInput =
 			within( startValueButton ).getByDisplayValue( '' );
@@ -328,11 +334,11 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByA11yLabel(
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -340,7 +346,7 @@ describe( 'List block', () => {
 		// With cursor positioned at the beginning of the first List Item, press
 		// backward delete
 		const listItemField =
-			within( listItemBlock ).getByA11yLabel( /Text input. .*Two.*/ );
+			within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
 		changeAndSelectTextOfRichText( listItemField, 'Two' );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
@@ -361,7 +367,7 @@ describe( 'List block', () => {
 		` );
 	} );
 
-	it( 'unwraps list items when attempting to merge with non-list block', async () => {
+	it( 'unwraps first item when attempting to merge with non-list block', async () => {
 		const initialHtml = `<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
@@ -376,11 +382,11 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByA11yLabel(
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -388,7 +394,7 @@ describe( 'List block', () => {
 		// With cursor positioned at the beginning of the first List Item, press
 		// backward delete
 		const listItemField =
-			within( listItemBlock ).getByA11yLabel( /Text input. .*One.*/ );
+			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
 		changeAndSelectTextOfRichText( listItemField, 'One' );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
@@ -400,14 +406,16 @@ describe( 'List block', () => {
 		"<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
-
+		
 		<!-- wp:paragraph -->
 		<p>One</p>
 		<!-- /wp:paragraph -->
-
-		<!-- wp:paragraph -->
-		<p>Two</p>
-		<!-- /wp:paragraph -->"
+		
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
 	` );
 	} );
 } );

package/src/list/transforms.js

@@ -114,17 +114,6 @@ const transforms = {
 				);
 			},
 		} ) ),
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( _attributes, childBlocks ) => {
-				return getListContentFlat( childBlocks ).map( ( content ) =>
-					createBlock( 'core/paragraph', {
-						content,
-					} )
-				);
-			},
-		},
 	],
 };
 

package/src/list/utils.js

@@ -56,7 +56,8 @@ export function createListBlockFromDOMElement( listElement ) {
 }
 
 export function migrateToListV2( attributes ) {
-	const { values, start, reversed, ordered, type } = attributes;
+	const { values, start, reversed, ordered, type, ...otherAttributes } =
+		attributes;
 
 	const list = document.createElement( ordered ? 'ol' : 'ul' );
 	list.innerHTML = values;
@@ -72,5 +73,8 @@ export function migrateToListV2( attributes ) {
 
 	const [ listBlock ] = rawHandler( { HTML: list.outerHTML } );
 
-	return [ listBlock.attributes, listBlock.innerBlocks ];
+	return [
+		{ ...otherAttributes, ...listBlock.attributes },
+		listBlock.innerBlocks,
+	];
 }

package/src/list-item/edit.js

@@ -67,6 +67,7 @@ export default function ListItemEdit( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
 		renderAppender: false,
+		__unstableDisableDropZone: true,
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );

package/src/list-item/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -25,6 +26,7 @@ export const settings = {
 			content: attributes.content + attributesToMerge.content,
 		};
 	},
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/list-item/transforms.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/paragraph', attributes ),
+		},
+	],
+};
+
+export default transforms;

package/src/list-item/utils.js

@@ -8,6 +8,7 @@ import { createBlock, switchToBlockType } from '@wordpress/blocks';
  */
 import { name as listItemName } from './block.json';
 import { name as listName } from '../list/block.json';
+import { name as paragraphName } from '../paragraph/block.json';
 
 export function createListItem( listItemAttributes, listAttributes, children ) {
 	return createBlock(
@@ -19,6 +20,14 @@ export function createListItem( listItemAttributes, listAttributes, children ) {
 	);
 }
 
+function convertBlockToList( block ) {
+	const list = switchToBlockType( block, listName );
+	if ( list ) return list;
+	const paragraph = switchToBlockType( block, paragraphName );
+	if ( paragraph ) return switchToBlockType( paragraph, listName );
+	return null;
+}
+
 export function convertToListItems( blocks ) {
 	const listItems = [];
 
@@ -27,7 +36,7 @@ export function convertToListItems( blocks ) {
 			listItems.push( block );
 		} else if ( block.name === listName ) {
 			listItems.push( ...block.innerBlocks );
-		} else if ( ( block = switchToBlockType( block, listName ) ) ) {
+		} else if ( ( block = convertBlockToList( block ) ) ) {
 			for ( const { innerBlocks } of block ) {
 				listItems.push( ...innerBlocks );
 			}