Add single column functionality to the Columns block #24065

richtabor · 2020-07-20T17:11:58Z

Description

This PR does two things:

Changes the min value of the count control for columns count to 1 from 2.
Adds a new one column variation.

This closes #24055, which will make building more robust column-based layouts easier. Instead of relying on switching between using Columns and Group blocks, single column functionality within a Columns block makes building interesting layouts easier and faster. For one, all blocks within a Group block can't always be aligned fullwidth/wide (Headings and Paragraphs for example), which result in a frustrating experience trying to better align content within columns.

How has this been tested?

Tested in WP 5.5 RC.

Screenshots

Min value set to 1:

Using the one column variation in practice:

New one column variation:

Types of changes

New feature:

Changes min prop of the count attribute for the Columns block
Adds a new one column variation

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

github-actions · 2020-07-20T17:18:03Z

Size Change: +91 B (0%)

Total Size: 1.19 MB

Filename	Size	Change
`build/block-library/index.js`	142 kB	+91 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.54 kB	0 B
`build/api-fetch/index.js`	3.35 kB	0 B
`build/autop/index.js`	2.72 kB	0 B
`build/blob/index.js`	668 B	0 B
`build/block-directory/index.js`	8.6 kB	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-editor/index.js`	130 kB	0 B
`build/block-editor/style-rtl.css`	11 kB	0 B
`build/block-editor/style.css`	10.9 kB	0 B
`build/block-library/editor-rtl.css`	8.65 kB	0 B
`build/block-library/editor.css`	8.65 kB	0 B
`build/block-library/style-rtl.css`	7.71 kB	0 B
`build/block-library/style.css`	7.71 kB	0 B
`build/block-library/theme-rtl.css`	741 B	0 B
`build/block-library/theme.css`	741 B	0 B
`build/block-serialization-default-parser/index.js`	1.78 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	47.6 kB	0 B
`build/components/index.js`	169 kB	0 B
`build/components/style-rtl.css`	15.4 kB	0 B
`build/components/style.css`	15.4 kB	0 B
`build/compose/index.js`	9.63 kB	0 B
`build/core-data/index.js`	12.1 kB	0 B
`build/data-controls/index.js`	684 B	0 B
`build/data/index.js`	8.63 kB	0 B
`build/date/index.js`	31.9 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	569 B	0 B
`build/dom/index.js`	4.43 kB	0 B
`build/edit-navigation/index.js`	10.6 kB	0 B
`build/edit-navigation/style-rtl.css`	868 B	0 B
`build/edit-navigation/style.css`	871 B	0 B
`build/edit-post/index.js`	306 kB	0 B
`build/edit-post/style-rtl.css`	6.37 kB	0 B
`build/edit-post/style.css`	6.35 kB	0 B
`build/edit-site/index.js`	21.4 kB	0 B
`build/edit-site/style-rtl.css`	3.8 kB	0 B
`build/edit-site/style.css`	3.81 kB	0 B
`build/edit-widgets/index.js`	21.6 kB	0 B
`build/edit-widgets/style-rtl.css`	3.09 kB	0 B
`build/edit-widgets/style.css`	3.09 kB	0 B
`build/editor/editor-styles-rtl.css`	480 B	0 B
`build/editor/editor-styles.css`	482 B	0 B
`build/editor/index.js`	42.4 kB	0 B
`build/editor/style-rtl.css`	3.85 kB	0 B
`build/editor/style.css`	3.84 kB	0 B
`build/element/index.js`	4.45 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.49 kB	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	1.74 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	3.54 kB	0 B
`build/is-shallow-equal/index.js`	709 B	0 B
`build/keyboard-shortcuts/index.js`	2.39 kB	0 B
`build/keycodes/index.js`	1.85 kB	0 B
`build/list-reusable-blocks/index.js`	3.02 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/media-utils/index.js`	5.12 kB	0 B
`build/notices/index.js`	1.69 kB	0 B
`build/nux/index.js`	3.27 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/plugins/index.js`	2.44 kB	0 B
`build/primitives/index.js`	1.34 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/reusable-blocks/index.js`	3.04 kB	0 B
`build/rich-text/index.js`	13 kB	0 B
`build/server-side-render/index.js`	2.6 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.24 kB	0 B
`build/url/index.js`	4.07 kB	0 B
`build/viewport/index.js`	1.75 kB	0 B
`build/warning/index.js`	1.13 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

talldan · 2020-07-22T06:15:28Z

It definitely seems like the alignments mentioned in #24055 is something that should be supported.

I wonder if columns is the right place to add this, though.

There's also Group. It doesn't work at the moment because of the way group constrains it's inner blocks using the wp-block-group__inner-container div, but I recall seeing it mentioned elsewhere that the inner container isn't ideal for full site editing where it'd be nice to use the Group as a more general container - #20376.

Maybe the inner container should only be present when the user wants to constrain the inner blocks to the content width?

richtabor · 2020-07-22T21:56:16Z

I wonder if columns is the right place to add this, though.

I think it is, for a few key reasons:

Columns are a relative unit of web design. It's contextual and familiar, whereas implementing Groups and Columns together is bit less meaningful.
Having single column functionality would make it easier to build out pages, as sometimes its necessary to change a columns based layout around. Being able to simply "resize" a columns block down to one is a better experience than having to add a new Group block, then drag each block into that new block, then delete the old Columns block.
I think it would be much more confusing if the inner container of the Group block changes based on a setting/content width - than having one consistent experience on its grouped blocks.

iamtakashi · 2020-07-23T12:47:09Z

In my opinion, a single column option is a nice addition for a reason other than the lack of alignment option in the heading block. Showing an empty column isn't ideal for people who edit when the page only needs a single column.

For example,

iamtakashi · 2020-07-28T14:24:42Z

It might be expected behaviour, but the single column is always the centre. So we'd still need to use an empty column to achieve something like the example above.

It feels out of scope for this PR to add the flexibility in position, but I just wanted to mention it.

paaljoachim · 2020-07-28T18:10:48Z

It would be helpful to have the option to be able to add 1 column in a layout.
Let's get this in..:)

jasonlemay · 2020-08-05T15:43:50Z

Columns are a relative unit of web design. It's contextual and familiar, whereas implementing Groups and Columns together is bit less meaningful.

Couldn't agree more. I got stuck with the fact that single column wasn't available and had to resolve using a Group to group ... one thing!

iamtakashi · 2020-08-10T18:31:01Z

Another good thing to allow a single column is that it avoids a situation like below where columns are forced to be 50:50 for a medium size viewport.

Is there anything else we could do to get this in? Who can we ping for opinions?

talldan

@richtabor I've reviewed the code changes. Just a couple of small comments.

I still wonder about the overlap with the group block, but I'm happy for those who have more experience building themes and content to make a decision on this.

packages/block-library/src/columns/variations.js

paaljoachim · 2020-10-10T08:35:21Z

There are now two PRs that look to accomplish to adding a single column option.
#25857

retrofox · 2020-10-12T11:30:50Z

There are now two PRs that look to accomplish to adding a single column option.
#25857

Closing ... Sorry I thought I did it before.

paaljoachim · 2020-10-12T11:35:13Z

It would be great if you can help @richtabor on this PR, and help get it merged.
Thanks @retrofox Damien!

richtabor · 2020-10-16T00:17:11Z

@paaljoachim Made the suggested changes; I think it's ready to go :)

talldan

Looks good, thanks for your work!

dianeco · 2020-10-18T12:43:39Z

The One Column layout (100%) is only 50% on small screens because of the following CSS:

@media (min-width: 600px) and (max-width:781px) {
    .wp-block-column {
        flex-basis:calc(50% - 1em)!important;  
    }
}

richtabor added 2 commits July 20, 2020 12:45

Update min count to 1 from 2

9a831e9

Add one-column-full variation

8874a8f

richtabor added [Type] Enhancement A suggestion for improvement. [Block] Columns Affects the Columns Block labels Jul 20, 2020

richtabor requested review from ajitbohra, Soean and talldan as code owners July 20, 2020 17:11

ZebulanStanphill added the Needs Design Feedback Needs general design feedback. label Jul 20, 2020

paaljoachim added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. labels Aug 10, 2020

talldan reviewed Oct 6, 2020

View reviewed changes

packages/block-library/src/columns/variations.js Outdated Show resolved Hide resolved

packages/block-library/src/columns/variations.js Outdated Show resolved Hide resolved

paaljoachim mentioned this pull request Oct 10, 2020

Columns block: Add add single column option #25857

Closed

3 tasks

richtabor added 2 commits October 15, 2020 20:14

Merge branch 'master' into try/single-column-columns-block/24055

f34b823

Updates based on feedback

e6eb631

talldan removed the Needs Dev Ready for, and needs developer efforts label Oct 16, 2020

talldan approved these changes Oct 16, 2020

View reviewed changes

talldan merged commit 6e0ff7b into master Oct 16, 2020

talldan deleted the try/single-column-columns-block/24055 branch October 16, 2020 02:48

github-actions bot added this to the Gutenberg 9.2 milestone Oct 16, 2020

ntsekouras mentioned this pull request Oct 16, 2020

Allow tranform to Columns from a single block #26185

Merged

6 tasks

miminari mentioned this pull request Dec 8, 2020

WordPress5.6対応 vektor-inc/vk-blocks-pro#137

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add single column functionality to the Columns block #24065

Add single column functionality to the Columns block #24065

richtabor commented Jul 20, 2020

github-actions bot commented Jul 20, 2020 •

edited

Loading

talldan commented Jul 22, 2020

richtabor commented Jul 22, 2020

iamtakashi commented Jul 23, 2020 •

edited

Loading

iamtakashi commented Jul 28, 2020

paaljoachim commented Jul 28, 2020

jasonlemay commented Aug 5, 2020

iamtakashi commented Aug 10, 2020

talldan left a comment •

edited

Loading

paaljoachim commented Oct 10, 2020

retrofox commented Oct 12, 2020

paaljoachim commented Oct 12, 2020

richtabor commented Oct 16, 2020

talldan left a comment

dianeco commented Oct 18, 2020

Add single column functionality to the Columns block #24065

Add single column functionality to the Columns block #24065

Conversation

richtabor commented Jul 20, 2020

Description

How has this been tested?

Screenshots

Min value set to 1:

Using the one column variation in practice:

New one column variation:

Types of changes

Checklist:

github-actions bot commented Jul 20, 2020 • edited Loading

talldan commented Jul 22, 2020

richtabor commented Jul 22, 2020

iamtakashi commented Jul 23, 2020 • edited Loading

iamtakashi commented Jul 28, 2020

paaljoachim commented Jul 28, 2020

jasonlemay commented Aug 5, 2020

iamtakashi commented Aug 10, 2020

talldan left a comment • edited Loading

Choose a reason for hiding this comment

paaljoachim commented Oct 10, 2020

retrofox commented Oct 12, 2020

paaljoachim commented Oct 12, 2020

richtabor commented Oct 16, 2020

talldan left a comment

Choose a reason for hiding this comment

dianeco commented Oct 18, 2020

github-actions bot commented Jul 20, 2020 •

edited

Loading

iamtakashi commented Jul 23, 2020 •

edited

Loading

talldan left a comment •

edited

Loading