Fix converting caption shortcode with link (#12315)

* Fix converting caption shortcode with link

* Parse HTML to DOM instead of using RegExp

* Source anchor info only from first element

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

@@ -111,6 +111,21 @@ const schema = {
 	},
 };
 
+function getFirstAnchorAttributeFormHTML( html, attributeName ) {
+	const { body } = document.implementation.createHTMLDocument( '' );
+
+	body.innerHTML = html;
+
+	const { firstElementChild } = body;
+
+	if (
+		firstElementChild &&
+		firstElementChild.nodeName === 'A'
+	) {
+		return firstElementChild.getAttribute( attributeName ) || undefined;
+	}
+}
+
 export const settings = {
 	title: __( 'Image' ),
 
@@ -185,27 +200,28 @@ export const settings = {
 					},
 					caption: {
 						shortcode: ( attributes, { shortcode } ) => {
-							const { content } = shortcode;
-							return content.replace( /\s*<img[^>]*>\s/, '' );
+							const { body } = document.implementation.createHTMLDocument( '' );
+
+							body.innerHTML = shortcode.content;
+							body.removeChild( body.firstElementChild );
+
+							return body.innerHTML.trim();
 						},
 					},
 					href: {
-						type: 'string',
-						source: 'attribute',
-						attribute: 'href',
-						selector: 'a',
+						shortcode: ( attributes, { shortcode } ) => {
+							return getFirstAnchorAttributeFormHTML( shortcode.content, 'href' );
+						},
 					},
 					rel: {
-						type: 'string',
-						source: 'attribute',
-						attribute: 'rel',
-						selector: 'a',
+						shortcode: ( attributes, { shortcode } ) => {
+							return getFirstAnchorAttributeFormHTML( shortcode.content, 'rel' );
+						},
 					},
 					linkClass: {
-						type: 'string',
-						source: 'attribute',
-						attribute: 'class',
-						selector: 'a',
+						shortcode: ( attributes, { shortcode } ) => {
+							return getFirstAnchorAttributeFormHTML( shortcode.content, 'class' );
+						},
 					},
 					id: {
 						type: 'number',

test/integration/__snapshots__/blocks-raw-handling.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Blocks raw handling rawHandler should convert HTML post to blocks with minimal content changes 1`] = `
+exports[`rawHandler should convert HTML post to blocks with minimal content changes 1`] = `
 "<!-- wp:heading -->
 <h2>Howdy</h2>
 <!-- /wp:heading -->
@@ -54,3 +54,21 @@ exports[`Blocks raw handling rawHandler should convert HTML post to blocks with
 <blockquote><h1>Heading</h1><p>Text.</p></blockquote>
 <!-- /wp:html -->"
 `;
+
+exports[`rawHandler should convert a caption shortcode 1`] = `
+"<!-- wp:image {\\"id\\":122,\\"align\\":\\"none\\",\\"className\\":\\"size-medium wp-image-122\\"} -->
+<figure class=\\"wp-block-image alignnone size-medium wp-image-122\\"><img src=\\"image.png\\" alt=\\"\\" class=\\"wp-image-122\\"/><figcaption>test</figcaption></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`rawHandler should convert a caption shortcode with caption 1`] = `
+"<!-- wp:image {\\"id\\":122,\\"align\\":\\"none\\",\\"className\\":\\"size-medium wp-image-122\\"} -->
+<figure class=\\"wp-block-image alignnone size-medium wp-image-122\\"><img src=\\"image.png\\" alt=\\"\\" class=\\"wp-image-122\\"/><figcaption><a href=\\"https://w.org\\">test</a></figcaption></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`rawHandler should convert a caption shortcode with link 1`] = `
+"<!-- wp:image {\\"id\\":754,\\"align\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignnone\\"><a href=\\"http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg\\"><img src=\\"http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg?w=604\\" alt=\\"Bell on Wharf\\" class=\\"wp-image-754\\"/></a><figcaption>Bell on wharf in San Francisco</figcaption></figure>
+<!-- /wp:image -->"
+`;

test/integration/blocks-raw-handling.spec.js

@@ -155,11 +155,26 @@ describe( 'Blocks raw handling', () => {
 			} );
 		} );
 	} );
+} );
 
-	describe( 'rawHandler', () => {
-		it( 'should convert HTML post to blocks with minimal content changes', () => {
-			const HTML = readFile( path.join( __dirname, 'fixtures/wordpress-convert.html' ) );
-			expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
-		} );
+describe( 'rawHandler', () => {
+	it( 'should convert HTML post to blocks with minimal content changes', () => {
+		const HTML = readFile( path.join( __dirname, 'fixtures/wordpress-convert.html' ) );
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it( 'should convert a caption shortcode', () => {
+		const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption.html' ) );
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it( 'should convert a caption shortcode with link', () => {
+		const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption-with-link.html' ) );
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it( 'should convert a caption shortcode with caption', () => {
+		const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption-with-caption-link.html' ) );
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
 	} );
 } );

test/integration/fixtures/shortcode-caption-with-caption-link.html

@@ -0,0 +1 @@
+<p>[caption id="attachment_122" align="alignnone" width="300"]<img class="size-medium wp-image-122" src="image.png" alt="" width="300" height="101" /> <a href="https://w.org">test</a>[/caption]</p>

test/integration/fixtures/shortcode-caption-with-link.html

@@ -0,0 +1 @@
+[caption id="attachment_754" align="alignnone" width="604"]<a href="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg"><img class="wp-image-754 size-large" src="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg?w=604" alt="Bell on Wharf" width="604" height="453" /></a> Bell on wharf in San Francisco[/caption]