Fix issue when providing multiple shortcode aliases for a new block (#…

…17925)

* Fix issue where providing multiple shortcode aliases to transform into a block only matches the first shortcode

* Add test to ensure blocks can transform using multiple shortcode aliases

* Simplify the approach used to find the individual shortcode being transformed

Props jg314

packages/blocks/src/api/raw-handling/shortcode-converter.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { some, castArray, first, mapValues, pickBy, includes } from 'lodash';
+import { some, castArray, find, mapValues, pickBy, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -29,7 +29,7 @@ function segmentHTMLToShortcodeBlock( HTML, lastIndex = 0 ) {
 	}
 
 	const transformTags = castArray( transformation.tag );
-	const transformTag = first( transformTags );
+	const transformTag = find( transformTags, ( tag ) => regexp( tag ).test( HTML ) );
 
 	let match;
 

test/integration/shortcode-converter.test.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { registerCoreBlocks } from '@wordpress/block-library';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,6 +12,34 @@ import segmentHTMLToShortcodeBlock from '../../packages/blocks/src/api/raw-handl
 describe( 'segmentHTMLToShortcodeBlock', () => {
 	beforeAll( () => {
 		registerCoreBlocks();
+		registerBlockType( 'test/gallery', {
+			title: 'Test Gallery',
+			category: 'common',
+			attributes: {
+				ids: {
+					type: 'array',
+					default: [],
+				},
+			},
+			transforms: {
+				from: [
+					{
+						type: 'shortcode',
+						tag: [ 'my-gallery', 'my-bunch-of-images' ],
+						attributes: {
+							ids: {
+								type: 'array',
+								shortcode: ( { named: { ids } } ) =>
+									ids.split( ',' ).map( ( id ) => (
+										parseInt( id, 10 )
+									) ),
+							},
+						},
+					},
+				],
+			},
+			save: () => null,
+		} );
 	} );
 
 	it( 'should convert a standalone shortcode between two paragraphs', () => {
@@ -101,4 +129,15 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 		expect( transformed[ 8 ] ).toEqual( '</p>' );
 		expect( transformed ).toHaveLength( 9 );
 	} );
+
+	it( 'should convert regardless of shortcode alias', () => {
+		const original = `<p>[my-gallery ids="1,2,3"]</p>
+<p>[my-bunch-of-images ids="4,5,6"]</p>`;
+		const transformed = segmentHTMLToShortcodeBlock( original, 0 );
+		expect( transformed[ 0 ] ).toBe( '<p>' );
+		expect( transformed[ 1 ] ).toHaveProperty( 'name', 'test/gallery' );
+		expect( transformed[ 2 ] ).toBe( '</p>\n<p>' );
+		expect( transformed[ 3 ] ).toHaveProperty( 'name', 'test/gallery' );
+		expect( transformed[ 4 ] ).toBe( '</p>' );
+	} );
 } );