@wordpress/block-library 7.10.0 → 7.11.0

package/src/quote/deprecated.js

@@ -1,127 +1,241 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-
-const blockAttributes = {
-	value: {
-		type: 'string',
-		source: 'html',
-		selector: 'blockquote',
-		multiline: 'p',
-		default: '',
-	},
-	citation: {
-		type: 'string',
-		source: 'html',
-		selector: 'cite',
-		default: '',
-	},
-	align: {
-		type: 'string',
-	},
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export const migrateToQuoteV2 = ( attributes ) => {
+	const { value } = attributes;
+
+	return [
+		{
+			...omit( attributes, [ 'value' ] ),
+		},
+		value
+			? parseWithAttributeSchema( value, {
+					type: 'array',
+					source: 'query',
+					selector: 'p',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+					},
+			  } ).map( ( { content } ) =>
+					createBlock( 'core/paragraph', { content } )
+			  )
+			: createBlock( 'core/paragraph' ),
+	];
 };
 
-const deprecated = [
-	{
-		attributes: blockAttributes,
-		save( { attributes } ) {
-			const { align, value, citation } = attributes;
-
-			return (
-				<blockquote style={ { textAlign: align ? align : null } }>
-					<RichText.Content multiline value={ value } />
-					{ ! RichText.isEmpty( citation ) && (
-						<RichText.Content tagName="cite" value={ citation } />
-					) }
-				</blockquote>
-			);
+const v3 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		align: {
+			type: 'string',
 		},
 	},
-	{
-		attributes: {
-			...blockAttributes,
-			style: {
-				type: 'number',
-				default: 1,
+	supports: {
+		anchor: true,
+		__experimentalSlashInserter: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
 			},
 		},
+	},
+	save( { attributes } ) {
+		const { align, value, citation } = attributes;
+
+		const className = classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
 
-		migrate( attributes ) {
-			if ( attributes.style === 2 ) {
-				return {
-					...omit( attributes, [ 'style' ] ),
-					className: attributes.className
-						? attributes.className + ' is-style-large'
-						: 'is-style-large',
-				};
-			}
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateToQuoteV2,
+};
 
-			return attributes;
+const v2 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
 		},
+		align: {
+			type: 'string',
+		},
+	},
+	migrate: migrateToQuoteV2,
+	save( { attributes } ) {
+		const { align, value, citation } = attributes;
 
-		save( { attributes } ) {
-			const { align, value, citation, style } = attributes;
+		return (
+			<blockquote style={ { textAlign: align ? align : null } }>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+};
 
-			return (
-				<blockquote
-					className={ style === 2 ? 'is-large' : '' }
-					style={ { textAlign: align ? align : null } }
-				>
-					<RichText.Content multiline value={ value } />
-					{ ! RichText.isEmpty( citation ) && (
-						<RichText.Content tagName="cite" value={ citation } />
-					) }
-				</blockquote>
-			);
+const v1 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
 		},
-	},
-	{
-		attributes: {
-			...blockAttributes,
-			citation: {
-				type: 'string',
-				source: 'html',
-				selector: 'footer',
-				default: '',
-			},
-			style: {
-				type: 'number',
-				default: 1,
-			},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
 		},
+		align: {
+			type: 'string',
+		},
+		style: {
+			type: 'number',
+			default: 1,
+		},
+	},
 
-		migrate( attributes ) {
-			if ( ! isNaN( parseInt( attributes.style ) ) ) {
-				return {
-					...omit( attributes, [ 'style' ] ),
-				};
-			}
+	migrate( attributes ) {
+		if ( attributes.style === 2 ) {
+			return migrateToQuoteV2( {
+				...omit( attributes, [ 'style' ] ),
+				className: attributes.className
+					? attributes.className + ' is-style-large'
+					: 'is-style-large',
+			} );
+		}
 
-			return attributes;
-		},
+		return migrateToQuoteV2( attributes );
+	},
 
-		save( { attributes } ) {
-			const { align, value, citation, style } = attributes;
+	save( { attributes } ) {
+		const { align, value, citation, style } = attributes;
 
-			return (
-				<blockquote
-					className={ `blocks-quote-style-${ style }` }
-					style={ { textAlign: align ? align : null } }
-				>
-					<RichText.Content multiline value={ value } />
-					{ ! RichText.isEmpty( citation ) && (
-						<RichText.Content tagName="footer" value={ citation } />
-					) }
-				</blockquote>
-			);
+		return (
+			<blockquote
+				className={ style === 2 ? 'is-large' : '' }
+				style={ { textAlign: align ? align : null } }
+			>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+};
+
+const v0 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'footer',
+			default: '',
+		},
+		align: {
+			type: 'string',
 		},
+		style: {
+			type: 'number',
+			default: 1,
+		},
+	},
+
+	migrate( attributes ) {
+		if ( ! isNaN( parseInt( attributes.style ) ) ) {
+			return migrateToQuoteV2( {
+				...omit( attributes, [ 'style' ] ),
+			} );
+		}
+
+		return migrateToQuoteV2( attributes );
+	},
+
+	save( { attributes } ) {
+		const { align, value, citation, style } = attributes;
+
+		return (
+			<blockquote
+				className={ `blocks-quote-style-${ style }` }
+				style={ { textAlign: align ? align : null } }
+			>
+				<RichText.Content multiline value={ value } />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="footer" value={ citation } />
+				) }
+			</blockquote>
+		);
 	},
-];
+};
 
-export default deprecated;
+/**
+ * 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 [ v3, v2, v1, v0 ];

package/src/quote/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -12,29 +12,87 @@ import {
 	BlockControls,
 	RichText,
 	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-import { Platform } from '@wordpress/element';
+import { Platform, useEffect } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { migrateToQuoteV2 } from './deprecated';
 
 const isWebPlatform = Platform.OS === 'web';
 
+const TEMPLATE = [ [ 'core/paragraph', {} ] ];
+
+/**
+ * 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 quote block format.
+ *
+ * @param {Object} attributes Block attributes.
+ * @param {string} clientId   Block client ID.
+ */
+const 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.value ) {
+			// No need to migrate if it doesn't have the value attribute.
+			return;
+		}
+
+		const [ newAttributes, newInnerBlocks ] =
+			migrateToQuoteV2( attributes );
+
+		deprecated( 'Value attribute on the quote block', {
+			since: '6.0',
+			version: '6.5',
+			alternative: 'inner blocks',
+		} );
+
+		registry.batch( () => {
+			updateBlockAttributes( clientId, newAttributes );
+			replaceInnerBlocks( clientId, newInnerBlocks );
+		} );
+	}, [ attributes.value ] );
+};
+
 export default function QuoteEdit( {
 	attributes,
 	setAttributes,
-	isSelected,
-	mergeBlocks,
-	onReplace,
-	className,
 	insertBlocksAfter,
+	clientId,
+	className,
 	style,
 } ) {
-	const { align, value, citation } = attributes;
+	const { align, citation } = attributes;
+
+	useMigrateOnLoad( attributes, clientId );
+
+	const hasSelection = useSelect( ( select ) => {
+		const { isBlockSelected, hasSelectedInnerBlock } =
+			select( blockEditorStore );
+		return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId );
+	}, [] );
+
 	const blockProps = useBlockProps( {
-		className: classnames( className, {
+		className: classNames( className, {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
-		style,
+		...( ! isWebPlatform && { style } ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		templateInsertUpdatesSelection: true,
 	} );
 
 	return (
@@ -47,66 +105,33 @@ export default function QuoteEdit( {
 					} }
 				/>
 			</BlockControls>
-			<BlockQuotation { ...blockProps }>
-				<RichText
-					identifier="value"
-					multiline
-					value={ value }
-					onChange={ ( nextValue ) =>
-						setAttributes( {
-							value: nextValue,
-						} )
-					}
-					onMerge={ mergeBlocks }
-					onRemove={ ( forward ) => {
-						const hasEmptyCitation =
-							! citation || citation.length === 0;
-						if ( ! forward && hasEmptyCitation ) {
-							onReplace( [] );
-						}
-					} }
-					aria-label={ __( 'Quote text' ) }
-					placeholder={
-						// translators: placeholder text used for the quote
-						__( 'Add quote' )
-					}
-					onReplace={ onReplace }
-					onSplit={ ( piece ) =>
-						createBlock( 'core/quote', {
-							...attributes,
-							value: piece,
-						} )
-					}
-					__unstableOnSplitMiddle={ () =>
-						createBlock( 'core/paragraph' )
-					}
-					textAlign={ align }
-					__unstableEmbedURLOnPaste
-				/>
-				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
+			<BlockQuotation { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ ( ! RichText.isEmpty( citation ) || hasSelection ) && (
 					<RichText
 						identifier="citation"
 						tagName={ isWebPlatform ? 'cite' : undefined }
 						style={ { display: 'block' } }
 						value={ citation }
-						onChange={ ( nextCitation ) =>
+						onChange={ ( nextCitation ) => {
 							setAttributes( {
 								citation: nextCitation,
-							} )
-						}
+							} );
+						} }
 						__unstableMobileNoFocusOnMount
-						aria-label={ __( 'Quote citation text' ) }
+						aria-label={ __( 'Quote citation' ) }
 						placeholder={
-							// translators: placeholder text used for the citation
+							// translators: placeholder text used for the
+							// citation
 							__( 'Add citation' )
 						}
 						className="wp-block-quote__citation"
-						textAlign={ align }
 						__unstableOnSplitAtEnd={ () =>
 							insertBlocksAfter(
 								createBlock( getDefaultBlockName() )
 							)
 						}
+						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
 					/>
 				) }
 			</BlockQuotation>

package/src/quote/index.js

@@ -12,51 +12,28 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
-import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name, settingsV2 };
+export { metadata, name };
 
-export const settingsV1 = {
+export const settings = {
 	icon,
 	example: {
 		attributes: {
-			value:
-				'<p>' + __( 'In quoting others, we cite ourselves.' ) + '</p>',
 			citation: 'Julio Cortázar',
 		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: __( 'In quoting others, we cite ourselves.' ),
+				},
+			},
+		],
 	},
 	transforms,
 	edit,
 	save,
-	merge( attributes, { value, citation } ) {
-		// Quote citations cannot be merged. Pick the second one unless it's
-		// empty.
-		if ( ! citation ) {
-			citation = attributes.citation;
-		}
-
-		if ( ! value || value === '<p></p>' ) {
-			return {
-				...attributes,
-				citation,
-			};
-		}
-
-		return {
-			...attributes,
-			value: attributes.value + value,
-			citation,
-		};
-	},
 	deprecated,
 };
-
-let settings = settingsV1;
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	settings = window?.__experimentalEnableQuoteBlockV2
-		? settingsV2
-		: settingsV1;
-}
-export { settings };

package/src/quote/save.js

@@ -1,23 +1,23 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { align, value, citation } = attributes;
+	const { align, citation } = attributes;
 
-	const className = classnames( {
+	const className = classNames( {
 		[ `has-text-align-${ align }` ]: align,
 	} );
 
 	return (
 		<blockquote { ...useBlockProps.save( { className } ) }>
-			<RichText.Content multiline value={ value } />
+			<InnerBlocks.Content />
 			{ ! RichText.isEmpty( citation ) && (
 				<RichText.Content tagName="cite" value={ citation } />
 			) }

package/src/quote/{v2/test → test}/migrate.js

@@ -11,9 +11,8 @@ import {
  * Internal dependencies
  */
 import { migrateToQuoteV2 } from '../deprecated';
-import * as paragraph from '../../../paragraph';
-import * as quote from '../../../quote';
-import * as quoteV2 from '../../../quote/v2';
+import * as paragraph from '../../paragraph';
+import * as quote from '../../quote';
 
 describe( 'Migrate quote block', () => {
 	beforeAll( () => {
@@ -21,10 +20,6 @@ describe( 'Migrate quote block', () => {
 			{ name: paragraph.name, ...paragraph.metadata },
 			paragraph.settings
 		);
-		registerBlockType(
-			{ name: quote.name, ...quote.metadata },
-			quoteV2.settings
-		);
 	} );
 
 	afterAll( () => {