diff --git a/assets/js/blocks/cart-checkout/checkout/empty-cart/style.scss b/assets/js/blocks/cart-checkout/checkout/empty-cart/style.scss
new file mode 100644
index 00000000000..c598711f7ad
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/checkout/empty-cart/style.scss
@@ -0,0 +1,21 @@
+.wc-block-checkout-empty {
+ padding: $gap-largest;
+ text-align: center;
+ width: 100%;
+
+ .wc-block-checkout-empty__image {
+ max-width: 150px;
+ margin: 0 auto 1em;
+ display: block;
+ color: inherit;
+ }
+ .wc-block-checkout-empty__title {
+ display: block;
+ margin: 0;
+ font-weight: bold;
+ }
+ .wc-block-checkout-empty__description {
+ display: block;
+ margin: 0.25em 0 1em 0;
+ }
+}
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/form-step/additional-fields.tsx b/assets/js/blocks/cart-checkout/checkout/form-step/additional-fields.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/form-step/additional-fields.tsx
rename to assets/js/blocks/cart-checkout/checkout/form-step/additional-fields.tsx
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/form-step/attributes.ts b/assets/js/blocks/cart-checkout/checkout/form-step/attributes.ts
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/form-step/attributes.ts
rename to assets/js/blocks/cart-checkout/checkout/form-step/attributes.ts
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/form-step/editor.scss b/assets/js/blocks/cart-checkout/checkout/form-step/editor.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/form-step/editor.scss
rename to assets/js/blocks/cart-checkout/checkout/form-step/editor.scss
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/form-step/form-step-block.tsx b/assets/js/blocks/cart-checkout/checkout/form-step/form-step-block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/form-step/form-step-block.tsx
rename to assets/js/blocks/cart-checkout/checkout/form-step/form-step-block.tsx
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/form-step/form-step-heading.tsx b/assets/js/blocks/cart-checkout/checkout/form-step/form-step-heading.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/form-step/form-step-heading.tsx
rename to assets/js/blocks/cart-checkout/checkout/form-step/form-step-heading.tsx
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/form-step/index.tsx b/assets/js/blocks/cart-checkout/checkout/form-step/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/form-step/index.tsx
rename to assets/js/blocks/cart-checkout/checkout/form-step/index.tsx
diff --git a/assets/js/blocks/cart-checkout/checkout/form/billing-fields-step.js b/assets/js/blocks/cart-checkout/checkout/form/billing-fields-step.js
deleted file mode 100644
index 0f7d28ee1a4..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/billing-fields-step.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
-import PropTypes from 'prop-types';
-
-const BillingFieldsStep = ( { children } ) => {
- const { isDisabled } = useCheckoutSubmit();
- return (
-
- { children }
-
- );
-};
-
-BillingFieldsStep.propTypes = {
- children: PropTypes.node.isRequired,
-};
-
-export default BillingFieldsStep;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js b/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js
deleted file mode 100644
index 14844e6dbb4..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
-import { useCheckoutContext } from '@woocommerce/base-context';
-import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
-import { getSetting } from '@woocommerce/settings';
-import CheckboxControl from '@woocommerce/base-components/checkbox-control';
-
-/**
- * Internal dependencies
- */
-import LoginPrompt from './login-prompt';
-const ContactFieldsStep = ( {
- emailValue,
- onChangeEmail,
- allowCreateAccount,
-} ) => {
- const {
- customerId,
- shouldCreateAccount,
- setShouldCreateAccount,
- } = useCheckoutContext();
- const { isDisabled } = useCheckoutSubmit();
-
- const createAccountUI = ! customerId &&
- allowCreateAccount &&
- getSetting( 'checkoutAllowsGuest', false ) &&
- getSetting( 'checkoutAllowsSignup', false ) && (
-
setShouldCreateAccount( value ) }
- />
- );
-
- return (
-
- );
-};
-
-export default ContactFieldsStep;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/index.js b/assets/js/blocks/cart-checkout/checkout/form/index.js
deleted file mode 100644
index 93019676a64..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/index.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import { useEffect, useMemo } from '@wordpress/element';
-import {
- useCheckoutContext,
- useShippingDataContext,
-} from '@woocommerce/base-context';
-import {
- useStoreEvents,
- useCheckoutAddress,
-} from '@woocommerce/base-context/hooks';
-import { AddressForm } from '@woocommerce/base-components/cart-checkout';
-import Form from '@woocommerce/base-components/form';
-
-/**
- * Internal dependencies
- */
-import BillingFieldsStep from './billing-fields-step';
-import ContactFieldsStep from './contact-fields-step';
-import ShippingFieldsStep from './shipping-fields-step';
-import PhoneNumber from './phone-number';
-import OrderNotesStep from './order-notes-step';
-import PaymentMethodStep from './payment-method-step';
-import ShippingOptionsStep from './shipping-options-step';
-import './style.scss';
-
-const CheckoutForm = ( {
- requireCompanyField,
- requirePhoneField,
- showApartmentField,
- showCompanyField,
- showOrderNotes,
- showPhoneField,
- allowCreateAccount,
-} ) => {
- const { onSubmit } = useCheckoutContext();
- const {
- defaultAddressFields,
- billingFields,
- setBillingFields,
- setEmail,
- setPhone,
- setShippingAsBilling,
- setShippingFields,
- shippingAsBilling,
- shippingFields,
- showBillingFields,
- } = useCheckoutAddress();
- const { needsShipping } = useShippingDataContext();
- const { dispatchCheckoutEvent } = useStoreEvents();
-
- const addressFieldsConfig = useMemo( () => {
- return {
- company: {
- hidden: ! showCompanyField,
- required: requireCompanyField,
- },
- address_2: {
- hidden: ! showApartmentField,
- },
- };
- }, [ showCompanyField, requireCompanyField, showApartmentField ] );
-
- // Ignore changes to dispatchCheckoutEvent callback so this is ran on first mount only.
- useEffect( () => {
- dispatchCheckoutEvent( 'render-checkout-form' );
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [] );
-
- return (
-
- );
-};
-
-CheckoutForm.propTypes = {
- requireCompanyField: PropTypes.bool.isRequired,
- requirePhoneField: PropTypes.bool.isRequired,
- showApartmentField: PropTypes.bool.isRequired,
- showCompanyField: PropTypes.bool.isRequired,
- showOrderNotes: PropTypes.bool.isRequired,
- showPhoneField: PropTypes.bool.isRequired,
- allowCreateAccount: PropTypes.bool.isRequired,
-};
-
-export default CheckoutForm;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/login-prompt.js b/assets/js/blocks/cart-checkout/checkout/form/login-prompt.js
deleted file mode 100644
index 68eaf4a12f4..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/login-prompt.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { getSetting } from '@woocommerce/settings';
-import { useCheckoutContext } from '@woocommerce/base-context';
-
-/**
- * Internal dependencies
- */
-import { LOGIN_TO_CHECKOUT_URL } from '../utils';
-
-const LoginPrompt = () => {
- const { customerId } = useCheckoutContext();
-
- if ( ! getSetting( 'checkoutShowLoginReminder', true ) || customerId ) {
- return null;
- }
-
- return (
- <>
- { __(
- 'Already have an account? ',
- 'woo-gutenberg-products-block'
- ) }
-
- { __( 'Log in.', 'woo-gutenberg-products-block' ) }
-
-
- );
-};
-
-export default LoginPrompt;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js b/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js
deleted file mode 100644
index 8eac3f05269..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Placeholder, Button } from 'wordpress-components';
-import { Icon, truck } from '@woocommerce/icons';
-import { ADMIN_URL } from '@woocommerce/settings';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-const NoShippingPlaceholder = () => {
- return (
-
- { __(
- 'Your store does not have any Shipping Options configured. Once you have added your Shipping Options they will appear here.',
- 'woo-gutenberg-products-block'
- ) }
-
-
- { __(
- 'Configure Shipping Options',
- 'woo-gutenberg-products-block'
- ) }
-
-
- );
-};
-
-export default NoShippingPlaceholder;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss b/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss
deleted file mode 100644
index a5e23fedd40..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.components-placeholder.wc-block-checkout__no-shipping-placeholder {
- margin-bottom: $gap;
-
- * {
- pointer-events: all; // Overrides parent disabled component in editor context
- }
-
- .components-placeholder__fieldset {
- display: block;
-
- .components-button {
- background-color: $gray-900;
- color: $white;
- }
-
- .wc-block-checkout__no-shipping-placeholder-description {
- display: block;
- margin: 0.25em 0 1em 0;
- }
- }
-}
diff --git a/assets/js/blocks/cart-checkout/checkout/form/order-notes-step.js b/assets/js/blocks/cart-checkout/checkout/form/order-notes-step.js
deleted file mode 100644
index 75e0d50f632..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/order-notes-step.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import {
- useCheckoutContext,
- useShippingDataContext,
-} from '@woocommerce/base-context';
-import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
-
-/**
- * Internal dependencies
- */
-import CheckoutOrderNotes from './order-notes';
-
-const OrderNotesStep = () => {
- const { needsShipping } = useShippingDataContext();
- const { orderNotes, dispatchActions } = useCheckoutContext();
- const { isDisabled } = useCheckoutSubmit();
- const { setOrderNotes } = dispatchActions;
-
- return (
-
-
- );
-};
-
-export default OrderNotesStep;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/payment-method-step.js b/assets/js/blocks/cart-checkout/checkout/form/payment-method-step.js
deleted file mode 100644
index b25dac234f3..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/payment-method-step.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { StoreNoticesProvider } from '@woocommerce/base-context';
-import {
- useStoreCart,
- useEmitResponse,
- usePaymentMethods,
- useCheckoutSubmit,
-} from '@woocommerce/base-context/hooks';
-
-/**
- * Internal dependencies
- */
-import { PaymentMethods } from '../../payment-methods';
-
-const PaymentMethodStep = () => {
- const { isDisabled } = useCheckoutSubmit();
- const { cartNeedsPayment } = useStoreCart();
- const { paymentMethods } = usePaymentMethods();
- const { noticeContexts } = useEmitResponse();
-
- if ( ! cartNeedsPayment ) {
- return null;
- }
-
- return (
- 1
- ? __(
- 'Select a payment method below.',
- 'woo-gutenberg-products-block'
- )
- : ''
- }
- >
-
-
-
- );
-};
-
-export default PaymentMethodStep;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/phone-number/index.js b/assets/js/blocks/cart-checkout/checkout/form/phone-number/index.js
deleted file mode 100644
index 2ce93011516..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/phone-number/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
-
-/**
- * Renders a phone number input.
- *
- * @param {Object} props Component props.
- * @param {boolean} props.isRequired Is the phone number required or optional.
- * @param {Function} props.onChange Event fired when the input changes.
- * @param {string} props.value Value of the input.
- * @return {*} The component.
- */
-const PhoneNumber = ( { isRequired = false, value = '', onChange } ) => {
- return (
-
- { children }
- setShippingAsBilling( isChecked ) }
- />
-
- );
-};
-
-ShippingFieldsStep.propTypes = {
- shippingAsBilling: PropTypes.bool.isRequired,
- setShippingAsBilling: PropTypes.func.isRequired,
- children: PropTypes.node.isRequired,
-};
-
-export default ShippingFieldsStep;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/shipping-options-step.tsx b/assets/js/blocks/cart-checkout/checkout/form/shipping-options-step.tsx
deleted file mode 100644
index 555630d8f07..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/shipping-options-step.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- FormStep,
- ShippingRatesControl,
-} from '@woocommerce/base-components/cart-checkout';
-import {
- getShippingRatesPackageCount,
- getShippingRatesRateCount,
-} from '@woocommerce/base-utils';
-import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
-import {
- useEditorContext,
- useShippingDataContext,
-} from '@woocommerce/base-context';
-import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
-import { decodeEntities } from '@wordpress/html-entities';
-import { Notice } from 'wordpress-components';
-import classnames from 'classnames';
-import { getSetting } from '@woocommerce/settings';
-import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
-import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
-
-/**
- * Internal dependencies
- */
-import NoShippingPlaceholder from './no-shipping-placeholder';
-
-/**
- * Renders a shipping rate control option.
- *
- * @param {Object} option Shipping Rate.
- */
-const renderShippingRatesControlOption = (
- option: CartShippingPackageShippingRate
-): PackageRateOption => {
- const priceWithTaxes = getSetting( 'displayCartPricesIncludingTax', false )
- ? parseInt( option.price, 10 ) + parseInt( option.taxes, 10 )
- : parseInt( option.price, 10 );
- return {
- label: decodeEntities( option.name ),
- value: option.rate_id,
- description: decodeEntities( option.description ),
- secondaryLabel: (
- 1
- ? __(
- 'Select shipping options below.',
- 'woo-gutenberg-products-block'
- )
- : ''
- }
- >
- { isEditor && ! getShippingRatesPackageCount( shippingRates ) ? (
-
- { __(
- 'There are no shipping options available. Please ensure that your address has been entered correctly, or contact us if you need any help.',
- 'woo-gutenberg-products-block'
- ) }
-
- ) : (
- __(
- 'Shipping options will appear here after entering your full shipping address.',
- 'woo-gutenberg-products-block'
- )
- )
- }
- renderOption={ renderShippingRatesControlOption }
- shippingRates={ shippingRates }
- shippingRatesLoading={ shippingRatesLoading }
- />
- ) }
-
- );
-};
-
-export default ShippingOptionsStep;
diff --git a/assets/js/blocks/cart-checkout/checkout/form/style.scss b/assets/js/blocks/cart-checkout/checkout/form/style.scss
deleted file mode 100644
index 2a57d2e8c6e..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/form/style.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.wc-block-checkout__form {
- margin: 0;
- max-width: 100%;
-}
-.wc-block-checkout__create-account,
-.wc-block-checkout__use-address-for-billing {
- margin-top: em($gap-large);
-}
-
-.wc-block-checkout__shipping-option {
- .wc-block-components-radio-control__option {
- @include with-translucent-border( 0 0 1px );
- margin: 0;
- padding: em($gap-small) 0 em($gap-small) em($gap-largest);
- }
-
- .wc-block-components-shipping-rates-control__no-results-notice {
- margin: em($gap-small) 0;
- }
-}
-
-.is-small,
-.is-medium,
-.is-large {
- .wc-block-checkout__billing-fields,
- .wc-block-checkout__shipping-fields {
- .wc-block-components-address-form {
- margin-left: #{-$gap-small * 0.5};
- margin-right: #{-$gap-small * 0.5};
-
- &::after {
- content: "";
- clear: both;
- display: block;
- }
-
- .wc-block-components-text-input,
- .wc-block-components-country-input,
- .wc-block-components-state-input {
- float: left;
- margin-left: #{$gap-small * 0.5};
- margin-right: #{$gap-small * 0.5};
- position: relative;
- width: calc(50% - #{$gap-small});
-
- &:nth-of-type(2),
- &:first-of-type {
- margin-top: 0;
- }
- }
-
- .wc-block-components-address-form__company,
- .wc-block-components-address-form__address_1,
- .wc-block-components-address-form__address_2 {
- width: calc(100% - #{$gap-small});
- }
-
- .wc-block-components-checkbox {
- clear: both;
- }
-
- }
- }
-}
diff --git a/assets/js/blocks/cart-checkout/checkout/frontend.js b/assets/js/blocks/cart-checkout/checkout/frontend.js
deleted file mode 100644
index ff901b3709a..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/frontend.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- withStoreCartApiHydration,
- withRestApiHydration,
-} from '@woocommerce/block-hocs';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
-import {
- CheckoutProvider,
- StoreNoticesProvider,
- ValidationContextProvider,
-} from '@woocommerce/base-context';
-import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
-import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
-import {
- renderFrontend,
- getValidBlockAttributes,
-} from '@woocommerce/base-utils';
-import { StoreSnackbarNoticesProvider } from '@woocommerce/base-context/providers';
-import { SlotFillProvider } from '@woocommerce/blocks-checkout';
-
-/**
- * Internal dependencies
- */
-import Block from './block.js';
-import blockAttributes from './attributes';
-import EmptyCart from './empty-cart/index.js';
-
-const reloadPage = () => void window.location.reload( true );
-
-const errorBoundaryProps = {
- header: __( 'Something went wrong…', 'woo-gutenberg-products-block' ),
- text: __(
- 'The checkout has encountered an unexpected error. If the error persists, please get in touch with us for help.',
- 'woo-gutenberg-products-block'
- ),
- showErrorMessage: CURRENT_USER_IS_ADMIN,
- button: (
-
- { __( 'Reload the page', 'woo-gutenberg-products-block' ) }
-
- ),
-};
-
-/**
- * Wrapper component for the checkout block.
- *
- * @param {Object} props Props for the block.
- */
-const CheckoutFrontend = ( props ) => {
- const { cartItems, cartIsLoading } = useStoreCart();
-
- return (
- <>
- { ! cartIsLoading && cartItems.length === 0 ? (
-
-
-
-
-
-
-
-
-
-
-
-
- ) }
-
- );
-};
-
-const getProps = ( el ) => {
- return {
- attributes: getValidBlockAttributes( blockAttributes, el.dataset ),
- };
-};
-
-const getErrorBoundaryProps = () => {
- return errorBoundaryProps;
-};
-
-renderFrontend( {
- selector: '.wp-block-woocommerce-checkout',
- Block: withStoreCartApiHydration(
- withRestApiHydration( CheckoutFrontend )
- ),
- getProps,
- getErrorBoundaryProps,
-} );
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/frontend.tsx b/assets/js/blocks/cart-checkout/checkout/frontend.tsx
similarity index 97%
rename from assets/js/blocks/cart-checkout/checkout-i2/frontend.tsx
rename to assets/js/blocks/cart-checkout/checkout/frontend.tsx
index e745cdaf663..261da2a8ea4 100644
--- a/assets/js/blocks/cart-checkout/checkout-i2/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/checkout/frontend.tsx
@@ -59,7 +59,7 @@ const Wrapper = ( {
renderParentBlock( {
Block: withStoreCartApiHydration( withRestApiHydration( Block ) ),
blockName,
- selector: '.wp-block-woocommerce-checkout-i2',
+ selector: '.wp-block-woocommerce-checkout',
getProps,
blockMap: getRegisteredBlockComponents( blockName ) as Record<
string,
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/hacks.ts b/assets/js/blocks/cart-checkout/checkout/hacks.ts
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/hacks.ts
rename to assets/js/blocks/cart-checkout/checkout/hacks.ts
diff --git a/assets/js/blocks/cart-checkout/checkout/index.js b/assets/js/blocks/cart-checkout/checkout/index.js
deleted file mode 100644
index 44ad55c357e..00000000000
--- a/assets/js/blocks/cart-checkout/checkout/index.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, card } from '@woocommerce/icons';
-import classnames from 'classnames';
-import {
- registerFeaturePluginBlockType,
- isExperimentalBuild,
-} from '@woocommerce/block-settings';
-import { createBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import edit from './edit';
-import blockAttributes from './attributes';
-import './editor.scss';
-
-const transforms = isExperimentalBuild()
- ? {
- transforms: {
- from: [
- {
- type: 'block',
- blocks: [ 'woocommerce/checkout' ],
- transform: ( attributes ) => {
- return createBlock( 'woocommerce/checkout', {
- attributes,
- } );
- },
- },
- ],
- to: [
- {
- type: 'block',
- blocks: [ 'woocommerce/checkout-i2' ],
- transform: ( attributes ) => {
- return createBlock(
- 'woocommerce/checkout-i2',
- attributes
- );
- },
- },
- ],
- },
- }
- : {};
-
-const settings = {
- title: __( 'Checkout', 'woo-gutenberg-products-block' ),
- icon: {
- src:
- );
- },
- ...transforms,
-};
-
-registerFeaturePluginBlockType( 'woocommerce/checkout', settings );
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/index.tsx b/assets/js/blocks/cart-checkout/checkout/index.tsx
similarity index 62%
rename from assets/js/blocks/cart-checkout/checkout-i2/index.tsx
rename to assets/js/blocks/cart-checkout/checkout/index.tsx
index 86f002a1b50..3fc573c9c1d 100644
--- a/assets/js/blocks/cart-checkout/checkout-i2/index.tsx
+++ b/assets/js/blocks/cart-checkout/checkout/index.tsx
@@ -2,9 +2,9 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
import { Icon, fields } from '@woocommerce/icons';
import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
-import { createBlock } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -14,7 +14,7 @@ import { blockName, blockAttributes } from './attributes';
import './inner-blocks';
const settings = {
- title: __( 'Checkout i2', 'woo-gutenberg-products-block' ),
+ title: __( 'Checkout', 'woo-gutenberg-products-block' ),
icon: {
src:
+ );
},
- ],
- from: [
- {
- type: 'block',
- blocks: [ 'woocommerce/checkout-i2' ],
- transform: ( attributes ) => {
- return createBlock( 'woocommerce/checkout-i2', attributes );
- },
- },
- ],
- },
+ },
+ ],
};
registerFeaturePluginBlockType( blockName, settings );
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/attributes.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/attributes.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/attributes.tsx
rename to assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/attributes.tsx
diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/block.json b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/block.json
new file mode 100644
index 00000000000..1d70746aaee
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/block.json
@@ -0,0 +1,25 @@
+{
+ "name": "woocommerce/checkout-actions-block",
+ "version": "1.0.0",
+ "title": "Actions",
+ "description": "Allow customers to place their order.",
+ "category": "woocommerce",
+ "supports": {
+ "align": false,
+ "html": false,
+ "multiple": false,
+ "reusable": false,
+ "inserter": false
+ },
+ "attributes": {
+ "lock": {
+ "default": {
+ "remove": true,
+ "move": true
+ }
+ }
+ },
+ "parent": [ "woocommerce/checkout-fields-block" ],
+ "textdomain": "woo-gutenberg-products-block",
+ "apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/block.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/block.tsx
rename to assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/block.tsx
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/edit.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/edit.tsx
rename to assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/frontend.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/frontend.tsx
rename to assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/index.tsx b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/index.tsx
new file mode 100644
index 00000000000..29297b19d0b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/checkout/inner-blocks/checkout-actions-block/index.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Icon, button } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import attributes from './attributes';
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+ icon: {
+ src:
-
-
-
- { getSetting( 'couponsEnabled', true ) && (
-
-
- ) }
-
-
- ) }
- { ! getSetting( 'displayCartPricesIncludingTax', false ) &&
- parseInt( cartTotals.total_tax, 10 ) > 0 && (
-
-
- ) }
-
-
-
-
-
-
-
- Subtotal
-
-
- $24.00
-
-
-
-
-
-
-
-
-
-
-
- Coupon code
-
-
- Apply a coupon code
-
-
-
-
-
-
-
-
-
- Sales tax 20%
-
-
- $6.00
-
-
-
-
-
-
-
-
-
-
' );
+
+ if ( $is_empty ) {
+ $content = '';
+ }
+
+ return $this->inject_html_data_attributes( $content, $attributes );
}
/**
@@ -169,14 +179,72 @@ function() {
$this->asset_data_registry->add( 'hasDarkEditorStyleSupport', current_theme_supports( 'dark-editor-style' ), true );
$this->asset_data_registry->register_page_id( isset( $attributes['cartPageId'] ) ? $attributes['cartPageId'] : 0 );
+ $is_block_editor = $this->is_block_editor();
+
// Hydrate the following data depending on admin or frontend context.
- if ( is_admin() && function_exists( 'get_current_screen' ) ) {
- $screen = get_current_screen();
+ if ( $is_block_editor && ! $this->asset_data_registry->exists( 'shippingMethodsExist' ) ) {
+ $methods_exist = wc_get_shipping_method_count( false, true ) > 0;
+ $this->asset_data_registry->add( 'shippingMethodsExist', $methods_exist );
+ }
- if ( $screen && $screen->is_block_editor() && ! $this->asset_data_registry->exists( 'shippingMethodsExist' ) ) {
- $methods_exist = wc_get_shipping_method_count( false, true ) > 0;
- $this->asset_data_registry->add( 'shippingMethodsExist', $methods_exist );
- }
+ if ( $is_block_editor && ! $this->asset_data_registry->exists( 'globalShippingMethods' ) ) {
+ $shipping_methods = WC()->shipping()->get_shipping_methods();
+ $formatted_shipping_methods = array_reduce(
+ $shipping_methods,
+ function( $acc, $method ) {
+ if ( $method->supports( 'settings' ) ) {
+ $acc[] = [
+ 'id' => $method->id,
+ 'title' => $method->method_title,
+ 'description' => $method->method_description,
+ ];
+ }
+ return $acc;
+ },
+ []
+ );
+ $this->asset_data_registry->add( 'globalShippingMethods', $formatted_shipping_methods );
+ }
+
+ if ( $is_block_editor && ! $this->asset_data_registry->exists( 'activeShippingZones' ) && class_exists( '\WC_Shipping_Zones' ) ) {
+ $shipping_zones = \WC_Shipping_Zones::get_zones();
+ $formatted_shipping_zones = array_reduce(
+ $shipping_zones,
+ function( $acc, $zone ) {
+ $acc[] = [
+ 'id' => $zone['id'],
+ 'title' => $zone['zone_name'],
+ 'description' => $zone['formatted_zone_location'],
+ ];
+ return $acc;
+ },
+ []
+ );
+ $formatted_shipping_zones[] = [
+ 'id' => 0,
+ 'title' => __( 'International', 'woo-gutenberg-products-block' ),
+ 'description' => __( 'Locations outside all other zones', 'woo-gutenberg-products-block' ),
+ ];
+ $this->asset_data_registry->add( 'activeShippingZones', $formatted_shipping_zones );
+ }
+
+ if ( $is_block_editor && ! $this->asset_data_registry->exists( 'globalPaymentMethods' ) ) {
+ $payment_methods = WC()->payment_gateways->payment_gateways();
+ $formatted_payment_methods = array_reduce(
+ $payment_methods,
+ function( $acc, $method ) {
+ if ( 'yes' === $method->enabled ) {
+ $acc[] = [
+ 'id' => $method->id,
+ 'title' => $method->method_title,
+ 'description' => $method->method_description,
+ ];
+ }
+ return $acc;
+ },
+ []
+ );
+ $this->asset_data_registry->add( 'globalPaymentMethods', $formatted_payment_methods );
}
if ( ! is_admin() && ! WC()->is_rest_api_request() ) {
@@ -187,6 +255,18 @@ function() {
do_action( 'woocommerce_blocks_checkout_enqueue_data' );
}
+ /**
+ * Are we currently on the admin block editor screen?
+ */
+ protected function is_block_editor() {
+ if ( ! is_admin() || ! function_exists( 'get_current_screen' ) ) {
+ return false;
+ }
+ $screen = get_current_screen();
+
+ return $screen && $screen->is_block_editor();
+ }
+
/**
* Removes accents from an array of values, sorts by the values, then returns the original array values sorted.
*
@@ -236,70 +316,6 @@ protected function hydrate_from_api() {
remove_filter( 'woocommerce_store_api_disable_nonce_check', '__return_true' );
}
- /**
- * Render skeleton markup for the checkout block.
- */
- protected function get_skeleton() {
- return '
-
- ' . $this->get_skeleton_inline_script();
- }
-
/**
* Callback for woocommerce_payment_methods_list_item filter to add token id
* to the generated list.
diff --git a/src/BlockTypes/CheckoutI2.php b/src/BlockTypes/CheckoutI2.php
deleted file mode 100644
index 6270755d2b4..00000000000
--- a/src/BlockTypes/CheckoutI2.php
+++ /dev/null
@@ -1,350 +0,0 @@
-block_name ) ) {
- _doing_it_wrong( __METHOD__, esc_html( __( 'Block name is required.', 'woo-gutenberg-products-block' ) ), '4.5.0' );
- return false;
- }
-
- // Also init the main checkout block so i2 is compatible with existing integrations.
- do_action( 'woocommerce_blocks_checkout_block_registration', $this->integration_registry );
-
- $this->integration_registry->initialize( $this->block_name . '_block' );
- $this->register_block_type_assets();
- $this->register_block_type();
- add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_editor_assets' ] );
- }
-
- /**
- * Get the editor script handle for this block type.
- *
- * @param string $key Data to get, or default to everything.
- * @return array|string;
- */
- protected function get_block_type_editor_script( $key = null ) {
- $script = [
- 'handle' => 'wc-' . $this->block_name . '-block',
- 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name ),
- 'dependencies' => [ 'wc-blocks' ],
- ];
- return $key ? $script[ $key ] : $script;
- }
-
- /**
- * Get the frontend script handle for this block type.
- *
- * @see $this->register_block_type()
- * @param string $key Data to get, or default to everything.
- * @return array|string
- */
- protected function get_block_type_script( $key = null ) {
- $script = [
- 'handle' => 'wc-' . $this->block_name . '-block-frontend',
- 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name . '-frontend' ),
- 'dependencies' => [],
- ];
- return $key ? $script[ $key ] : $script;
- }
-
- /**
- * Enqueue frontend assets for this block, just in time for rendering.
- *
- * @param array $attributes Any attributes that currently are available from the block.
- */
- protected function enqueue_assets( array $attributes ) {
- do_action( 'woocommerce_blocks_enqueue_checkout_block_scripts_before' );
- parent::enqueue_assets( $attributes );
- do_action( 'woocommerce_blocks_enqueue_checkout_block_scripts_after' );
- }
-
- /**
- * Append frontend scripts when rendering the block.
- *
- * @param array $attributes Block attributes.
- * @param string $content Block content.
- * @return string Rendered block type output.
- */
- protected function render( $attributes, $content ) {
- if ( $this->is_checkout_endpoint() ) {
- // Note: Currently the block only takes care of the main checkout form -- if an endpoint is set, refer to the
- // legacy shortcode instead and do not render block.
- return '[woocommerce_checkout]';
- }
-
- // Deregister core checkout scripts and styles.
- wp_dequeue_script( 'wc-checkout' );
- wp_dequeue_script( 'wc-password-strength-meter' );
- wp_dequeue_script( 'selectWoo' );
- wp_dequeue_style( 'select2' );
-
- return $this->inject_html_data_attributes( $content, $attributes );
- }
-
- /**
- * Check if we're viewing a checkout page endpoint, rather than the main checkout page itself.
- *
- * @return boolean
- */
- protected function is_checkout_endpoint() {
- return is_wc_endpoint_url( 'order-pay' ) || is_wc_endpoint_url( 'order-received' );
- }
-
- /**
- * Extra data passed through from server to client for block.
- *
- * @param array $attributes Any attributes that currently are available from the block.
- * Note, this will be empty in the editor context when the block is
- * not in the post content on editor load.
- */
- protected function enqueue_data( array $attributes = [] ) {
- parent::enqueue_data( $attributes );
-
- $this->asset_data_registry->add(
- 'allowedCountries',
- function() {
- return $this->deep_sort_with_accents( WC()->countries->get_allowed_countries() );
- },
- true
- );
- $this->asset_data_registry->add(
- 'allowedStates',
- function() {
- return $this->deep_sort_with_accents( WC()->countries->get_allowed_country_states() );
- },
- true
- );
- $this->asset_data_registry->add(
- 'shippingCountries',
- function() {
- return $this->deep_sort_with_accents( WC()->countries->get_shipping_countries() );
- },
- true
- );
- $this->asset_data_registry->add(
- 'shippingStates',
- function() {
- return $this->deep_sort_with_accents( WC()->countries->get_shipping_country_states() );
- },
- true
- );
- $this->asset_data_registry->add(
- 'countryLocale',
- function() {
- // Merge country and state data to work around https://github.com/woocommerce/woocommerce/issues/28944.
- $country_locale = wc()->countries->get_country_locale();
- $states = wc()->countries->get_states();
-
- foreach ( $states as $country => $states ) {
- if ( empty( $states ) ) {
- $country_locale[ $country ]['state']['required'] = false;
- $country_locale[ $country ]['state']['hidden'] = true;
- }
- }
- return $country_locale;
- },
- true
- );
- $this->asset_data_registry->add( 'baseLocation', wc_get_base_location(), true );
- $this->asset_data_registry->add(
- 'checkoutAllowsGuest',
- false === filter_var(
- WC()->checkout()->is_registration_required(),
- FILTER_VALIDATE_BOOLEAN
- ),
- true
- );
- $this->asset_data_registry->add(
- 'checkoutAllowsSignup',
- filter_var(
- WC()->checkout()->is_registration_enabled(),
- FILTER_VALIDATE_BOOLEAN
- ),
- true
- );
- $this->asset_data_registry->add( 'checkoutShowLoginReminder', filter_var( get_option( 'woocommerce_enable_checkout_login_reminder' ), FILTER_VALIDATE_BOOLEAN ), true );
- $this->asset_data_registry->add( 'displayCartPricesIncludingTax', 'incl' === get_option( 'woocommerce_tax_display_cart' ), true );
- $this->asset_data_registry->add( 'displayItemizedTaxes', 'itemized' === get_option( 'woocommerce_tax_total_display' ), true );
- $this->asset_data_registry->add( 'taxesEnabled', wc_tax_enabled(), true );
- $this->asset_data_registry->add( 'couponsEnabled', wc_coupons_enabled(), true );
- $this->asset_data_registry->add( 'shippingEnabled', wc_shipping_enabled(), true );
- $this->asset_data_registry->add( 'hasDarkEditorStyleSupport', current_theme_supports( 'dark-editor-style' ), true );
- $this->asset_data_registry->register_page_id( isset( $attributes['cartPageId'] ) ? $attributes['cartPageId'] : 0 );
-
- $is_block_editor = $this->is_block_editor();
-
- // Hydrate the following data depending on admin or frontend context.
- if ( $is_block_editor && ! $this->asset_data_registry->exists( 'shippingMethodsExist' ) ) {
- $methods_exist = wc_get_shipping_method_count( false, true ) > 0;
- $this->asset_data_registry->add( 'shippingMethodsExist', $methods_exist );
- }
-
- if ( $is_block_editor && ! $this->asset_data_registry->exists( 'globalShippingMethods' ) ) {
- $shipping_methods = WC()->shipping()->get_shipping_methods();
- $formatted_shipping_methods = array_reduce(
- $shipping_methods,
- function( $acc, $method ) {
- if ( $method->supports( 'settings' ) ) {
- $acc[] = [
- 'id' => $method->id,
- 'title' => $method->method_title,
- 'description' => $method->method_description,
- ];
- }
- return $acc;
- },
- []
- );
- $this->asset_data_registry->add( 'globalShippingMethods', $formatted_shipping_methods );
- }
-
- if ( $is_block_editor && ! $this->asset_data_registry->exists( 'activeShippingZones' ) && class_exists( '\WC_Shipping_Zones' ) ) {
- $shipping_zones = \WC_Shipping_Zones::get_zones();
- $formatted_shipping_zones = array_reduce(
- $shipping_zones,
- function( $acc, $zone ) {
- $acc[] = [
- 'id' => $zone['id'],
- 'title' => $zone['zone_name'],
- 'description' => $zone['formatted_zone_location'],
- ];
- return $acc;
- },
- []
- );
- $formatted_shipping_zones[] = [
- 'id' => 0,
- 'title' => __( 'International', 'woo-gutenberg-products-block' ),
- 'description' => __( 'Locations outside all other zones', 'woo-gutenberg-products-block' ),
- ];
- $this->asset_data_registry->add( 'activeShippingZones', $formatted_shipping_zones );
- }
-
- if ( $is_block_editor && ! $this->asset_data_registry->exists( 'globalPaymentMethods' ) ) {
- $payment_methods = WC()->payment_gateways->payment_gateways();
- $formatted_payment_methods = array_reduce(
- $payment_methods,
- function( $acc, $method ) {
- if ( 'yes' === $method->enabled ) {
- $acc[] = [
- 'id' => $method->id,
- 'title' => $method->method_title,
- 'description' => $method->method_description,
- ];
- }
- return $acc;
- },
- []
- );
- $this->asset_data_registry->add( 'globalPaymentMethods', $formatted_payment_methods );
- }
-
- if ( ! is_admin() && ! WC()->is_rest_api_request() ) {
- $this->hydrate_from_api();
- $this->hydrate_customer_payment_methods();
- }
-
- do_action( 'woocommerce_blocks_checkout_enqueue_data' );
- }
-
- /**
- * Are we currently on the admin block editor screen?
- */
- protected function is_block_editor() {
- if ( ! is_admin() || ! function_exists( 'get_current_screen' ) ) {
- return false;
- }
- $screen = get_current_screen();
-
- return $screen && $screen->is_block_editor();
- }
-
- /**
- * Removes accents from an array of values, sorts by the values, then returns the original array values sorted.
- *
- * @param array $array Array of values to sort.
- * @return array Sorted array.
- */
- protected function deep_sort_with_accents( $array ) {
- if ( ! is_array( $array ) || empty( $array ) ) {
- return $array;
- }
-
- if ( is_array( reset( $array ) ) ) {
- return array_map( [ $this, 'deep_sort_with_accents' ], $array );
- }
-
- $array_without_accents = array_map( 'remove_accents', array_map( 'wc_strtolower', array_map( 'html_entity_decode', $array ) ) );
- asort( $array_without_accents );
- return array_replace( $array_without_accents, $array );
- }
-
- /**
- * Get customer payment methods for use in checkout.
- */
- protected function hydrate_customer_payment_methods() {
- if ( ! is_user_logged_in() || $this->asset_data_registry->exists( 'customerPaymentMethods' ) ) {
- return;
- }
- add_filter( 'woocommerce_payment_methods_list_item', [ $this, 'include_token_id_with_payment_methods' ], 10, 2 );
- $this->asset_data_registry->add(
- 'customerPaymentMethods',
- wc_get_customer_saved_methods_list( get_current_user_id() )
- );
- remove_filter( 'woocommerce_payment_methods_list_item', [ $this, 'include_token_id_with_payment_methods' ], 10, 2 );
- }
-
- /**
- * Hydrate the checkout block with data from the API.
- */
- protected function hydrate_from_api() {
- // Print existing notices now, otherwise they are caught by the Cart
- // Controller and converted to exceptions.
- wc_print_notices();
-
- add_filter( 'woocommerce_store_api_disable_nonce_check', '__return_true' );
- $this->asset_data_registry->hydrate_api_request( '/wc/store/cart' );
- $this->asset_data_registry->hydrate_api_request( '/wc/store/checkout' );
- remove_filter( 'woocommerce_store_api_disable_nonce_check', '__return_true' );
- }
-
- /**
- * Callback for woocommerce_payment_methods_list_item filter to add token id
- * to the generated list.
- *
- * @param array $list_item The current list item for the saved payment method.
- * @param \WC_Token $token The token for the current list item.
- *
- * @return array The list item with the token id added.
- */
- public static function include_token_id_with_payment_methods( $list_item, $token ) {
- $list_item['tokenId'] = $token->get_id();
- $brand = ! empty( $list_item['method']['brand'] ) ?
- strtolower( $list_item['method']['brand'] ) :
- '';
- // phpcs:ignore WordPress.WP.I18n.TextDomainMismatch -- need to match on translated value from core.
- if ( ! empty( $brand ) && esc_html__( 'Credit card', 'woocommerce' ) !== $brand ) {
- $list_item['method']['brand'] = wc_get_credit_card_type_label( $brand );
- }
- return $list_item;
- }
-}
diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
index 0e6388efc4b..bd2d595f563 100644
--- a/src/BlockTypesController.php
+++ b/src/BlockTypesController.php
@@ -179,7 +179,6 @@ protected function get_block_types() {
if ( Package::feature()->is_experimental_build() ) {
$block_types[] = 'SingleProduct';
- $block_types[] = 'CheckoutI2';
$block_types[] = 'MiniCart';
}
diff --git a/src/Payments/Api.php b/src/Payments/Api.php
index 8e189069838..72a2bbe0e70 100644
--- a/src/Payments/Api.php
+++ b/src/Payments/Api.php
@@ -63,7 +63,7 @@ protected function init() {
* @return array
*/
public function add_payment_method_script_dependencies( $dependencies, $handle ) {
- if ( ! in_array( $handle, [ 'wc-checkout-block', 'wc-checkout-block-frontend', 'wc-checkout-i2-block', 'wc-checkout-i2-block-frontend', 'wc-cart-block', 'wc-cart-block-frontend' ], true ) ) {
+ if ( ! in_array( $handle, [ 'wc-checkout-block', 'wc-checkout-block-frontend', 'wc-cart-block', 'wc-cart-block-frontend' ], true ) ) {
return $dependencies;
}
return array_merge( $dependencies, $this->payment_method_registry->get_all_active_payment_method_script_dependencies() );
@@ -214,7 +214,7 @@ public function verify_payment_methods_dependencies() {
sprintf( 'console.error( "%s" );', $error_message )
);
- $cart_checkout_scripts = [ 'wc-cart-block', 'wc-cart-block-frontend', 'wc-checkout-block', 'wc-checkout-block-frontend', 'wc-checkout-i2-block', 'wc-checkout-i2-block-frontend' ];
+ $cart_checkout_scripts = [ 'wc-cart-block', 'wc-cart-block-frontend', 'wc-checkout-block', 'wc-checkout-block-frontend' ];
foreach ( $cart_checkout_scripts as $script_handle ) {
if (
! array_key_exists( $script_handle, $wp_scripts->registered ) ||
diff --git a/tests/e2e/config/custom-matchers/to-toggle-element.js b/tests/e2e/config/custom-matchers/to-toggle-element.js
index 03c9e7ec04c..8a9d18fd9f0 100644
--- a/tests/e2e/config/custom-matchers/to-toggle-element.js
+++ b/tests/e2e/config/custom-matchers/to-toggle-element.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { findLabelWithText } from '../../../utils';
+
expect.extend( {
async toToggleElement( toggleLabel, selector ) {
if ( ! selector ) {
@@ -16,13 +21,19 @@ expect.extend( {
pass: false,
};
- await toggleLabel.click();
+ await ( typeof toggleLabel === 'string'
+ ? await findLabelWithText( toggleLabel )
+ : toggleLabel
+ ).click();
if ( initiallyHadSelectorMatch === ( await hasSelectorMatch() ) ) {
return noChangeError;
}
- await toggleLabel.click();
+ await ( typeof toggleLabel === 'string'
+ ? await findLabelWithText( toggleLabel )
+ : toggleLabel
+ ).click();
if ( initiallyHadSelectorMatch !== ( await hasSelectorMatch() ) ) {
return noChangeError;
diff --git a/tests/e2e/config/custom-matchers/to-toggle-required-attr-of.js b/tests/e2e/config/custom-matchers/to-toggle-required-attr-of.js
index bea8eabb00c..b134a1b7e75 100644
--- a/tests/e2e/config/custom-matchers/to-toggle-required-attr-of.js
+++ b/tests/e2e/config/custom-matchers/to-toggle-required-attr-of.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { findLabelWithText } from '../../../utils';
+
expect.extend( {
async toToggleRequiredAttrOf( checkboxLabel, selector ) {
if ( ! selector ) {
@@ -17,13 +22,19 @@ expect.extend( {
pass: false,
};
- await checkboxLabel.click();
+ await ( typeof checkboxLabel === 'string'
+ ? await findLabelWithText( checkboxLabel )
+ : checkboxLabel
+ ).click();
if ( wasInitiallyRequired === ( await isRequired() ) ) {
return noChangeError;
}
- await checkboxLabel.click();
+ await ( typeof checkboxLabel === 'string'
+ ? await findLabelWithText( checkboxLabel )
+ : checkboxLabel
+ ).click();
if ( wasInitiallyRequired !== ( await isRequired() ) ) {
return noChangeError;
diff --git a/tests/e2e/specs/backend/checkout.test.js b/tests/e2e/specs/backend/checkout.test.js
index 114e618aa9c..49b0f655e7f 100644
--- a/tests/e2e/specs/backend/checkout.test.js
+++ b/tests/e2e/specs/backend/checkout.test.js
@@ -9,6 +9,7 @@ import {
import {
findLabelWithText,
visitBlockPage,
+ selectBlockByName,
} from '@woocommerce/blocks-test-utils';
import {
@@ -19,7 +20,7 @@ import {
const block = {
name: 'Checkout',
slug: 'woocommerce/checkout',
- class: '.wc-block-checkout',
+ class: '.wp-block-woocommerce-checkout',
};
if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 ) {
@@ -79,77 +80,80 @@ describe( `${ block.name } Block`, () => {
describe( 'attributes', () => {
beforeEach( async () => {
await openDocumentSettingsSidebar();
- await page.click( block.class );
+ await selectBlockByName( block.slug );
+ } );
+
+ it( 'can enable dark mode inputs', async () => {
+ const toggleLabel = await findLabelWithText(
+ 'Dark mode inputs'
+ );
+ await toggleLabel.click();
+
+ await expect( page ).toMatchElement(
+ `.wc-block-checkout.has-dark-controls`
+ );
+
+ await toggleLabel.click();
+
+ await expect( page ).not.toMatchElement(
+ `.wc-block-checkout.has-dark-controls`
+ );
+ } );
+ } );
+
+ describe( 'shipping address block attributes', () => {
+ beforeEach( async () => {
+ await openDocumentSettingsSidebar();
+ await selectBlockByName(
+ 'woocommerce/checkout-shipping-address-block'
+ );
} );
describe( 'Company input', () => {
- const selector = `${ block.class } .wc-block-components-address-form__company input`;
+ const selector = `${ block.class } #shipping-company`;
it( 'visibility can be toggled', async () => {
- const toggleLabel = await findLabelWithText( 'Company' );
- await expect( toggleLabel ).toToggleElement( selector );
+ await expect( 'Company' ).toToggleElement( selector );
} );
it( 'required attribute can be toggled', async () => {
// Company is disabled by default, so first we need to enable it.
const toggleLabel = await findLabelWithText( 'Company' );
await toggleLabel.click();
- const checkboxLabel = await findLabelWithText(
+ await expect(
'Require company name?'
- );
-
- await expect( checkboxLabel ).toToggleRequiredAttrOf(
- selector
- );
+ ).toToggleRequiredAttrOf( selector );
} );
} );
describe( 'Apartment input', () => {
it( 'visibility can be toggled', async () => {
- const selector = `${ block.class } .wc-block-components-address-form__address_2 input`;
- const toggleLabel = await findLabelWithText(
- 'Apartment, suite, etc.'
+ const selector = `${ block.class } #shipping-address_2`;
+ await expect( 'Apartment, suite, etc.' ).toToggleElement(
+ selector
);
- await expect( toggleLabel ).toToggleElement( selector );
} );
} );
describe( 'Phone input', () => {
- const selector = `${ block.class } #phone`;
+ const selector = `${ block.class } #shipping-phone`;
it( 'visibility can be toggled', async () => {
- const toggleLabel = await findLabelWithText( 'Phone' );
- await expect( toggleLabel ).toToggleElement( selector );
+ await expect( 'Phone' ).toToggleElement( selector );
} );
it( 'required attribute can be toggled', async () => {
- const checkboxLabel = await findLabelWithText(
+ await expect(
'Require phone number?'
- );
- await expect( checkboxLabel ).toToggleRequiredAttrOf(
- selector
- );
- } );
- } );
-
- describe( 'Order notes checkbox', () => {
- it( 'visibility can be toggled', async () => {
- const selector = `${ block.class } .wc-block-checkout__add-note`;
- const toggleLabel = await findLabelWithText(
- 'Allow shoppers to optionally add order notes'
- );
- await expect( toggleLabel ).toToggleElement( selector );
+ ).toToggleRequiredAttrOf( selector );
} );
} );
+ } );
- describe( 'Links to polices', () => {
- it( 'visibility can be toggled', async () => {
- const selector = `${ block.class } .wc-block-components-checkout-policies`;
- const toggleLabel = await findLabelWithText(
- 'Show links to policies'
- );
- await expect( toggleLabel ).toToggleElement( selector );
- } );
+ describe( 'action block attributes', () => {
+ beforeEach( async () => {
+ await openDocumentSettingsSidebar();
+ await selectBlockByName( 'woocommerce/checkout-actions-block' );
} );
describe( 'Return to cart link', () => {
@@ -161,25 +165,6 @@ describe( `${ block.name } Block`, () => {
await expect( toggleLabel ).toToggleElement( selector );
} );
} );
-
- it( 'can enable dark mode inputs', async () => {
- await openDocumentSettingsSidebar();
- await page.click( block.class );
- const toggleLabel = await findLabelWithText(
- 'Dark mode inputs'
- );
- await toggleLabel.click();
-
- await expect( page ).toMatchElement(
- `${ block.class }.has-dark-controls`
- );
-
- await toggleLabel.click();
-
- await expect( page ).not.toMatchElement(
- `${ block.class }.has-dark-controls`
- );
- } );
} );
} );
} );
diff --git a/tests/utils/index.js b/tests/utils/index.js
index 8d933e7c454..1d7e7dbadc7 100644
--- a/tests/utils/index.js
+++ b/tests/utils/index.js
@@ -4,3 +4,4 @@ export { visitBlockPage, visitPostOfType } from './visit-block-page';
export { getBlockPagePermalink } from './get-block-page-permalink';
export { getNormalPagePermalink } from './get-normal-page-permalink';
export { shopper } from './shopper';
+export { selectBlockByName } from './select-block-by-name';
diff --git a/tests/utils/select-block-by-name.js b/tests/utils/select-block-by-name.js
new file mode 100644
index 00000000000..24ebcb83ef8
--- /dev/null
+++ b/tests/utils/select-block-by-name.js
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { getAllBlocks, selectBlockByClientId } from '@wordpress/e2e-test-utils';
+
+export const selectBlockByName = async ( blockName ) => {
+ const blocksInEditor = await getAllBlocks();
+ const flatBlockArray = ( blocks ) =>
+ blocks
+ .map( ( block ) => [
+ { [ block.name ]: block.clientId },
+ block.innerBlocks ? flatBlockArray( block.innerBlocks ) : [],
+ ] )
+ .flat( Infinity );
+ const blocksObject = Object.fromEntries(
+ flatBlockArray( blocksInEditor )
+ .map( ( block ) => Object.entries( block ) )
+ .flat()
+ );
+ const clientId = blocksObject[ blockName ];
+ return selectBlockByClientId( clientId );
+};
diff --git a/tsconfig.json b/tsconfig.json
index 3ca4c14185d..88a4af4398b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
"extends": "./tsconfig.base.json",
"include": [
"./assets/js/**/*",
- "./assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-sample-block/block.json"
+ "./assets/js/blocks/cart-checkout/checkout/inner-blocks/**/block.json"
],
"exclude": [ "./assets/js/data" ],
"references": [