Block Editor: Implement a responsive grid mode for `InnerBlocks` and a basic grid block that leverages it 2. #20000

epiqueras · 2020-02-02T22:33:49Z

This PR is an alternative to #18600 that implements everything from #19254 (comment) except for resizable gridlines.

The most important feature which differentiates this from #18600 is:

A Grid block should allow setting a breakpoint at which its children go from adhering to the grid layout to just rendering sequentially. This is significantly easier for users to manipulate and pick up than dealing with different grid layouts at multiple different breakpoints. Most users will have simple designs with a stacked mobile view, but power users can still achieve complex designs by nesting grids with different breakpoints. We might also need a breakpoint at which a grid item is completely hidden.

Here is a demo of such a breakpoint in action:

`Editor => Breakpoint`

`Editor < Breakpoint`

`Front End => Breakpoint`

`Front End < Breakpoint`

epiqueras · 2020-02-02T22:35:46Z

The lighter DOM seems to have done wonders for this approach, nice work @ellatrix!

epiqueras · 2020-02-17T18:54:05Z

@shaunandrews This is what I meant in #19254 (comment).

epiqueras · 2020-02-17T18:54:35Z

cc @mtias

shaunandrews · 2020-02-21T18:26:00Z

Been playing with this block for the past day or two, and I see a lot of potential to create some really nice layouts. I've worked up a prototype that walks through the creation and manipulation of multiple Section blocks within the Grid block. This briefly explores the drag-and-drop interactions for creating a new section, resizing and section, and moving a section.

The empty Grid block shows a, um, grid of squares to represent the rows and columns, and the space between them. The toolbar includes controls for adjusting the number of rows and columns, along with the spacing; Changes to these controls would be reflected with the squares in realtime.

I also wanted to consider how we could use the keyboard for creation of new Sections:

You can dive into the Figma file to see the full-resolution screens and try the prototype for yourself.

epiqueras · 2020-02-21T18:38:53Z

Beautiful!

github-actions · 2020-02-21T19:31:19Z

Size Change: +24.1 kB (2%)

Total Size: 889 kB

Filename	Size	Change
`build/a11y/index.js`	1.01 kB	+1 B
`build/annotations/index.js`	3.41 kB	-17 B (0%)
`build/autop/index.js`	2.58 kB	+1 B
`build/block-directory/index.js`	6.02 kB	-1 B
`build/block-editor/index.js`	126 kB	+22.5 kB (17%)	⚠️
`build/block-editor/style-rtl.css`	11.1 kB	+767 B (6%)	🔍
`build/block-editor/style.css`	11.1 kB	+768 B (6%)	🔍
`build/block-library/index.js`	116 kB	+96 B (0%)
`build/blocks/index.js`	57.6 kB	-9 B (0%)
`build/components/index.js`	190 kB	+29 B (0%)
`build/compose/index.js`	5.76 kB	+3 B (0%)
`build/core-data/index.js`	10.5 kB	-1 B
`build/data-controls/index.js`	1.04 kB	+2 B (0%)
`build/data/index.js`	8.22 kB	+2 B (0%)
`build/date/index.js`	5.36 kB	-5 B (0%)
`build/deprecated/index.js`	771 B	-1 B
`build/dom-ready/index.js`	569 B	+1 B
`build/edit-post/index.js`	90.9 kB	-25 B (0%)
`build/edit-widgets/index.js`	4.36 kB	+1 B
`build/editor/index.js`	44.6 kB	-12 B (0%)
`build/element/index.js`	4.45 kB	+4 B (0%)
`build/format-library/index.js`	7.6 kB	-2 B (0%)
`build/html-entities/index.js`	621 B	-1 B
`build/i18n/index.js`	3.45 kB	+2 B (0%)
`build/keyboard-shortcuts/index.js`	2.3 kB	-2 B (0%)
`build/keycodes/index.js`	1.68 kB	+1 B
`build/primitives/index.js`	1.49 kB	-1 B
`build/priority-queue/index.js`	878 B	-1 B
`build/redux-routine/index.js`	2.84 kB	-4 B (0%)
`build/rich-text/index.js`	14.3 kB	-2 B (0%)
`build/server-side-render/index.js`	2.54 kB	+3 B (0%)
`build/token-list/index.js`	1.27 kB	+1 B
`build/url/index.js`	4 kB	-1 B
`build/viewport/index.js`	1.64 kB	+23 B (1%)

ℹ️ View Unchanged

Filename	Size	Change
`build/api-fetch/index.js`	3.39 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	760 B	0 B
`build/block-library/editor-rtl.css`	7.67 kB	0 B
`build/block-library/editor.css`	7.67 kB	0 B
`build/block-library/style-rtl.css`	7.49 kB	0 B
`build/block-library/style.css`	7.49 kB	0 B
`build/block-library/theme-rtl.css`	669 B	0 B
`build/block-library/theme.css`	671 B	0 B
`build/block-serialization-default-parser/index.js`	1.65 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/components/style-rtl.css`	15.5 kB	0 B
`build/components/style.css`	15.5 kB	0 B
`build/dom/index.js`	3.06 kB	0 B
`build/edit-post/style-rtl.css`	8.68 kB	0 B
`build/edit-post/style.css`	8.67 kB	0 B
`build/edit-site/index.js`	4.59 kB	0 B
`build/edit-site/style-rtl.css`	2.77 kB	0 B
`build/edit-site/style.css`	2.76 kB	0 B
`build/edit-widgets/style-rtl.css`	2.8 kB	0 B
`build/edit-widgets/style.css`	2.79 kB	0 B
`build/editor/editor-styles-rtl.css`	325 B	0 B
`build/editor/editor-styles.css`	327 B	0 B
`build/editor/style-rtl.css`	4.01 kB	0 B
`build/editor/style.css`	4 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	1.92 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/list-reusable-blocks/index.js`	2.99 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	4.85 kB	0 B
`build/notices/index.js`	1.57 kB	0 B
`build/nux/index.js`	3.02 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.54 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

epiqueras · 2020-02-22T01:53:58Z

I had a bit of time to make this look a bit more like the new design today:

ockham · 2020-02-25T08:12:29Z

Apologies for the obvious question, but how do I test this? Specifically, which kind of block do I insert into a post to get this Grid layout?

ockham · 2020-02-25T08:18:03Z

Rebased.

epiqueras · 2020-02-25T12:40:06Z

The grid block.

paaljoachim · 2020-05-15T10:25:18Z

Btw here is another Grid issue: #16271

epiqueras · 2020-06-05T03:21:10Z

Closing this for now.

epiqueras added the [Feature] Full Site Editing label Feb 2, 2020

epiqueras added this to the Future milestone Feb 2, 2020

epiqueras requested review from ajitbohra, ellatrix, jorgefilipecosta, Soean, talldan and youknowriad as code owners February 2, 2020 22:33

epiqueras self-assigned this Feb 2, 2020

aduth mentioned this pull request Feb 6, 2020

Block Library: Avoid column width auto-adjustment when sibling width changes #19515

Merged

epiqueras mentioned this pull request Feb 17, 2020

Block Editor: Implement a responsive grid mode for InnerBlocks and a basic grid block that leverages it. #18600

Closed

6 tasks

shaunandrews added the Needs Design Feedback Needs general design feedback. label Feb 21, 2020

epiqueras force-pushed the add/grid-block-2 branch from d4b5ecb to 89e3ad3 Compare February 21, 2020 19:26

epiqueras added 2 commits February 25, 2020 14:17

Block Editor: Implement an experimental InnerBlocks grid mode.

50e0fd2

Design updates.

0a39cb4

ockham force-pushed the add/grid-block-2 branch from 5b0911d to 0a39cb4 Compare February 25, 2020 08:17

epiqueras mentioned this pull request Feb 25, 2020

Edit Site: Creating a new template from scratch #19254

Closed

shaunandrews mentioned this pull request Feb 28, 2020

Edit Site: Present "placeholder" blocks clearly #19256

Closed

youknowriad mentioned this pull request Mar 11, 2020

Full Site Editing Breakdown #20791

Closed

53 tasks

paaljoachim mentioned this pull request May 15, 2020

Breaking up/nesting Custom Posts MediaRon/post-type-archive-mapping#73

Open

epiqueras closed this Jun 5, 2020

aristath deleted the add/grid-block-2 branch November 10, 2020 14:27

jasmussen mentioned this pull request Feb 8, 2023

Grid Layout type #47809

Closed

robglidden mentioned this pull request Mar 15, 2023

Designing a Core CSS Grid Block for Intrinsic Design #49084

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block Editor: Implement a responsive grid mode for `InnerBlocks` and a basic grid block that leverages it 2. #20000

Block Editor: Implement a responsive grid mode for `InnerBlocks` and a basic grid block that leverages it 2. #20000

epiqueras commented Feb 2, 2020

epiqueras commented Feb 2, 2020

epiqueras commented Feb 17, 2020

epiqueras commented Feb 17, 2020

shaunandrews commented Feb 21, 2020

epiqueras commented Feb 21, 2020

github-actions bot commented Feb 21, 2020 •

edited

Loading

epiqueras commented Feb 22, 2020

ockham commented Feb 25, 2020

ockham commented Feb 25, 2020

epiqueras commented Feb 25, 2020

paaljoachim commented May 15, 2020

epiqueras commented Jun 5, 2020

Block Editor: Implement a responsive grid mode for InnerBlocks and a basic grid block that leverages it 2. #20000

Block Editor: Implement a responsive grid mode for InnerBlocks and a basic grid block that leverages it 2. #20000

Conversation

epiqueras commented Feb 2, 2020

Here is a demo of such a breakpoint in action:

Editor => Breakpoint

Editor < Breakpoint

Front End => Breakpoint

Front End < Breakpoint

epiqueras commented Feb 2, 2020

epiqueras commented Feb 17, 2020

epiqueras commented Feb 17, 2020

shaunandrews commented Feb 21, 2020

epiqueras commented Feb 21, 2020

github-actions bot commented Feb 21, 2020 • edited Loading

epiqueras commented Feb 22, 2020

ockham commented Feb 25, 2020

ockham commented Feb 25, 2020

epiqueras commented Feb 25, 2020

paaljoachim commented May 15, 2020

epiqueras commented Jun 5, 2020

Block Editor: Implement a responsive grid mode for `InnerBlocks` and a basic grid block that leverages it 2. #20000

Block Editor: Implement a responsive grid mode for `InnerBlocks` and a basic grid block that leverages it 2. #20000

`Editor => Breakpoint`

`Editor < Breakpoint`

`Front End => Breakpoint`

`Front End < Breakpoint`

github-actions bot commented Feb 21, 2020 •

edited

Loading