Transform multiple selected blocks to Columns block #25829

ntsekouras · 2020-10-05T12:07:23Z

Description

Resolves: #16504

This PR adds the ability to transform multiple selected blocks in a Columns block. For now the Columns transformation is available from the menu only if selected blocks are between two and six. The number six is selected as for now this is the current max columns allowed by a Columns block.

You can create a Columns block from any other block, including InnerBlocks themselves.

How has this been tested?

Locally for now.
You can test this PR by doing the following:

Go to a post/page
Create some blocks, even a block with InnerBlocks like a Group block.
Multi select blocks (between 2-6)
Click on transform menu and select Columns

Types of changes

A new function (createBlocksFromInnerBlocksTemplate) for creating blocks from InnerBlocks template have been exposed to the public API. A version of this function has been used(duplicated) in more than one places to implement the relative functionality.

Todos left

Unit tests for createBlocksFromInnerBlocksTemplate.
e2e tests for the transformation to Columns.
Use the new function to appropriate places.

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-10-05T12:16:18Z

Size Change: +291 B (0%)

Total Size: 1.18 MB

Filename	Size	Change
`build/block-editor/index.js`	129 kB	-16 B (0%)
`build/block-library/index.js`	135 kB	+181 B (0%)
`build/blocks/index.js`	47.6 kB	+75 B (0%)
`build/edit-site/index.js`	20.5 kB	+82 B (0%)
`build/edit-site/style-rtl.css`	3.71 kB	-123 B (3%)
`build/edit-site/style.css`	3.72 kB	-121 B (3%)
`build/edit-widgets/index.js`	21.4 kB	+213 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.52 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.55 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/style-rtl.css`	10.9 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.66 kB	0 B
`build/block-library/style.css`	7.65 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/components/index.js`	169 kB	0 B
`build/components/style-rtl.css`	15.3 kB	0 B
`build/components/style.css`	15.3 kB	0 B
`build/compose/index.js`	9.42 kB	0 B
`build/core-data/index.js`	12 kB	0 B
`build/data-controls/index.js`	685 B	0 B
`build/data/index.js`	8.6 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`	568 B	0 B
`build/dom/index.js`	4.42 kB	0 B
`build/edit-navigation/index.js`	10.7 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.29 kB	0 B
`build/edit-post/style.css`	6.27 kB	0 B
`build/edit-widgets/style-rtl.css`	3 kB	0 B
`build/edit-widgets/style.css`	3 kB	0 B
`build/editor/editor-styles-rtl.css`	492 B	0 B
`build/editor/editor-styles.css`	493 B	0 B
`build/editor/index.js`	45.5 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.44 kB	0 B
`build/escape-html/index.js`	734 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`	621 B	0 B
`build/i18n/index.js`	3.54 kB	0 B
`build/is-shallow-equal/index.js`	710 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`	790 B	0 B
`build/redux-routine/index.js`	2.85 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.06 kB	0 B
`build/viewport/index.js`	1.74 kB	0 B
`build/warning/index.js`	1.13 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

etoledom · 2020-10-06T07:43:11Z

Tested inserting columns block on mobile and looks good! 👍
Thanks for thinking about mobile 😁♥️

ItsJonQ

🚀 from me! This is amazing @ntsekouras ! The transformation to column experience feels nice :D.

I manually tested the following flows:

Selected 1 block. Confirmed, column option is missing.
Selected 2-6 blocks. Confirmed, column option is available.
Selected 2-6 blocks, some with inner Columns. Confirmed, column option is available. Nested columns works.

Fantastic job abstracting the repeated createBlocksFromInnerBlocksTemplate function. This tidies it up a lot!

The only suggestion I have, but is not necessary, would be to add an E2E test for attempting to "columnize" just a single block.

Right now, there are test cases for 2, and more than 6.

Again, totally not a blocker! This is amazing. I love how thorough you are with your PR code changes.

Sidenote: TIL that adding a + in front of a number string transforms it into a number (type) 😱 .
Same goes with -, but making it negative.

ntsekouras · 2020-10-08T17:18:28Z

Hey @ItsJonQ - thanks so much for your review! 🥇

The only suggestion I have, but is not necessary, would be to add an E2E test for attempting to "columnize" just a single block.

Actually the transformation would work with any number of blocks. We limit that only because it doesn't make sense to create Columns block with too many... eh columns :). I deliberately skipped the one function because creating Columns blocks with a single column is coming soon. There is PR for that.. And after that we should allow one as well.

mtias · 2020-10-09T08:53:43Z

This is a cool new interaction, let's make sure to include it in changelogs for 5.6.

gziolo · 2020-10-23T13:47:26Z

createBlocksFromInnerBlocksTemplate - this is something that is worth mentioning in the summary of new APIs introduced for WordPress 5.6 release. Awesome work on this PR 💯

cc @tellthemachines

tellthemachines · 2020-10-25T23:49:39Z

Thanks, added to the list in #26108 !

Transform multiple selected blocks to Columns block

2a1966c

ntsekouras added [Type] Enhancement A suggestion for improvement. [Package] Blocks /packages/blocks [Block] Columns Affects the Columns Block labels Oct 5, 2020

ntsekouras requested review from mcsf, youknowriad and ellatrix October 5, 2020 12:07

ntsekouras requested review from ajitbohra, Soean and talldan as code owners October 5, 2020 12:07

ntsekouras self-assigned this Oct 5, 2020

use the new function from blocks API

b06ff5d

ntsekouras added 2 commits October 6, 2020 10:58

createBlocksFromInnerBlocksTemplate unit tests

9e642c3

add e2e tests

d88b7ae

ntsekouras requested review from nerrad and ntwb as code owners October 6, 2020 10:49

change selection shortcuts in tests

81d58e2

ItsJonQ self-requested a review October 8, 2020 15:47

ItsJonQ approved these changes Oct 8, 2020

View reviewed changes

ntsekouras merged commit ed07732 into master Oct 8, 2020

ntsekouras deleted the add/transforms-to-columns branch October 8, 2020 17:18

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

ntsekouras added the [Type] Feature New feature to highlight in changelogs. label Oct 9, 2020

ntsekouras mentioned this pull request Oct 13, 2020

Use UnitControl instead of RangeControl for column width #24711

Merged

ntsekouras mentioned this pull request Oct 13, 2020

Revert "Use UnitControl instead of RangeControl for column width" #26056

Closed

gziolo added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Oct 23, 2020

tellthemachines mentioned this pull request Oct 25, 2020

Dev Notes for WP 5.6 #26108

Closed

17 tasks

tellthemachines removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Nov 18, 2020

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

Transform multiple selected blocks to Columns block #25829

Transform multiple selected blocks to Columns block #25829

ntsekouras commented Oct 5, 2020 •

edited

Loading

github-actions bot commented Oct 5, 2020 •

edited

Loading

etoledom commented Oct 6, 2020

ItsJonQ left a comment •

edited

Loading

ntsekouras commented Oct 8, 2020

mtias commented Oct 9, 2020

gziolo commented Oct 23, 2020 •

edited

Loading

tellthemachines commented Oct 25, 2020

Transform multiple selected blocks to Columns block #25829

Transform multiple selected blocks to Columns block #25829

Conversation

ntsekouras commented Oct 5, 2020 • edited Loading

Description

How has this been tested?

Types of changes

Todos left

Checklist:

github-actions bot commented Oct 5, 2020 • edited Loading

etoledom commented Oct 6, 2020

ItsJonQ left a comment • edited Loading

Choose a reason for hiding this comment

ntsekouras commented Oct 8, 2020

mtias commented Oct 9, 2020

gziolo commented Oct 23, 2020 • edited Loading

tellthemachines commented Oct 25, 2020

ntsekouras commented Oct 5, 2020 •

edited

Loading

github-actions bot commented Oct 5, 2020 •

edited

Loading

ItsJonQ left a comment •

edited

Loading

gziolo commented Oct 23, 2020 •

edited

Loading