Skip to content
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
merged 2 commits into from
Feb 15, 2022
Merged

Fix: Mini Cart template part editor height #5825

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42977c5
fix editor height
dinhtungdu Feb 14, 2022
6e7e22a
add comment explaining the usage of inline style
dinhtungdu Feb 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@ interface Props {
}

const Edit = ( { clientId }: Props ): ReactElement => {
const blockProps = useBlockProps();
const blockProps = useBlockProps( {
style: {
minHeight: '100vh',
},
} );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Member Author

@dinhtungdu dinhtungdu Feb 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On trunk, if you switch back and forth editing the template part, the editor height is correct the second time.

Copy link
Contributor

@tomasztunik tomasztunik Feb 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!


const defaultTemplate = [
[ 'woocommerce/filled-mini-cart-contents-block', {}, [] ],
Expand Down