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

Avoid usage of `@wordpress/components` inside base components (https://github.com/woocommerce/woocommerce-blocks/pull/7996) 

* Use local package rather than WP package in base components

* Missing type on imports

* Move hasSpecingStyleSupport inline to avoid polluting utils with the block-editor external

* Use local wordpress-block-editor import to avoid the external

* Add readme to base directory to warn against using editor/components externals

* Check functions exist

* Revert "Check functions exist"

This reverts commit ce95800b79ddb48369cd22d2b7854384db0d8891.

* Revert wordpress-block-editor import

* Add todos to the hooks that need refactoring

* Update assets/js/atomic/blocks/product-elements/button/supports.ts

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Update assets/js/atomic/blocks/product-elements/image/supports.ts

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Update assets/js/atomic/blocks/product-elements/rating/support.ts

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Update assets/js/atomic/blocks/product-elements/sale-badge/support.ts

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Update assets/js/atomic/blocks/product-elements/title/index.ts

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Reference issue

* Update assets/js/base/README.MD

Co-authored-by: kmanijak <karol.manijak@automattic.com>

* spacing

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
Co-authored-by: kmanijak <karol.manijak@automattic.com>
This commit is contained in:
Mike Jolley 2023-01-11 17:12:06 +00:00 committed by GitHub
parent 886786eee1
commit bb1504dd84
22 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/supports.ts
View File

@ -1,12 +1,9 @@
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
* External dependencies
*/
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
/**
* Internal dependencies
*/
import { hasSpacingStyleSupport } from '../../../../utils/global-style';
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
export const supports = {
...( isFeaturePluginBuild() && {
@ -20,7 +17,7 @@ export const supports = {
radius: true,
__experimentalSkipSerialization: true,
},
...( hasSpacingStyleSupport() && {
...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
spacing: {
margin: true,
padding: true,

5
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/supports.ts
View File

@ -1,8 +1,9 @@
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
* External dependencies
*/
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
import { hasSpacingStyleSupport } from '@woocommerce/utils';
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
/**
* Internal dependencies
@ -19,7 +20,7 @@ export const supports = {
fontSize: true,
__experimentalSkipSerialization: true,
},
...( hasSpacingStyleSupport() && {
...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
spacing: {
margin: true,
__experimentalSkipSerialization: true,

9
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/support.ts
View File

@ -1,12 +1,9 @@
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
* External dependencies
*/
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
/**
* Internal dependencies
*/
import { hasSpacingStyleSupport } from '../../../../utils/global-style';
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
export const supports = {
...( isFeaturePluginBuild() && {
@ -20,7 +17,7 @@ export const supports = {
fontSize: true,
__experimentalSkipSerialization: true,
},
...( hasSpacingStyleSupport() && {
...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
spacing: {
margin: true,
__experimentalSkipSerialization: true,

9
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/support.ts
View File

@ -1,12 +1,9 @@
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
* External dependencies
*/
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
/**
* Internal dependencies
*/
import { hasSpacingStyleSupport } from '../../../../utils/global-style';
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
export const supports = {
html: false,
@ -27,7 +24,7 @@ export const supports = {
width: true,
__experimentalSkipSerialization: true,
},
...( hasSpacingStyleSupport() && {
...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
spacing: {
padding: true,
__experimentalSkipSerialization: true,

6
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/index.ts
View File

@ -1,9 +1,11 @@
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
* External dependencies
*/
import { registerBlockType } from '@wordpress/blocks';
import type { BlockConfiguration } from '@wordpress/blocks';
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
/**
* Internal dependencies
@ -17,7 +19,6 @@ import {
BLOCK_DESCRIPTION as description,
} from './constants';
import { Save } from './save';
import { hasSpacingStyleSupport } from '../../../../utils/global-style';
const blockConfig: BlockConfiguration = {
...sharedConfig,
@ -45,7 +46,8 @@ const blockConfig: BlockConfiguration = {
gradients: true,
__experimentalSkipSerialization: true,
},
...( hasSpacingStyleSupport() && {
...( typeof __experimentalGetSpacingClassesAndStyles ===
'function' && {
spacing: {
margin: true,
__experimentalSkipSerialization: true,

11
plugins/woocommerce-blocks/assets/js/base/README.MD Normal file
View File

@ -0,0 +1,11 @@
# Base Components/Context/Hooks
Base components are designed to be used on the frontend of a store. Due to this, we need to avoid using heavy WordPress externals as dependencies (wp-components, wp-block-editor, etc). To get around this, import from a local package instead.
e.g. Instead of importing from `@wordpress/components`, use:
```js
import { Component } from 'wordpress-components';
```
Check the built `*.assets.php` files to ensure extra dependencies aren't being added to the build.

2
plugins/woocommerce-blocks/assets/js/base/components/drawer/index.tsx
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Modal } from '@wordpress/components';
import { Modal } from 'wordpress-components';
import { useDebounce } from 'use-debounce';
import classNames from 'classnames';

2
plugins/woocommerce-blocks/assets/js/base/hooks/use-border-props.ts
View File

@ -15,6 +15,8 @@ type WithStyle = {
style: Record< string, unknown >;
};
// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
// @see https://github.com/woocommerce/woocommerce-blocks/issues/8071
export const useBorderProps = (
attributes: unknown
): WithStyle & WithClass => {

2
plugins/woocommerce-blocks/assets/js/base/hooks/use-color-props.ts
View File

@ -15,6 +15,8 @@ type WithStyle = {
style: Record< string, unknown >;
};
// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
// @see https://github.com/woocommerce/woocommerce-blocks/issues/8071
export const useColorProps = ( attributes: unknown ): WithStyle & WithClass => {
if ( ! isFeaturePluginBuild() ) {
return {

5
plugins/woocommerce-blocks/assets/js/base/hooks/use-spacing-props.ts
View File

@ -5,15 +5,16 @@
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
import { isObject } from '@woocommerce/types';
import { hasSpacingStyleSupport } from '@woocommerce/utils';
import { parseStyle } from '@woocommerce/base-utils';
type WithStyle = {
style: Record< string, unknown >;
};
// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
// @see https://github.com/woocommerce/woocommerce-blocks/issues/8071
export const useSpacingProps = ( attributes: unknown ): WithStyle => {
if ( ! isFeaturePluginBuild() || ! hasSpacingStyleSupport() ) {
if ( ! isFeaturePluginBuild() ) {
return {
style: {},
};

2
plugins/woocommerce-blocks/assets/js/types/type-defs/blocks.ts
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import type { BlockEditProps, BlockInstance } from '@wordpress/blocks';
import { LazyExoticComponent } from 'react';
import type { LazyExoticComponent } from 'react';
export type EditorBlock< T > = BlockInstance< T > & BlockEditProps< T >;

2
plugins/woocommerce-blocks/assets/js/types/type-defs/cart-response.ts
View File

@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
import { CurrencyResponse } from './currency';
import type { CurrencyResponse } from './currency';
import type { CartItem } from './cart';
import type { ProductResponseItem } from './product-response';

2
plugins/woocommerce-blocks/assets/js/types/type-defs/cart.ts
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { CurrencyCode } from '@woocommerce/types';
import type { CurrencyCode } from '@woocommerce/types';
/**
* Internal dependencies

2
plugins/woocommerce-blocks/assets/js/types/type-defs/checkout.ts
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { ShippingAddress, BillingAddress } from '@woocommerce/settings';
import type { ShippingAddress, BillingAddress } from '@woocommerce/settings';
/**
* Internal dependencies

2
plugins/woocommerce-blocks/assets/js/types/type-defs/hooks.ts
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { ProductResponseItem } from '@woocommerce/types';
import type { ProductResponseItem } from '@woocommerce/types';
/**
* Internal dependencies

2
plugins/woocommerce-blocks/assets/js/types/type-defs/payment-method-interface.ts
View File

@ -5,7 +5,7 @@
import type PaymentMethodLabel from '@woocommerce/base-components/cart-checkout/payment-method-label';
import type PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
import type LoadingMask from '@woocommerce/base-components/loading-mask';
import { ValidationInputError } from '@woocommerce/blocks-checkout';
import type { ValidationInputError } from '@woocommerce/blocks-checkout';
/**
* Internal dependencies

2
plugins/woocommerce-blocks/assets/js/types/type-defs/payments.ts
View File

@ -7,7 +7,7 @@ import type { ReactNode } from 'react';
* Internal dependencies
*/
import type { CartTotals, Cart } from './cart';
import {
import type {
CartResponseBillingAddress,
CartResponseShippingAddress,
} from './cart-response';

2
plugins/woocommerce-blocks/assets/js/types/type-defs/product-response.ts
View File

@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
import { CurrencyResponse } from './currency';
import type { CurrencyResponse } from './currency';
export interface ProductResponseItemPrices extends CurrencyResponse {
price: string;

2
plugins/woocommerce-blocks/assets/js/types/type-guards/attributes.ts
View File

@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
import { AttributeTerm, AttributeQuery } from '../type-defs';
import type { AttributeTerm, AttributeQuery } from '../type-defs';
import { objectHasProp } from './object';
export const isAttributeTerm = ( term: unknown ): term is AttributeTerm => {

2
plugins/woocommerce-blocks/assets/js/types/type-guards/cart-response-totals.ts
View File

@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
import { CartResponseTotals } from '../type-defs';
import type { CartResponseTotals } from '../type-defs';
import { isObject } from './object';
// It is the only way to create a type that contains all the object's keys and gets type-checking.

8
plugins/woocommerce-blocks/assets/js/utils/global-style.js
View File

@ -1,8 +0,0 @@
/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
* External dependencies
*/
import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
export const hasSpacingStyleSupport = () =>
typeof __experimentalGetSpacingClassesAndStyles === 'function';

1
plugins/woocommerce-blocks/assets/js/utils/index.ts
View File

@ -1,7 +1,6 @@
export * from './attributes-query';
export * from './attributes';
export * from './filters';
export * from './global-style';
export * from './notices';
export * from './products';
export * from './shared-attributes';