This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Fix: Mini Cart template part editor height #5825
Merged
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
rubikuserbot
requested review from
a team and
tomasztunik
and removed request for
a team
dinhtungdu
added
skip-changelog
|
Size Change: +2.26 kB (0%) Total Size: 816 kB
ℹ️ View Unchanged
|
tomasztunik
suggested changes
Feb 15, 2022
Comment on lines
46
to
50
| const blockProps = useBlockProps( { | ||
| style: { | ||
| minHeight: '100vh', | ||
| }, | ||
| } ); |
There was a problem hiding this comment.
Can we move it to css at https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/d67e5191f0265a9ea8eb02aa274b9d3f459335ff/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss#L1-L6
We already have the max-width styles and other editor specific styles living there.
There was a problem hiding this comment.
@tomasztunik Hey there 👋🏽 , #5813 is caused by a race condition related to loading CSS files. When we switch to edit the Mini Cart template part, the Site Editor calculates the height of the editor based on the height of template content, the editor style of the Mini Cart Contents block hasn't been loaded yet, which causes the issue we're fixing in this PR. I have to use the inline style to avoid the race condition so the Site Editor can calculate the correct height every time the template part is loaded.
There was a problem hiding this comment.
On trunk, if you switch back and forth editing the template part, the editor height is correct the second time.
There was a problem hiding this comment.
Ah, I see. I didn't understand the full context properly. Would it be worth to document it with a comment so whoever stumbles upon it doesn't move it to styles in the future?
There was a problem hiding this comment.
Would it be worth to document it with a comment so whoever stumbles upon it doesn't move it to styles in the future?
@tomasztunik I added the comment explaining the usage of the inline style.
tomasztunik
approved these changes
Feb 15, 2022
github-actions
bot
added
status: ready to merge
and removed
status: needs review
labels
4 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Fixes #5813
When a template part is loaded, Gutenberg set the height of the editor area using
iframe.contentDocument.documentElement.scrollHeight, at this point, the editor CSS hasn't been loaded yet, which causes the issue in #5813. If we switch to edit another template, then switch back to edit the Mini Cart template part, the height is correct because, at that point, the CSS had been loaded.This PR uses the inline style to set the height of the Mini Cart Contents block so Gutenberg can calculate the correct height when loading the template part.
Screenshots
Testing
Automated Tests
Manual Testing
How to test the changes in this Pull Request:
User Facing Testing
These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).