@@ -63,29 +49,7 @@ export const Edit = ( {
'woo-gutenberg-products-block'
) }
/>
-
- {
- setAttributes( {
- cartButtonLabel: content,
- } );
- } }
- />
- {
- setAttributes( {
- checkoutButtonLabel: content,
- } );
- } }
- />
-
+
@@ -95,5 +59,9 @@ export const Edit = ( {
};
export const Save = (): JSX.Element => {
- return
;
+ return (
+
+
+
+ );
};
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
index 81f6901cbbf..3fd3816264a 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
@@ -2,13 +2,14 @@
* External dependencies
*/
import { Icon, payment } from '@wordpress/icons';
-import { registerBlockType } from '@wordpress/blocks';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { Edit, Save } from './edit';
-import attributes from './attributes';
+import deprecatedAttributes from './attributes';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore -- TypeScript expects some required properties which we already
@@ -22,7 +23,44 @@ registerBlockType( 'woocommerce/mini-cart-footer-block', {
/>
),
},
- attributes,
+ deprecated: [
+ {
+ attributes: deprecatedAttributes,
+
+ migrate( attributes, innerBlocks ) {
+ const {
+ cartButtonLabel,
+ checkoutButtonLabel,
+ ...restAttributes
+ } = attributes;
+
+ return [
+ restAttributes,
+ [
+ createBlock(
+ 'woocommerce/mini-cart-cart-button-block',
+ {
+ cartButtonLabel,
+ }
+ ),
+ createBlock(
+ 'woocommerce/mini-cart-checkout-button-block',
+ {
+ checkoutButtonLabel,
+ }
+ ),
+ ...innerBlocks,
+ ],
+ ];
+ },
+ isEligible: ( attributes, innerBlocks ) => {
+ return ! innerBlocks.length;
+ },
+ save: (): JSX.Element => {
+ return
;
+ },
+ },
+ ],
edit: Edit,
save: Save,
} );
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
index 79aa25254e3..5547bba5352 100644
--- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
+++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts
@@ -14,6 +14,8 @@ import miniCartProductsTableMetadata from './mini-cart-products-table-block/bloc
import miniCartFooterMetadata from './mini-cart-footer-block/block.json';
import miniCartItemsMetadata from './mini-cart-items-block/block.json';
import miniCartShoppingButtonMetadata from './mini-cart-shopping-button-block/block.json';
+import miniCartCartButtonMetadata from './mini-cart-cart-button-block/block.json';
+import miniCartCheckoutButtonMetadata from './mini-cart-checkout-button-block/block.json';
// Modify webpack publicPath at runtime based on location of WordPress Plugin.
// eslint-disable-next-line no-undef,camelcase
@@ -88,3 +90,23 @@ registerCheckoutBlock( {
)
),
} );
+
+registerCheckoutBlock( {
+ metadata: miniCartCartButtonMetadata,
+ component: lazy(
+ () =>
+ import(
+ /* webpackChunkName: "mini-cart-contents-block/cart-button" */ './mini-cart-cart-button-block/block'
+ )
+ ),
+} );
+
+registerCheckoutBlock( {
+ metadata: miniCartCheckoutButtonMetadata,
+ component: lazy(
+ () =>
+ import(
+ /* webpackChunkName: "mini-cart-contents-block/checkout-button" */ './mini-cart-checkout-button-block/block'
+ )
+ ),
+} );
diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss
index ffa6a26c9f0..072172d9cc0 100644
--- a/assets/js/blocks/mini-cart/style.scss
+++ b/assets/js/blocks/mini-cart/style.scss
@@ -171,12 +171,15 @@ h2.wc-block-mini-cart__title {
}
}
- .wc-block-mini-cart__footer-actions {
+ .wc-block-mini-cart__footer-actions,
+ .block-editor-block-list__layout {
display: flex;
gap: $gap;
- .wc-block-components-button {
+ .wc-block-components-button,
+ .wp-block-button {
flex-grow: 1;
+ display: inline-flex;
}
.wc-block-components-button.outlined {
diff --git a/packages/checkout/blocks-registry/types.ts b/packages/checkout/blocks-registry/types.ts
index 6516621092e..3d0ab6f710a 100644
--- a/packages/checkout/blocks-registry/types.ts
+++ b/packages/checkout/blocks-registry/types.ts
@@ -26,6 +26,7 @@ export enum innerBlockAreas {
EMPTY_MINI_CART = 'woocommerce/empty-mini-cart-contents-block',
FILLED_MINI_CART = 'woocommerce/filled-mini-cart-contents-block',
MINI_CART_ITEMS = 'woocommerce/mini-cart-items-block',
+ MINI_CART_FOOTER = 'woocommerce/mini-cart-footer-block',
CART_ORDER_SUMMARY = 'woocommerce/cart-order-summary-block',
CHECKOUT_ORDER_SUMMARY = 'woocommerce/checkout-order-summary-block',
}
diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
index 3b2bd18b38f..56ac7201d1c 100644
--- a/src/BlockTypes/MiniCart.php
+++ b/src/BlockTypes/MiniCart.php
@@ -280,6 +280,8 @@ public function print_lazy_load_scripts() {
'items-frontend',
'footer-frontend',
'products-table-frontend',
+ 'cart-button-frontend',
+ 'checkout-button-frontend',
);
}
foreach ( $inner_blocks_frontend_scripts as $inner_block_frontend_script ) {
diff --git a/src/BlockTypes/MiniCartCartButtonBlock.php b/src/BlockTypes/MiniCartCartButtonBlock.php
new file mode 100644
index 00000000000..2982e138005
--- /dev/null
+++ b/src/BlockTypes/MiniCartCartButtonBlock.php
@@ -0,0 +1,14 @@
+