Add pullquote tranformations (#23562)

* add pullquote tranformations

This will be refactored.

* leave raw transformation to be handled by Quote only

* fix e2e tests

* merge quote/pullquote tranforms from list

packages/block-library/src/list/transforms.js

@@ -67,7 +67,7 @@ const transforms = {
 		},
 		{
 			type: 'block',
-			blocks: [ 'core/quote' ],
+			blocks: [ 'core/quote', 'core/pullquote' ],
 			transform: ( { value, anchor } ) => {
 				return createBlock( 'core/list', {
 					values: toHTMLString( {
@@ -174,6 +174,23 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/pullquote' ],
+			transform: ( { values, anchor } ) => {
+				return createBlock( 'core/pullquote', {
+					value: toHTMLString( {
+						value: create( {
+							html: values,
+							multilineTag: 'li',
+							multilineWrapperTags: [ 'ul', 'ol' ],
+						} ),
+						multilineTag: 'p',
+					} ),
+					anchor,
+				} );
+			},
+		},
 	],
 };
 

packages/block-library/src/pullquote/index.js

@@ -12,6 +12,7 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -43,6 +44,7 @@ export const settings = {
 		},
 		{ name: SOLID_COLOR_STYLE_NAME, label: __( 'Solid color' ) },
 	],
+	transforms,
 	edit,
 	save,
 	deprecated,

packages/block-library/src/pullquote/transforms.js

@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { create, join, split, toHTMLString } from '@wordpress/rich-text';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ 'core/paragraph' ],
+			transform: ( attributes ) => {
+				return createBlock( 'core/pullquote', {
+					value: toHTMLString( {
+						value: join(
+							attributes.map( ( { content } ) =>
+								create( { html: content } )
+							),
+							'\u2028'
+						),
+						multilineTag: 'p',
+					} ),
+					anchor: attributes.anchor,
+				} );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/heading' ],
+			transform: ( { content, anchor } ) => {
+				return createBlock( 'core/pullquote', {
+					value: `<p>${ content }</p>`,
+					anchor,
+				} );
+			},
+		},
+	],
+	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;
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/heading' ],
+			transform: ( { value, citation, ...attrs } ) => {
+				// If there is no pullquote 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 pullquoteBlock = createBlock( 'core/pullquote', {
+					...attrs,
+					citation,
+					value: toHTMLString( {
+						value: quotePieces.length
+							? join( pieces.slice( 1 ), '\u2028' )
+							: create(),
+						multilineTag: 'p',
+					} ),
+				} );
+				return [ headingBlock, pullquoteBlock ];
+			},
+		},
+	],
+};
+
+export default transforms;

packages/e2e-tests/specs/editor/various/block-switcher.test.js

@@ -28,6 +28,7 @@ describe( 'Block Switcher', () => {
 			'Group',
 			'Paragraph',
 			'Quote',
+			'Pullquote',
 		] );
 	} );
 
@@ -49,15 +50,19 @@ describe( 'Block Switcher', () => {
 		expect( await getAvailableBlockTransforms() ).toEqual( [
 			'Group',
 			'Paragraph',
+			'Pullquote',
 		] );
 	} );
 
 	it( 'Should not show the block switcher if all the blocks the list block transforms into are removed', async () => {
 		// Remove the paragraph and quote block from the list of registered blocks.
 		await page.evaluate( () => {
-			[ 'core/quote', 'core/paragraph', 'core/group' ].map( ( block ) =>
-				wp.blocks.unregisterBlockType( block )
-			);
+			[
+				'core/quote',
+				'core/pullquote',
+				'core/paragraph',
+				'core/group',
+			].map( ( block ) => wp.blocks.unregisterBlockType( block ) );
 		} );
 
 		// Insert a list block.