@wordpress/block-library 7.2.0 → 7.3.2

package/src/html/edit.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useContext, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	PlainText,
@@ -20,6 +20,7 @@ import { useSelect } from '@wordpress/data';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
+	const isDisabled = useContext( Disabled.Context );
 
 	const styles = useSelect( ( select ) => {
 		// Default styles used to unset some of the styles
@@ -69,35 +70,26 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			<Disabled.Consumer>
-				{ ( isDisabled ) =>
-					isPreview || isDisabled ? (
-						<>
-							<SandBox
-								html={ attributes.content }
-								styles={ styles }
-							/>
-							{ /*	
-									An overlay is added when the block is not selected in order to register click events. 
-									Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it 
-									difficult to reselect the block. 
-								*/ }
-							{ ! isSelected && (
-								<div className="block-library-html__preview-overlay"></div>
-							) }
-						</>
-					) : (
-						<PlainText
-							value={ attributes.content }
-							onChange={ ( content ) =>
-								setAttributes( { content } )
-							}
-							placeholder={ __( 'Write HTML…' ) }
-							aria-label={ __( 'HTML' ) }
-						/>
-					)
-				}
-			</Disabled.Consumer>
+			{ isPreview || isDisabled ? (
+				<>
+					<SandBox html={ attributes.content } styles={ styles } />
+					{ /*
+							An overlay is added when the block is not selected in order to register click events.
+							Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
+							difficult to reselect the block.
+						*/ }
+					{ ! isSelected && (
+						<div className="block-library-html__preview-overlay"></div>
+					) }
+				</>
+			) : (
+				<PlainText
+					value={ attributes.content }
+					onChange={ ( content ) => setAttributes( { content } ) }
+					placeholder={ __( 'Write HTML…' ) }
+					aria-label={ __( 'HTML' ) }
+				/>
+			) }
 		</div>
 	);
 }

package/src/image/edit.native.js

@@ -186,7 +186,6 @@ export class ImageEdit extends Component {
 		this.state = {
 			isCaptionSelected: false,
 			uploadStatus: UPLOAD_STATE_IDLE,
-			isAnimatedGif: false,
 		};
 
 		this.replacedFeaturedImage = false;
@@ -364,10 +363,6 @@ export class ImageEdit extends Component {
 
 		setAttributes( { url: payload.mediaUrl, id: payload.mediaServerId } );
 		this.setState( { uploadStatus: UPLOAD_STATE_SUCCEEDED } );
-
-		this.setState( {
-			isAnimatedGif: payload.mediaUrl.toLowerCase().includes( '.gif' ),
-		} );
 	}
 
 	finishMediaUploadWithFailure( payload ) {
@@ -464,10 +459,6 @@ export class ImageEdit extends Component {
 			...mediaAttributes,
 			...additionalAttributes,
 		} );
-
-		this.setState( {
-			isAnimatedGif: media.url.toLowerCase().includes( '.gif' ),
-		} );
 	}
 
 	onFocusCaption() {
@@ -615,6 +606,10 @@ export class ImageEdit extends Component {
 		);
 	}
 
+	isGif( url ) {
+		return url.toLowerCase().includes( '.gif' );
+	}
+
 	render() {
 		const { isCaptionSelected } = this.state;
 		const {
@@ -748,11 +743,12 @@ export class ImageEdit extends Component {
 			context?.fixedHeight && styles.fixedHeight,
 		];
 
-		const badgeLabelShown = isFeaturedImage || this.state.isAnimatedGif;
+		const isGif = this.isGif( url );
+		const badgeLabelShown = isFeaturedImage || isGif;
 		let badgeLabelText = '';
 		if ( isFeaturedImage ) {
 			badgeLabelText = __( 'Featured' );
-		} else if ( this.state.isAnimatedGif ) {
+		} else if ( isGif ) {
 			badgeLabelText = __( 'GIF' );
 		}
 

package/src/index.js

@@ -138,7 +138,6 @@ export const __experimentalGetCoreBlocks = () => [
 	heading,
 	gallery,
 	list,
-	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -191,6 +190,7 @@ export const __experimentalGetCoreBlocks = () => [
 	siteTagline,
 	query,
 	templatePart,
+	avatar,
 	postTitle,
 	postExcerpt,
 	postFeaturedImage,
@@ -204,7 +204,21 @@ export const __experimentalGetCoreBlocks = () => [
 	queryPaginationNext,
 	queryPaginationNumbers,
 	queryPaginationPrevious,
+	queryNoResults,
+	readMore,
+	commentAuthorName,
+	commentContent,
+	commentDate,
+	commentEditLink,
+	commentReplyLink,
+	commentTemplate,
+	commentsQueryLoop,
+	commentsPagination,
+	commentsPaginationNext,
+	commentsPaginationNumbers,
+	commentsPaginationPrevious,
 	postComments,
+	homeLink,
 	logInOut,
 	termDescription,
 	queryTitle,
@@ -252,31 +266,20 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 	? ( { enableFSEBlocks } = {} ) => {
 			[
 				// Experimental blocks.
-				avatar,
-				homeLink,
 				postAuthorName,
-				queryNoResults,
+				...( window.__experimentalEnableListBlockV2
+					? [ listItem ]
+					: [] ),
+
 				// Full Site Editing blocks.
 				...( enableFSEBlocks
 					? [
 							commentAuthorAvatar,
-							commentAuthorName,
-							commentContent,
-							commentDate,
-							commentEditLink,
-							commentReplyLink,
-							commentTemplate,
-							commentsQueryLoop,
-							commentsPagination,
-							commentsPaginationNext,
-							commentsPaginationNumbers,
-							commentsPaginationPrevious,
 							navigationArea,
 							postComment,
 							postCommentsCount,
 							postCommentsForm,
 							postCommentsLink,
-							readMore,
 					  ]
 					: [] ),
 			].forEach( registerBlock );

package/src/list/deprecated.js

@@ -8,7 +8,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
  */
 import migrateFontFamily from '../utils/migrate-font-family';
 
-const v1 = {
+const v0 = {
 	attributes: {
 		ordered: {
 			type: 'boolean',
@@ -76,4 +76,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v0 ];

package/src/list/index.js

@@ -43,6 +43,10 @@ const settingsV1 = {
 	deprecated,
 };
 
-export const settings = window?.__experimentalEnableListBlockV2
-	? settingsV2
-	: settingsV1;
+let settings = settingsV1;
+if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	settings = window?.__experimentalEnableListBlockV2
+		? settingsV2
+		: settingsV1;
+}
+export { settings };

package/src/list/style.scss

@@ -1,7 +1,6 @@
 ol,
 ul {
-	// Break long strings of text without spaces so they don't overflow the block.
-	overflow-wrap: break-word;
+	box-sizing: border-box;
 
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;

package/src/list/test/migrate.js

@@ -0,0 +1,159 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { migrateToListV2 } from '../v2/migrate';
+import * as listItem from '../../list-item';
+import * as list from '../../list';
+import listV2 from '../../list/v2';
+
+describe( 'Migrate list block', () => {
+	beforeAll( () => {
+		const prev = window.__experimentalEnableListBlockV2;
+
+		// force list and list item block registration.
+		registerBlockType(
+			{ name: listItem.name, ...listItem.metadata },
+			listItem.settings
+		);
+		registerBlockType( { name: list.name, ...list.metadata }, listV2 );
+
+		window.__experimentalEnableListBlockV2 = prev;
+	} );
+
+	it( 'should migrate the values attribute to inner blocks', () => {
+		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
+			values:
+				'<li>test</li><li>test</li><li>test<ol><li>test test</li><li>test est eesssss</li></ol></li>',
+			ordered: false,
+		} );
+
+		expect( updatedAttributes ).toEqual( {
+			ordered: false,
+			// Ideally the values attributes shouldn't be here
+			// but since we didn't enable v2 by default yet,
+			// we're keeping the old default value in block.json
+			values: '',
+		} );
+		expect( serialize( updatedInnerBlocks ) )
+			.toEqual( `<!-- wp:list-item -->
+<li>test</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>test</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>test<!-- wp:list {\"ordered\":true} -->
+<ol><!-- wp:list-item -->
+<li>test test</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>test est eesssss</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->` );
+	} );
+
+	it( 'should handle empty space properly', () => {
+		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
+			values: `<li>Europe</li>
+                <li>
+                    \tAfrica
+                    <ol>
+                        <li>Algeria</li>
+                    </ol>
+                    \t
+                </li>`,
+			ordered: false,
+		} );
+
+		expect( updatedAttributes ).toEqual( {
+			ordered: false,
+			// Ideally the values attributes shouldn't be here
+			// but since we didn't enable v2 by default yet,
+			// we're keeping the old default value in block.json
+			values: '',
+		} );
+		expect( serialize( updatedInnerBlocks ) )
+			.toEqual( `<!-- wp:list-item -->
+<li>Europe</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Africa<!-- wp:list {\"ordered\":true} -->
+<ol><!-- wp:list-item -->
+<li>Algeria</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->` );
+	} );
+
+	it( 'should handle formats properly', () => {
+		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
+			values: `<li>Europe<ul><li>France<ul><li>Lyon <strong>Rhone</strong>s</li><li>Paris <em>Ile de france</em><ul><li><em>1er</em></li></ul></li></ul></li></ul></li></ul></li>`,
+			ordered: false,
+		} );
+
+		expect( updatedAttributes ).toEqual( {
+			ordered: false,
+			// Ideally the values attributes shouldn't be here
+			// but since we didn't enable v2 by default yet,
+			// we're keeping the old default value in block.json
+			values: '',
+		} );
+		expect( serialize( updatedInnerBlocks ) )
+			.toEqual( `<!-- wp:list-item -->
+<li>Europe<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>France<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Lyon <strong>Rhone</strong>s</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Paris <em>Ile de france</em><!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><em>1er</em></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->` );
+	} );
+
+	it( 'should not add random space', () => {
+		const [ updatedAttributes, updatedInnerBlocks ] = migrateToListV2( {
+			values: `<li>Europe<ul><li>F<strong>ranc</strong>e<ul><li>Paris</li></ul></li></ul></li>`,
+			ordered: false,
+		} );
+
+		expect( updatedAttributes ).toEqual( {
+			ordered: false,
+			// Ideally the values attributes shouldn't be here
+			// but since we didn't enable v2 by default yet,
+			// we're keeping the old default value in block.json
+			values: '',
+		} );
+		expect( serialize( updatedInnerBlocks ) )
+			.toEqual( `<!-- wp:list-item -->
+<li>Europe<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>F<strong>ranc</strong>e<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Paris</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->` );
+	} );
+} );

package/src/list/v2/deprecated.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import initialDeprecations from '../deprecated';
+import { migrateToListV2 } from './migrate';
+
+const v1 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			__experimentalRole: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			__experimentalRole: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			__experimentalFontFamily: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalSlashInserter: true,
+	},
+	save( { attributes } ) {
+		const { ordered, values, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+
+		return (
+			<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+				<RichText.Content value={ values } multiline="li" />
+			</TagName>
+		);
+	},
+	migrate: migrateToListV2,
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v1, ...initialDeprecations ];

package/src/list/v2/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { last } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -5,29 +10,132 @@ import {
 	BlockControls,
 	useBlockProps,
 	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToolbarButton } from '@wordpress/components';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { isRTL, __ } from '@wordpress/i18n';
 import {
 	formatListBullets,
 	formatListBulletsRTL,
 	formatListNumbered,
 	formatListNumberedRTL,
+	formatOutdent,
+	formatOutdentRTL,
 } from '@wordpress/icons';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback, useEffect } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import OrderedListSettings from '../ordered-list-settings';
+import { migrateToListV2 } from './migrate';
 
 const TEMPLATE = [ [ 'core/list-item' ] ];
 
-function Edit( { attributes, setAttributes } ) {
+/**
+ * At the moment, deprecations don't handle create blocks from attributes
+ * (like when using CPT templates). For this reason, this hook is necessary
+ * to avoid breaking templates using the old list block format.
+ *
+ * @param {Object} attributes Block attributes.
+ * @param {string} clientId   Block client ID.
+ */
+function useMigrateOnLoad( attributes, clientId ) {
+	const registry = useRegistry();
+	const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(
+		blockEditorStore
+	);
+
+	useEffect( () => {
+		// As soon as the block is loaded, migrate it to the new version.
+
+		if ( ! attributes.values ) {
+			return;
+		}
+
+		const [ newAttributes, newInnerBlocks ] = migrateToListV2( attributes );
+
+		deprecated( 'Value attribute on the list block', {
+			since: '6.0',
+			version: '6.5',
+			alternative: 'inner blocks',
+		} );
+
+		registry.batch( () => {
+			updateBlockAttributes( clientId, newAttributes );
+			replaceInnerBlocks( clientId, newInnerBlocks );
+		} );
+	}, [ attributes.values ] );
+}
+
+function useOutdentList( clientId ) {
+	const { canOutdent } = useSelect(
+		( innerSelect ) => {
+			const { getBlockRootClientId, getBlock } = innerSelect(
+				blockEditorStore
+			);
+			const parentId = getBlockRootClientId( clientId );
+			return {
+				canOutdent:
+					!! parentId &&
+					getBlock( parentId ).name === 'core/list-item',
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { getBlockRootClientId, getBlockAttributes, getBlock } = useSelect(
+		blockEditorStore
+	);
+
+	return [
+		canOutdent,
+		useCallback( () => {
+			const parentBlockId = getBlockRootClientId( clientId );
+			const parentBlockAttributes = getBlockAttributes( parentBlockId );
+			// Create a new parent block without the inner blocks.
+			const newParentBlock = createBlock(
+				'core/list-item',
+				parentBlockAttributes
+			);
+			const { innerBlocks } = getBlock( clientId );
+			// Replace the parent block with a new parent block without inner blocks,
+			// and make the inner blocks siblings of the parent.
+			replaceBlocks(
+				[ parentBlockId ],
+				[ newParentBlock, ...innerBlocks ]
+			);
+			// Select the last child of the list being outdent.
+			selectionChange( last( innerBlocks ).clientId );
+		}, [ clientId ] ),
+	];
+}
+
+function IndentUI( { clientId } ) {
+	const [ canOutdent, outdentList ] = useOutdentList( clientId );
+	return (
+		<>
+			<ToolbarButton
+				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
+				title={ __( 'Outdent' ) }
+				describedBy={ __( 'Outdent list item' ) }
+				disabled={ ! canOutdent }
+				onClick={ outdentList }
+			/>
+		</>
+	);
+}
+
+function Edit( { attributes, setAttributes, clientId } ) {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
 	} );
+	useMigrateOnLoad( attributes, clientId );
 	const { ordered, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
 
@@ -51,6 +159,7 @@ function Edit( { attributes, setAttributes } ) {
 					setAttributes( { ordered: true } );
 				} }
 			/>
+			<IndentUI clientId={ clientId } />
 		</BlockControls>
 	);
 

package/src/list/v2/index.js

@@ -9,12 +9,14 @@ import { list as icon } from '@wordpress/icons';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
+import deprecated from './deprecated';
 
 const settings = {
 	icon,
 	edit,
 	save,
 	transforms,
+	deprecated,
 };
 
 export default settings;