Gutenberg: "Columns (experimental)" wrong order of blocks on save

Created on 21 Apr 2018 · 4Comments · Source: WordPress/gutenberg

Issue Overview

v2.7.0 - On save "Columns (experimental)" leaves the blocks ordered randomly in post_content.

In case of 2x2 grid I think it would be best to order them always like this:

{ x: 1, y: 1 }
{ x: 2, y: 1 }
{ x: 1, y: 2 }
{ x: 2, y: 2 }

because that's the top/left to bottom/right natural reading order for many languages.

Possible Solution

Order blocks inside "Columns (experimental)" in the same way each time.

[Feature] Nested / Inner Blocks [Type] Bug

Source

manake

Most helpful comment

I'm able to reproduce this with these steps:

Insert a Columns block
Set the Columns block to have 4 columns
Type 4 into the fourth column, 3 into the third column, etc.
Switch over to the Code Editor

The markup is in the order that you type text into the columns rather than in the order that they appear on the frontend.

Note that this oddity doesn't cause anything to render badly. Still, it's best (e.g. for a11y) that the markup we generate reflects what the page will look like when viewed.

noisysocks on 23 Apr 2018

👍2

All 4 comments

I'm able to reproduce this with these steps:

Insert a Columns block
Set the Columns block to have 4 columns
Type 4 into the fourth column, 3 into the third column, etc.
Switch over to the Code Editor

The markup is in the order that you type text into the columns rather than in the order that they appear on the frontend.

Note that this oddity doesn't cause anything to render badly. Still, it's best (e.g. for a11y) that the markup we generate reflects what the page will look like when viewed.

noisysocks on 23 Apr 2018

👍2

I'm unsure that left, right, left right is the most logical order to structurally order the column contents.

Yes, top left to bottom right is the natural reading order for many languages. However, as we're talking about columns, imagine a newspaper or magazine article, or a row of product or article overview columns. The natural reading order when talking columns is 1st column top to bottom of first column, then 2nd column top to bottom.

My biggest use-case for a columns block layout would be for grouping content that should be read in this order. For example, column 1 with an image, heading, subheading and text, then column 2 with similar. In this instance, the logical sequence would be to view all column 1 content, then all column 2 content.

If your objective is to create a grid of content that should logical read left, right, left right, then to my mind that would be achieved by having a 2 column layout, followed by another 2 column layout.

That way the reading order is logical if the items are stacked, for example as a single column on mobile.