From 5d439855e2a4c989cea79847abccd9ece86d7146 Mon Sep 17 00:00:00 2001
From: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Fri, 6 Jan 2023 14:53:53 +0000
Subject: [PATCH] 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
---
.../shipping-rates-control/index.tsx | 22 ++-----
.../assets/js/blocks/cart/edit.js | 17 ++---
.../assets/js/blocks/checkout/edit.tsx | 63 ++++++++++---------
3 files changed, 47 insertions(+), 55 deletions(-)
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
index f8c1bb001eb..d6ba746a8e0 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
+++ b/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 (
- { isEditor ? (
+
+
- ) : (
- <>
-
-
-
-
- >
- ) }
+
);
};
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/cart/edit.js
index 7d70a0805d2..fceba16508d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/edit.js
+++ b/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,13 +87,15 @@ export const Edit = ( { className, attributes, setAttributes, clientId } ) => {
hasDarkControls,
} }
>
-
-
-
+
+
+
+
+
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
index d61bce1714d..0dfe422e172 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
+++ b/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,38 +148,40 @@ export const Edit = ( {
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
);