Paste shortcodes

[ellatrix]

Description

This PR adds support for pasting shortcodes, starting with the caption and gallery shortcode.

How Has This Been Tested?

Create an "old" post and insert a single image (e.g. thumbnail, right aligned) with a caption. Verify that the text mode contains a shortcode. Go back to visual mode and select everything (maybe include a paragraph). Paste it in Gutenberg. There should be an image block, with the caption, correctly aligned.

To do:

• Find a way to support formatted captions.

[codecov]

Codecov Report

Merging #2874 into master will decrease coverage by 0.04%.
The diff coverage is 48.75%.

@@            Coverage Diff             @@
##           master    #2874      +/-   ##
==========================================
- Coverage   31.06%   31.02%   -0.05%     
==========================================
  Files         231      232       +1     
  Lines        6470     6518      +48     
  Branches     1156     1163       +7     
==========================================
+ Hits         2010     2022      +12     
- Misses       3740     3770      +30     
- Partials      720      726       +6

Impacted Files	Coverage Δ
blocks/library/gallery/gallery-image.js	0% <0%> (-55.56%)	⬇️
blocks/library/gallery/block.js	10% <0%> (-1.12%)	⬇️
blocks/library/image/index.js	52.38% <20%> (-12.33%)	⬇️
blocks/library/gallery/index.js	36.84% <25%> (-25.66%)	⬇️
blocks/api/raw-handling/shortcode-converter.js	52.38% <52.38%> (ø)
blocks/api/raw-handling/index.js	83.33% <96%> (-0.54%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b57b907...2eeeec3. Read the comment docs.

[aduth]

shortcakes

Mmm... shortcake.

Shortcake on the mind? 😄

[ellatrix]

🙈 Autocorrect, continuously have to undo it. Added it to the dictionary now.

[ellatrix]

Maybe this is not an appropriate PR to add support for gallery as well, since he block would need to support initialisation with IDs only, and it seems APIDataComponent does not support nested routes (yet).

[aduth]

and it seems APIDataComponent does not support nested routes (yet).

Can you elaborate on what's not supported?

[ellatrix]

@aduth Unless I'm missing something, the following won't work:

withAPIData( ( props ) => {
	const { images } = props.attributes;

	return {
		images: images.map( ( image ) => {
			return image.id ? `/wp/v2/media/${ image.id }` : image;
		} ),
	};
} ),

[aduth]

Correct. We could potentially make a separate component responsible only for displaying a single image, then withAPIData only needs to request one entity.

[youknowriad]

@iseulde can't you do something like ?

withAPIData( ( props ) => {
	const { images } = props.attributes;

	return images.reduce( ( memo, image, index ) => {
		memo[ 'image-' + image.id ] = `/wp/v2/media/${ image.id }`;
		return memo;
	}, {} );
} ),

[ellatrix]

Went with @aduth's suggestion.

[ellatrix]

Going to request an initial review. I'm not quite sure how we can get the formatting form the caption with the current hpq matchers, so leaving that out for now.

[mkaz]

I tested this using Firefox on Linux and it did not quite work as expected.

1. Selecting image and caption from old post and paste in new, it does create an image block - but the caption is not included as a caption part of the image block but a text below

2. Testing again with selecting a paragraph below and pasting the caption shortcode was not parsed out but was created as a separate block.

[ellatrix]

@mkaz Thanks for testing. Do you see any errors in the console? What is it logging for paste? I tried to reproduce this in Firefox, but it works perfectly fine.

[mkaz]

For the test that includes the extra paragraph.
Console Log:

          Received HTML:

 [caption id="attachment_114" align="alignnone" width="300"]<img class="size-medium wp-image-114" src="http://wpdev.local/wp-content/uploads/2017/09/image-2-300x219.png" alt="" width="300" height="219" /> Mike Tomlin[/caption]<p>Pittsburgh Steeler Coach</p>  index.js:6:7652
Received plain text:

     Mike Tomlin

Pittsburgh Steeler Coach  index.js:6:7703
Processed HTML piece:

 <p>[caption id="attachment_114" align="alignnone" width="300"]</p><img src="http://wpdev.local/wp-content/uploads/2017/09/image-2-300x219.png" alt=""><p> Mike Tomlin[/caption]</p><p>Pittsburgh Steeler Coach</p>

[mkaz]

For the copy-paste test that only includes caption and photo. The raw HTML view of the post looks like this:

[caption id="attachment_114" align="alignnone" width="300"]<img class="size-medium wp-image-114" src="http://wpdev.local/wp-content/uploads/2017/09/image-2-300x219.png" alt="" width="300" height="219" /> Mike Tomlin[/caption]

When I copy and paste, the console log results:

Received HTML:

 <img class="size-medium wp-image-114" src="http://wpdev.local/wp-content/uploads/2017/09/image-2-300x219.png" alt="" width="300" height="219" />Mike Tomlin  index.js:6:7652

Received plain text:

     Mike Tomlin  index.js:6:7703
Processed HTML piece:

 <img src="http://wpdev.local/wp-content/uploads/2017/09/image-2-300x219.png" alt=""><p>Mike Tomlin</p>

[ellatrix]

Coming back to this, I'm not sure what's going on. Everything works fine for me here in different browsers. Can anyone else reproduce?

[mkaz]

I've retested again and can not reproduce the same as above. Tried in a couple different browsers too, (Firefox, Safari, Chrome) though Firefox version upgraded to new 57 (beta).

It is now all working as expected, pasting of caption shortcode comes in as image block, both with/without surrounding paragraph text.

👍

[mkaz]

Comment already added - retested and looks good