Paragraph alignment causes issues with position

[grappler]

Issue Overview

When working with paragraph alignment the paragraph are not displayed in a logical order.

Steps to Reproduce (for bugs)

1. Add the following text to a post.

<!-- wp:paragraph {"width":"left","backgroundColor":"#f78da7"} -->
<p style="background-color:#f78da7" class="alignleft has-background">First - left</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"width":"right","backgroundColor":"#8ed1fc"} -->
<p style="background-color:#8ed1fc" class="alignright has-background">Second - right</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"#fcb900"} -->
<p style="background-color:#fcb900" class="has-background">Third - none</p>
<!-- /wp:paragraph -->

Expected Behavior

The order

Current Behavior

The text looks like the following.

On the frontend with Twenty Seventeen it looks like

Possible Solution

Perhaps add some clearing to the third paragraph.

Todos

• Tests
• Documentation

[danielbachhuber]

Related #6634 #4127 #4010 #5885

[designsimply]

This issue report may be out of date. I tried the following steps:

1. Start a new post with Gutenberg.
2. Go to More > Code Editor in the main editor toolbar.
3. Paste the code example provided.
4. Go to More > Visual Editor.

Result: I can only see the "Third - none" paragraph (the other two are there but hidden underneath).

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13986&action=edit running WordPress 4.9.7 and Gutenberg 3.2.0 using Firefox 61.0.1 on macOS 10.13.5.}

If I instead try to recreate the paragraphs and alignments manually using the Gutenberg UI instead of copying the code example directly, I end up with something that looks more like this:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13986&action=edit running WordPress 4.9.7 and Gutenberg 3.2.0 using Firefox 61.0.1 on macOS 10.13.5.}

and the underlying code looks different:

<!-- wp:paragraph {"align":"left","backgroundColor":"pale-pink"} -->
<p style="text-align:left" class="has-background has-pale-pink-background-color">First</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","backgroundColor":"pale-cyan-blue"} -->
<p style="text-align:right" class="has-background has-pale-cyan-blue-background-color">Second</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"backgroundColor":"luminous-vivid-amber"} -->
<p class="has-background has-luminous-vivid-amber-background-color">Third</p>
<!-- /wp:paragraph -->

@grappler may I ask exactly how you arrived at the code from step one in your example? Did you get to that by using the UI or did you manually create that code example? Note: I believe the alignment implementation has changed since this issue was created.

[ZebulanStanphill]

@grappler @designsimply You used to be able to set the block alignment of a Paragraph to float left or right, but that was removed at some point. So can this issue be closed now because it is obsolete?

[mtias]

Let's close this as it's not relevant to paragraphs anymore.