From ef08d625f8a6c179c1725f7604b3dc37b0bffcce Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Thu, 30 Mar 2023 16:50:21 +0530 Subject: [PATCH 1/7] Add color, typography, and spacing support to Product SKU block This commit introduces a new file `supports.ts` for the Product SKU block in the WooCommerce Blocks plugin, which adds color, typography, and spacing support. The following configuration has been added: 1. In `assets/js/atomic/blocks/product-elements/sku/supports.ts`, a new `supports` object is created, which extends the shared configuration and adds support for the following properties: - `text` and `background` color - `fontSize`, `lineHeight`, `__experimentalFontWeight`, `__experimentalFontFamily`, `__experimentalFontStyle`, `__experimentalTextTransform`, `__experimentalTextDecoration`, and `__experimentalLetterSpacing` for typography - `margin` and `padding` for spacing --- .../blocks/product-elements/sku/block.tsx | 6 ++- .../blocks/product-elements/sku/edit.tsx | 7 +++- .../blocks/product-elements/sku/index.tsx | 2 + .../blocks/product-elements/sku/supports.ts | 37 +++++++++++++++++++ src/BlockTypes/ProductSKU.php | 10 ++++- 5 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 assets/js/atomic/blocks/product-elements/sku/supports.ts diff --git a/assets/js/atomic/blocks/product-elements/sku/block.tsx b/assets/js/atomic/blocks/product-elements/sku/block.tsx index 33fad6fc911..77b60366026 100644 --- a/assets/js/atomic/blocks/product-elements/sku/block.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/block.tsx @@ -22,15 +22,18 @@ const Preview = ( { parentClassName, sku, className, + style, }: { parentClassName: string; sku: string; className?: string | undefined; + style?: React.CSSProperties | undefined; } ) => (
{ __( 'SKU:', 'woo-gutenberg-products-block' ) }{ ' ' } { sku } @@ -38,7 +41,7 @@ const Preview = ( { ); const Block = ( props: Props ): JSX.Element | null => { - const { className } = props; + const { className, style } = props; const { parentClassName } = useInnerBlockLayoutContext(); const { product } = useProductDataContext(); const sku = product.sku; @@ -62,6 +65,7 @@ const Block = ( props: Props ): JSX.Element | null => { className={ className } parentClassName={ parentClassName } sku={ sku } + style={ style } /> ); }; diff --git a/assets/js/atomic/blocks/product-elements/sku/edit.tsx b/assets/js/atomic/blocks/product-elements/sku/edit.tsx index db1e0ae340e..6d92db6da84 100644 --- a/assets/js/atomic/blocks/product-elements/sku/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/edit.tsx @@ -33,7 +33,12 @@ const Edit = ( { return (
- +
); }; diff --git a/assets/js/atomic/blocks/product-elements/sku/index.tsx b/assets/js/atomic/blocks/product-elements/sku/index.tsx index 46f314ede8e..a623e6db717 100644 --- a/assets/js/atomic/blocks/product-elements/sku/index.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/index.tsx @@ -10,6 +10,7 @@ import type { BlockConfiguration } from '@wordpress/blocks'; import sharedConfig from '../shared/config'; import attributes from './attributes'; import edit from './edit'; +import { supports } from './supports'; import { BLOCK_TITLE as title, BLOCK_ICON as icon, @@ -33,6 +34,7 @@ const blockConfig: BlockConfiguration = { 'woocommerce/product-meta', ], edit, + supports, }; registerBlockType( 'woocommerce/product-sku', { ...blockConfig } ); diff --git a/assets/js/atomic/blocks/product-elements/sku/supports.ts b/assets/js/atomic/blocks/product-elements/sku/supports.ts new file mode 100644 index 00000000000..0390cd459d8 --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/sku/supports.ts @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +import { isFeaturePluginBuild } from '@woocommerce/block-settings'; +import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import sharedConfig from '../shared/config'; + +export const supports = { + ...sharedConfig.supports, + ...( isFeaturePluginBuild() && { + color: { + text: true, + background: true, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontWeight: true, + __experimentalFontFamily: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalLetterSpacing: true, + }, + __experimentalSelector: '.wc-block-components-product-sku', + } ), + ...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && { + spacing: { + margin: true, + padding: true, + }, + } ), +}; diff --git a/src/BlockTypes/ProductSKU.php b/src/BlockTypes/ProductSKU.php index b22f0d05609..b3d82c9dfa3 100644 --- a/src/BlockTypes/ProductSKU.php +++ b/src/BlockTypes/ProductSKU.php @@ -1,6 +1,8 @@ + '
SKU: - %s + %3$s
', + esc_attr( $styles_and_classes['classes'] ), + esc_attr( $styles_and_classes['styles'] ?? '' ), $product_sku ); } From 157cba81a7d05c5f5b2387d93a513571958d71a9 Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Thu, 30 Mar 2023 18:33:08 +0530 Subject: [PATCH 2/7] Add color, typography, and spacing support for Product SKU block in All Products block This commit extends the support for color, typography, and spacing to the Product SKU block when used within the All Products block. The following changes have been made: 1. In `assets/js/atomic/blocks/product-elements/sku/block.tsx`, the `useColorProps`, `useSpacingProps`, and `useTypographyProps` hooks are imported and used to add the appropriate className and style properties to the rendered SKU element. 2. In `assets/js/atomic/blocks/product-elements/sku/edit.tsx`, the `style` property is separated from `useBlockProps()` and used directly on the `div` element for the SKU block. --- .../blocks/product-elements/sku/block.tsx | 22 ++++++++++++++++--- .../blocks/product-elements/sku/edit.tsx | 15 +++++-------- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/sku/block.tsx b/assets/js/atomic/blocks/product-elements/sku/block.tsx index 77b60366026..da6053b8e28 100644 --- a/assets/js/atomic/blocks/product-elements/sku/block.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/block.tsx @@ -9,6 +9,11 @@ import { } from '@woocommerce/shared-context'; import { withProductDataContext } from '@woocommerce/shared-hocs'; import type { HTMLAttributes } from 'react'; +import { + useColorProps, + useSpacingProps, + useTypographyProps, +} from '@woocommerce/base-hooks'; /** * Internal dependencies @@ -41,11 +46,15 @@ const Preview = ( { ); const Block = ( props: Props ): JSX.Element | null => { - const { className, style } = props; + const { className } = props; const { parentClassName } = useInnerBlockLayoutContext(); const { product } = useProductDataContext(); const sku = product.sku; + const colorProps = useColorProps( props ); + const typographyProps = useTypographyProps( props ); + const spacingProps = useSpacingProps( props ); + if ( props.isDescendentOfSingleProductTemplate ) { return ( { return ( ); }; diff --git a/assets/js/atomic/blocks/product-elements/sku/edit.tsx b/assets/js/atomic/blocks/product-elements/sku/edit.tsx index 6d92db6da84..2595d1ed414 100644 --- a/assets/js/atomic/blocks/product-elements/sku/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/edit.tsx @@ -18,7 +18,7 @@ const Edit = ( { setAttributes, context, }: BlockEditProps< Attributes > & { context: Context } ): JSX.Element => { - const blockProps = useBlockProps(); + const { style, ...blockProps } = useBlockProps(); const blockAttrs = { ...attributes, ...context, @@ -31,15 +31,12 @@ const Edit = ( { ); return ( -
+ <> - -
+
+ +
+ ); }; From 8db4da514621141d1b85ac0a1eaaecd66c0c4f15 Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Fri, 31 Mar 2023 13:03:26 +0530 Subject: [PATCH 3/7] Add server-side rendering class for Product SKU Gutenberg block This commit adds the ".wp-block-woocommerce-product-sku" class to the Product SKU Gutenberg block for server-side rendering purposes. The inclusion of this class ensures consistent styling between the editor and the front-end view of the block, providing a seamless experience for users. The class name is generated based on the Gutenberg block prefix "wp-block", the namespace "woocommerce", and the block name "product-sku", creating a unique and identifiable class for the block. This class enables developers to target the block specifically in both the editor and front-end styles, maintaining the integrity of the block's appearance and functionality across different environments. By adding this class to the server-side rendered version of the block, we ensure a unified and coherent styling experience throughout the block's usage. --- src/BlockTypes/ProductSKU.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BlockTypes/ProductSKU.php b/src/BlockTypes/ProductSKU.php index b3d82c9dfa3..bba01cbd0ac 100644 --- a/src/BlockTypes/ProductSKU.php +++ b/src/BlockTypes/ProductSKU.php @@ -70,7 +70,7 @@ protected function render( $attributes, $content, $block ) { $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); return sprintf( - '
+ '
SKU: %3$s
', From a007701c91864dfc31a85a71a42442b82c552fb2 Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Fri, 31 Mar 2023 16:17:27 +0530 Subject: [PATCH 4/7] Fix minor issues --- .../blocks/product-elements/sku/attributes.ts | 4 +++ .../blocks/product-elements/sku/block.tsx | 31 +++++++++++++------ .../blocks/product-elements/sku/edit.tsx | 23 ++++++++++++-- .../blocks/product-elements/sku/types.ts | 1 + assets/js/blocks/products/base-utils.js | 5 +++ 5 files changed, 52 insertions(+), 12 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/sku/attributes.ts b/assets/js/atomic/blocks/product-elements/sku/attributes.ts index 80b6226b1dd..d70b39f1a99 100644 --- a/assets/js/atomic/blocks/product-elements/sku/attributes.ts +++ b/assets/js/atomic/blocks/product-elements/sku/attributes.ts @@ -16,6 +16,10 @@ export const blockAttributes: BlockAttributes = { type: 'boolean', default: false, }, + isDescendantOfAllProducts: { + type: 'boolean', + default: false, + }, showProductSelector: { type: 'boolean', default: false, diff --git a/assets/js/atomic/blocks/product-elements/sku/block.tsx b/assets/js/atomic/blocks/product-elements/sku/block.tsx index da6053b8e28..a2b27ddc215 100644 --- a/assets/js/atomic/blocks/product-elements/sku/block.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/block.tsx @@ -35,7 +35,7 @@ const Preview = ( { style?: React.CSSProperties | undefined; } ) => (
{ return ( ); }; diff --git a/assets/js/atomic/blocks/product-elements/sku/edit.tsx b/assets/js/atomic/blocks/product-elements/sku/edit.tsx index 2595d1ed414..32aa1b9fe02 100644 --- a/assets/js/atomic/blocks/product-elements/sku/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/edit.tsx @@ -18,7 +18,10 @@ const Edit = ( { setAttributes, context, }: BlockEditProps< Attributes > & { context: Context } ): JSX.Element => { - const { style, ...blockProps } = useBlockProps(); + const { style, ...blockProps } = useBlockProps( { + className: + 'wc-block-components-product-sku wp-block-woocommerce-product-sku', + } ); const blockAttrs = { ...attributes, ...context, @@ -30,10 +33,26 @@ const Edit = ( { [ setAttributes, isDescendentOfQueryLoop ] ); + const textTransformStyle = { + textTransform: style?.textTransform || 'uppercase', + }; + return ( <> -
+
diff --git a/assets/js/atomic/blocks/product-elements/sku/types.ts b/assets/js/atomic/blocks/product-elements/sku/types.ts index 9651b739436..e4429dcd9c7 100644 --- a/assets/js/atomic/blocks/product-elements/sku/types.ts +++ b/assets/js/atomic/blocks/product-elements/sku/types.ts @@ -3,4 +3,5 @@ export interface Attributes { isDescendentOfQueryLoop: boolean; isDescendentOfSingleProductTemplate: boolean; showProductSelector: boolean; + isDescendantOfAllProducts: boolean; } diff --git a/assets/js/blocks/products/base-utils.js b/assets/js/blocks/products/base-utils.js index fb334f9338e..30e28de693d 100644 --- a/assets/js/blocks/products/base-utils.js +++ b/assets/js/blocks/products/base-utils.js @@ -50,6 +50,11 @@ export const getProductLayoutConfig = ( innerBlocks ) => { block.attributes?.width, } ), } ), + /** + * For product elements, special handing is required if product + * elements are used in the "All Products" block. + */ + isDescendantOfAllProducts: true, }, ]; } ); From 35f82f667ab32de1982eab2865e702433838c14f Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Tue, 4 Apr 2023 11:59:19 +0530 Subject: [PATCH 5/7] Gate only experimental features behind isFeaturePluginBuild flag This commit refactors the Product SKU block supports to enable color, typography, and spacing features for all builds, while keeping experimental features specific to the feature plugin build. It also adds necessary lint and TypeScript error handling for the experimental spacing API. --- .../blocks/product-elements/sku/supports.ts | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/sku/supports.ts b/assets/js/atomic/blocks/product-elements/sku/supports.ts index 0390cd459d8..33e55614196 100644 --- a/assets/js/atomic/blocks/product-elements/sku/supports.ts +++ b/assets/js/atomic/blocks/product-elements/sku/supports.ts @@ -2,7 +2,11 @@ * External dependencies */ import { isFeaturePluginBuild } from '@woocommerce/block-settings'; -import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor'; +import { + // @ts-expect-error Using experimental API for spacing + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalGetSpacingClassesAndStyles, +} from '@wordpress/block-editor'; /** * Internal dependencies @@ -11,23 +15,22 @@ import sharedConfig from '../shared/config'; export const supports = { ...sharedConfig.supports, - ...( isFeaturePluginBuild() && { - color: { - text: true, - background: true, - }, - typography: { - fontSize: true, - lineHeight: true, + color: { + text: true, + background: true, + }, + typography: { + fontSize: true, + lineHeight: true, + ...( isFeaturePluginBuild() && { __experimentalFontWeight: true, __experimentalFontFamily: true, __experimentalFontStyle: true, __experimentalTextTransform: true, __experimentalTextDecoration: true, __experimentalLetterSpacing: true, - }, - __experimentalSelector: '.wc-block-components-product-sku', - } ), + } ), + }, ...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && { spacing: { margin: true, From 705599d801ca1d1b07a01435bbe6d0d4e173d005 Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Tue, 4 Apr 2023 12:27:58 +0530 Subject: [PATCH 6/7] Add overflow-wrap to Product SKU block and update comment This commit adds the overflow-wrap property to the Product SKU block styles to handle long SKU values gracefully. It also updates the comment for the experimental spacing API to better reflect the usage check. --- assets/js/atomic/blocks/product-elements/sku/style.scss | 1 + assets/js/atomic/blocks/product-elements/sku/supports.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/js/atomic/blocks/product-elements/sku/style.scss b/assets/js/atomic/blocks/product-elements/sku/style.scss index 4cc0eb991fb..d32bc9ca521 100644 --- a/assets/js/atomic/blocks/product-elements/sku/style.scss +++ b/assets/js/atomic/blocks/product-elements/sku/style.scss @@ -2,4 +2,5 @@ display: block; text-transform: uppercase; @include font-size(small); + overflow-wrap: break-word; } diff --git a/assets/js/atomic/blocks/product-elements/sku/supports.ts b/assets/js/atomic/blocks/product-elements/sku/supports.ts index 33e55614196..6c6f9120303 100644 --- a/assets/js/atomic/blocks/product-elements/sku/supports.ts +++ b/assets/js/atomic/blocks/product-elements/sku/supports.ts @@ -3,7 +3,7 @@ */ import { isFeaturePluginBuild } from '@woocommerce/block-settings'; import { - // @ts-expect-error Using experimental API for spacing + // @ts-expect-error We check if this exists before using it. // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalGetSpacingClassesAndStyles, } from '@wordpress/block-editor'; From 9e10039b4471566084ed3b99b808db92e3b713eb Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Tue, 4 Apr 2023 12:49:17 +0530 Subject: [PATCH 7/7] Refactor Product SKU block classname and style handling This commit refactors the Product SKU block classname and style handling. It combines classnames for better readability and removes the hardcoded textTransform style in favor of default styles. This also fix the issue where textTransform style was not working as expected. --- assets/js/atomic/blocks/product-elements/sku/block.tsx | 5 +---- assets/js/atomic/blocks/product-elements/sku/edit.tsx | 8 +------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/sku/block.tsx b/assets/js/atomic/blocks/product-elements/sku/block.tsx index a2b27ddc215..6386d201c79 100644 --- a/assets/js/atomic/blocks/product-elements/sku/block.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/block.tsx @@ -77,7 +77,7 @@ const Block = ( props: Props ): JSX.Element | null => { { ...( props.isDescendantOfAllProducts && { className: classnames( className, - 'wp-block-woocommerce-product-sku', + 'wc-block-components-product-sku wp-block-woocommerce-product-sku', { [ colorProps.className ]: colorProps.className, [ typographyProps.className ]: @@ -88,9 +88,6 @@ const Block = ( props: Props ): JSX.Element | null => { ...colorProps.style, ...typographyProps.style, ...spacingProps.style, - // Default value of textTransform is uppercase. - textTransform: - typographyProps.style?.textTransform || 'uppercase', }, } ) } /> diff --git a/assets/js/atomic/blocks/product-elements/sku/edit.tsx b/assets/js/atomic/blocks/product-elements/sku/edit.tsx index 32aa1b9fe02..34b60f74397 100644 --- a/assets/js/atomic/blocks/product-elements/sku/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/sku/edit.tsx @@ -33,10 +33,6 @@ const Edit = ( { [ setAttributes, isDescendentOfQueryLoop ] ); - const textTransformStyle = { - textTransform: style?.textTransform || 'uppercase', - }; - return ( <> @@ -48,9 +44,7 @@ const Edit = ( { * useColors, useTypography, and useSpacing hooks. */ style={ - attributes.isDescendantOfAllProducts - ? textTransformStyle - : { ...style, ...textTransformStyle } + attributes.isDescendantOfAllProducts ? undefined : style } >