Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
wants to merge 2 commits into from
Closed

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

wants to merge 2 commits into from

Conversation

epiqueras
Copy link
Contributor

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

Screen Shot 2020-02-02 at 5 28 48 PM

Editor < Breakpoint

Screen Shot 2020-02-02 at 5 28 55 PM

Front End => Breakpoint

Screen Shot 2020-02-02 at 5 29 09 PM

Front End < Breakpoint

Screen Shot 2020-02-02 at 5 29 18 PM

@epiqueras epiqueras added this to the Future milestone Feb 2, 2020
@epiqueras epiqueras self-assigned this Feb 2, 2020
@epiqueras
Copy link
Contributor Author

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

@aduth aduth mentioned this pull request Feb 6, 2020
Merged
@epiqueras
Copy link
Contributor Author

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

@epiqueras
Copy link
Contributor Author

cc @mtias

@epiqueras epiqueras mentioned this pull request Feb 17, 2020
Closed
6 tasks
@shaunandrews
Copy link
Contributor

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.

grids i9 - full flow

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.

grids i9 toolbar controls

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

Grids Keyboard Creation

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

@epiqueras
Copy link
Contributor Author

Beautiful!

@shaunandrews shaunandrews added the Needs Design Feedback Needs general design feedback. label Feb 21, 2020
@github-actions
Copy link

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

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
Copy link
Contributor Author

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

gif

@ockham
Copy link
Contributor

ockham commented Feb 25, 2020

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
Copy link
Contributor

ockham commented Feb 25, 2020

Rebased.

@epiqueras
Copy link
Contributor Author

The grid block.

@epiqueras epiqueras mentioned this pull request Feb 25, 2020
Closed
@shaunandrews shaunandrews mentioned this pull request Feb 28, 2020
Closed
@youknowriad youknowriad mentioned this pull request Mar 11, 2020
Closed
53 tasks
@paaljoachim
Copy link
Contributor

Btw here is another Grid issue: #16271

@paaljoachim paaljoachim mentioned this pull request May 15, 2020
Open
@epiqueras
Copy link
Contributor Author

Closing this for now.

@epiqueras epiqueras closed this Jun 5, 2020
@aristath aristath deleted the add/grid-block-2 branch November 10, 2020 14:27
@jasmussen jasmussen mentioned this pull request Feb 8, 2023
Closed
@robglidden robglidden mentioned this pull request Mar 15, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@ellatrix ellatrix Awaiting requested review from ellatrix

@jorgefilipecosta jorgefilipecosta Awaiting requested review from jorgefilipecosta

@Soean Soean Awaiting requested review from Soean

@talldan talldan Awaiting requested review from talldan

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees

@epiqueras epiqueras

Labels
Needs Design Feedback Needs general design feedback.
Projects
None yet
Milestone
Future
Development

Successfully merging this pull request may close these issues.
4 participants
@epiqueras @shaunandrews @ockham @paaljoachim