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

Fix JS error visible in the editor caused by Mini Cart Contents buttons (https://github.com/woocommerce/woocommerce-blocks/pull/9039)

This commit is contained in:
Albert Juhé Lluveras 2023-04-14 16:53:39 +02:00 committed by GitHub
parent 0ad067d8a9
commit 779e13af15
6 changed files with 51 additions and 36 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/inner-blocks/mini-cart-cart-button-block/edit.tsx
View File

@ -19,22 +19,24 @@ export const Edit = ( {
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
const blockProps = useBlockProps();
const blockProps = useBlockProps( {
className: 'wc-block-mini-cart__footer-cart',
} );
const { cartButtonLabel } = attributes;
return (
<EditableButton
{ ...blockProps }
className="wc-block-mini-cart__footer-cart"
variant={ getVariant( blockProps.className, 'outlined' ) }
value={ cartButtonLabel }
placeholder={ defaultCartButtonLabel }
onChange={ ( content ) => {
setAttributes( {
cartButtonLabel: content,
} );
} }
/>
<div { ...blockProps }>
<EditableButton
variant={ getVariant( blockProps.className, 'outlined' ) }
value={ cartButtonLabel }
placeholder={ defaultCartButtonLabel }
onChange={ ( content ) => {
setAttributes( {
cartButtonLabel: content,
} );
} }
/>
</div>
);
};

31
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/edit.tsx
View File

@ -20,25 +20,24 @@ export const Edit = ( {
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
const blockProps = useBlockProps();
const blockProps = useBlockProps( {
className: classNames( 'wc-block-mini-cart__footer-checkout' ),
} );
const { checkoutButtonLabel } = attributes;
return (
<EditableButton
{ ...blockProps }
className={ classNames(
'wc-block-mini-cart__footer-checkout',
blockProps.className
) }
variant={ getVariant( blockProps.className, 'contained' ) }
value={ checkoutButtonLabel }
placeholder={ defaultCheckoutButtonLabel }
onChange={ ( content ) => {
setAttributes( {
checkoutButtonLabel: content,
} );
} }
/>
<div { ...blockProps }>
<EditableButton
variant={ getVariant( blockProps.className, 'contained' ) }
value={ checkoutButtonLabel }
placeholder={ defaultCheckoutButtonLabel }
onChange={ ( content ) => {
setAttributes( {
checkoutButtonLabel: content,
} );
} }
/>
</div>
);
};

9
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx
View File

@ -14,6 +14,11 @@ import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
import { getSetting } from '@woocommerce/settings';
import { PaymentEventsProvider } from '@woocommerce/base-context';
/**
* Internal dependencies
*/
import './editor.scss';
const PaymentMethodIconsElement = (): JSX.Element => {
const { paymentMethods } = usePaymentMethods();
return (
@ -49,7 +54,9 @@ export const Edit = (): JSX.Element => {
'woo-gutenberg-products-block'
) }
/>
<InnerBlocks template={ TEMPLATE } />
<div className="wc-block-mini-cart__footer-actions">
<InnerBlocks template={ TEMPLATE } />
</div>
<PaymentEventsProvider>
<PaymentMethodIconsElement />
</PaymentEventsProvider>

3
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss Normal file
View File

@ -0,0 +1,3 @@
.editor-styles-wrapper .wc-block-mini-cart__footer .block-editor-inner-blocks {
width: 100%;
}

7
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-shopping-button-block/edit.tsx
View File

@ -19,13 +19,14 @@ export const Edit = ( {
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
const blockProps = useBlockProps();
const blockProps = useBlockProps( {
className: 'wp-block-button aligncenter',
} );
const { startShoppingButtonLabel } = attributes;
return (
<div className="wp-block-button aligncenter">
<div { ...blockProps }>
<EditableButton
{ ...blockProps }
className="wc-block-mini-cart__shopping-button"
value={ startShoppingButtonLabel }
placeholder={ defaultStartShoppingButtonLabel }

9
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss
View File

@ -177,18 +177,21 @@ h2.wc-block-mini-cart__title {
}
}
// First selector for the frontend, second selector for the editor.
.wc-block-mini-cart__footer-actions,
.block-editor-block-list__layout {
.wc-block-mini-cart__footer-actions > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
gap: $gap;
.wc-block-components-button,
.wp-block-button {
.wp-block-button,
.wp-block-woocommerce-mini-cart-cart-button-block,
.wp-block-woocommerce-mini-cart-checkout-button-block {
flex-grow: 1;
display: inline-flex;
}
.wc-block-components-button.outlined {
.wp-block-woocommerce-mini-cart-cart-button-block {
display: none;
@media only screen and (min-width: 480px) {