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
Columns: Improve margins, column child block, mobile. #11904
This PR aims to further improve the columns block, and improving a number of aspects and addressing recent feedback.
Aside from that it simplifies the code a bit, and removes a couple of redundant overrides that were better fixed elsewhere.
Worth noting — a fullwide columns block is still not perfectly 1:1 representative of what it will look like on the frontend, as is noted in https://github.com/WordPress/gutenberg/compare/improve/columns?expand=1#diff-49ac41bc72e24e343a451fe254801c0fR16. This is in order to make room for the side UI (movers on child blocks), and I expect us to still revisit this at some point.
This PR has been tested using RTL language, on mobile and desktop breakpoints, in vanilla editor styles and in TwentyNineteen.
To expand a little on this:
We could simply decide that a full-wide block has margin left and right, both on the frontend and in the backend, just like how we are deciding that it should have spacing between the columns. This would serendipitously fix any side UI issues. For now I've avoided this.
That seems like cheating our way to a "fix". It doesn't actually solve the problem, because what if you have a theme that makes the full-width blocks actually be 100% width?
FWIW, I think this is the best way forward. Columns full of images look great when they're full-width, but any text-based ones bleed into the edges. I'd rather Gutenberg added margins by default, and theme authors manually overrode that on the front end if for some reason they'd prefer to.
The fullwide margin change would probably be something to do separately from this PR, just to keep things focused. I suspect phase 2 will rethink aspects here as well, so maybe keep those changes for that round of improvements, and accept the visual disconnect for now.
Thanks to @kjellr for helping me test this.
We discovered an issue — this is also present in master — where if you typeareallylongwordlikethisbutultrasuperlong in a column, that word would be unbroken, and the column would grow.
This issue was not very visible if you used few columns. But as soon as you're at more than 3 columns with varied content, the issue became clear:
This was fixed by adding the following to each individual column:
I have tested this in Firefox and Safari and Chrome, and it seems to be solid.
This is looking good. Aside from the issues that were raised (and subsequently fixed) above, I haven't found anything that'd hold this back.
I've tested on Mac OS 10.14, with Chrome 70.0.3538.102 and FF 63.0.1. Using both the Twenty Nineteen + Gutenberg Starter themes.
- I'm able to select column block, columns, and child blocks using the keyboard.
- I'm able to select just the column block and child blocks using the mouse.
- alignwide column block looks much better on small screens than it did before.
- Frontend looks good.
- All toolbars work in my testing.
- I'm able to multi-select blocks within a column
- The columns block works as expected when it's empty.
- Typing averylongwordthatgoesonforever in a column no longer breaks everything.