diff --git a/plugins/woocommerce-blocks/assets/css/editor.scss b/plugins/woocommerce-blocks/assets/css/editor.scss
index 42e4e0e1421..0c6240a21e9 100644
--- a/plugins/woocommerce-blocks/assets/css/editor.scss
+++ b/plugins/woocommerce-blocks/assets/css/editor.scss
@@ -40,3 +40,13 @@
}
}
+// Style inline notices in the inspector.
+.components-base-control {
+ + .wc-block-base-control-notice {
+ margin: -$gap 0 $gap;
+ }
+
+ & + .wc-block-base-control-notice:last-child {
+ margin: -$gap 0 $gap-small;
+ }
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/index.js b/plugins/woocommerce-blocks/assets/js/base/components/checkout/index.js
new file mode 100644
index 00000000000..bd17a5cf5cb
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/index.js
@@ -0,0 +1,4 @@
+export { default as CheckoutForm } from './form';
+export { default as FormStep } from './form-step';
+export { default as NoShipping } from './no-shipping';
+export { default as Policies } from './policies';
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/index.js b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/index.js
new file mode 100644
index 00000000000..29a9a1d297a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/index.js
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+ PRIVACY_URL,
+ TERMS_URL,
+ PRIVACY_PAGE_NAME,
+ TERMS_PAGE_NAME,
+} from '@woocommerce/block-settings';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Policies = () => {
+ return (
+
+ );
+};
+
+export default Policies;
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
new file mode 100644
index 00000000000..45e63d1c5f1
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkout/policies/style.scss
@@ -0,0 +1,22 @@
+.editor-styles-wrapper .wc-block-components-checkout-policies,
+.wc-block-components-checkout-policies {
+ text-align: center;
+ list-style: none outside;
+ line-height: 1;
+ margin: 2em 0 1em;
+}
+.wc-block-components-checkout-policies__item {
+ list-style: none outside;
+ display: inline-block;
+ padding: 0 0.25em;
+ margin: 0;
+
+ &:not(:first-child) {
+ border-left: 1px solid $gray-10;
+ }
+
+ a {
+ padding: 0 0.25em;
+ text-decoration: underline;
+ }
+}
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 15c66b37a92..452726b282b 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
@@ -28,6 +28,10 @@ const blockAttributes = {
type: 'boolean',
default: false,
},
+ showPolicyLinks: {
+ type: 'boolean',
+ default: true,
+ },
};
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 432da0b51af..f36f21f78fb 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
@@ -6,9 +6,12 @@ import { __ } from '@wordpress/i18n';
import AddressForm, {
defaultFieldConfig,
} from '@woocommerce/base-components/address-form';
-import FormStep from '@woocommerce/base-components/checkout/form-step';
-import CheckoutForm from '@woocommerce/base-components/checkout/form';
-import NoShipping from '@woocommerce/base-components/checkout/no-shipping';
+import {
+ FormStep,
+ CheckoutForm,
+ NoShipping,
+ Policies,
+} from '@woocommerce/base-components/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';
@@ -294,6 +297,7 @@ const Block = ( { attributes, isEditor = false, shippingRates = [] } ) => {
}
/>
+ { 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 360d7ca9655..38083ca912b 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
@@ -4,14 +4,21 @@
import { __ } from '@wordpress/i18n';
import { withFeedbackPrompt } from '@woocommerce/block-hocs';
import { previewShippingRates } from '@woocommerce/resource-previews';
-import { SHIPPING_METHODS_EXIST } from '@woocommerce/block-settings';
import { InspectorControls } from '@wordpress/block-editor';
import {
PanelBody,
ToggleControl,
CheckboxControl,
+ Notice,
} from '@wordpress/components';
import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
+import {
+ PRIVACY_URL,
+ TERMS_URL,
+ SHIPPING_METHODS_EXIST,
+} from '@woocommerce/block-settings';
+import { getAdminLink } from '@woocommerce/settings';
+import { __experimentalCreateInterpolateElement } from 'wordpress-element';
/**
* Internal dependencies
@@ -28,6 +35,7 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
showPhoneField,
requireCompanyField,
requirePhoneField,
+ showPolicyLinks,
} = attributes;
return (
@@ -136,6 +144,63 @@ const CheckoutEditor = ( { attributes, setAttributes } ) => {
}
/>
+
+
+ { __(
+ '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
+
+ ),
+ }
+ ) }
+
+ ) }
+
{
/>
{ attributes.showReviewRating && ! REVIEW_RATINGS_ENABLED && (
{ __experimentalCreateInterpolateElement(
@@ -136,7 +136,7 @@ export const getSharedReviewContentControls = ( attributes, setAttributes ) => {
/>
{ attributes.imageType === 'reviewer' && ! SHOW_AVATARS && (
{ __experimentalCreateInterpolateElement(
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor.scss
index 1bdb0d74c79..6457371147c 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/editor.scss
@@ -1,13 +1,3 @@
.wc-block-reviews__selection {
width: 100%;
}
-
-.components-base-control {
- + .wc-block-reviews__notice {
- margin: -$gap 0 $gap;
- }
-
- &:nth-last-child(2) + .wc-block-reviews__notice {
- margin: -$gap 0 $gap-small;
- }
-}
diff --git a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
index 27fe9bee989..87a4bcfce4b 100644
--- a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
+++ b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js
@@ -24,8 +24,6 @@ export const LIMIT_TAGS = getSetting( 'limitTags' );
export const HAS_PRODUCTS = getSetting( 'hasProducts', true );
export const HAS_TAGS = getSetting( 'hasTags', true );
export const HOME_URL = getSetting( 'homeUrl', '' );
-export const SHOP_URL = getSetting( 'shopUrl', '' );
-export const CHECKOUT_URL = getSetting( 'checkoutUrl', '' );
export const COUPONS_ENABLED = getSetting( 'couponsEnabled', true );
export const SHIPPING_ENABLED = getSetting( 'shippingEnabled', true );
export const DISPLAY_SHOP_PRICES_INCLUDING_TAX = getSetting(
@@ -57,3 +55,20 @@ export const SHIPPING_METHODS_EXIST = getSetting(
);
export const COUNTRY_LOCALE = getSetting( 'countryLocale', {} );
export const DEFAULT_ADDRESS_FIELDS = getSetting( 'defaultAddressFields', {} );
+
+const defaultPage = {
+ name: '',
+ url: '',
+};
+const storePages = getSetting( 'storePages', {
+ shop: 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;
diff --git a/plugins/woocommerce-blocks/src/Assets.php b/plugins/woocommerce-blocks/src/Assets.php
index 56b22daadb8..35c7d169c19 100644
--- a/plugins/woocommerce-blocks/src/Assets.php
+++ b/plugins/woocommerce-blocks/src/Assets.php
@@ -101,6 +101,12 @@ class Assets {
public static function get_wc_block_data( $settings ) {
$tag_count = wp_count_terms( 'product_tag' );
$product_counts = wp_count_posts( 'product' );
+ $page_ids = [
+ 'shop' => wc_get_page_id( 'shop' ),
+ 'checkout' => wc_get_page_id( 'checkout' ),
+ 'privacy' => wc_privacy_policy_page_id(),
+ 'terms' => wc_terms_and_conditions_page_id(),
+ ];
// Global settings used in each block.
return array_merge(
@@ -120,9 +126,6 @@ class Assets {
'isLargeCatalog' => $product_counts->publish > 100,
'limitTags' => $tag_count > 100,
'hasTags' => $tag_count > 0,
- 'homeUrl' => esc_url( home_url( '/' ) ),
- 'shopUrl' => get_permalink( wc_get_page_id( 'shop' ) ),
- 'checkoutUrl' => get_permalink( wc_get_page_id( 'checkout' ) ),
'couponsEnabled' => wc_coupons_enabled(),
'shippingEnabled' => wc_shipping_enabled(),
'displayShopPricesIncludingTax' => 'incl' === get_option( 'woocommerce_tax_display_shop' ),
@@ -137,6 +140,25 @@ class Assets {
'restApiRoutes' => [
'/wc/store' => array_keys( \Automattic\WooCommerce\Blocks\RestApi::get_routes_from_namespace( 'wc/store' ) ),
],
+ '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,
+ ],
]
);
}
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 d8b5496856d..1a174892741 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
"
`;