@wordpress/block-library 7.8.0 → 7.11.0

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( () => {

package/src/quote/transforms.js

@@ -1,188 +1,158 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
-import { create, join, split, toHTMLString } from '@wordpress/rich-text';
+import {
+	createBlock,
+	parseWithAttributeSchema,
+	rawHandler,
+} from '@wordpress/blocks';
 
 const transforms = {
 	from: [
 		{
 			type: 'block',
-			isMultiBlock: true,
-			blocks: [ 'core/paragraph' ],
-			transform: ( attributes ) => {
-				return createBlock( 'core/quote', {
-					value: toHTMLString( {
-						value: join(
-							attributes.map( ( { content } ) =>
-								create( { html: content } )
-							),
-							'\u2028'
-						),
-						multilineTag: 'p',
-					} ),
-					anchor: attributes.anchor,
-				} );
+			blocks: [ 'core/pullquote' ],
+			transform: ( { value, citation, anchor, fontSize, style } ) => {
+				return createBlock(
+					'core/quote',
+					{
+						citation,
+						anchor,
+						fontSize,
+						style,
+					},
+					parseWithAttributeSchema( value, {
+						type: 'array',
+						source: 'query',
+						selector: 'p',
+						query: {
+							content: {
+								type: 'string',
+								source: 'html',
+							},
+						},
+					} ).map( ( { content } ) =>
+						createBlock( 'core/paragraph', { content } )
+					)
+				);
 			},
 		},
 		{
 			type: 'block',
-			blocks: [ 'core/heading' ],
-			transform: ( { content, anchor } ) => {
-				return createBlock( 'core/quote', {
-					value: `<p>${ content }</p>`,
-					anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/pullquote' ],
-			transform: ( { value, citation, anchor } ) =>
-				createBlock( 'core/quote', {
-					value,
-					citation,
-					anchor,
-				} ),
+			blocks: [ 'core/group' ],
+			transform: ( { anchor }, innerBlocks ) =>
+				createBlock( 'core/quote', { anchor }, innerBlocks ),
 		},
 		{
 			type: 'prefix',
 			prefix: '>',
-			transform: ( content ) => {
-				return createBlock( 'core/quote', {
-					value: `<p>${ content }</p>`,
-				} );
-			},
+			transform: ( content ) =>
+				createBlock( 'core/quote', {}, [
+					createBlock( 'core/paragraph', { content } ),
+				] ),
 		},
 		{
 			type: 'raw',
-			isMatch: ( node ) => {
-				const isParagraphOrSingleCite = ( () => {
-					let hasCitation = false;
-					return ( child ) => {
-						// Child is a paragraph.
-						if ( child.nodeName === 'P' ) {
-							return true;
-						}
-						// Child is a cite and no other cite child exists before it.
-						if ( ! hasCitation && child.nodeName === 'CITE' ) {
-							hasCitation = true;
-							return true;
-						}
-					};
-				} )();
-				return (
-					node.nodeName === 'BLOCKQUOTE' &&
-					// The quote block can only handle multiline paragraph
-					// content with an optional cite child.
-					Array.from( node.childNodes ).every(
-						isParagraphOrSingleCite
-					)
-				);
-			},
-			schema: ( { phrasingContentSchema } ) => ( {
+			schema: () => ( {
 				blockquote: {
-					children: {
-						p: {
-							children: phrasingContentSchema,
-						},
-						cite: {
-							children: phrasingContentSchema,
-						},
-					},
+					children: '*',
 				},
 			} ),
-		},
-	],
-	to: [
-		{
-			type: 'block',
-			blocks: [ 'core/paragraph' ],
-			transform: ( { value, citation } ) => {
-				const paragraphs = [];
-				if ( value && value !== '<p></p>' ) {
-					paragraphs.push(
-						...split(
-							create( { html: value, multilineTag: 'p' } ),
-							'\u2028'
-						).map( ( piece ) =>
-							createBlock( 'core/paragraph', {
-								content: toHTMLString( { value: piece } ),
-							} )
-						)
-					);
-				}
-				if ( citation && citation !== '<p></p>' ) {
-					paragraphs.push(
-						createBlock( 'core/paragraph', {
-							content: citation,
-						} )
-					);
-				}
-
-				if ( paragraphs.length === 0 ) {
-					return createBlock( 'core/paragraph', {
-						content: '',
-					} );
-				}
-				return paragraphs;
+			selector: 'blockquote',
+			transform: ( node ) => {
+				return createBlock(
+					'core/quote',
+					// Don't try to parse any `cite` out of this content.
+					// * There may be more than one cite.
+					// * There may be more attribution text than just the cite.
+					// * If the cite is nested in the quoted text, it's wrong to
+					//   remove it.
+					{},
+					rawHandler( {
+						HTML: node.innerHTML,
+						mode: 'BLOCKS',
+					} )
+				);
 			},
 		},
-
 		{
 			type: 'block',
-			blocks: [ 'core/heading' ],
-			transform: ( { value, citation, ...attrs } ) => {
-				// If there is no quote content, use the citation as the
-				// content of the resulting heading. A nonexistent citation
-				// will result in an empty heading.
-				if ( value === '<p></p>' ) {
-					return createBlock( 'core/heading', {
-						content: citation,
-					} );
-				}
-
-				const pieces = split(
-					create( { html: value, multilineTag: 'p' } ),
-					'\u2028'
-				);
-
-				const headingBlock = createBlock( 'core/heading', {
-					content: toHTMLString( { value: pieces[ 0 ] } ),
-				} );
-
-				if ( ! citation && pieces.length === 1 ) {
-					return headingBlock;
-				}
-
-				const quotePieces = pieces.slice( 1 );
-
-				const quoteBlock = createBlock( 'core/quote', {
-					...attrs,
-					citation,
-					value: toHTMLString( {
-						value: quotePieces.length
-							? join( pieces.slice( 1 ), '\u2028' )
-							: create(),
-						multilineTag: 'p',
-					} ),
-				} );
-
-				return [ headingBlock, quoteBlock ];
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			isMatch: ( {}, blocks ) => {
+				return ! blocks.some( ( { name } ) => name === 'core/quote' );
 			},
+			__experimentalConvert: ( blocks ) =>
+				createBlock(
+					'core/quote',
+					{},
+					blocks.map( ( block ) =>
+						createBlock(
+							block.name,
+							block.attributes,
+							block.innerBlocks
+						)
+					)
+				),
 		},
-
+	],
+	to: [
 		{
 			type: 'block',
 			blocks: [ 'core/pullquote' ],
-			transform: ( { value, citation, anchor } ) => {
+			isMatch: ( {}, block ) => {
+				return block.innerBlocks.every(
+					( { name } ) => name === 'core/paragraph'
+				);
+			},
+			transform: (
+				{ citation, anchor, fontSize, style },
+				innerBlocks
+			) => {
+				const value = innerBlocks
+					.map(
+						( { attributes } ) => `<p>${ attributes.content }</p>`
+					)
+					.join( '' );
 				return createBlock( 'core/pullquote', {
 					value,
 					citation,
 					anchor,
+					fontSize,
+					style,
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			transform: ( { citation, anchor }, innerBlocks ) =>
+				createBlock(
+					'core/group',
+					{ anchor },
+					citation
+						? [
+								...innerBlocks,
+								createBlock( 'core/paragraph', {
+									content: citation,
+								} ),
+						  ]
+						: innerBlocks
+				),
+		},
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( { citation }, innerBlocks ) =>
+				citation
+					? [
+							...innerBlocks,
+							createBlock( 'core/paragraph', {
+								content: citation,
+							} ),
+					  ]
+					: innerBlocks,
+		},
 	],
 };
 

package/src/search/edit.js

@@ -14,7 +14,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -241,7 +241,7 @@ export default function SearchEdit( {
 			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className,
 			buttonUseIcon ? 'has-icon' : undefined,
-			__experimentalElementButtonClassName
+			__experimentalGetElementClassName( 'button' )
 		);
 		const buttonStyles = {
 			...colorProps.style,

package/src/search/index.php

@@ -80,20 +80,23 @@ function render_block_core_search( $attributes ) {
 	}
 
 	if ( $show_button ) {
+		$button_classes         = array();
 		$button_internal_markup = '';
-		$button_classes         = $color_classes;
-		$aria_label             = '';
+		if ( ! empty( $color_classes ) ) {
+			$button_classes[] = $color_classes;
+		}
+		$aria_label = '';
 
-		if ( ! $is_button_inside ) {
-			$button_classes .= ' ' . $border_color_classes;
+		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
+			$button_classes[] = $border_color_classes;
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
-			$aria_label      = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
-			$button_classes .= ' has-icon';
+			$aria_label       = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
+			$button_classes[] = 'has-icon';
 
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
@@ -102,11 +105,10 @@ function render_block_core_search( $attributes ) {
 		}
 
 		// Include the button element class.
-		$button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME;
-
-		$button_markup = sprintf(
+		$button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
+		$button_markup    = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
-			esc_attr( $button_classes ),
+			esc_attr( implode( ' ', $button_classes ) ),
 			$inline_styles['button'],
 			$aria_label,
 			$button_internal_markup