Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Writing Flow: Stretch "Click Redirect" to occupy full height of content #18732
This pull request seeks to resolve an issue where the editor canvas is not stretched enough on taller viewports.
The issue manifests itself in two ways:
This has caused some trouble for us in the past, typically around the nesting of elements within the
There existed tests previously which were meant to protect against regressions here ("clicking below the default block appender"). However, with the intrinsic height of the typewriter click appender, this test was not failing as it should have been. The tests have been updated here to (a) assure there is enough viewport height to allow for this gap to exist and (b) click at the bottom of the editor content area to confirm the expected behavior.
Verify that, with a tall viewport, both editor styles and click redirect stretch to the bottom of the content area. You can use Chrome Responsive Viewport Mode if you do not have a tall enough monitor.
Ensure end-to-end tests pass:
Hmm, this doesn't work as expected when the content scrolls, presumably because the containers are set to a fixed height of
I would have thought simply changing this to
I'll take a closer look.
There are a few options I think we could consider:
Personally, while it feels kinda hacky to use
Unrelated: In testing this, I noticed as well there's a small gap between notices and the content area:
It seems to be caused by this margin:
I expect it might make sense to change that selector to
Looking more closely at the changes in #18044, I think the issue might be simpler, in that previously the VisualEditor expanded to try to occupy as much space as possible using
That still exists in the VisualEditor styling:
But in #18044, the styling to treat the container as a flex container was removed:
Restoring the flex container styling seems to be sufficient to fix all the issues (ae77d49).
cc @youknowriad Since I understand the intention of #18044 to make these regions more unopinionated about the contents they contain, I'm curious if you see the changes of ae77d49 being problematic, or if you can think of another convention where these opinionated styles can exist (e.g. styling
I do notice one remaining issue which affects very-narrow, very-tall viewports (screenshot). However, I think this is unrelated to the changes here, since the issue stems from the fact that the entire page contents (
Yes, my initial reaction is, that maybe these are specific to the post editor which means, we could define these styles in
I'd like to allow this to have some time to sit in
For additional testing, I used this branch to author a few blog posts last week. I also ran it through all supported browsers, with and without meta boxes and notices, and with short and long content.
Aside: Have meta boxes always been pushed down below content, vs. fixed at the bottom of the screen? I notice the behavior here is identical to when the plugin is disabled (i.e. WordPress 5.3), but I thought I recall it appearing "fixed" at some point in the past.