Query block: Fix full width children from scrolling horizontally only in the editor #32892
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +71 B (0%) Total Size: 1.04 MB
ℹ️ View Unchanged
|
youknowriad
reviewed
Jun 22, 2021
Yes, the frontend doesn't have that
yeah you are right, I can totally do that |
|
It's this line that's breaking things in this particular case. |
Do you know which CSS is that? |
|
So this is what's happening: On the frontend we don't have this or this, we only have the block style adding border-box to the cover and it works as expected. On the editor however, the |
So the issue is in fact in the cover block right? not the post-template? Isn't the right fix here to add |
I totally understand, it's kind of a tricky one! the cover block already has that rule (here) but it's losing the specificity war to this:
|
|
Ok that's clearer now :) I think the ideal fix (which would solve more issues later :P) is to actually apply the same "wrapping" behavior we have for the reset and theme styles to the block library styles. (there's an issue for it somewhere) But obviously, that fix is bigger and more tricky. So I think it's fine to do something like the proposal in this PR in the meantime. One thing I'm wondering though is if it's an issue that is specific to Query block or if it needs to be solved differently. I mean the issue would surface if we insert a Cover inside any other container block that would use the reset rule, isn't it? So do you think maybe a better fix would be to actually add the following css to the |
|
I was wondering myself what's the best way to solve this because the "inherit" value that is more specific now is only an issue because of the ul/ol rule that exists that is setting it to "revert". So this is only failing whenever one of this blocks is inside of a list, not just the query block (but I don't know where or if that even happens, but ofc if it doesn't it totally could in the future). It's also the reason why the cover block is perfectly fine when outside the query block. I tried your solution and it solves the specificity issue. Now I'm thinking that we should do this for any other block that can have paddings, such as a group block but I just tried that on my test env and the problem is not happening, so I'm going to debug further. |
|
Ok, I just applied the fix to the cover block and I think it should be fine for now, unless you can think of any other blocks that could be affected by this. The group block would need this fix too if it were to have a width value applied to it. By its nature it doesn't have it so right now it's working as intended (though the box-sizing value for it is also content-box right now in the same context that is for the cover block) |
youknowriad
approved these changes
Jun 23, 2021
MaggieCabrera
added
[Block] Cover
MaggieCabrera
force-pushed
the
fix-query-block-nested-full-width
branch
from
01aeb0e to
b701ce2
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
After #30141 was merged, the box-sizing inherit rules for ul and ol are no longer setting them to border-box as they should. This causes the layout to break in the editor if a full width query block with full width children inside when they have horizontal padding inside, causing horizontal scroll. I am hesitating as to where this should be fixed and I'm leaning towards this block fix, but maybe this should be better handled elsewhere.
How has this been tested?
On emptytheme, paste this query loop on a page. Alternatively: create any query loop that is full width and has inside it another block that is full width and has horizontal padding, such as a cover or group block.
The editor will have horizontal scroll while the frontend shows up fine.
Screenshots
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist:
*.native.jsfiles for terms that need renaming or removal).