Added blocks for all price labels. Support variation script.

assets/js/blocks/product-elements/component-init.js

@@ -30,3 +30,57 @@ registerBlockComponent( {
             )
     ),
 } );
+
+registerBlockComponent( {
+    blockName: 'woocommerce-germanized/product-shipping-costs-info',
+    component: lazy( () =>
+        import(
+            /* webpackChunkName: "product-shipping-costs-info" */ './shipping-costs-info/frontend'
+            )
+    ),
+} );
+
+registerBlockComponent( {
+    blockName: 'woocommerce-germanized/product-unit-product',
+    component: lazy( () =>
+        import(
+            /* webpackChunkName: "product-unit-product" */ './unit-product/frontend'
+            )
+    ),
+} );
+
+registerBlockComponent( {
+    blockName: 'woocommerce-germanized/product-nutri-score',
+    component: lazy( () =>
+        import(
+            /* webpackChunkName: "product-nutri-score" */ './nutri-score/frontend'
+            )
+    ),
+} );
+
+registerBlockComponent( {
+    blockName: 'woocommerce-germanized/product-deposit',
+    component: lazy( () =>
+        import(
+            /* webpackChunkName: "product-deposit" */ './deposit/frontend'
+            )
+    ),
+} );
+
+registerBlockComponent( {
+    blockName: 'woocommerce-germanized/product-deposit-packaging-type',
+    component: lazy( () =>
+        import(
+            /* webpackChunkName: "product-deposit-packaging-type" */ './deposit-packaging-type/frontend'
+            )
+    ),
+} );
+
+registerBlockComponent( {
+    blockName: 'woocommerce-germanized/product-defect-description',
+    component: lazy( () =>
+        import(
+            /* webpackChunkName: "product-defect-description" */ './defect-description/frontend'
+            )
+    ),
+} );

assets/js/blocks/product-elements/defect-description/block.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import PriceLabelBlock from '../shared/price-label-block';
+export default ( props ) => {
+    props = { ...props, 'labelType': 'defect-description' };
+
+    // It is necessary because this block has to support serveral contexts:
+    // - Inside `All Products Block` -> `withProductDataContext` HOC
+    // - Inside `Products Block` -> Gutenberg Context
+    // - Inside `Single Product Template` -> Gutenberg Context
+    // - Without any parent -> `WithSelector` and `withProductDataContext` HOCs
+    // For more details, check https://github.com/woocommerce/woocommerce-blocks/pull/8609
+    if ( props.isDescendentOfSingleProductTemplate ) {
+        return <PriceLabelBlock { ...props } />;
+    }
+    return withProductDataContext( PriceLabelBlock )( props );
+};

assets/js/blocks/product-elements/defect-description/edit.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import {
+    AlignmentToolbar,
+    BlockControls,
+    useBlockProps,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
+const Edit = ( {
+    attributes,
+    setAttributes,
+    context,
+} ) => {
+    const blockProps = useBlockProps();
+    const blockAttrs = {
+        ...attributes,
+        ...context,
+    };
+    const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+
+    let { isDescendentOfSingleProductTemplate } =
+        useIsDescendentOfSingleProductTemplate( { isDescendentOfQueryLoop } );
+
+    if ( isDescendentOfQueryLoop ) {
+        isDescendentOfSingleProductTemplate = false;
+    }
+
+    useEffect(
+        () =>
+            setAttributes( {
+                isDescendentOfQueryLoop,
+                isDescendentOfSingleProductTemplate,
+            } ),
+        [
+            isDescendentOfQueryLoop,
+            isDescendentOfSingleProductTemplate,
+            setAttributes,
+        ]
+    );
+
+    return (
+        <>
+            <BlockControls>
+                <AlignmentToolbar
+                    value={ attributes.textAlign }
+                    onChange={ ( textAlign ) => {
+                        setAttributes( { textAlign } );
+                    } }
+                />
+            </BlockControls>
+            <div { ...blockProps }>
+                <Block { ...blockAttrs } />
+            </div>
+        </>
+    );
+};
+
+export default Edit;

assets/js/blocks/product-elements/defect-description/frontend.js

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+export default Block;

assets/js/blocks/product-elements/defect-description/index.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { page, Icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+
+const { ancestor, ...configuration } = sharedConfig;
+
+const blockConfig = {
+    ...configuration,
+    apiVersion: 2,
+    title: __( 'Defect Description', 'woocommerce-germanized' ),
+    description: __( 'Inserts the product\'s defect description.', 'woocommerce-germanized' ),
+    usesContext: [ 'query', 'queryId', 'postId' ],
+    icon: { src: <Icon
+            icon={ page }
+            className="wc-block-editor-components-block-icon"
+        /> },
+
+    supports: {
+        ...sharedConfig.supports,
+        ...( {
+            __experimentalSelector:
+                '.wp-block-woocommerce-gzd-product-defect-description .wc-gzd-block-components-product-defect-description',
+        } )
+    },
+    edit,
+};
+
+registerBlockType( 'woocommerce-germanized/product-defect-description', blockConfig );

assets/js/blocks/product-elements/delivery-time/edit.js

@@ -13,7 +13,7 @@ import { useEffect } from '@wordpress/element';
  */
 import Block from './block';
 import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
-const UnitPriceEdit = ( {
+const Edit = ( {
     attributes,
     setAttributes,
     context,
@@ -62,4 +62,4 @@ const UnitPriceEdit = ( {
     );
 };
 
-export default UnitPriceEdit;
+export default Edit;

assets/js/blocks/product-elements/delivery-time/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { currencyDollar, Icon } from '@wordpress/icons';
+import { postDate, Icon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -20,7 +20,7 @@ const blockConfig = {
     description: __( 'Inserts the product\'s delivery time.', 'woocommerce-germanized' ),
     usesContext: [ 'query', 'queryId', 'postId' ],
     icon: { src: <Icon
-            icon={ currencyDollar }
+            icon={ postDate }
             className="wc-block-editor-components-block-icon"
         /> },
 

assets/js/blocks/product-elements/deposit-packaging-type/block.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import PriceLabelBlock from '../shared/price-label-block';
+export default ( props ) => {
+    props = { ...props, 'labelType': 'deposit-packaging-type' };
+
+    // It is necessary because this block has to support serveral contexts:
+    // - Inside `All Products Block` -> `withProductDataContext` HOC
+    // - Inside `Products Block` -> Gutenberg Context
+    // - Inside `Single Product Template` -> Gutenberg Context
+    // - Without any parent -> `WithSelector` and `withProductDataContext` HOCs
+    // For more details, check https://github.com/woocommerce/woocommerce-blocks/pull/8609
+    if ( props.isDescendentOfSingleProductTemplate ) {
+        return <PriceLabelBlock { ...props } />;
+    }
+    return withProductDataContext( PriceLabelBlock )( props );
+};

assets/js/blocks/product-elements/deposit-packaging-type/edit.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import {
+    AlignmentToolbar,
+    BlockControls,
+    useBlockProps,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
+const Edit = ( {
+    attributes,
+    setAttributes,
+    context,
+} ) => {
+    const blockProps = useBlockProps();
+    const blockAttrs = {
+        ...attributes,
+        ...context,
+    };
+    const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+
+    let { isDescendentOfSingleProductTemplate } =
+        useIsDescendentOfSingleProductTemplate( { isDescendentOfQueryLoop } );
+
+    if ( isDescendentOfQueryLoop ) {
+        isDescendentOfSingleProductTemplate = false;
+    }
+
+    useEffect(
+        () =>
+            setAttributes( {
+                isDescendentOfQueryLoop,
+                isDescendentOfSingleProductTemplate,
+            } ),
+        [
+            isDescendentOfQueryLoop,
+            isDescendentOfSingleProductTemplate,
+            setAttributes,
+        ]
+    );
+
+    return (
+        <>
+            <BlockControls>
+                <AlignmentToolbar
+                    value={ attributes.textAlign }
+                    onChange={ ( textAlign ) => {
+                        setAttributes( { textAlign } );
+                    } }
+                />
+            </BlockControls>
+            <div { ...blockProps }>
+                <Block { ...blockAttrs } />
+            </div>
+        </>
+    );
+};
+
+export default Edit;

assets/js/blocks/product-elements/deposit-packaging-type/frontend.js

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+export default Block;

assets/js/blocks/product-elements/deposit-packaging-type/index.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { info, Icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+
+const { ancestor, ...configuration } = sharedConfig;
+
+const blockConfig = {
+    ...configuration,
+    apiVersion: 2,
+    title: __( 'Deposit packaging type', 'woocommerce-germanized' ),
+    description: __( 'Inserts the product\'s deposit packaging type.', 'woocommerce-germanized' ),
+    usesContext: [ 'query', 'queryId', 'postId' ],
+    icon: { src: <Icon
+            icon={ info }
+            className="wc-block-editor-components-block-icon"
+        /> },
+
+    supports: {
+        ...sharedConfig.supports,
+        ...( {
+            __experimentalSelector:
+                '.wp-block-woocommerce-gzd-product-deposit-packaging-type .wc-gzd-block-components-product-deposit-packaging-type',
+        } )
+    },
+    edit,
+};
+
+registerBlockType( 'woocommerce-germanized/product-deposit-packaging-type', blockConfig );

assets/js/blocks/product-elements/deposit/block.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import PriceLabelBlock from '../shared/price-label-block';
+export default ( props ) => {
+    props = { ...props, 'labelType': 'deposit' };
+
+    // It is necessary because this block has to support serveral contexts:
+    // - Inside `All Products Block` -> `withProductDataContext` HOC
+    // - Inside `Products Block` -> Gutenberg Context
+    // - Inside `Single Product Template` -> Gutenberg Context
+    // - Without any parent -> `WithSelector` and `withProductDataContext` HOCs
+    // For more details, check https://github.com/woocommerce/woocommerce-blocks/pull/8609
+    if ( props.isDescendentOfSingleProductTemplate ) {
+        return <PriceLabelBlock { ...props } />;
+    }
+    return withProductDataContext( PriceLabelBlock )( props );
+};