search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.46k stars 4.18k forks source link

Explore using CSS Grid in Interface Skeleton #33776

Closed talldan closed 2 months ago

talldan commented 3 years ago

What problem does this address?

Currently, all WordPress editors (apart from customize widgets) use the InterfaceSkeleton component from the interface package for the general layout of the editor: https://github.com/WordPress/gutenberg/tree/trunk/packages/interface/src/components/interface-skeleton

It's a very simple React component that defines various areas for the layout (header, sidebar, notices, content, footer etc.). In terms of CSS, the layout is currently achieved using Flexbox, which has been prone to some bugs in the past.

It seems like a very good fit for CSS Grid, and now that IE11 is no longer supported, this could be explored. CSS grid could also potentially open up the possibility of more easily defined alternative editor layouts (the navigation editor has explored this in the past).

skorasaurus commented 3 years ago

ref/further background https://github.com/WordPress/gutenberg/issues/16271