Convert to blocks breaks images with Captions

[maddisondesigns]

Issue Overview

I installed Gutenberg on a development version of my main business site. I then edited an old blog post and used the Convert to Blocks option.

A couple of images with captions converted ok but most of them broke, leaving the content a mess.

Steps to Reproduce (for bugs)

1. Create new Post using classic editor. Make sure to include numerous Images with captions
2. Save Post and Exit
3. Re-edit Post with Gutenburg
4. Select Convert to Blocks from More Options menu

Expected Behavior

Convert to Blocks should be able to handle something as basic as an image with a caption

Current Behavior

Images with captions don't convert reliably

Firefox Quantum 59.0.2 (64-bit)
Gutenberg 2.5.0
WordPress 4.9.4

[danielbachhuber]

Hi @maddisondesigns,

Thanks for the report. It'll be difficult to reproduce this without specific examples. Can you provide the raw HTML for the images that converted correctly vs. those that didn't?

[maddisondesigns]

Here's the content for the page on my dev server after it was converted to blocks

You obviously wont see the images if you just add this to your own test site so change http://dev.maddisondesigns.com to https://maddisondesigns.com if you want to view them.

<!-- wp:paragraph -->
<p>There&#x27;s been a lot of talk recently about the importance of making your theme translatable. It&#x27;s also good to remember that it&#x27;s worth making your website multilingual. At a recent <a href="http://www.meetup.com/WordPress-Melbourne/">WordPress Melbourne Developer Meetup</a>, I had the opportunity to talk about creating Multilingual websites with WordPress and WPML and you may be surprised to learn that it&#x27;s not as difficult as you might think.</p>
<!-- /wp:paragraph -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:quote -->
<blockquote class="wp-block-quote">
    <p>Last month [May 2014], for the first time in history, the non-English downloads of WordPress passed the English downloads. In the future, if we do our job right, the usage of WordPress will democratise publishing. It will resemble every language in the world.<br/> — Matt Mullenweg</p>
</blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>With the release of WordPress 4.0, one of the key features is the ability to select your language when you&#x27;re installing WordPress. When you do this, WordPress will automatically download and install the appropriate language pack so that your Dashboard will appear in your selected langauge.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2795,"align":"center"} -->
<figure class="wp-block-image aligncenter"><a href="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/WordPress40-install-language-select.jpg"><img src="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/WordPress40-install-language-select-620x496.jpg" alt="Installation screen shot showing langauge selection" class="wp-image-2795"/></a>
    <figcaption>Selecting your preferred langauge during install</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:image {"id":2794,"align":"center"} -->
<figure class="wp-block-image aligncenter"><a href="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/WordPress40-French-Dashboard.jpg"><img src="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/WordPress40-French-Dashboard-620x417.jpg" alt="Image showing the WordPress Dashboard in French" class="wp-image-2794"/></a>
    <figcaption>Viewing the WordPress Dashboard in French</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>There are six basic functions that you should be using when developong your WordPress themes. These are:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>__( $text, $domain ) (two underscores)</strong><br/> The most basic translation function. Returns the text in the correct language.<br/> <a href="http://codex.wordpress.org/Function_Reference/_2">http://codex.wordpress.org/Function_Reference/_2</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>_e( $text, $domain )</strong><br/> The same as __() except it echoes the text instead of returning the value.<br/> <a href="http://codex.wordpress.org/Function_Reference/_e">http://codex.wordpress.org/Function_Reference/_e</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>_n( $single, $plural, $number, $domain )</strong><br/> Return the plural or single form based on the $number.<br/> <a href="http://codex.wordpress.org/Function_Reference/_n">http://codex.wordpress.org/Function_Reference/_n</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>_x( $text, $context, $domain )</strong><br/> Used when there’s the chance the text could be found in more than two places, but with different context. Allows you to provide a short description to clarify the text being translated.<br/> <a href="http://codex.wordpress.org/Function_Reference/_x">http://codex.wordpress.org/Function_Reference/_x</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>_ex( $text, $context, $domain )</strong><br/> The same as _x() except it echoes the text instead of returning the value.<br/> <a href="http://codex.wordpress.org/Function_Reference/_ex">http://codex.wordpress.org/Function_Reference/_ex</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>_nx( $single, $plural, $number, $context, $domain )</strong><br/> A hybrid of _n() and _x(). It supports contexts and plurals.<br/> <a href="http://codex.wordpress.org/Function_Reference/_nx">http://codex.wordpress.org/Function_Reference/_nx</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Translating Your Content</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Using the awesome <a href="http://wpml.org/">WordPress Multilingual Plugin</a> (WPML) plugins, you can easily setup a multilingual website that is both easy to navigate for your site visitors, and also easy to edit from an administrators aspect. Using WPML, you can:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
    <li>provide your content in over 40 languages</li>
    <li>give your site visitors handy tools like ‘language switchers’</li>
    <li>access powerful translation management tools</li>
    <li>get easy access to professional translators (for a cost)</li>
    <li>make your WooCommerce store multilingual</li>
    <li>translate theme &amp; plugin texts</li>
</ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>After activating the WPML plugin, the first step is to configure it. WPML steps you through this simple 3-step process.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2802,"align":"center"} -->
<figure class="wp-block-image aligncenter"><a href="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-1.jpg"><img src="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-1-620x446.jpg" alt="Image of the WPML setup screen for step one" class="wp-image-2802"/></a>
    <figcaption>Select the language for your existing content</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>[caption id=&quot;attachment_2803&quot; align=&quot;aligncenter&quot; width=&quot;620&quot;]</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-2-620x504.jpg" alt="Image of the WPML setup screen for step two" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Select the languages you&#x27;d like to display[/caption] [caption id=&quot;attachment_2804&quot; align=&quot;aligncenter&quot; width=&quot;620&quot;]</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-3-620x1198.jpg" alt="Image of the WPML setup screen for step three" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Configure your &#x27;Language Switchers&#x27;[/caption]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After configuring WPML, the next step is to add your content. Thankfully, WPML makes this process fairly painless. When editing your content, you&#x27;re presented with a new Language Panel on the right-hand side of the edit screen. Within the Language Panel you can view what languages the current page has been translated into. You can either switch to one of your translated pages or if need be, create a new page for your translation. [caption id=&quot;attachment_2809&quot; align=&quot;aligncenter&quot; width=&quot;620&quot;]</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/samplepage-english-620x426.jpg" alt="Image of the WPML Language Panel" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Configure your &#x27;Language Switchers&#x27;[/caption]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When you view your list of Pages (or Posts) within the Dashboard, WPML makes it easy to see what content has been translated and what hasn&#x27;t. Clicking on the small plus symbol allows you to add a new page for translation while clicking the pencil icon will take you directly to the edit page for that specific language. [caption id=&quot;attachment_2811&quot; align=&quot;aligncenter&quot; width=&quot;620&quot;]</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/wpml-page-list-620x395.jpg" alt="Dashboard image showing a list of WordPress pages" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>View what content has been translated and what hasn&#x27;t.[/caption]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once your content has been translated, your visitors will be able to change languages using the various &#x27;Language Switchers&#x27; that WPML provide. You can have language switchers in the menu, sidebar, below the content and in the footer. You can also add them anywhere in your templates by adding the relevant PHP code. You can also translate your WordPress menus, Widgets and custom Post types, among other things. [caption id=&quot;attachment_2815&quot; align=&quot;aligncenter&quot; width=&quot;620&quot;]</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="http://dev.maddisondesigns.com/wp-content/uploads/2014/08/quark-french-620x568.jpg" alt="Website page showing translated content" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Your visitors can change languages using the various Language Switchers[/caption]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This should give the basics for setting up a multilingual site. If you&#x27;d like like some more information on making your themes translatable or setting up a multilingual site, then check out the links below. Also, don&#x27;t forget to check out my presentation on Slideshare. You can view the slides below or <a href="http://www.slideshare.net/anthonyhortin/creating-a-multilingual-site-with-wpml">over on Slideshare</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you&#x27;ve created a multilingual site yourself, did you use WPML? Something else? Let me know in the comments below :-)</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Where to Go for Help</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Translating WordPress:<br/> <a href="http://codex.wordpress.org/Translating_WordPress">http://codex.wordpress.org/Translating_WordPress</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Official WordPress Translators Team Blog:<br/> <a href="http://make.wordpress.org/polyglots">http://make.wordpress.org/polyglots</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>WPML Getting Started Guide:<br/> <a href="http://wpml.org/documentation/getting-started-guide">http://wpml.org/documentation/getting-started-guide</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Translating your Theme:<br/> <a href="http://code.tutsplus.com/tutorials/translating-your-theme--wp-25014">http://code.tutsplus.com/tutorials/translating-your-theme--wp-25014</a></p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"http://www.slideshare.net/anthonyhortin/creating-a-multilingual-site-with-wpml","type":"rich","providerNameSlug":"slideshare"} -->
<figure class="wp-block-embed is-type-rich is-provider-slideshare">
    http://www.slideshare.net/anthonyhortin/creating-a-multilingual-site-with-wpml
</figure>
<!-- /wp:embed -->

[maddisondesigns]

For comparision, here's the raw html content from my live site (that isn't running Gutenberg)
This is how the post is supposed to look:
https://maddisondesigns.com/2014/11/creating-multilingual-site-wpml/

There's been a lot of talk recently about the importance of making your theme translatable. It's also good to remember that it's worth making your website multilingual. At a recent <a title="Visit the WordPress Melbourne User Group" href="http://www.meetup.com/WordPress-Melbourne/" target="_blank">WordPress Melbourne Developer Meetup</a>, I had the opportunity to talk about creating Multilingual websites with WordPress and WPML and you may be surprised to learn that it's not as difficult as you might think.

<!--more-->
<blockquote>Last month [May 2014], for the first time in history, the non-English downloads of WordPress passed the English downloads. In the future, if we do our job right, the usage of WordPress will democratise publishing. It will resemble every language in the world.
— Matt Mullenweg</blockquote>
With the release of WordPress 4.0, one of the key features is the ability to select your language when you're installing WordPress. When you do this, WordPress will automatically download and install the appropriate language pack so that your Dashboard will appear in your selected langauge.

[caption id="attachment_2795" align="aligncenter" width="620"]<a href="https://maddisondesigns.com/wp-content/uploads/2014/08/WordPress40-install-language-select.jpg"><img class="wp-image-2795 size-medium" title="Selecting your preferred langauge during install" src="https://maddisondesigns.com/wp-content/uploads/2014/08/WordPress40-install-language-select-620x496.jpg" alt="Installation screen shot showing langauge selection" width="620" height="496" /></a> Selecting your preferred langauge during install[/caption]

[caption id="attachment_2794" align="aligncenter" width="620"]<a href="https://maddisondesigns.com/wp-content/uploads/2014/08/WordPress40-French-Dashboard.jpg"><img class="wp-image-2794 size-medium" title="Viewing the WordPress Dashboard in French" src="https://maddisondesigns.com/wp-content/uploads/2014/08/WordPress40-French-Dashboard-620x417.jpg" alt="Image showing the WordPress Dashboard in French" width="620" height="417" /></a> Viewing the WordPress Dashboard in French[/caption]

There are six basic functions that you should be using when developong your WordPress themes. These are:

<strong>__( $text, $domain ) (two underscores)</strong>
The most basic translation function. Returns the text in the correct language.
<a title="Visit the Wordpress Codex" href="http://codex.wordpress.org/Function_Reference/_2" target="_blank">http://codex.wordpress.org/Function_Reference/_2</a>

<strong>_e( $text, $domain )</strong>
The same as __() except it echoes the text instead of returning the value.
<a title="Visit the Wordpress Codex" href="http://codex.wordpress.org/Function_Reference/_e" target="_blank">http://codex.wordpress.org/Function_Reference/_e</a>

<strong>_n( $single, $plural, $number, $domain )</strong>
Return the plural or single form based on the $number.
<a title="Visit the Wordpress Codex" href="http://codex.wordpress.org/Function_Reference/_n" target="_blank">http://codex.wordpress.org/Function_Reference/_n</a>

<strong>_x( $text, $context, $domain )</strong>
Used when there’s the chance the text could be found in more than two places, but with different context. Allows you to provide a short description to clarify the text being translated.
<a title="Visit the Wordpress Codex" href="http://codex.wordpress.org/Function_Reference/_x" target="_blank">http://codex.wordpress.org/Function_Reference/_x</a>

<strong>_ex( $text, $context, $domain )</strong>
The same as _x() except it echoes the text instead of returning the value.
<a title="Visit the Wordpress Codex" href="http://codex.wordpress.org/Function_Reference/_ex" target="_blank">http://codex.wordpress.org/Function_Reference/_ex</a>

<strong>_nx( $single, $plural, $number, $context, $domain )</strong>
A hybrid of _n() and _x(). It supports contexts and plurals.
<a title="Visit the Wordpress Codex" href="http://codex.wordpress.org/Function_Reference/_nx" target="_blank">http://codex.wordpress.org/Function_Reference/_nx</a>
<h2>Translating Your Content</h2>
Using the awesome <a title="Visit the WPMP website" href="http://wpml.org/" target="_blank">WordPress Multilingual Plugin</a> (WPML) plugins, you can easily setup a multilingual website that is both easy to navigate for your site visitors, and also easy to edit from an administrators aspect. Using WPML, you can:
<ul>
	<li>provide your content in over 40 languages</li>
	<li>give your site visitors handy tools like ‘language switchers’</li>
	<li>access powerful translation management tools</li>
	<li>get easy access to professional translators (for a cost)</li>
	<li>make your WooCommerce store multilingual</li>
	<li>translate theme &amp; plugin texts</li>
</ul>
After activating the WPML plugin, the first step is to configure it. WPML steps you through this simple 3-step process.

[caption id="attachment_2802" align="aligncenter" width="620"]<a href="https://maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-1.jpg"><img class="wp-image-2802 size-medium" title="WPML Setup screen step one" src="https://maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-1-620x446.jpg" alt="Image of the WPML setup screen for step one" width="620" height="446" /></a> Select the language for your existing content[/caption]

[caption id="attachment_2803" align="aligncenter" width="620"]<a href="https://maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-2.jpg"><img class="wp-image-2803 size-medium" title="WPML Setup screen step two" src="https://maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-2-620x504.jpg" alt="Image of the WPML setup screen for step two" width="620" height="504" /></a> Select the languages you'd like to display[/caption]

[caption id="attachment_2804" align="aligncenter" width="620"]<a href="https://maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-3.jpg"><img class="wp-image-2804 size-medium" title="WPML Setup screen step three" src="https://maddisondesigns.com/wp-content/uploads/2014/08/wpml-setup-3-620x1198.jpg" alt="Image of the WPML setup screen for step three" width="620" height="1198" /></a> Configure your 'Language Switchers'[/caption]

After configuring WPML, the next step is to add your content. Thankfully, WPML makes this process fairly painless. When editing your content, you're presented with a new Language Panel on the right-hand side of the edit screen. Within the Language Panel you can view what languages the current page has been translated into. You can either switch to one of your translated pages or if need be, create a new page for your translation.

[caption id="attachment_2809" align="aligncenter" width="620"]<a href="https://maddisondesigns.com/wp-content/uploads/2014/08/samplepage-english.jpg"><img class="wp-image-2809 size-medium" title="Configure your 'Language Switchers'" src="https://maddisondesigns.com/wp-content/uploads/2014/08/samplepage-english-620x426.jpg" alt="Image of the WPML Language Panel" width="620" height="426" /></a> Configure your 'Language Switchers'[/caption]

When you view your list of Pages (or Posts) within the Dashboard, WPML makes it easy to see what content has been translated and what hasn't. Clicking on the small plus symbol allows you to add a new page for translation while clicking the pencil icon will take you directly to the edit page for that specific language.

[caption id="attachment_2811" align="aligncenter" width="620"]<a href="https://maddisondesigns.com/wp-content/uploads/2014/08/wpml-page-list.jpg"><img class="wp-image-2811 size-medium" title="View what content has been translated" src="https://maddisondesigns.com/wp-content/uploads/2014/08/wpml-page-list-620x395.jpg" alt="Dashboard image showing a list of WordPress pages" width="620" height="395" /></a> View what content has been translated and what hasn't.[/caption]

Once your content has been translated, your visitors will be able to change languages using the various 'Language Switchers' that WPML provide. You can have language switchers in the menu, sidebar, below the content and in the footer. You can also add them anywhere in your templates by adding the relevant PHP code. You can also translate your WordPress menus, Widgets and custom Post types, among other things.

[caption id="attachment_2815" align="aligncenter" width="620"]<a href="https://maddisondesigns.com/wp-content/uploads/2014/08/quark-french.jpg"><img class="wp-image-2815 size-medium" title="Change languages using the various Language Switchers" src="https://maddisondesigns.com/wp-content/uploads/2014/08/quark-french-620x568.jpg" alt="Website page showing translated content" width="620" height="568" /></a> Your visitors can change languages using the various Language Switchers[/caption]

This should give the basics for setting up a multilingual site. If you'd like like some more information on making your themes translatable or setting up a multilingual site, then check out the links below. Also, don't forget to check out my presentation on Slideshare. You can view the slides below or <a title="Creating a multilingual site with WPML" href="http://www.slideshare.net/anthonyhortin/creating-a-multilingual-site-with-wpml" target="_blank">over on Slideshare</a>.

If you've created a multilingual site yourself, did you use WPML? Something else? Let me know in the comments below :-)
<h2>Where to Go for Help</h2>
Translating WordPress:
<a title="Translating WordPress" href="http://codex.wordpress.org/Translating_WordPress" target="_blank">http://codex.wordpress.org/Translating_WordPress</a>

Official WordPress Translators Team Blog:
<a title="Official WordPress Translators Team Blog" href="http://make.wordpress.org/polyglots" target="_blank">http://make.wordpress.org/polyglots</a>

WPML Getting Started Guide:
<a title="WPML Getting Started Guide" href="http://wpml.org/documentation/getting-started-guide" target="_blank">http://wpml.org/documentation/getting-started-guide</a>

Translating your Theme:
<a title="Translating your Theme" href="http://code.tutsplus.com/tutorials/translating-your-theme--wp-25014" target="_blank">http://code.tutsplus.com/tutorials/translating-your-theme--wp-25014</a>

http://www.slideshare.net/anthonyhortin/creating-a-multilingual-site-with-wpml

[swissspidy]

I just ran into this as well.

After converting the content into blocks, it looked like this:

[danielbachhuber]

I believe this is now fixed with #7892

Using master, I tried converting the raw HTML @maddisondesigns presents in #5940 (comment). Everything converted correctly, including all images with captions. Some examples (because FF won't take a full page screenshot):

[Protohominid]

I see that #7892 has been merged into core, but I'm still experiencing this issue. Is this supposed to have been fixed in the 3.8.0 release? When I activate the Gutenberg plugin I'm also seeing it wrap other shortcodes in paragraph tags as well, in the classic block.

[lkraav]

When I activate the Gutenberg plugin I'm also seeing it wrap other shortcodes in paragraph tags as well, in the classic block.

@Protohominid can you test 3.7.0? Maybe we're dealing with a regression here.

[Protohominid]

Just reverted back to 3.7.0 and got the same result. When I go to an old post (which loads the content as a classic editor block) and select "Edit as HTML", all the shortcodes have been wrapped with p tags. Then when I select "convert to blocks", Gutenberg doesn't recognize them as shortcodes and leaves them as paragraph text.

[cedms]

Did anyone find a solution for that?