Fix Cart block interaction in the editor (mobile) (https://github.com/woocommerce/woocommerce-blocks/pull/2354)

* Prevent SnackbarList from loading in the editor

* Fix snackbar styles leaking into the editor

* Prevent 'Proceed to Checkout' button being fixed to the bottom in the editor
This commit is contained in:
Albert Juhé Lluveras 2020-04-29 17:45:29 +02:00 committed by GitHub
parent 8424934149
commit fce0e2d71c
3 changed files with 12 additions and 1 deletions

View File

@ -3,12 +3,18 @@
*/ */
import { SnackbarList } from 'wordpress-components'; import { SnackbarList } from 'wordpress-components';
import { useStoreNotices } from '@woocommerce/base-hooks'; import { useStoreNotices } from '@woocommerce/base-hooks';
import { useEditorContext } from '@woocommerce/base-context';
const NoticesContainer = () => { const NoticesContainer = () => {
const { isEditor } = useEditorContext();
const { notices, removeNotice } = useStoreNotices(); const { notices, removeNotice } = useStoreNotices();
const snackbarNotices = notices.filter( const snackbarNotices = notices.filter(
( notice ) => notice.type === 'snackbar' ( notice ) => notice.type === 'snackbar'
); );
if ( isEditor ) {
return null;
}
return ( return (
<SnackbarList <SnackbarList
notices={ snackbarNotices } notices={ snackbarNotices }

View File

@ -25,7 +25,7 @@
} }
} }
.components-snackbar-list { .wc-block-notices__snackbar {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
left: 16px; left: 16px;

View File

@ -28,6 +28,11 @@
.wc-block-coupon-code .components-button { .wc-block-coupon-code .components-button {
opacity: 1; opacity: 1;
} }
.wc-block-cart__submit-container {
box-shadow: none;
position: static;
}
} }
@include breakpoint( "<782px" ) { @include breakpoint( "<782px" ) {