Ensure Slot/Fills render in editor (https://github.com/woocommerce/woocommerce-blocks/pull/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

plugins/woocommerce-blocks/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,17 +175,7 @@ const ShippingRatesControl = ( {
 			) }
 			showSpinner={ true }
 		>
-			{ isEditor ? (
-				<Packages
-					packages={ shippingRates }
-					noResultsMessage={ noResultsMessage }
-					renderOption={ renderOption }
-				/>
-			) : (
-				<>
-					<ExperimentalOrderShippingPackages.Slot
-						{ ...slotFillProps }
-					/>
+			<ExperimentalOrderShippingPackages.Slot { ...slotFillProps } />
 			<ExperimentalOrderShippingPackages>
 				<Packages
 					packages={ shippingRates }
@@ -195,8 +183,6 @@ const ShippingRatesControl = ( {
 					renderOption={ renderOption }
 				/>
 			</ExperimentalOrderShippingPackages>
-				</>
-			) }
 		</LoadingMask>
 	);
 };

plugins/woocommerce-blocks/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,6 +87,7 @@ export const Edit = ( { className, attributes, setAttributes, clientId } ) => {
 							hasDarkControls,
 						} }
 					>
+						<SlotFillProvider>
 							<CartProvider>
 								<InnerBlocks
 									allowedBlocks={ ALLOWED_BLOCKS }
@@ -93,6 +95,7 @@ export const Edit = ( { className, attributes, setAttributes, clientId } ) => {
 									templateLock={ false }
 								/>
 							</CartProvider>
+						</SlotFillProvider>
 					</CartBlockContext.Provider>
 				</EditorProvider>
 			</BlockErrorBoundary>

plugins/woocommerce-blocks/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,6 +148,7 @@ export const Edit = ( {
 			<EditorProvider
 				previewData={ { previewCart, previewSavedPaymentMethods } }
 			>
+				<SlotFillProvider>
 					<CheckoutProvider>
 						<SidebarLayout
 							className={ classnames( 'wc-block-checkout', {
@@ -179,6 +181,7 @@ export const Edit = ( {
 							</CheckoutBlockControlsContext.Provider>
 						</SidebarLayout>
 					</CheckoutProvider>
+				</SlotFillProvider>
 			</EditorProvider>
 		</div>
 	);