Ensure Slot/Fills render in editor (#8111)

* Wrap Checkout Edit in SlotFillProvider Required to render Slot/Fills in the editor * Remove editor check when rendering ExperimentalOrderShippingPackages We want to render it in the editor and on the front end, so checking is no longer necessary * Wrap Cart in SlotFillProvider when in editor This is so Slot/Fills can be rendered in the preview
woocommerce · Jan 6, 2023 · 3600165 · 3600165
1 parent d682079
commit 3600165
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 55 deletions.
diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx b/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
@@ -10,7 +10,7 @@ import {
 	getShippingRatesPackageCount,
 	getShippingRatesRateCount,
 } from '@woocommerce/base-utils';
-import { useStoreCart, useEditorContext } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context';
 import { CartResponseShippingRate } from '@woocommerce/types';
 import { ReactElement } from 'react';
 
@@ -166,8 +166,6 @@ const ShippingRatesControl = ( {
 		},
 		context,
 	};
-	const { isEditor } = useEditorContext();
-
 	return (
 		<LoadingMask
 			isLoading={ isLoadingRates }
@@ -177,26 +175,14 @@ const ShippingRatesControl = ( {
 			) }
 			showSpinner={ true }
 		>
-			{ isEditor ? (
+			<ExperimentalOrderShippingPackages.Slot { ...slotFillProps } />
+			<ExperimentalOrderShippingPackages>
 				<Packages
 					packages={ shippingRates }
 					noResultsMessage={ noResultsMessage }
 					renderOption={ renderOption }
 				/>
-			) : (
-				<>
-					<ExperimentalOrderShippingPackages.Slot
-						{ ...slotFillProps }
-					/>
-					<ExperimentalOrderShippingPackages>
-						<Packages
-							packages={ shippingRates }
-							noResultsMessage={ noResultsMessage }
-							renderOption={ renderOption }
-						/>
-					</ExperimentalOrderShippingPackages>
-				</>
-			) }
+			</ExperimentalOrderShippingPackages>
 		</LoadingMask>
 	);
 };

diff --git a/assets/js/blocks/cart/edit.js b/assets/js/blocks/cart/edit.js
@@ -12,6 +12,7 @@ import {
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import { EditorProvider, CartProvider } from '@woocommerce/base-context';
 import { previewCart } from '@woocommerce/resource-previews';
+import { SlotFillProvider } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
@@ -86,13 +87,15 @@ export const Edit = ( { className, attributes, setAttributes, clientId } ) => {
 							hasDarkControls,
 						} }
 					>
-						<CartProvider>
-							<InnerBlocks
-								allowedBlocks={ ALLOWED_BLOCKS }
-								template={ defaultTemplate }
-								templateLock={ false }
-							/>
-						</CartProvider>
+						<SlotFillProvider>
+							<CartProvider>
+								<InnerBlocks
+									allowedBlocks={ ALLOWED_BLOCKS }
+									template={ defaultTemplate }
+									templateLock={ false }
+								/>
+							</CartProvider>
+						</SlotFillProvider>
 					</CartBlockContext.Provider>
 				</EditorProvider>
 			</BlockErrorBoundary>

diff --git a/assets/js/blocks/checkout/edit.tsx b/assets/js/blocks/checkout/edit.tsx
@@ -19,6 +19,7 @@ import {
 	ToggleControl,
 	CheckboxControl,
 } from '@wordpress/components';
+import { SlotFillProvider } from '@woocommerce/blocks-checkout';
 import type { TemplateArray } from '@wordpress/blocks';
 import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
 
@@ -147,38 +148,40 @@ export const Edit = ( {
 			<EditorProvider
 				previewData={ { previewCart, previewSavedPaymentMethods } }
 			>
-				<CheckoutProvider>
-					<SidebarLayout
-						className={ classnames( 'wc-block-checkout', {
-							'has-dark-controls': attributes.hasDarkControls,
-						} ) }
-					>
-						<CheckoutBlockControlsContext.Provider
-							value={ { addressFieldControls } }
+				<SlotFillProvider>
+					<CheckoutProvider>
+						<SidebarLayout
+							className={ classnames( 'wc-block-checkout', {
+								'has-dark-controls': attributes.hasDarkControls,
+							} ) }
 						>
-							<CheckoutBlockContext.Provider
-								value={ {
-									showCompanyField,
-									requireCompanyField,
-									showApartmentField,
-									showPhoneField,
-									requirePhoneField,
-									showOrderNotes,
-									showPolicyLinks,
-									showReturnToCart,
-									cartPageId,
-									showRateAfterTaxName,
-								} }
+							<CheckoutBlockControlsContext.Provider
+								value={ { addressFieldControls } }
 							>
-								<InnerBlocks
-									allowedBlocks={ ALLOWED_BLOCKS }
-									template={ defaultTemplate }
-									templateLock="insert"
-								/>
-							</CheckoutBlockContext.Provider>
-						</CheckoutBlockControlsContext.Provider>
-					</SidebarLayout>
-				</CheckoutProvider>
+								<CheckoutBlockContext.Provider
+									value={ {
+										showCompanyField,
+										requireCompanyField,
+										showApartmentField,
+										showPhoneField,
+										requirePhoneField,
+										showOrderNotes,
+										showPolicyLinks,
+										showReturnToCart,
+										cartPageId,
+										showRateAfterTaxName,
+									} }
+								>
+									<InnerBlocks
+										allowedBlocks={ ALLOWED_BLOCKS }
+										template={ defaultTemplate }
+										templateLock="insert"
+									/>
+								</CheckoutBlockContext.Provider>
+							</CheckoutBlockControlsContext.Provider>
+						</SidebarLayout>
+					</CheckoutProvider>
+				</SlotFillProvider>
 			</EditorProvider>
 		</div>
 	);