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
);
}
}