Create shared contexts handle for inner blocks (#2568)

* Create shared contexts * At to jest config
woocommerce · May 28, 2020 · 0fc3ea1 · 0fc3ea1
1 parent 8fd77fa
commit 0fc3ea1
Show file tree

Hide file tree

Showing 23 changed files with 136 additions and 155 deletions.
diff --git a/assets/js/atomic/components/product/button/index.js b/assets/js/atomic/components/product/button/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { _n, sprintf } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
 import { useStoreAddToCart } from '@woocommerce/base-hooks';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import { decodeEntities } from '@wordpress/html-entities';
 import { triggerFragmentRefresh } from '@woocommerce/base-utils';
 
@@ -25,7 +25,7 @@ const ProductButton = ( { product, className } ) => {
 		cartIsLoading,
 		addToCart,
 	} = useStoreAddToCart( id );
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	const addedToCart = Number.isFinite( cartQuantity ) && cartQuantity > 0;
 	const getButtonText = () => {
 		if ( addedToCart ) {

diff --git a/assets/js/atomic/components/product/image/index.js b/assets/js/atomic/components/product/image/index.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Fragment, useState } from '@wordpress/element';
 import classnames from 'classnames';
 import { PLACEHOLDER_IMG_SRC } from '@woocommerce/block-settings';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 
 /**
  * Internal dependencies
@@ -56,7 +56,7 @@ const ProductImage = ( {
 	saleBadgeAlign = 'right',
 } ) => {
 	const [ imageLoaded, setImageLoaded ] = useState( false );
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	const image =
 		product.images && product.images.length ? product.images[ 0 ] : null;
 

diff --git a/assets/js/atomic/components/product/price/index.js b/assets/js/atomic/components/product/price/index.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
 
 const ProductPrice = ( { className, product } ) => {
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	const prices = product.prices || {};
 	const currency = getCurrencyFromPriceResponse( prices );
 

diff --git a/assets/js/atomic/components/product/rating/index.js b/assets/js/atomic/components/product/rating/index.js
@@ -4,11 +4,11 @@
 import PropTypes from 'prop-types';
 import { __, sprintf } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 
 const ProductRating = ( { className, product } ) => {
 	const rating = parseFloat( product.average_rating );
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 
 	if ( ! Number.isFinite( rating ) || rating === 0 ) {
 		return null;

diff --git a/assets/js/atomic/components/product/sale-badge/index.js b/assets/js/atomic/components/product/sale-badge/index.js
@@ -3,11 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import Label from '@woocommerce/base-components/label';
 
 const ProductSaleBadge = ( { className, product, align } ) => {
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	const alignClass =
 		typeof align === 'string'
 			? `${ layoutStyleClassPrefix }__product-onsale--align${ align }`

diff --git a/assets/js/atomic/components/product/summary/index.js b/assets/js/atomic/components/product/summary/index.js
@@ -3,12 +3,12 @@
  */
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import Summary from '@woocommerce/base-components/summary';
 import { getSetting } from '@woocommerce/settings';
 
 const ProductSummary = ( { className, product } ) => {
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	const source = product.short_description
 		? product.short_description
 		: product.description;

diff --git a/assets/js/atomic/components/product/title/index.js b/assets/js/atomic/components/product/title/index.js
@@ -3,7 +3,7 @@
  */
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import { decodeEntities } from '@wordpress/html-entities';
 
 const ProductTitle = ( {
@@ -12,7 +12,7 @@ const ProductTitle = ( {
 	headingLevel = 2,
 	productLink = true,
 } ) => {
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	if ( ! product.name ) {
 		return null;
 	}

diff --git a/assets/js/base/components/product-list-item/index.js b/assets/js/base/components/product-list-item/index.js
@@ -3,10 +3,7 @@
  */
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {
-	useInnerBlockConfigurationContext,
-	useProductLayoutContext,
-} from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
 
 /**
@@ -16,8 +13,10 @@ import { renderProductLayout } from './utils';
 
 const ProductListItem = ( { product, attributes, instanceId } ) => {
 	const { layoutConfig } = attributes;
-	const { parentName } = useInnerBlockConfigurationContext();
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const {
+		layoutStyleClassPrefix,
+		parentName,
+	} = useInnerBlockConfigurationContext();
 	const isLoading = Object.keys( product ).length === 0;
 	const classes = classnames( `${ layoutStyleClassPrefix }__product`, {
 		'is-loading': isLoading,

diff --git a/assets/js/base/components/product-list/index.js b/assets/js/base/components/product-list/index.js
@@ -16,7 +16,7 @@ import {
 	useQueryStateByKey,
 } from '@woocommerce/base-hooks';
 import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -114,7 +114,7 @@ const ProductList = ( {
 	const { products, totalProducts, productsLoading } = useStoreProducts(
 		queryState
 	);
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	const totalQuery = extractPaginationAndSortAttributes( queryState );
 
 	// These are possible filters.

diff --git a/assets/js/base/components/product-list/no-matching-products.js b/assets/js/base/components/product-list/no-matching-products.js
@@ -2,11 +2,11 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import { Icon, search } from '@woocommerce/icons';
 
 const NoMatchingProducts = ( { resetCallback = () => {} } ) => {
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	return (
 		<div className={ `${ layoutStyleClassPrefix }__no-products` }>
 			<Icon

diff --git a/assets/js/base/components/product-list/no-products.js b/assets/js/base/components/product-list/no-products.js
@@ -2,11 +2,11 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useProductLayoutContext } from '@woocommerce/base-context';
+import { useInnerBlockConfigurationContext } from '@woocommerce/shared-context';
 import { Icon, notice } from '@woocommerce/icons';
 
 const NoProducts = () => {
-	const { layoutStyleClassPrefix } = useProductLayoutContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
 	return (
 		<div className={ `${ layoutStyleClassPrefix }__no-products` }>
 			<Icon

diff --git a/assets/js/base/context/index.js b/assets/js/base/context/index.js
@@ -1,7 +1,5 @@
 export * from './cart-checkout';
 export * from './container-width-context';
-export * from './inner-block-configuration-context';
-export * from './product-layout-context';
 export * from './query-state-context';
 export * from './store-notices-context';
 export * from './editor';
diff --git a/assets/js/base/context/inner-block-configuration-context.js b/assets/js/base/context/inner-block-configuration-context.js
diff --git a/assets/js/base/context/product-layout-context.js b/assets/js/base/context/product-layout-context.js
diff --git a/assets/js/blocks/products/all-products/block.js b/assets/js/blocks/products/all-products/block.js
@@ -4,18 +4,9 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ProductListContainer from '@woocommerce/base-components/product-list/container';
-import {
-	InnerBlockConfigurationProvider,
-	ProductLayoutContextProvider,
-} from '@woocommerce/base-context';
+import { InnerBlockConfigurationProvider } from '@woocommerce/shared-context';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
 
-const layoutContextConfig = {
-	layoutStyleClassPrefix: 'wc-block-grid',
-};
-
-const parentBlockConfig = { parentName: 'woocommerce/all-products' };
-
 /**
  * The All Products Block.
  */
@@ -41,13 +32,14 @@ class Block extends Component {
 		 * wc-block-{$this->block_name},
 		 */
 		return (
-			<InnerBlockConfigurationProvider value={ parentBlockConfig }>
-				<ProductLayoutContextProvider value={ layoutContextConfig }>
-					<ProductListContainer
-						attributes={ attributes }
-						urlParameterSuffix={ urlParameterSuffix }
-					/>
-				</ProductLayoutContextProvider>
+			<InnerBlockConfigurationProvider
+				parentName="woocommerce/all-products"
+				layoutStyleClassPrefix="wc-block-grid"
+			>
+				<ProductListContainer
+					attributes={ attributes }
+					urlParameterSuffix={ urlParameterSuffix }
+				/>
 			</InnerBlockConfigurationProvider>
 		);
 	}

diff --git a/assets/js/blocks/products/all-products/edit.js b/assets/js/blocks/products/all-products/edit.js
@@ -25,10 +25,7 @@ import PropTypes from 'prop-types';
 import { Icon, grid } from '@woocommerce/icons';
 import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
 import { HAS_PRODUCTS } from '@woocommerce/block-settings';
-import {
-	InnerBlockConfigurationProvider,
-	ProductLayoutContextProvider,
-} from '@woocommerce/base-context';
+import { InnerBlockConfigurationProvider } from '@woocommerce/shared-context';
 
 /**
  * Internal dependencies
@@ -46,12 +43,6 @@ import {
 import { getSharedContentControls, getSharedListControls } from '../edit';
 import Block from './block';
 
-const layoutContextConfig = {
-	layoutStyleClassPrefix: 'wc-block-grid',
-};
-
-const parentBlockConfig = { parentName: 'woocommerce/all-products' };
-
 /**
  * Component to handle edit mode of "All Products".
  */
@@ -281,21 +272,22 @@ class Editor extends Component {
 		}
 
 		return (
-			<InnerBlockConfigurationProvider value={ parentBlockConfig }>
-				<ProductLayoutContextProvider value={ layoutContextConfig }>
-					<div
-						className={ getBlockClassName(
-							'wc-block-all-products',
-							attributes
-						) }
-					>
-						{ this.getBlockControls() }
-						{ this.getInspectorControls() }
-						{ isEditing
-							? this.renderEditMode()
-							: this.renderViewMode() }
-					</div>
-				</ProductLayoutContextProvider>
+			<InnerBlockConfigurationProvider
+				parentName="woocommerce/all-products"
+				layoutStyleClassPrefix="wc-block-grid"
+			>
+				<div
+					className={ getBlockClassName(
+						'wc-block-all-products',
+						attributes
+					) }
+				>
+					{ this.getBlockControls() }
+					{ this.getInspectorControls() }
+					{ isEditing
+						? this.renderEditMode()
+						: this.renderViewMode() }
+				</div>
 			</InnerBlockConfigurationProvider>
 		);
 	};

diff --git a/assets/js/shared/context/index.js b/assets/js/shared/context/index.js
@@ -0,0 +1,2 @@
+export * from './inner-block-configuration-context';
+export * from './product-data-context';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './inner-block-configuration-context';
		export * from './product-data-context';