Skip to content

Commit

Permalink
Fix converting caption shortcode with link (#12315)
Browse files Browse the repository at this point in the history
* Fix converting caption shortcode with link

* Parse HTML to DOM instead of using RegExp

* Source anchor info only from first element
  • Loading branch information
ellatrix authored and youknowriad committed Dec 20, 2018
1 parent ff64aed commit 6cc58e8
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 23 deletions.
44 changes: 30 additions & 14 deletions packages/block-library/src/image/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),

Expand Down Expand Up @@ -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',
Expand Down
20 changes: 19 additions & 1 deletion test/integration/__snapshots__/blocks-raw-handling.spec.js.snap
Original file line number Diff line number Diff line change
@@ -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 -->
Expand Down Expand Up @@ -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 -->"
`;
25 changes: 20 additions & 5 deletions test/integration/blocks-raw-handling.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
} );
} );
3 changes: 0 additions & 3 deletions test/integration/fixtures/caption-shortcode-out.html

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions test/integration/fixtures/shortcode-caption-with-link.html
Original file line number Diff line number Diff line change
@@ -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]

0 comments on commit 6cc58e8

Please sign in to comment.