@wordpress/block-library 7.3.10 → 7.6.0

package/src/image/edit.js

@@ -19,11 +19,9 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 
-/* global wp */
-
 /**
  * Internal dependencies
  */
@@ -97,7 +95,7 @@ function hasDefaultSize( image, defaultSize ) {
  * @return {boolean} Whether the image has been destroyed.
  */
 export function isMediaDestroyed( id ) {
-	const attachment = wp?.media?.attachment( id ) || {};
+	const attachment = window?.wp?.media?.attachment( id ) || {};
 	return attachment.destroyed;
 }
 
@@ -158,6 +156,14 @@ export function ImageEdit( {
 		 has been deleted.
 	*/
 	function onImageError( isReplaced = false ) {
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice(
+			sprintf(
+				/* translators: %s url or missing image */
+				__( 'Error loading image: %s' ),
+				url
+			)
+		);
 		// If the image block was not replaced with an embed,
 		// clear the attributes and trigger the placeholder.
 		if ( ! isReplaced ) {
@@ -232,7 +238,7 @@ export function ImageEdit( {
 			// The constants used in Gutenberg do not match WP options so a little more complicated than ideal.
 			// TODO: fix this in a follow up PR, requires updating media-text and ui component.
 			switch (
-				wp?.media?.view?.settings?.defaultProps?.link ||
+				window?.wp?.media?.view?.settings?.defaultProps?.link ||
 				LINK_DESTINATION_NONE
 			) {
 				case 'file':

package/src/image/edit.native.js

@@ -670,7 +670,7 @@ export class ImageEdit extends Component {
 
 		const getInspectorControls = () => (
 			<InspectorControls>
-				<PanelBody title={ __( 'Image settings' ) } />
+				<PanelBody title={ __( 'Settings' ) } />
 				<PanelBody style={ styles.panelBody }>
 					<BlockStyles clientId={ clientId } url={ url } />
 				</PanelBody>
@@ -757,7 +757,6 @@ export class ImageEdit extends Component {
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onImagePressed }
-					onLongPress={ openMediaOptions }
 					disabled={ ! isSelected }
 				>
 					<View style={ styles.content }>

package/src/image/editor.scss

@@ -110,8 +110,8 @@ figure.wp-block-image:not(.wp-block) {
 
 .wp-block-image__zoom {
 	.components-popover__content {
-		overflow: visible;
 		min-width: 260px;
+		overflow: visible !important;
 	}
 
 	.components-range-control {

package/src/image/image.js

@@ -33,7 +33,11 @@ import {
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import {
+	createBlock,
+	getDefaultBlockName,
+	switchToBlockType,
+} from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -370,7 +374,7 @@ export default function Image( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Image settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ ! multiImageSelection && (
 						<TextareaControl
 							label={ __( 'Alt text (alternative text)' ) }
@@ -598,7 +602,9 @@ export default function Image( {
 					}
 					inlineToolbar
 					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter( createBlock( 'core/paragraph' ) )
+						insertBlocksAfter(
+							createBlock( getDefaultBlockName() )
+						)
 					}
 				/>
 			) }

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

@@ -87,7 +87,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -113,7 +113,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -139,7 +139,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -172,7 +172,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -212,7 +212,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -239,7 +239,7 @@ describe( 'Image Block', () => {
 
 		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );
 
 		const linkTargetButton = screen.getByText( 'Open in new tab' );
@@ -270,7 +270,7 @@ describe( 'Image Block', () => {
 
 		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );
 
 		const linkTargetButton = screen.getByText( 'Open in new tab' );

package/src/index.js

@@ -12,6 +12,15 @@ import {
 /**
  * Internal dependencies
  */
+// When IS_GUTENBERG_PLUGIN is set to false, imports of experimental blocks
+// are transformed by packages/block-library/src/index.js as follows:
+//    import * as experimentalBlock from './experimental-block'
+// becomes
+//    const experimentalBlock = null;
+// This enables webpack to eliminate the experimental blocks code from the
+// production build to make the final bundle smaller.
+//
+// See https://github.com/WordPress/gutenberg/pull/40655 for more context.
 import * as archives from './archives';
 import * as avatar from './avatar';
 import * as audio from './audio';
@@ -23,6 +32,7 @@ import * as classic from './freeform';
 import * as code from './code';
 import * as column from './column';
 import * as columns from './columns';
+import * as comments from './comments';
 import * as commentAuthorAvatar from './comment-author-avatar';
 import * as commentAuthorName from './comment-author-name';
 import * as commentContent from './comment-content';
@@ -31,7 +41,6 @@ import * as commentEditLink from './comment-edit-link';
 import * as commentReplyLink from './comment-reply-link';
 import * as commentTemplate from './comment-template';
 import * as commentsPaginationPrevious from './comments-pagination-previous';
-import * as commentsQueryLoop from './comments-query-loop';
 import * as commentsPagination from './comments-pagination';
 import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
@@ -99,6 +108,7 @@ import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as table from './table';
+import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
@@ -106,6 +116,8 @@ import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
 
+import isBlockMetadataExperimental from './is-block-metadata-experimental';
+
 /**
  * Function to register an individual block.
  *
@@ -121,16 +133,9 @@ const registerBlock = ( block ) => {
 };
 
 /**
- * Function to get all the core blocks in an array.
- *
- * @example
- * ```js
- * import { __experimentalGetCoreBlocks } from '@wordpress/block-library';
- *
- * const coreBlocks = __experimentalGetCoreBlocks();
- * ```
+ * Function to get all the block-library blocks in an array
  */
-export const __experimentalGetCoreBlocks = () => [
+const getAllBlocks = () => [
 	// Common blocks are grouped at the top to prioritize their display
 	// in various contexts — like the inserter and auto-complete components.
 	paragraph,
@@ -138,6 +143,7 @@ export const __experimentalGetCoreBlocks = () => [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -151,6 +157,7 @@ export const __experimentalGetCoreBlocks = () => [
 	code,
 	column,
 	columns,
+	commentAuthorAvatar,
 	cover,
 	embed,
 	file,
@@ -175,7 +182,6 @@ export const __experimentalGetCoreBlocks = () => [
 	socialLinks,
 	spacer,
 	table,
-	// tableOfContents,
 	tagCloud,
 	textColumns,
 	verse,
@@ -196,6 +202,10 @@ export const __experimentalGetCoreBlocks = () => [
 	postFeaturedImage,
 	postContent,
 	postAuthor,
+	postAuthorName,
+	postComment,
+	postCommentsCount,
+	postCommentsLink,
 	postDate,
 	postTerms,
 	postNavigationLink,
@@ -206,6 +216,7 @@ export const __experimentalGetCoreBlocks = () => [
 	queryPaginationPrevious,
 	queryNoResults,
 	readMore,
+	comments,
 	commentAuthorName,
 	commentContent,
 	commentDate,
@@ -213,14 +224,13 @@ export const __experimentalGetCoreBlocks = () => [
 	commentReplyLink,
 	commentTemplate,
 	commentsTitle,
-	commentsQueryLoop,
 	commentsPagination,
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
-
 	postComments,
 	postCommentsForm,
+	tableOfContents,
 	homeLink,
 	logInOut,
 	termDescription,
@@ -228,6 +238,21 @@ export const __experimentalGetCoreBlocks = () => [
 	postAuthorBiography,
 ];
 
+/**
+ * Function to get all the core blocks in an array.
+ *
+ * @example
+ * ```js
+ * import { __experimentalGetCoreBlocks } from '@wordpress/block-library';
+ *
+ * const coreBlocks = __experimentalGetCoreBlocks();
+ * ```
+ */
+export const __experimentalGetCoreBlocks = () =>
+	getAllBlocks().filter(
+		( { metadata } ) => ! isBlockMetadataExperimental( metadata )
+	);
+
 /**
  * Function to register core blocks provided by the block editor.
  *
@@ -267,22 +292,19 @@ export const registerCoreBlocks = (
 export const __experimentalRegisterExperimentalCoreBlocks = process.env
 	.IS_GUTENBERG_PLUGIN
 	? ( { enableFSEBlocks } = {} ) => {
-			[
-				// Experimental blocks.
-				postAuthorName,
-				...( window.__experimentalEnableListBlockV2
-					? [ listItem ]
-					: [] ),
-
-				// Full Site Editing blocks.
-				...( enableFSEBlocks
-					? [
-							commentAuthorAvatar,
-							postComment,
-							postCommentsCount,
-							postCommentsLink,
-					  ]
-					: [] ),
-			].forEach( registerBlock );
+			const enabledExperiments = [
+				window.__experimentalEnableListBlockV2 ? 'list-v2' : null,
+				enableFSEBlocks ? 'fse' : null,
+			];
+			getAllBlocks()
+				.filter( ( { metadata } ) =>
+					isBlockMetadataExperimental( metadata )
+				)
+				.filter(
+					( { metadata: { __experimental } } ) =>
+						__experimental === true ||
+						enabledExperiments.includes( __experimental )
+				)
+				.forEach( registerBlock );
 	  }
 	: undefined;

package/src/index.native.js

@@ -179,6 +179,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
+// To be removed once Quote V2 is released on the web editor.
+function quoteCheck( quoteBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableQuoteBlockV2 ) {
+		quoteBlock.settings = quoteBlock?.settingsV2;
+	}
+	return quoteBlock;
+}
+
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -230,8 +238,10 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
+ * @param {Object} [blocksFlags] Experimental flags
+ *
  */
-export const registerCoreBlocks = () => {
+export const registerCoreBlocks = ( blocksFlags ) => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -244,7 +254,7 @@ export const registerCoreBlocks = () => {
 		nextpage,
 		separator,
 		list,
-		quote,
+		quoteCheck( quote, blocksFlags ),
 		mediaText,
 		preformatted,
 		gallery,

package/src/is-block-metadata-experimental.js

@@ -0,0 +1,19 @@
+/**
+ * Checks if the block is experimental based on the metadata loaded
+ * from block.json.
+ *
+ * This function is in a separate file and uses the older JS syntax so
+ * that it can be imported in both:
+ * – block-library/src/index.js
+ * – block-library/src/babel-plugin.js
+ *
+ * @param {Object} metadata Parsed block.json metadata.
+ * @return {boolean} Is the block experimental?
+ */
+module.exports = function isBlockMetadataExperimental( metadata ) {
+	return (
+		metadata &&
+		'__experimental' in metadata &&
+		metadata.__experimental !== false
+	);
+};

package/src/latest-comments/edit.js

@@ -35,7 +35,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Latest comments settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display avatar' ) }
 						checked={ displayAvatar }

package/src/latest-posts/edit.js

@@ -28,9 +28,11 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { pin, list, grid } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as noticeStore } from '@wordpress/notices';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -66,6 +68,7 @@ function getFeaturedImageDetails( post, size ) {
 }
 
 export default function LatestPostsEdit( { attributes, setAttributes } ) {
+	const instanceId = useInstanceId( LatestPostsEdit );
 	const {
 		postsToShow,
 		order,
@@ -148,6 +151,20 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		]
 	);
 
+	// If a user clicks to a link prevent redirection and show a warning.
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+	let noticeId;
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		// Remove previous warning if any, to show one at a time per block.
+		removeNotice( noticeId );
+		noticeId = `block-library/core/latest-posts/redirection-prevented/${ instanceId }`;
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: noticeId,
+			type: 'snackbar',
+		} );
+	};
+
 	const imageSizeOptions = imageSizes
 		.filter( ( { slug } ) => slug !== 'full' )
 		.map( ( { name, slug } ) => ( {
@@ -466,7 +483,11 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.join( ' ' ) }
 							{ /* translators: excerpt truncation character, default …  */ }
 							{ __( ' … ' ) }
-							<a href={ post.link } rel="noopener noreferrer">
+							<a
+								href={ post.link }
+								rel="noopener noreferrer"
+								onClick={ showRedirectionPreventedNotice }
+							>
 								{ __( 'Read more' ) }
 							</a>
 						</>
@@ -483,6 +504,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 											className="wp-block-latest-posts__post-title"
 											href={ post.link }
 											rel="noreferrer noopener"
+											onClick={
+												showRedirectionPreventedNotice
+											}
 										>
 											{ featuredImage }
 										</a>
@@ -501,6 +525,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 										  }
 										: undefined
 								}
+								onClick={ showRedirectionPreventedNotice }
 							>
 								{ ! titleTrimmed ? __( '(no title)' ) : null }
 							</a>

package/src/latest-posts/edit.native.js

@@ -12,7 +12,10 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { postList as icon } from '@wordpress/icons';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	BlockAlignmentControl,
+} from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import {
 	Icon,
@@ -43,6 +46,15 @@ class LatestPostsEdit extends Component {
 		);
 		this.onSetExcerptLength = this.onSetExcerptLength.bind( this );
 		this.onSetDisplayPostDate = this.onSetDisplayPostDate.bind( this );
+		this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.bind(
+			this
+		);
+		this.onSetFeaturedImageAlign = this.onSetFeaturedImageAlign.bind(
+			this
+		);
+		this.onSetAddLinkToFeaturedImage = this.onSetAddLinkToFeaturedImage.bind(
+			this
+		);
 		this.onSetOrder = this.onSetOrder.bind( this );
 		this.onSetOrderBy = this.onSetOrderBy.bind( this );
 		this.onSetPostsToShow = this.onSetPostsToShow.bind( this );
@@ -95,6 +107,21 @@ class LatestPostsEdit extends Component {
 		setAttributes( { displayPostDate: value } );
 	}
 
+	onSetDisplayFeaturedImage( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { displayFeaturedImage: value } );
+	}
+
+	onSetAddLinkToFeaturedImage( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { addLinkToFeaturedImage: value } );
+	}
+
+	onSetFeaturedImageAlign( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { featuredImageAlign: value } );
+	}
+
 	onSetOrder( value ) {
 		const { setAttributes } = this.props;
 		setAttributes( { order: value } );
@@ -124,6 +151,9 @@ class LatestPostsEdit extends Component {
 			displayPostContentRadio,
 			excerptLength,
 			displayPostDate,
+			displayFeaturedImage,
+			featuredImageAlign,
+			addLinkToFeaturedImage,
 			order,
 			orderBy,
 			postsToShow,
@@ -166,6 +196,31 @@ class LatestPostsEdit extends Component {
 						onChange={ this.onSetDisplayPostDate }
 					/>
 				</PanelBody>
+
+				<PanelBody title={ __( 'Featured image settings' ) }>
+					<ToggleControl
+						label={ __( 'Display featured image' ) }
+						checked={ displayFeaturedImage }
+						onChange={ this.onSetDisplayFeaturedImage }
+					/>
+					{ displayFeaturedImage && (
+						<>
+							<BlockAlignmentControl
+								value={ featuredImageAlign }
+								onChange={ this.onSetFeaturedImageAlign }
+								controls={ [ 'left', 'center', 'right' ] }
+								isBottomSheetControl={ true }
+							/>
+							<ToggleControl
+								label={ __( 'Add link to featured image' ) }
+								checked={ addLinkToFeaturedImage }
+								onChange={ this.onSetAddLinkToFeaturedImage }
+								separatorType={ 'topFullWidth' }
+							/>
+						</>
+					) }
+				</PanelBody>
+
 				<PanelBody title={ __( 'Sorting and filtering' ) }>
 					<QueryControls
 						{ ...{ order, orderBy } }

package/src/list/transforms.js

@@ -208,6 +208,13 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/table-of-contents' ],
+			transform: () => {
+				return createBlock( 'core/table-of-contents' );
+			},
+		},
 	],
 };
 

package/src/list/v2/edit.js

@@ -134,6 +134,7 @@ function Edit( { attributes, setAttributes, clientId } ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
+		templateInsertUpdatesSelection: true,
 	} );
 	useMigrateOnLoad( attributes, clientId );
 	const { ordered, reversed, start } = attributes;

package/src/list/v2/migrate.js

@@ -8,7 +8,7 @@ import { omit } from 'lodash';
  */
 import { createBlock } from '@wordpress/blocks';
 
-function createListBlockFromDOMElement( listElement ) {
+export function createListBlockFromDOMElement( listElement ) {
 	const listAttributes = {
 		ordered: 'OL' === listElement.tagName,
 		start: listElement.getAttribute( 'start' )

package/src/list/v2/transforms.js

@@ -9,6 +9,32 @@ import {
 	toHTMLString,
 } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { createListBlockFromDOMElement } from './migrate';
+
+function getListContentSchema( { phrasingContentSchema } ) {
+	const listContentSchema = {
+		...phrasingContentSchema,
+		ul: {},
+		ol: { attributes: [ 'type', 'start', 'reversed' ] },
+	};
+
+	// Recursion is needed.
+	// Possible: ul > li > ul.
+	// Impossible: ul > ul.
+	[ 'ul', 'ol' ].forEach( ( tag ) => {
+		listContentSchema[ tag ].children = {
+			li: {
+				children: listContentSchema,
+			},
+		};
+	} );
+
+	return listContentSchema;
+}
+
 const transforms = {
 	from: [
 		{
@@ -82,6 +108,15 @@ const transforms = {
 				);
 			},
 		} ) ),
+		{
+			type: 'raw',
+			selector: 'ol,ul',
+			schema: ( args ) => ( {
+				ol: getListContentSchema( args ).ol,
+				ul: getListContentSchema( args ).ul,
+			} ),
+			transform: createListBlockFromDOMElement,
+		},
 	],
 	to: [
 		...[ 'core/paragraph', 'core/heading' ].map( ( block ) => ( {

package/src/list-item/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "list-v2",
 	"name": "core/list-item",
 	"title": "List item",
 	"category": "text",
@@ -14,7 +15,7 @@
 		"content": {
 			"type": "string",
 			"source": "html",
-    		"selector": "li",
+			"selector": "li",
 			"default": "",
 			"__experimentalRole": "content"
 		}