Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Use div in text columns and create responsive grid. #3438
Update text columns block markup and create responsive Grid. See issues #2908. Note that depending on content width 3-4 columns blocks might not have 3-4 columns.
We can always force 4 columns using media queries but I wanted to hear opinions first using fluid responsive Grid.
Columns could get really narrow and unreadable if we force them to be in 4 columns.
Screenshots (jpeg or gifs if applicable):
How Has This Been Tested?
Types of changes
Many times comes to my mind WP core would make it very easy for themself, save lot of time, to use Bootstrap library for back-end.
This problem with columns is practicaly solved with Bootstrap, and for all screen sizes. And very popular library. Not only magic with columns, but all other magic too.
Other plugins could use it to. For instance ACF, Pods, CMB2, etc... and tweaking fields layout, Metaboxes in back-end. Right now they use some limited hard tweaking for it.
Start by little steps and in some distant future convert whole back-end to Bootstrap. Replace all HTML tables with it.
Couple of question to think about:
So, two avenues of answers to this one.
First: the "Text Columns" block is sort of a one-off. As we implemented it, the chief reason for doing so was to demonstrate the power of what Gutenberg can do with layouts, even in its current state. But because of all the questions asked in this thread (all of which have already also been asked on the Columns ticket, #219), this might be the type of block that doesn't actually ship with Gutenberg initially.
Secondly, the thing is — depending on the implementation of columns — we might want the UI for nested blocks to be in place first in #428, and once work properly starts on #219 we might not want a separate block for "Text Columns" at all, but depending on the approach perhaps a generic column container. This container could then have options for columns as well as responsiveness.
This is also where CSS Grid can come into play, and CC: @mor10 because he's mentioned that a number of times.
All of this is not to say that we can't or shouldn't make improvements to text-columns, just that it's perhaps worth starting to think about what form those improvements should take, before we spend too much time optimizing for something that may not exist indefinitely. If it's just a quick markup change, that's probably super fine.
@@ Coverage Diff @@ ## master #3438 +/- ## ========================================= - Coverage 39.17% 33.8% -5.38% ========================================= Files 299 249 -50 Lines 7025 6713 -312 Branches 1292 1207 -85 ========================================= - Hits 2752 2269 -483 - Misses 3588 3754 +166 - Partials 685 690 +5