Docs: Update examples to use window global imports (https://github.com/woocommerce/woocommerce-blocks/pull/11577)

* Updating examples to use window global imports

* Remove incorrect package import description

plugins/woocommerce-blocks/docs/contributors/documentation-guidelines.md

@@ -22,6 +22,7 @@
     -   [Example](#example-6)
         -   [CSS code example](#css-code-example)
         -   [JS code example](#js-code-example)
+-   [Import from global imports rather than alias](#import-from-global-imports-rather-than-alias)
 -   [Use table of contents for top-level readme](#use-table-of-contents-for-top-level-readme)
 -   [Use internal links](#use-internal-links)
 -   [Sort releases descending](#sort-releases-descending)
@@ -122,10 +123,19 @@ When using code examples, the fence format and the language definition must be u
 
 ````text
 ```js
-import { registerExpressPaymentMethod } from '@woocommerce/blocks-registry';
+const { registerExpressPaymentMethod } = window.wc.blocksRegistry;
 ```
 ````
 
+## Import from global imports rather than alias
+
+In code examples, use imports from the global window object rather than the aliases, since the aliases require build tools to work. Example:
+
+```diff
+-import { registerCheckoutFilters } from '@woocommerce/blocks-checkout';
++const { registerCheckoutFilters } = window.wc.blocksCheckout;
+```
+
 ## Use table of contents for top-level readme
 
 Every top-level README must have a table of contents. The table of contents can be generated automatically using the Visual Studio Code extension Markdown All in One.
@@ -168,4 +178,3 @@ When referencing other documentations, the corresponding document should be link
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/documentation-guidelines.md)
 
 <!-- /FEEDBACK -->
-

plugins/woocommerce-blocks/docs/internal-developers/block-client-apis/checkout/checkout-flow-and-events.md

@@ -57,8 +57,8 @@ There are various statuses that are exposed on the Checkout data store via selec
 You can use them in your component like so
 
 ```jsx
-import { useSelect } from '@wordpress/data';
-import { CHECKOUT_STORE_KEY } from '@woocommerce/blocks-data';
+const { useSelect } = window.wp.data;
+const { CHECKOUT_STORE_KEY } = window.wc.wcBlocksData;
 
 const MyComponent = ( props ) => {
 	const isComplete = useSelect( ( select ) =>
@@ -105,8 +105,8 @@ The status is exposed on the `currentErrorStatus` object provided by the `useShi
 The status of the payment lives in the payment data store. You can query the status with the following selectors:
 
 ```jsx
-import { select } from '@wordpress/data';
-import { PAYMENT_STORE_KEY } from '@woocommerce/blocks-data';
+const { select } = window.wp.data;
+const { PAYMENT_STORE_KEY } = window.wc.wcBlocksData;
 
 const MyComponent = ( props ) => {
 	const isPaymentIdle = select( PAYMENT_STORE_KEY ).isPaymentIdle();
@@ -241,7 +241,7 @@ const Component = () => {
 _For registered payment method components:_
 
 ```jsx
-import { useEffect } from '@wordpress/element';
+const { useEffect } = window.wp.element;
 
 const PaymentMethodComponent = ( { eventRegistration } ) => {
 	const { onCheckoutValidation } = eventRegistration;
@@ -331,7 +331,7 @@ const Component = () => {
 _For registered payment method components:_
 
 ```jsx
-import { useEffect } from '@wordpress/element';
+const { useEffect } = window.wp.element;
 
 const PaymentMethodComponent = ( { eventRegistration } ) => {
 	const { onPaymentMethodProcessing } = eventRegistration;
@@ -404,7 +404,7 @@ const Component = () => {
 _For registered payment method components:_
 
 ```jsx
-import { useEffect } from '@wordpress/element';
+const { useEffect } = window.wp.element;
 
 const PaymentMethodComponent = ( { eventRegistration } ) => {
 	const { onCheckoutSuccess } = eventRegistration;
@@ -446,7 +446,7 @@ const Component = () => {
 _For registered payment method components:_
 
 ```jsx
-import { useEffect } from '@wordpress/element';
+const { useEffect } = window.wp.element;
 
 const PaymentMethodComponent = ( { eventRegistration } ) => {
 	const { onCheckoutFail } = eventRegistration;

plugins/woocommerce-blocks/docs/internal-developers/block-client-apis/notices.md

@@ -23,7 +23,7 @@ On the Cart Block, a `StoreNoticesContainer` is already rendered with the `wc/ca
 #### Single context
 
 ```jsx
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+const { StoreNoticesContainer } = window.wc.blocksCheckout;
 
 const PaymentErrors = () => {
 	return <StoreNoticesContainer context="wc/payment" />;
@@ -33,7 +33,7 @@ const PaymentErrors = () => {
 #### Multiple contexts
 
 ```jsx
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+const { StoreNoticesContainer } = window.wc.blocksCheckout;
 
 const AddressForm = () => {
 	return (
@@ -52,7 +52,7 @@ const AddressForm = () => {
 WooCommerce Blocks also shows snackbar notices, to add a snackbar notice you need to create a notice with `type:snackbar` in the options object.
 
 ```js
-import { dispatch } from '@wordpress/data';
+const { dispatch } = window.wp.data;
 
 dispatch( 'core/notices' ).createNotice(
 	'snackbar',

plugins/woocommerce-blocks/docs/internal-developers/translations/translations-in-JS-TS-files.md

@@ -3,7 +3,7 @@
 In comparison to PHP files, translations in JS/TS files require a few additional steps. To use translation functions in JS/TS, the dependency `@wordpress/i18n` needs to be included at the top of the corresponding file:
 
 ```ts
-import { sprintf, _n } from '@wordpress/i18n';
+const { sprintf, _n } = window.wp.i18n;
 ```
 
 Once that dependency had been included, the translation function can than be used.
@@ -19,7 +19,7 @@ The function `__()` retrieves the translation of `$text`.
 const translation = __( string text, string domain = 'default' );
 
 // Example
-import { __ } from '@wordpress/i18n';
+const { __ } = window.wp.i18n;
 
 const translation = __( 'Place Order', 'woo-gutenberg-products-block' );
 ```
@@ -35,7 +35,7 @@ The function `_n()` translates and retrieves the singular or plural form based o
 const translation = _n( string single, string plural, int number, string domain = 'default' );
 
 // Example
-import { sprintf, _n } from '@wordpress/i18n';
+const { sprintf, _n } = window.wp.i18n;
 
 const translation = sprintf(
     /* translators: %s number of products in cart. */
@@ -60,7 +60,7 @@ The function `_x()` retrieves a translated string with gettext context.
 const translation = _x( string text, string context, string domain = 'default' );
 
 // Example
-import { _x } from '@wordpress/i18n';
+const { _x } = window.wp.i18n;
 
 const translation = _x( 'Draft', 'Order status', 'woo-gutenberg-products-block' );
 ```
@@ -76,7 +76,7 @@ The function `_nx()` translates and retrieves the singular or plural form based
 const translation = _nx( string single, string plural, int number, string context, string domain = 'default' );
 
 // Example
-import { sprintf, _nx } from '@wordpress/i18n';
+const { sprintf, _nx } = window.wp.i18n;
 
 const translation = sprintf(
     /* translators: %s number of products in cart. */

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/README.md

@@ -2,6 +2,7 @@
 
 ## Table of Contents <!-- omit in toc -->
 
+-   [Imports and dependency extration](#imports-and-dependency-extration)
 -   [Hooks (actions and filters)](#hooks-actions-and-filters)
 -   [REST API](#rest-api)
 -   [Checkout Payment Methods](#checkout-payment-methods)
@@ -9,6 +10,22 @@
 
 These documents are all dealing with extensibility in the various WooCommerce Blocks.
 
+## Imports and dependency extration
+
+The documentation in this section will use window globals in code examples, for example:
+
+```js
+const { registerCheckoutFilters } = window.wc.blocksCheckout;
+```
+
+However, if you're using `@woocommerce/dependency-extraction-webpack-plugin` for enhanced dependency management you can instead use ES module syntax:
+
+```js
+import { registerCheckoutFilters } from '@woocommerce/blocks-checkout';
+```
+
+See <https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin> for more information.
+
 ## Hooks (actions and filters)
 
 | Document                      | Description                                             |
@@ -18,12 +35,12 @@ These documents are all dealing with extensibility in the various WooCommerce Bl
 
 ## REST API
 
-| Document                                                                                       | Description                                                                        |
-|------------------------------------------------------------------------------------------------| ---------------------------------------------------------------------------------- |
-| [Exposing your data in the Store API.](./rest-api/extend-rest-api-add-data.md)                 | Explains how you can add additional data to Store API endpoints.                   |
-| [Available endpoints to extend with ExtendSchema](./rest-api/available-endpoints-to-extend.md) | A list of all available endpoints to extend.                                       |
-| [Available Formatters](./rest-api/extend-rest-api-formatters.md)                               | Available `Formatters` to format data for use in the Store API.                    |
-| [Updating the cart with the Store API](./rest-api/extend-rest-api-update-cart.md)              | Update the server-side cart following an action from the front-end.                |
+| Document                                                                                       | Description                                                         |
+| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| [Exposing your data in the Store API.](./rest-api/extend-rest-api-add-data.md)                 | Explains how you can add additional data to Store API endpoints.    |
+| [Available endpoints to extend with ExtendSchema](./rest-api/available-endpoints-to-extend.md) | A list of all available endpoints to extend.                        |
+| [Available Formatters](./rest-api/extend-rest-api-formatters.md)                               | Available `Formatters` to format data for use in the Store API.     |
+| [Updating the cart with the Store API](./rest-api/extend-rest-api-update-cart.md)              | Update the server-side cart following an action from the front-end. |
 
 ## Checkout Payment Methods
 
@@ -56,4 +73,3 @@ In addition to the reference material below, [please see the `block-checkout` pa
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/third-party-developers/extensibility/README.md)
 
 <!-- /FEEDBACK -->
-

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters/additional-cart-checkout-inner-block-types.md

@@ -37,15 +37,6 @@ In our extension we could register a filter satisfy both of these conditions lik
 
 ```tsx
 document.addEventListener( 'DOMContentLoaded', function () {
-	/**
-	 * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
-	 * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
-	 *
-	 * Replace the line below with the following import statement:
-	 * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
-	 *
-	 * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
-	 */
 	const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 	const modifyAdditionalInnerBlockTypes = (

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters/cart-line-items.md

@@ -42,15 +42,6 @@ The `cartItemClass` filter allows to change the cart item class.
 #### Basic example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyCartItemClass = ( defaultValue, extensions, args ) => {
@@ -71,15 +62,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyCartItemClass = ( defaultValue, extensions, args ) => {

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters/checkout-and-place-order-button.md

@@ -33,15 +33,6 @@ The `proceedToCheckoutButtonLabel` filter allows change the label of the "Procee
 #### Basic example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyProceedToCheckoutButtonLabel = (
@@ -64,15 +55,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyProceedToCheckoutButtonLabel = (
@@ -139,15 +121,6 @@ The `proceedToCheckoutButtonLink` filter allows change the link of the "Proceed
 #### Basic example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyProceedToCheckoutButtonLink = (
@@ -170,15 +143,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyProceedToCheckoutButtonLink = (
@@ -241,15 +205,6 @@ The `placeOrderButtonLabel` filter allows change the label of the "Place order"
 ### Code example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyPlaceOrderButtonLabel = ( defaultValue, extensions ) => {

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters/coupons.md

@@ -38,15 +38,6 @@ The current functionality is to display the coupon codes in the Cart and Checkou
 ### Code example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyCoupons = ( coupons, extensions, args ) => {
@@ -105,15 +96,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Basic example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyShowApplyCouponNotice = ( defaultValue, extensions, args ) => {
@@ -128,15 +110,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyShowApplyCouponNotice = ( defaultValue, extensions, args ) => {
@@ -190,15 +163,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Basic example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyShowRemoveCouponNotice = ( defaultValue, extensions, args ) => {
@@ -213,15 +177,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyShowRemoveCouponNotice = ( defaultValue, extensions, args ) => {

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters/order-summary-items.md

@@ -40,15 +40,6 @@ The `cartItemClass` filter allows to change the order summary item class.
 #### Basic example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyCartItemClass = ( defaultValue, extensions, args ) => {
@@ -69,15 +60,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyCartItemClass = ( defaultValue, extensions, args ) => {
@@ -145,15 +127,6 @@ The `cartItemPrice` filter allows to format the order summary item price.
 #### Basic example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyCartItemPrice = ( defaultValue, extensions, args, validation ) => {
@@ -174,15 +147,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyCartItemPrice = ( defaultValue, extensions, args, validation ) => {
@@ -249,15 +213,6 @@ The `itemName` filter allows to change the order summary item name.
 #### Basic example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyItemName = ( defaultValue, extensions, args ) => {
@@ -278,15 +233,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyItemName = ( defaultValue, extensions, args ) => {
@@ -354,15 +300,6 @@ The `subtotalPriceFormat` filter allows to format the order summary item subtota
 #### Basic example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifySubtotalPriceFormat = (
@@ -388,15 +325,6 @@ registerCheckoutFilters( 'example-extension', {
 #### Advanced example <!-- omit in toc -->
 
 ```tsx
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifySubtotalPriceFormat = (

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters/totals-footer-item.md

@@ -29,15 +29,6 @@ The `totalLabel` filter allows you to change the label of the total item in the
 ### Code example <!-- omit in toc -->
 
 ```ts
-/**
- * Optional: Import `registerCheckoutFilters` using ES module syntax if you are using
- * @woocommerce/dependency-extraction-webpack-plugin for enhanced dependency management.
- *
- * Replace the line below with the following import statement:
- * import { registerCheckoutFilters } from '@woocommerce/checkout-data';
- *
- * @see https://www.npmjs.com/package/@woocommerce/dependency-extraction-webpack-plugin
- */
 const { registerCheckoutFilters } = window.wc.blocksCheckout;
 
 const modifyTotalLabel = ( defaultValue, extensions, args ) => {

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-slot-fills.md

@@ -22,28 +22,23 @@ If you want to add a new SlotFill component, check the [Checkout - Slot Fill doc
 This Slot renders below the Checkout summary section and above the "Proceed to Checkout" button in the Cart.
 
 ```ts
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerPlugin } from '@wordpress/plugins';
-import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
- 
+const { __ } = window.wp.i18n;
+const { registerPlugin } = window.wp.plugins;
+const { ExperimentalOrderMeta } = window.wc.blocksCheckout;
+
 const render = () => {
-  return (
-    <ExperimentalOrderMeta>
-      <div class="wc-block-components-totals-wrapper">
-        {
-          __( 'Yearly recurring total ...', 'YOUR-TEXTDOMAIN' )
-        }
-      </div>
-    </ExperimentalOrderMeta>
-  );
+	return (
+		<ExperimentalOrderMeta>
+			<div class="wc-block-components-totals-wrapper">
+				{ __( 'Yearly recurring total ...', 'YOUR-TEXTDOMAIN' ) }
+			</div>
+		</ExperimentalOrderMeta>
+	);
 };
- 
+
 registerPlugin( 'slot-and-fill-examples', {
-  render,
-  scope: 'woocommerce-checkout',
+	render,
+	scope: 'woocommerce-checkout',
 } );
 ```
 
@@ -66,28 +61,21 @@ Checkout:
 This slot renders inside the shipping step of Checkout and inside the shipping options in Cart.
 
 ```ts
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerPlugin } from '@wordpress/plugins';
-import { ExperimentalOrderShippingPackages } from '@woocommerce/blocks-checkout';
- 
+const { __ } = window.wp.i18n;
+const { registerPlugin } = window.wp.plugins;
+const { ExperimentalOrderShippingPackages } = window.wc.blocksCheckout;
+
 const render = () => {
-  return (
-    <ExperimentalOrderShippingPackages>
-      <div>
-        {
-          __( 'Express Shipping', 'YOUR-TEXTDOMAIN' )
-        }  
-      </div>
-    </ExperimentalOrderShippingPackages>
-  );
+	return (
+		<ExperimentalOrderShippingPackages>
+			<div>{ __( 'Express Shipping', 'YOUR-TEXTDOMAIN' ) }</div>
+		</ExperimentalOrderShippingPackages>
+	);
 };
- 
+
 registerPlugin( 'slot-and-fill-examples', {
-  render,
-  scope: 'woocommerce-checkout',
+	render,
+	scope: 'woocommerce-checkout',
 } );
 ```
 
@@ -116,28 +104,26 @@ Checkout:
 This slot renders inside the Checkout Pickup Options block in the Checkout block. It does not render in the Cart block.
 
 ```ts
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerPlugin } from '@wordpress/plugins';
-import { ExperimentalOrderLocalPickupPackages } from '@woocommerce/blocks-checkout';
- 
+const { __ } = window.wp.i18n;
+const { registerPlugin } = window.wp.plugins;
+const { ExperimentalOrderLocalPickupPackages } = window.wc.blocksCheckout;
+
 const render = () => {
-  return (
-    <ExperimentalOrderLocalPickupPackages>
-      <div>
-        {
-          __( 'By using our convenient local pickup option, you can come to our store and pick up your order. We will send you and email when your order is ready for pickup.', 'YOUR-TEXTDOMAIN' )
-        }
-      </div>
-    </ExperimentalOrderLocalPickupPackages>
-  );
+	return (
+		<ExperimentalOrderLocalPickupPackages>
+			<div>
+				{ __(
+					'By using our convenient local pickup option, you can come to our store and pick up your order. We will send you and email when your order is ready for pickup.',
+					'YOUR-TEXTDOMAIN'
+				) }
+			</div>
+		</ExperimentalOrderLocalPickupPackages>
+	);
 };
- 
+
 registerPlugin( 'slot-and-fill-examples', {
-  render,
-  scope: 'woocommerce-checkout',
+	render,
+	scope: 'woocommerce-checkout',
 } );
 ```
 
@@ -157,28 +143,23 @@ Checkout:
 This slot renders below the `CouponCode` input.
 
 ```ts
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerPlugin } from '@wordpress/plugins';
-import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
- 
+const { __ } = window.wp.i18n;
+const { registerPlugin } = window.wp.plugins;
+const { ExperimentalDiscountsMeta } = window.wc.blocksCheckout;
+
 const render = () => {
-  return (
-    <ExperimentalDiscountsMeta>
-      <div class="wc-block-components-totals-wrapper">
-        {
-          __( 'You have 98683 coins to spend ...', 'YOUR-TEXTDOMAIN' )
-        }
-      </div>
-    </ExperimentalDiscountsMeta>
-  );
+	return (
+		<ExperimentalDiscountsMeta>
+			<div class="wc-block-components-totals-wrapper">
+				{ __( 'You have 98683 coins to spend ...', 'YOUR-TEXTDOMAIN' ) }
+			</div>
+		</ExperimentalDiscountsMeta>
+	);
 };
- 
+
 registerPlugin( 'slot-and-fill-examples', {
-  render,
-  scope: 'woocommerce-checkout',
+	render,
+	scope: 'woocommerce-checkout',
 } );
 ```
 
@@ -205,4 +186,3 @@ Checkout:
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/third-party-developers/extensibility/checkout-block/available-slot-fills.md)
 
 <!-- /FEEDBACK -->
-

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-payment-methods/filtering-payment-methods.md

@@ -36,7 +36,7 @@ import { registerPaymentMethodExtensionCallbacks } from '@woocommerce/blocks-reg
 #### `wc global`
 
 ```js
-const { registerPaymentMethodExtensionCallbacks } = wc.wcBlocksRegistry;
+const { registerPaymentMethodExtensionCallbacks } = window.wc.wcBlocksRegistry;
 ```
 
 ### Signature
@@ -174,4 +174,3 @@ If you've added your payment method correctly with the correct `supports` values
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/third-party-developers/extensibility/checkout-payment-methods/filtering-payment-methods.md)
 
 <!-- /FEEDBACK -->
-

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-payment-methods/payment-method-integration.md

@@ -49,7 +49,7 @@ import { registerExpressPaymentMethod } from '@woocommerce/blocks-registry';
 #### `wc global`
 
 ```js
-const { registerExpressPaymentMethod } = wc.wcBlocksRegistry;
+const { registerExpressPaymentMethod } = window.wc.wcBlocksRegistry;
 ```
 
 #### The registration options
@@ -136,7 +136,7 @@ import { registerPaymentMethod } from '@woocommerce/blocks-registry';
 #### `wc global`
 
 ```js
-const { registerPaymentMethod } = wc.wcBlocksRegistry;
+const { registerPaymentMethod } = window.wc.wcBlocksRegistry;
 ```
 
 #### The registration options
@@ -267,4 +267,3 @@ As an example, you can see how the Stripe extension adds it's integration in thi
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/third-party-developers/extensibility/checkout-payment-methods/payment-method-integration.md)
 
 <!-- /FEEDBACK -->
-

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/README.md

@@ -7,7 +7,7 @@ This document provides an overview of the data stores registered with `wp.data`
 The **[Cart Store (wc/store/cart)](cart.md)** is responsible for handling cart-related data and operations. To access this store using a constant, you can use:
 
 ```ts
-import { CART_STORE_KEY } from '@woocommerce/blocks-data';
+const { CART_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## [Checkout Store (wc/store/checkout)](checkout.md)
@@ -15,7 +15,7 @@ import { CART_STORE_KEY } from '@woocommerce/blocks-data';
 The **[Checkout Store (wc/store/checkout)](checkout.md)** manages the checkout process, ensuring a seamless experience for users. To access this store using a constant, you can use:
 
 ```ts
-import { CHECKOUT_STORE_KEY } from '@woocommerce/blocks-data';
+const { CHECKOUT_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## [Collections Store (wc/store/collections)](collections.md)
@@ -23,7 +23,7 @@ import { CHECKOUT_STORE_KEY } from '@woocommerce/blocks-data';
 The **[Collections Store (wc/store/collections)](collections.md)** holds data indexed by namespace, model name, and query string. To access this store using a constant, you can use:
 
 ```ts
-import { COLLECTIONS_STORE_KEY } from '@woocommerce/blocks-data';
+const { COLLECTIONS_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## [Payment Store (wc/store/payment)](payment.md)
@@ -31,7 +31,7 @@ import { COLLECTIONS_STORE_KEY } from '@woocommerce/blocks-data';
 The **[Payment Store (wc/store/payment)](payment.md)** deals with all payment-related data and transactions. To access this store using a constant, you can use:
 
 ```ts
-import { PAYMENT_STORE_KEY } from '@woocommerce/blocks-data';
+const { PAYMENT_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## [Query-State Store (wc/store/query-state)](query-state.md)
@@ -39,7 +39,7 @@ import { PAYMENT_STORE_KEY } from '@woocommerce/blocks-data';
 The **[Query-State Store (wc/store/query-state)](query-state.md)** holds arbitrary values indexed by context and key. It's often used for tracking the state of query objects for a given context. To access this store using a constant, you can use:
 
 ```ts
-import { QUERY_STATE_STORE_KEY } from '@woocommerce/blocks-data';
+const { QUERY_STATE_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## [Schema Store (wc/store/schema)](schema.md)
@@ -47,7 +47,7 @@ import { QUERY_STATE_STORE_KEY } from '@woocommerce/blocks-data';
 The **[Schema Store (wc/store/schema)](schema.md)** is primarily used for accessing routes and has more of an internal usage. To access this store using a constant, you can use:
 
 ```ts
-import { SCHEMA_STORE_KEY } from '@woocommerce/blocks-data';
+const { SCHEMA_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## [Store Notices Store (wc/store/store-notices)](store-notices.md)
@@ -55,7 +55,7 @@ import { SCHEMA_STORE_KEY } from '@woocommerce/blocks-data';
 The **[Store Notices Store (wc/store/store-notices)](store-notices.md)** is dedicated to handling various store notices and alerts. To access this store using a constant, you can use:
 
 ```ts
-import { STORE_NOTICES_STORE_KEY } from '@woocommerce/blocks-data';
+const { STORE_NOTICES_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## [Validation Store (wc/store/validation)](validation.md)
@@ -63,7 +63,7 @@ import { STORE_NOTICES_STORE_KEY } from '@woocommerce/blocks-data';
 The **[Validation Store (wc/store/validation)](validation.md)** holds data relating to validation errors, it is primarily used in the Cart and Checkout flows to ensure the Checkout doesn't continue while invalid data is present. To access this store using a constant, you can use:
 
 ```ts
-import { VALIDATION_STORE_KEY } from '@woocommerce/blocks-data';
+const { VALIDATION_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 <!-- FEEDBACK -->

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/cart.md

@@ -41,7 +41,7 @@ The Cart Store provides a collection of selectors and methods to manage and retr
 To utilize this store you will import the `CART_STORE_KEY` in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
 
 ```js
-import { CART_STORE_KEY } from '@woocommerce/block-data';
+const { CART_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## Selectors

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/checkout.md

@@ -37,7 +37,7 @@ The Checkout Store provides a collection of selectors to access and manage data
 To utilize this store you will import the `CHECKOUT_STORE_KEY` in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
 
 ```js
-import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+const { CHECKOUT_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## Selectors

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/collections.md

@@ -19,7 +19,7 @@ The Collections Store allows to retrieve product-related collections within WooC
 To utilize this store you will import the COLLECTIONS_STORE_KEY in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
 
 ```js
-import { COLLECTIONS_STORE_KEY } from '@woocommerce/block-data';
+const { COLLECTIONS_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## Actions

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/payment.md

@@ -39,7 +39,7 @@ Currently, all the actions are internal-only while we determine which ones will
 To utilize this store you will import the `PAYMENT_STORE_KEY` in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
 
 ```js
-import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
+const { PAYMENT_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## Selectors

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/query-state.md

@@ -17,7 +17,7 @@ The Query State Store offers actions to handle and manipulate query-related data
 To utilize this store you will import the `QUERY_STATE_STORE_KEY` in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
 
 ```js
-import { QUERY_STATE_STORE_KEY } from '@woocommerce/block-data';
+const { QUERY_STATE_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## Actions

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/schema.md

@@ -19,7 +19,7 @@ The Schema Store manages the routes associated with WooCommerce Blocks, enabling
 To utilize this store you will import the `SCHEMA_STORE_KEY` in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
 
 ```js
-import { SCHEMA_STORE_KEY } from '@woocommerce/block-data';
+const { SCHEMA_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## Actions

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/store-notices.md

@@ -20,7 +20,7 @@ The Store Notices Store allows to register and unregister containers for notices
 To utilize this store you will import the `STORE_NOTICES_STORE_KEY` in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
 
 ```js
-import { STORE_NOTICES_STORE_KEY } from '@woocommerce/block-data';
+const { STORE_NOTICES_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## Example

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/validation.md

@@ -45,7 +45,7 @@ When the checkout process begins, it will check if this data store has any entri
 To utilize this store you will import the `CART_STORE_KEY` in any module referencing it. Assuming `@woocommerce/block-data` is registered as an external pointing to `wc.wcBlocksData` you can import the key via:
 
 ```js
-import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+const { VALIDATION_STORE_KEY } = window.wc.wcBlocksData;
 ```
 
 ## Example

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/rest-api/extend-rest-api-update-cart.md

@@ -143,7 +143,7 @@ When the `Redeem` button gets clicked, you want to tell the server how many poin
 To do this, you will need to use `extensionCartUpdate` to tell the server you want to execute your callback, and have the new cart state loaded into the UI. The `onClick` handler of the button may look like this:
 
 ```js
-import { extensionCartUpdate } from '@woocommerce/blocks-checkout';
+const { extensionCartUpdate } = window.wc.blocksCheckout;
 
 const buttonClickHandler = () => {
 	extensionCartUpdate( {
@@ -192,4 +192,3 @@ Now that this is registered, when the button is pressed, the `cart/extensions` e
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/third-party-developers/extensibility/rest-api/extend-rest-api-update-cart.md)
 
 <!-- /FEEDBACK -->
-