diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx new file mode 100644 index 00000000000..6b34e7e0532 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx @@ -0,0 +1,28 @@ +/** + * External dependencies + */ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; + +const v1 = { + attributes: metadata.attributes, + supports: metadata.supports, + save: () => { + const blockProps = useBlockProps.save(); + + return ( +
+ { /* @ts-expect-error: `InnerBlocks.Content` is a component that is typed in WordPress core*/ } + +
+ ); + }, +}; + +const deprecated = [ v1 ]; + +export default deprecated; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx index 2aa3556604d..a2f9363ef2b 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx @@ -10,10 +10,12 @@ import { BLOCK_ICON } from './constants'; import metadata from './block.json'; import edit from './edit'; import save from './save'; +import deprecated from './deprecated'; // @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core. registerBlockType( metadata, { icon: BLOCK_ICON, edit, save, + deprecated, } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx index 4c8f4ef2973..d856b438b9a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx @@ -4,6 +4,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; const Save = () => { + // We add the `woocommerce` class to the wrapper to apply WooCommerce styles to the block. const blockProps = useBlockProps.save( { className: 'woocommerce', } ); diff --git a/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save b/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save new file mode 100644 index 00000000000..f6ce0f16e03 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +Deprecate single product block save #51153 diff --git a/plugins/woocommerce/client/legacy/css/woocommerce.scss b/plugins/woocommerce/client/legacy/css/woocommerce.scss index 8c97759bf97..46c0d0405e4 100644 --- a/plugins/woocommerce/client/legacy/css/woocommerce.scss +++ b/plugins/woocommerce/client/legacy/css/woocommerce.scss @@ -1699,7 +1699,10 @@ p.demo_store, * Buttons */ .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)), -:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce { +:where(body:not(.woocommerce-block-theme-has-button-styles)):where( + :not(.edit-post-visual-editor *) + ) + .woocommerce { a.button, button.button, input.button,