Quote v2: add transforms (#39718)

Co-authored-by: Ella van Durpe <[email protected]>

packages/block-editor/src/store/selectors.js

@@ -33,6 +33,7 @@ import {
 import { Platform } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * A block selection object.
@@ -1881,6 +1882,7 @@ export const getInserterItems = createSelector(
  */
 export const getBlockTransformItems = createSelector(
 	( state, blocks, rootClientId = null ) => {
+		const [ sourceBlock ] = blocks;
 		const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
 			buildScope: 'transform',
 		} );
@@ -1894,20 +1896,32 @@ export const getBlockTransformItems = createSelector(
 			blockTypeTransformItems,
 			( { name } ) => name
 		);
+
+		// Consider unwraping the highest priority.
+		itemsByName[ '*' ] = {
+			frecency: +Infinity,
+			id: '*',
+			isDisabled: false,
+			name: '*',
+			title: __( 'Unwrap' ),
+			icon: itemsByName[ sourceBlock.name ]?.icon,
+		};
+
 		const possibleTransforms = getPossibleBlockTransformations(
 			blocks
 		).reduce( ( accumulator, block ) => {
-			if ( itemsByName[ block?.name ] ) {
+			if ( block === '*' ) {
+				accumulator.push( itemsByName[ '*' ] );
+			} else if ( itemsByName[ block?.name ] ) {
 				accumulator.push( itemsByName[ block.name ] );
 			}
 			return accumulator;
 		}, [] );
-		const possibleBlockTransformations = orderBy(
+		return orderBy(
 			possibleTransforms,
 			( block ) => itemsByName[ block.name ].frecency,
 			'desc'
 		);
-		return possibleBlockTransformations;
 	},
 	( state, rootClientId ) => [
 		state.blockListSettings[ rootClientId ],

packages/block-library/src/quote/v2/index.js

@@ -10,6 +10,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
 
 const settings = {
 	icon,
@@ -26,6 +27,7 @@ const settings = {
 			},
 		],
 	},
+	transforms,
 	edit,
 	save,
 };

packages/block-library/src/quote/v2/transforms.js

@@ -0,0 +1,163 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	parseWithAttributeSchema,
+	rawHandler,
+	serialize,
+} from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/pullquote' ],
+			transform: ( { value, citation, anchor, fontSize, style } ) => {
+				return createBlock(
+					'core/quote',
+					{
+						attribution: citation,
+						anchor,
+						fontSize,
+						style,
+					},
+					parseWithAttributeSchema( value, {
+						type: 'array',
+						source: 'query',
+						selector: 'p',
+						query: {
+							content: {
+								type: 'string',
+								source: 'text',
+							},
+						},
+					} ).map( ( { content } ) =>
+						createBlock( 'core/paragraph', { content } )
+					)
+				);
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			transform: ( { anchor }, innerBlocks ) =>
+				createBlock( 'core/quote', { anchor }, innerBlocks ),
+		},
+		{
+			type: 'prefix',
+			prefix: '>',
+			transform: ( content ) =>
+				createBlock( 'core/quote', {}, [
+					createBlock( 'core/paragraph', { content } ),
+				] ),
+		},
+		{
+			type: 'raw',
+			schema: ( { phrasingContentSchema } ) => ( {
+				figure: {
+					require: [ 'blockquote' ],
+					children: {
+						blockquote: {
+							children: '*',
+						},
+						figcaption: {
+							children: phrasingContentSchema,
+						},
+					},
+				},
+			} ),
+			isMatch: ( node ) =>
+				node.nodeName === 'FIGURE' &&
+				!! node.querySelector( 'blockquote' ),
+			transform: ( node ) => {
+				return createBlock(
+					'core/quote',
+					{
+						attribution: node.querySelector( 'figcaption' )
+							?.innerHTML,
+					},
+					rawHandler( {
+						HTML: node.querySelector( 'blockquote' ).innerHTML,
+						mode: 'BLOCKS',
+					} )
+				);
+			},
+		},
+		{
+			type: 'block',
+			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' ],
+			isMatch: ( {}, block ) => {
+				return block.innerBlocks.every(
+					( { name } ) => name === 'core/paragraph'
+				);
+			},
+			transform: (
+				{ attribution, anchor, fontSize, style },
+				innerBlocks
+			) => {
+				return createBlock( 'core/pullquote', {
+					value: serialize( innerBlocks ),
+					citation: attribution,
+					anchor,
+					fontSize,
+					style,
+				} );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/group' ],
+			transform: ( { attribution, anchor }, innerBlocks ) =>
+				createBlock(
+					'core/group',
+					{ anchor },
+					attribution
+						? [
+								...innerBlocks,
+								createBlock( 'core/paragraph', {
+									content: attribution,
+								} ),
+						  ]
+						: innerBlocks
+				),
+		},
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( { attribution }, innerBlocks ) =>
+				attribution
+					? [
+							...innerBlocks,
+							createBlock( 'core/paragraph', {
+								content: attribution,
+							} ),
+					  ]
+					: innerBlocks,
+		},
+	],
+};
+
+export default transforms;

packages/blocks/src/api/factory.js

@@ -307,7 +307,9 @@ const getBlockTypesForPossibleToTransforms = ( blocks ) => {
 	);
 
 	// Map block names to block types.
-	return blockNames.map( ( name ) => getBlockType( name ) );
+	return blockNames.map( ( name ) =>
+		name === '*' ? name : getBlockType( name )
+	);
 };
 
 /**
@@ -541,10 +543,9 @@ export function switchToBlockType( blocks, name ) {
 		return null;
 	}
 
-	const hasSwitchedBlock = some(
-		transformationResults,
-		( result ) => result.name === name
-	);
+	const hasSwitchedBlock =
+		name === '*' ||
+		some( transformationResults, ( result ) => result.name === name );
 
 	// Ensure that at least one block object returned by the transformation has
 	// the expected "destination" block type.