diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js
index f128c1fe7af..20f1603e630 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js
@@ -6,3 +6,5 @@ export { default as ProductName } from './product-name';
export { default as ProductPrice } from './product-price';
export { default as ProductSaleBadge } from './product-sale-badge';
export { default as ProductVariationData } from './product-variation-data';
+export { default as PlaceOrderButton } from './place-order-button';
+export { default as ReturnToCartButton } from './return-to-cart-button';
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.js
new file mode 100644
index 00000000000..1031d846b36
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/place-order-button/index.js
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { useCheckoutContext } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+
+const PlaceOrderButton = () => {
+ const { submitLabel, onSubmit } = useCheckoutContext();
+
+ return (
+
+ );
+};
+
+export default PlaceOrderButton;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/index.js
new file mode 100644
index 00000000000..2d7bb2cec98
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/index.js
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { CART_URL } from '@woocommerce/block-settings';
+import { Icon, arrowBack } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const ReturnToCartButton = ( { link } ) => {
+ return (
+
+
+ { __( 'Return to Cart', 'woo-gutenberg-products-block' ) }
+
+ );
+};
+
+export default ReturnToCartButton;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss
new file mode 100644
index 00000000000..ec710c5e27f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss
@@ -0,0 +1,10 @@
+.wc-block-components-checkout-return-to-cart-button {
+ color: $gray-60;
+ text-decoration: none !important;
+
+ svg {
+ vertical-align: middle;
+ margin-right: 0.25em;
+ display: inline-block;
+ }
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/form-step/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkout/form-step/style.scss
index 905b70346a3..c6c0b89c6de 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkout/form-step/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/form-step/style.scss
@@ -8,7 +8,7 @@ $line-offset-from-circle-size: 8px;
.wc-block-checkout-form fieldset.wc-block-checkout-step {
position: relative;
border: none;
- padding: 0 0 $gap-larger $gap-large;
+ padding: 0 $gap-larger $gap-larger $gap-larger;
background: none;
margin: 0;
@@ -63,7 +63,7 @@ $line-offset-from-circle-size: 8px;
width: 1px;
background-color: $gray-10;
position: absolute;
- left: 0;
+ left: $circle-size/2;
top: $circle-size + $line-offset-from-circle-size;
}
@@ -73,7 +73,7 @@ $line-offset-from-circle-size: 8px;
position: absolute;
width: $circle-size;
height: $circle-size;
- left: -$circle-size / 2;
+ left: 0;
top: 0;
background: $gray-20;
color: $white;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/form/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkout/form/style.scss
index 85531c810cc..9dd6ac9e3be 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkout/form/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/form/style.scss
@@ -1,12 +1,3 @@
.wc-block-checkout-form {
- margin-right: $gap-large;
max-width: 100%;
}
-
-// Responsive media styles.
-@include breakpoint( "<480px" ) {
- .wc-block-checkout-form {
- margin-left: $gap-smaller;
- margin-right: $gap;
- }
-}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss
index 45e63d1c5f1..ac54712eadc 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss
@@ -3,7 +3,7 @@
text-align: center;
list-style: none outside;
line-height: 1;
- margin: 2em 0 1em;
+ margin: $gap-large 0;
}
.wc-block-components-checkout-policies__item {
list-style: none outside;
@@ -18,5 +18,6 @@
a {
padding: 0 0.25em;
text-decoration: underline;
+ color: $gray-60;
}
}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
index 249e1f941b7..beb6ebc404e 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
@@ -2,7 +2,7 @@
margin: auto;
border: 2px solid $black;
border-radius: 5px;
- padding: 10px;
+ padding: 8px;
.wc-block-component-express-checkout__title {
position: relative;
@@ -50,7 +50,7 @@
display: flex;
align-items: center;
text-align: center;
- padding: 0 ($gap-large+14px);
+ padding: 0 $gap-larger;
margin: $gap-large 0;
&::before {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
index 15e42d09847..ef2f2326873 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
@@ -18,13 +18,10 @@ import { EditorProvider } from '@woocommerce/base-context';
import FullCart from './full-cart';
import EmptyCart from './empty-cart';
-/**
- * Component to handle edit mode of "Cart Block".
- */
-const CartEditor = ( { className, attributes, setAttributes } ) => {
+const BlockSettings = ( { attributes, setAttributes } ) => {
const { isShippingCalculatorEnabled, isShippingCostHidden } = attributes;
- const BlockSettings = () => (
+ return (
{
);
+};
+/**
+ * Component to handle edit mode of "Cart Block".
+ */
+const CartEditor = ( { className, attributes, setAttributes } ) => {
+ const { isShippingCalculatorEnabled, isShippingCostHidden } = attributes;
return (
{
<>
{ currentView === 'full' && (
<>
- { SHIPPING_ENABLED && }
+ { SHIPPING_ENABLED && (
+
+ ) }
{
Object.keys( blockAttributes ).forEach( ( key ) => {
if ( typeof el.dataset[ key ] !== 'undefined' ) {
- if (
- el.dataset[ key ] === 'true' ||
- el.dataset[ key ] === 'false'
- ) {
- attributes[ key ] = el.dataset[ key ] !== 'false';
- } else {
- attributes[ key ] = el.dataset[ key ];
+ switch ( blockAttributes[ key ].type ) {
+ case 'boolean':
+ attributes[ key ] = el.dataset[ key ] !== 'false';
+ break;
+ case 'number':
+ attributes[ key ] = parseInt( el.dataset[ key ], 10 );
+ break;
+ default:
+ attributes[ key ] = el.dataset[ key ];
+ break;
}
} else {
attributes[ key ] = blockAttributes[ key ].default;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/attributes.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/attributes.js
index 452726b282b..e22347c8319 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/attributes.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/attributes.js
@@ -32,6 +32,14 @@ const blockAttributes = {
type: 'boolean',
default: true,
},
+ showReturnToCart: {
+ type: 'boolean',
+ default: true,
+ },
+ cartPageId: {
+ type: 'number',
+ default: 0,
+ },
};
export default blockAttributes;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
index 5b4e0956db3..ee31acffc1d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
@@ -11,6 +11,10 @@ import {
NoShipping,
Policies,
} from '@woocommerce/base-components/checkout';
+import {
+ PlaceOrderButton,
+ ReturnToCartButton,
+} from '@woocommerce/base-components/cart-checkout';
import TextInput from '@woocommerce/base-components/text-input';
import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control';
import CheckboxControl from '@woocommerce/base-components/checkbox-control';
@@ -29,6 +33,7 @@ import {
SidebarLayout,
Main,
} from '@woocommerce/base-components/sidebar-layout';
+import { getSetting } from '@woocommerce/settings';
/**
* Internal dependencies
@@ -324,6 +329,20 @@ const Block = ( {
}
/>
+
+ { attributes.showReturnToCart && (
+
+ ) }
+
+
{ attributes.showPolicyLinks && }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js
index 533796c1072..00a7b992daa 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
-import { withFeedbackPrompt } from '@woocommerce/block-hocs';
+import FeedbackPrompt from '@woocommerce/block-components/feedback-prompt';
import {
previewCart,
previewShippingRates,
@@ -12,6 +12,7 @@ import {
PanelBody,
ToggleControl,
CheckboxControl,
+ SelectControl,
Notice,
} from '@wordpress/components';
import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
@@ -19,9 +20,12 @@ import {
PRIVACY_URL,
TERMS_URL,
SHIPPING_METHODS_EXIST,
+ CHECKOUT_PAGE_ID,
} from '@woocommerce/block-settings';
+import { useSelect } from '@wordpress/data';
import { getAdminLink } from '@woocommerce/settings';
import { __experimentalCreateInterpolateElement } from 'wordpress-element';
+import { EditorProvider, useEditorContext } from '@woocommerce/base-context';
/**
* Internal dependencies
@@ -29,9 +33,8 @@ import { __experimentalCreateInterpolateElement } from 'wordpress-element';
import Block from './block.js';
import './editor.scss';
-const CheckoutEditor = ( { attributes, setAttributes } ) => {
+const BlockSettings = ( { attributes, setAttributes } ) => {
const {
- className,
useShippingAsBilling,
showCompanyField,
showAddress2Field,
@@ -39,201 +42,296 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
requireCompanyField,
requirePhoneField,
showPolicyLinks,
+ showReturnToCart,
+ cartPageId,
} = attributes;
+ const { currentPostId } = useEditorContext();
+ const pages =
+ useSelect( ( select ) => {
+ return select( 'core' ).getEntityRecords( 'postType', 'page', {
+ status: 'publish',
+ orderby: 'title',
+ order: 'asc',
+ per_page: 100,
+ } );
+ }, [] ) || null;
+
return (
-
-
-
+ { currentPostId !== CHECKOUT_PAGE_ID && (
+
+ { __experimentalCreateInterpolateElement(
+ __(
+ 'If you would like to use this block as your default checkout you must update your page settings in WooCommerce.',
+ 'woo-gutenberg-products-block'
+ ),
+ {
+ a: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+
+ ),
+ }
+ ) }
+
+ ) }
+
+
+ { __(
+ 'Choose whether your checkout form requires extra information from customers.',
'woo-gutenberg-products-block'
) }
- >
-
- { __(
- 'Choose whether your checkout form requires extra information from customers.',
- 'woo-gutenberg-products-block'
- ) }
-
-
+
+ setAttributes( {
+ showCompanyField: ! showCompanyField,
+ } )
+ }
+ />
+ { showCompanyField && (
+
setAttributes( {
- showCompanyField: ! showCompanyField,
+ requireCompanyField: ! requireCompanyField,
} )
}
+ className="components-base-control--nested"
/>
- { showCompanyField && (
-
- setAttributes( {
- requireCompanyField: ! requireCompanyField,
- } )
- }
- className="components-base-control--nested"
- />
- ) }
-
- setAttributes( {
- showAddress2Field: ! showAddress2Field,
- } )
- }
- />
-
- setAttributes( {
- showPhoneField: ! showPhoneField,
- } )
- }
- />
- { showPhoneField && (
-
- setAttributes( {
- requirePhoneField: ! requirePhoneField,
- } )
- }
- className="components-base-control--nested"
- />
- ) }
-
-
-
- { __(
- 'Reduce the number of fields required to checkout.',
- 'woo-gutenberg-products-block'
- ) }
-
-
+ setAttributes( {
+ showAddress2Field: ! showAddress2Field,
+ } )
+ }
+ />
+
+ setAttributes( {
+ showPhoneField: ! showPhoneField,
+ } )
+ }
+ />
+ { showPhoneField && (
+
setAttributes( {
- useShippingAsBilling: ! useShippingAsBilling,
+ requirePhoneField: ! requirePhoneField,
} )
}
+ className="components-base-control--nested"
/>
-
-
-
- { __(
- 'Choose additional content to display on checkout.',
- 'woo-gutenberg-products-block'
- ) }
-
-
- setAttributes( {
- showPolicyLinks: ! showPolicyLinks,
- } )
- }
- />
- { showPolicyLinks && ( ! PRIVACY_URL || ! TERMS_URL ) && (
-
- { __experimentalCreateInterpolateElement(
- __(
- 'Pages must be first setup in store settings: Privacy policy, Terms and conditions.',
- 'woo-gutenberg-products-block'
- ),
- {
- a1: (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
-
- ),
- a2: (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
-
- ),
- }
- ) }
-
- ) }
-
-
-
+
-
+ { __(
+ 'Reduce the number of fields required to checkout.',
+ 'woo-gutenberg-products-block'
+ ) }
+
+
+ setAttributes( {
+ useShippingAsBilling: ! useShippingAsBilling,
+ } )
}
/>
-
-
+
+
+
+ { __(
+ 'Choose additional content to display.',
+ 'woo-gutenberg-products-block'
+ ) }
+
+
+ setAttributes( {
+ showPolicyLinks: ! showPolicyLinks,
+ } )
+ }
+ />
+ { showPolicyLinks && ( ! PRIVACY_URL || ! TERMS_URL ) && (
+
+ { __experimentalCreateInterpolateElement(
+ __(
+ 'Pages must be first setup in store settings: Privacy policy, Terms and conditions.',
+ 'woo-gutenberg-products-block'
+ ),
+ {
+ a1: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+
+ ),
+ a2: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+
+ ),
+ }
+ ) }
+
+ ) }
+
+ setAttributes( {
+ showReturnToCart: ! showReturnToCart,
+ } )
+ }
+ />
+ { showReturnToCart &&
+ ( currentPostId !== CHECKOUT_PAGE_ID || cartPageId ) &&
+ pages && (
+ {
+ return {
+ label: page.title.raw,
+ value: parseInt( page.id, 10 ),
+ };
+ } ),
+ ] }
+ onChange={ ( value ) =>
+ setAttributes( {
+ cartPageId: parseInt( value, 10 ),
+ } )
+ }
+ />
+ ) }
+
+
+
);
};
-export default withFeedbackPrompt(
- __(
- 'We are currently working on improving our cart and checkout blocks, providing merchants with the tools and customization options they need.',
- 'woo-gutenberg-products-block'
- )
-)( CheckoutEditor );
+const CheckoutEditor = ( { attributes, setAttributes } ) => {
+ const { className } = attributes;
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CheckoutEditor;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
index 16ce8c3b8fe..c14fee067cc 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
@@ -13,3 +13,7 @@
padding-left: 52px;
margin-top: -12px;
}
+
+.wc-block-checkout__page-notice {
+ margin: 0;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js
index de5ee669403..a96181fb1be 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/frontend.js
@@ -70,13 +70,16 @@ const getProps = ( el ) => {
Object.keys( blockAttributes ).forEach( ( key ) => {
if ( typeof el.dataset[ key ] !== 'undefined' ) {
- if (
- el.dataset[ key ] === 'true' ||
- el.dataset[ key ] === 'false'
- ) {
- attributes[ key ] = el.dataset[ key ] !== 'false';
- } else {
- attributes[ key ] = el.dataset[ key ];
+ switch ( blockAttributes[ key ].type ) {
+ case 'boolean':
+ attributes[ key ] = el.dataset[ key ] !== 'false';
+ break;
+ case 'number':
+ attributes[ key ] = parseInt( el.dataset[ key ], 10 );
+ break;
+ default:
+ attributes[ key ] = el.dataset[ key ];
+ break;
}
} else {
attributes[ key ] = blockAttributes[ key ].default;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
index 2c5f650ea1f..1a62df9cefc 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
@@ -83,6 +83,22 @@
}
}
+.wc-block-checkout__actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: $gap-large 0 $gap-large*2;
+ padding: 0 $gap-larger;
+
+ .wc-block-components-checkout-place-order-button {
+ width: 50%;
+ padding: 1em;
+ border-radius: 3px;
+ height: auto;
+ margin-left: auto;
+ }
+}
+
@include breakpoint( ">480px" ) {
.wc-block-checkout__billing-fields,
.wc-block-checkout__shipping-fields {
diff --git a/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/feedback-prompt.js b/plugins/woocommerce-blocks/assets/js/components/feedback-prompt/index.js
similarity index 100%
rename from plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/feedback-prompt.js
rename to plugins/woocommerce-blocks/assets/js/components/feedback-prompt/index.js
diff --git a/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/style.scss b/plugins/woocommerce-blocks/assets/js/components/feedback-prompt/style.scss
similarity index 100%
rename from plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/style.scss
rename to plugins/woocommerce-blocks/assets/js/components/feedback-prompt/style.scss
diff --git a/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js b/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js
index 0cfe389b757..9bfef053ab8 100644
--- a/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js
+++ b/plugins/woocommerce-blocks/assets/js/hocs/with-feedback-prompt/index.js
@@ -4,11 +4,7 @@
import { Fragment } from '@wordpress/element';
import { InspectorControls } from '@wordpress/block-editor';
import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import FeedbackPrompt from './feedback-prompt.js';
+import FeedbackPrompt from '@woocommerce/block-components/feedback-prompt';
/**
* Adds a feedback prompt with custom text to the editor sidebar.
diff --git a/plugins/woocommerce-blocks/assets/js/icons/index.js b/plugins/woocommerce-blocks/assets/js/icons/index.js
index d049a499ffd..1425c72797b 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/index.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/index.js
@@ -1,5 +1,6 @@
export { default as Icon } from './icon';
+export { default as arrowBack } from './library/arrow-back';
export { default as bill } from './library/bill';
export { default as card } from './library/card';
export { default as cart } from './library/cart';
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js b/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js
new file mode 100644
index 00000000000..fb395e35d38
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/arrow-back.js
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { SVG } from 'wordpress-components';
+
+const arrowBack = (
+
+);
+
+export default arrowBack;
diff --git a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
index 34dabd9c045..24149190b68 100644
--- a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
+++ b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
@@ -55,18 +55,27 @@ export const SHIPPING_METHODS_EXIST = getSetting(
);
const defaultPage = {
- name: '',
- url: '',
+ id: 0,
+ title: '',
+ permalink: '',
};
const storePages = getSetting( 'storePages', {
shop: defaultPage,
+ cart: defaultPage,
checkout: defaultPage,
privacy: defaultPage,
terms: defaultPage,
} );
-export const SHOP_URL = storePages.shop.url;
-export const CHECKOUT_URL = storePages.checkout.url;
-export const PRIVACY_URL = storePages.privacy.url;
-export const TERMS_URL = storePages.terms.url;
-export const PRIVACY_PAGE_NAME = storePages.privacy.name;
-export const TERMS_PAGE_NAME = storePages.terms.name;
+export const SHOP_URL = storePages.shop.permalink;
+
+export const CHECKOUT_PAGE_ID = storePages.checkout.id;
+export const CHECKOUT_URL = storePages.checkout.permalink;
+
+export const PRIVACY_URL = storePages.privacy.permalink;
+export const PRIVACY_PAGE_NAME = storePages.privacy.title;
+
+export const TERMS_URL = storePages.terms.permalink;
+export const TERMS_PAGE_NAME = storePages.terms.title;
+
+export const CART_PAGE_ID = storePages.cart.id;
+export const CART_URL = storePages.cart.permalink;
diff --git a/plugins/woocommerce-blocks/src/Assets.php b/plugins/woocommerce-blocks/src/Assets.php
index c8327ecd2f7..fe68c122c97 100644
--- a/plugins/woocommerce-blocks/src/Assets.php
+++ b/plugins/woocommerce-blocks/src/Assets.php
@@ -103,6 +103,7 @@ class Assets {
$product_counts = wp_count_posts( 'product' );
$page_ids = [
'shop' => wc_get_page_id( 'shop' ),
+ 'cart' => wc_get_page_id( 'cart' ),
'checkout' => wc_get_page_id( 'checkout' ),
'privacy' => wc_privacy_policy_page_id(),
'terms' => wc_terms_and_conditions_page_id(),
@@ -142,27 +143,40 @@ class Assets {
],
'homeUrl' => esc_url( home_url( '/' ) ),
'storePages' => [
- 'shop' => $page_ids['shop'] ? [
- 'name' => get_the_title( $page_ids['shop'] ),
- 'url' => get_permalink( $page_ids['shop'] ),
- ] : false,
- 'checkout' => $page_ids['checkout'] ? [
- 'name' => get_the_title( $page_ids['checkout'] ),
- 'url' => get_permalink( $page_ids['checkout'] ),
- ] : false,
- 'privacy' => $page_ids['privacy'] ? [
- 'name' => get_the_title( $page_ids['privacy'] ),
- 'url' => get_permalink( $page_ids['privacy'] ),
- ] : false,
- 'terms' => $page_ids['terms'] ? [
- 'name' => get_the_title( $page_ids['terms'] ),
- 'url' => get_permalink( $page_ids['terms'] ),
- ] : false,
+ 'shop' => self::format_page_resource( $page_ids['shop'] ),
+ 'cart' => self::format_page_resource( $page_ids['cart'] ),
+ 'checkout' => self::format_page_resource( $page_ids['checkout'] ),
+ 'privacy' => self::format_page_resource( $page_ids['privacy'] ),
+ 'terms' => self::format_page_resource( $page_ids['terms'] ),
],
]
);
}
+ /**
+ * Format a page object into a standard array of data.
+ *
+ * @param WP_Post|int $page Page object or ID.
+ * @return array
+ */
+ protected static function format_page_resource( $page ) {
+ if ( is_numeric( $page ) ) {
+ $page = get_post( $page );
+ }
+ if ( ! $page ) {
+ return [
+ 'id' => 0,
+ 'title' => '',
+ 'permalink' => false,
+ ];
+ }
+ return [
+ 'id' => $page->ID,
+ 'title' => $page->post_title,
+ 'permalink' => get_permalink( $page->ID ),
+ ];
+ }
+
/**
* Get the file modified time as a cache buster if we're in dev mode.
*
diff --git a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
index 8f92bac7889..fd4111fea05 100644
--- a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
+++ b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
@@ -50,6 +50,12 @@ class Checkout extends AbstractBlock {
$data_registry = Package::container()->get(
\Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry::class
);
+ if ( ! empty( $attributes['cartPageId'] ) && ! $data_registry->exists( 'page-' . $attributes['cartPageId'] ) ) {
+ $permalink = get_permalink( $attributes['cartPageId'] );
+ if ( $permalink ) {
+ $data_registry->add( 'page-' . $attributes['cartPageId'], get_permalink( $attributes['cartPageId'] ) );
+ }
+ }
if ( ! $data_registry->exists( 'allowedCountries' ) ) {
$data_registry->add( 'allowedCountries', WC()->countries->get_allowed_countries() );
}
diff --git a/plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap b/plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap
index 1a174892741..a9a5ad2b85d 100644
--- a/plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap
+++ b/plugins/woocommerce-blocks/tests/e2e-tests/specs/backend/__snapshots__/checkout.test.js.snap
@@ -2,6 +2,6 @@
exports[`Checkout Block can be created 1`] = `
"
-Checkout block coming soon to store near you
+Checkout block coming soon to store near you
"
`;