Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Display Mini Cart overlay in template part editor (https://github.com/woocommerce/woocommerce-blocks/pull/9014)

This commit is contained in:
Albert Juhé Lluveras 2023-04-14 10:44:09 +02:00 committed by GitHub
parent 710221ad23
commit c63923e2fb
2 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
View File

@ -123,7 +123,7 @@ const Edit = ( {
}, [] );
return (
<div { ...blockProps }>
<>
<InspectorControls key="inspector">
<PanelBody
title={ __( 'Dimensions', 'woo-gutenberg-products-block' ) }
@ -144,15 +144,23 @@ const Edit = ( {
/>
</PanelBody>
</InspectorControls>
<EditorProvider currentView={ currentView }>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
template={ defaultTemplate }
templateLock={ false }
/>
</EditorProvider>
<MiniCartInnerBlocksStyle style={ blockProps.style } />
</div>
<div
className="wc-block-components-drawer__screen-overlay"
aria-hidden="true"
></div>
<div className="wc-block-editor-mini-cart-contents__wrapper">
<div { ...blockProps }>
<EditorProvider currentView={ currentView }>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
template={ defaultTemplate }
templateLock={ false }
/>
</EditorProvider>
<MiniCartInnerBlocksStyle style={ blockProps.style } />
</div>
</div>
</>
);
};

13
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/editor.scss
View File

@ -1,8 +1,13 @@
.editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents {
/* We need to override the margin top here to simulate the layout of
the mini cart contents on the front end. */
margin: 0 auto !important;
// Extra classes added for specificity, so we get rid of a top margin added by GB.
.editor-styles-wrapper .wc-block-editor-mini-cart-contents__wrapper.wc-block-editor-mini-cart-contents__wrapper {
display: flex;
justify-content: center;
margin: 0;
position: relative;
z-index: 9999;
}
.editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents {
.wp-block-woocommerce-empty-mini-cart-contents-block[hidden],
.wp-block-woocommerce-filled-mini-cart-contents-block[hidden] {
display: none;