@wordpress/block-library 8.34.0 → 8.35.0

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,

package/src/media-text/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -227,7 +227,7 @@ function MediaTextEdit( {
 		setTemporaryMediaWidth( null );
 	};
 
-	const classNames = classnames( {
+	const classNames = clsx( {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-selected': isSelected,
 		'is-stacked-on-mobile': isStackedOnMobile,

package/src/media-text/media-container.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -173,7 +173,7 @@ function MediaContainer( props, ref ) {
 		return (
 			<ResizableBoxContainer
 				as="figure"
-				className={ classnames(
+				className={ clsx(
 					className,
 					'editor-media-container__resizer',
 					{ 'is-transient': isTemporaryMedia }

package/src/media-text/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function save( { attributes } ) {
 	const mediaSizeSlug = 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',
 	} );
@@ -67,7 +67,7 @@ export default function save( { attributes } ) {
 		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 }` ]: verticalAlignment,

package/src/navigation/edit/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -409,7 +409,7 @@ function Navigation( {
 	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,
-		className: classnames(
+		className: clsx(
 			className,
 			{
 				'items-justified-right': justifyContent === 'right',
@@ -558,7 +558,7 @@ function Navigation( {
 	const hasManagePermissions =
 		canUserCreateNavigationMenus || canUserUpdateNavigationMenu;
 
-	const overlayMenuPreviewClasses = classnames(
+	const overlayMenuPreviewClasses = clsx(
 		'wp-block-navigation__overlay-menu-preview',
 		{ open: overlayMenuPreview }
 	);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function ResponsiveWrapper( {
 		return children;
 	}
 
-	const responsiveContainerClasses = classnames(
+	const responsiveContainerClasses = clsx(
 		'wp-block-navigation__responsive-container',
 		{
 			'has-text-color':
@@ -59,7 +59,7 @@ export default function ResponsiveWrapper( {
 			overlayBackgroundColor.color,
 	};
 
-	const openButtonClasses = classnames(
+	const openButtonClasses = clsx(
 		'wp-block-navigation__responsive-container-open',
 		{ 'always-shown': isHiddenByDefault }
 	);

package/src/navigation/edit/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -91,7 +91,7 @@ export function getColors( context, isSubMenu ) {
 
 export function getNavigationChildBlockProps( innerBlocksColors ) {
 	return {
-		className: classnames( 'wp-block-navigation__submenu-container', {
+		className: clsx( 'wp-block-navigation__submenu-container', {
 			'has-text-color': !! (
 				innerBlocksColors.textColor || innerBlocksColors.customTextColor
 			),