From 40cde50879db7618b79067bcf4ceabe03b0eea69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Fri, 30 Aug 2024 10:23:28 +0200 Subject: [PATCH] `Product SKU` improvements (#51033) * Add new prefix and suffix attributes * Add editable prefix & suffix rich text fields * Remove the uppercase style from prefix and suffix * Render the prefix and suffix in the front end * Fix lint errors * Handle old sku block without prefix and suffix * Improve the editor styles * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Use wp_kses_post to filter and format the suffix and perfix * Address extra space when empty and better escaping --------- Co-authored-by: github-actions --- .../blocks/product-elements/sku/attributes.ts | 8 +++++ .../blocks/product-elements/sku/block.tsx | 31 +++++++++++++++++-- .../blocks/product-elements/sku/edit.tsx | 3 +- .../blocks/product-elements/sku/editor.scss | 4 +++ .../blocks/product-elements/sku/index.tsx | 3 ++ .../blocks/product-elements/sku/style.scss | 5 ++- .../blocks/product-elements/sku/types.ts | 2 ++ .../51033-47922-product-sku-improvements | 4 +++ .../src/Blocks/BlockTypes/ProductSKU.php | 19 ++++++++++-- 9 files changed, 71 insertions(+), 8 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/editor.scss create mode 100644 plugins/woocommerce/changelog/51033-47922-product-sku-improvements diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/attributes.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/attributes.ts index d70b39f1a99..0e0ae0bfdfe 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/attributes.ts +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/attributes.ts @@ -24,6 +24,14 @@ export const blockAttributes: BlockAttributes = { type: 'boolean', default: false, }, + prefix: { + type: 'string', + default: 'SKU:', + }, + suffix: { + type: 'string', + default: '', + }, }; export default blockAttributes; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx index 329475b0e32..d85ddbab0ac 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; import clsx from 'clsx'; import { useInnerBlockLayoutContext, @@ -10,6 +9,8 @@ import { import { withProductDataContext } from '@woocommerce/shared-hocs'; import type { HTMLAttributes } from 'react'; import { useStyleProps } from '@woocommerce/base-hooks'; +import { RichText } from '@wordpress/block-editor'; +import type { BlockEditProps } from '@wordpress/blocks'; /** * Internal dependencies @@ -17,18 +18,24 @@ import { useStyleProps } from '@woocommerce/base-hooks'; import './style.scss'; import type { Attributes } from './types'; -type Props = Attributes & HTMLAttributes< HTMLDivElement >; +type Props = BlockEditProps< Attributes > & HTMLAttributes< HTMLDivElement >; const Preview = ( { + setAttributes, parentClassName, sku, className, style, + prefix, + suffix, }: { + setAttributes: ( attributes: Record< string, unknown > ) => void; parentClassName: string; sku: string; className?: string | undefined; style?: React.CSSProperties | undefined; + prefix?: string; + suffix?: string; } ) => (
- { __( 'SKU:', 'woocommerce' ) } { sku } + setAttributes( { prefix: value } ) } + /> + { sku } + setAttributes( { suffix: value } ) } + />
); @@ -50,9 +69,12 @@ const Block = ( props: Props ): JSX.Element | null => { if ( props.isDescendentOfSingleProductTemplate ) { return ( ); } @@ -63,9 +85,12 @@ const Block = ( props: Props ): JSX.Element | null => { return ( - + ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/editor.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/editor.scss new file mode 100644 index 00000000000..4dbdbfa5f37 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/editor.scss @@ -0,0 +1,4 @@ +.wc-block-components-product-sku strong { + margin-left: $gap-smallest; + margin-right: $gap-smallest; +} diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/index.tsx index 2b631c74dcd..3b461c0f052 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/index.tsx @@ -29,6 +29,9 @@ const blockConfig: BlockConfiguration = { 'woocommerce/product-meta', ], edit, + save() { + return null; + }, supports, }; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/style.scss index d32bc9ca521..8aa99c856b3 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/style.scss @@ -1,6 +1,9 @@ .wc-block-components-product-sku { display: block; - text-transform: uppercase; @include font-size(small); overflow-wrap: break-word; + + strong { + text-transform: uppercase; + } } diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/types.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/types.ts index a43531d141f..ec603507389 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/types.ts +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/types.ts @@ -5,4 +5,6 @@ export interface Attributes { isDescendentOfSingleProductBlock: boolean; showProductSelector: boolean; isDescendantOfAllProducts: boolean; + prefix: string; + suffix: string; } diff --git a/plugins/woocommerce/changelog/51033-47922-product-sku-improvements b/plugins/woocommerce/changelog/51033-47922-product-sku-improvements new file mode 100644 index 00000000000..1849a43e716 --- /dev/null +++ b/plugins/woocommerce/changelog/51033-47922-product-sku-improvements @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Product SKU block: add editable prefixes and suffixes. \ No newline at end of file diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductSKU.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductSKU.php index 1475a005217..50e748f646e 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductSKU.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductSKU.php @@ -69,14 +69,27 @@ class ProductSKU extends AbstractBlock { $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); + $prefix = isset( $attributes['prefix'] ) ? wp_kses_post( ( $attributes['prefix'] ) ) : __( 'SKU: ', 'woocommerce' ); + if ( ! empty( $prefix ) ) { + $prefix = sprintf( '%s', $prefix ); + } + + $suffix = isset( $attributes['suffix'] ) ? wp_kses_post( ( $attributes['suffix'] ) ) : ''; + if ( ! empty( $suffix ) ) { + $suffix = sprintf( '%s', $suffix ); + } + return sprintf( '
- SKU: - %3$s + %3$s + %4$s + %5$s
', esc_attr( $styles_and_classes['classes'] ), esc_attr( $styles_and_classes['styles'] ?? '' ), - $product_sku + $prefix, + $product_sku, + $suffix ); } }