Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Thomas Roberts 2023-01-06 14:53:53 +00:00 committed by GitHub
parent 3860001949
commit 5d439855e2
3 changed files with 47 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
View File

@ -10,7 +10,7 @@ import {
getShippingRatesPackageCount, getShippingRatesPackageCount,
getShippingRatesRateCount, getShippingRatesRateCount,
} from '@woocommerce/base-utils'; } from '@woocommerce/base-utils';
import { useStoreCart, useEditorContext } from '@woocommerce/base-context'; import { useStoreCart } from '@woocommerce/base-context';
import { CartResponseShippingRate } from '@woocommerce/types'; import { CartResponseShippingRate } from '@woocommerce/types';
import { ReactElement } from 'react'; import { ReactElement } from 'react';
@ -166,8 +166,6 @@ const ShippingRatesControl = ( {
}, },
context, context,
}; };
const { isEditor } = useEditorContext();
return ( return (
<LoadingMask <LoadingMask
isLoading={ isLoadingRates } isLoading={ isLoadingRates }
@ -177,26 +175,14 @@ const ShippingRatesControl = ( {
) } ) }
showSpinner={ true } showSpinner={ true }
> >
{ isEditor ? ( <ExperimentalOrderShippingPackages.Slot { ...slotFillProps } />
<ExperimentalOrderShippingPackages>
<Packages <Packages
packages={ shippingRates } packages={ shippingRates }
noResultsMessage={ noResultsMessage } noResultsMessage={ noResultsMessage }
renderOption={ renderOption } renderOption={ renderOption }
/> />
) : ( </ExperimentalOrderShippingPackages>
<>
<ExperimentalOrderShippingPackages.Slot
{ ...slotFillProps }
/>
<ExperimentalOrderShippingPackages>
<Packages
packages={ shippingRates }
noResultsMessage={ noResultsMessage }
renderOption={ renderOption }
/>
</ExperimentalOrderShippingPackages>
</>
) }
</LoadingMask> </LoadingMask>
); );
}; };

17
plugins/woocommerce-blocks/assets/js/blocks/cart/edit.js
View File

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

63
plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
View File

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