@wordpress/block-library 8.34.0 → 9.0.0

package/src/list/style.scss

@@ -1,8 +1,8 @@
 ol,
 ul {
 	box-sizing: border-box;
+}
 
-	&.has-background {
-		padding: $block-bg-padding--v $block-bg-padding--h;
-	}
+:root :where(ul.has-background, ol.has-background) {
+	padding: $block-bg-padding--v $block-bg-padding--h;
 }

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

@@ -2,7 +2,7 @@
 
 exports[`List block adds one item to the list 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First list item</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -10,9 +10,9 @@ exports[`List block adds one item to the list 1`] = `
 
 exports[`List block changes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -22,7 +22,7 @@ exports[`List block changes the indentation level 1`] = `
 
 exports[`List block changes to ordered list 1`] = `
 "<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -38,7 +38,7 @@ exports[`List block changes to ordered list 1`] = `
 
 exports[`List block changes to reverse ordered list 1`] = `
 "<!-- wp:list {"ordered":true,"reversed":true} -->
-<ol reversed><!-- wp:list-item -->
+<ol reversed class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -54,7 +54,7 @@ exports[`List block changes to reverse ordered list 1`] = `
 
 exports[`List block inserts block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -62,7 +62,7 @@ exports[`List block inserts block 1`] = `
 
 exports[`List block removes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -74,7 +74,7 @@ exports[`List block removes the indentation level 1`] = `
 
 exports[`List block sets a start value to an ordered list 1`] = `
 "<!-- wp:list {"ordered":true,"start":25} -->
-<ol start="25"><!-- wp:list-item -->
+<ol start="25" class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -90,19 +90,19 @@ exports[`List block sets a start value to an ordered list 1`] = `
 
 exports[`List block shows different indentation levels 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item nested 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item nested 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Extra item 1</li>
 <!-- /wp:list-item -->
 

package/src/list/test/__snapshots__/transforms.native.js.snap

@@ -4,7 +4,7 @@ exports[`List block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
 <div class="wp-block-column" style="flex-basis:100%"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -23,7 +23,7 @@ exports[`List block transforms to Columns block 1`] = `
 exports[`List block transforms to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -69,7 +69,7 @@ exports[`List block transforms to Paragraph block 1`] = `
 exports[`List block transforms to Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 

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

@@ -60,7 +60,7 @@ describe( 'List block', () => {
 
 	it( 'adds one item to the list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li></li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
@@ -88,17 +88,17 @@ describe( 'List block', () => {
 
 	it( 'shows different indentation levels', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>List item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>List item 2<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>List item nested 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>List item nested 2<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Extra item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -140,7 +140,7 @@ describe( 'List block', () => {
 
 	it( 'changes the indentation level', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -183,9 +183,9 @@ describe( 'List block', () => {
 
 	it( 'removes the indentation level', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 2</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list --></li>
@@ -230,7 +230,7 @@ describe( 'List block', () => {
 
 	it( 'changes to ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -258,7 +258,7 @@ describe( 'List block', () => {
 
 	it( 'changes to reverse ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -299,7 +299,7 @@ describe( 'List block', () => {
 
 	it( 'sets a start value to an ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -342,7 +342,7 @@ describe( 'List block', () => {
 	it( 'splits empty list items into paragraphs', async () => {
 		// Arrange
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li><!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
@@ -370,7 +370,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->
@@ -380,7 +380,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->"
@@ -389,7 +389,7 @@ describe( 'List block', () => {
 
 	it( 'merges paragraphs into list items', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->
@@ -399,7 +399,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -417,7 +417,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -435,7 +435,7 @@ describe( 'List block', () => {
 	it( 'merges lists into lists', async () => {
 		// Arrange
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -445,7 +445,7 @@ describe( 'List block', () => {
 		<!-- /wp:list -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -466,7 +466,7 @@ describe( 'List block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -486,7 +486,7 @@ describe( 'List block', () => {
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li><!-- /wp:list-item --><!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
@@ -527,7 +527,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->"
@@ -539,9 +539,9 @@ describe( 'List block', () => {
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -591,7 +591,7 @@ describe( 'List block', () => {
 		<!-- /wp:paragraph -->
 
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Two</li>
 		<!-- /wp:list-item -->
 

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

@@ -12,7 +12,7 @@ import {
 const block = 'List';
 const initialHtml = `
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 

package/src/list-item/block.json

@@ -21,7 +21,8 @@
 	},
 	"supports": {
 		"className": false,
-		"__experimentalSelector": "li",
+		"__experimentalSelector": ".wp-block-list > li",
+		"splitting": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,

package/src/list-item/edit.js

@@ -27,10 +27,8 @@ import {
 	useSpace,
 	useIndentListItem,
 	useOutdentListItem,
-	useSplit,
 	useMerge,
 } from './hooks';
-import { convertToListItems } from './utils';
 
 export function IndentUI( { clientId } ) {
 	const indentListItem = useIndentListItem( clientId );
@@ -73,7 +71,6 @@ export function IndentUI( { clientId } ) {
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	onReplace,
 	clientId,
 	mergeBlocks,
 } ) {
@@ -85,7 +82,6 @@ export default function ListItemEdit( {
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );
-	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
 	return (
 		<>
@@ -100,18 +96,7 @@ export default function ListItemEdit( {
 					value={ content }
 					aria-label={ __( 'List text' ) }
 					placeholder={ placeholder || __( 'List' ) }
-					onSplit={ onSplit }
 					onMerge={ onMerge }
-					onReplace={
-						onReplace
-							? ( blocks, ...args ) => {
-									onReplace(
-										convertToListItems( blocks ),
-										...args
-									);
-							  }
-							: undefined
-					}
 				/>
 				{ innerBlocksProps.children }
 			</li>

package/src/media-text/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -263,7 +263,7 @@ const v6 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -293,7 +293,7 @@ const v6 = {
 			image: () => image,
 			video: () => <video controls src={ mediaUrl } />,
 		};
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -392,7 +392,7 @@ const v5 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -422,7 +422,7 @@ const v5 = {
 			image: () => image,
 			video: () => <video controls src={ mediaUrl } />,
 		};
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -506,7 +506,7 @@ const v4 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -537,7 +537,7 @@ const v4 = {
 			video: () => <video controls src={ mediaUrl } />,
 		};
 
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -688,7 +688,7 @@ const v3 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'has-background': backgroundClass || customBackgroundColor,
 			[ backgroundClass ]: backgroundClass,
@@ -791,7 +791,7 @@ const v2 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,
@@ -870,7 +870,7 @@ const v1 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,