Added additional product elements blocks.

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

@@ -12,3 +12,21 @@ registerBlockComponent( {
             )
     ),
 } );
+
+registerBlockComponent( {
+    blockName: 'woocommerce-germanized/product-delivery-time',
+    component: lazy( () =>
+        import(
+            /* webpackChunkName: "product-delivery-time" */ './delivery-time/frontend'
+            )
+    ),
+} );
+
+registerBlockComponent( {
+    blockName: 'woocommerce-germanized/product-tax-info',
+    component: lazy( () =>
+        import(
+            /* webpackChunkName: "product-tax-info" */ './tax-info/frontend'
+            )
+    ),
+} );

assets/js/blocks/product-elements/delivery-time/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': 'delivery-time' };
+
+    // 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/delivery-time/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 UnitPriceEdit = ( {
+    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 UnitPriceEdit;

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

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

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

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { currencyDollar, 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: __( 'Delivery Time', 'woocommerce-germanized' ),
+    description: __( 'Inserts the product\'s delivery time.', 'woocommerce-germanized' ),
+    usesContext: [ 'query', 'queryId', 'postId' ],
+    icon: { src: <Icon
+            icon={ currencyDollar }
+            className="wc-block-editor-components-block-icon"
+        /> },
+
+    supports: {
+        ...sharedConfig.supports,
+        ...( {
+            __experimentalSelector:
+                '.wp-block-woocommerce-gzd-product-delivery-time .wc-gzd-block-components-product-delivery-time',
+        } )
+    },
+    edit,
+};
+
+registerBlockType( 'woocommerce-germanized/product-delivery-time', blockConfig );

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

@@ -1,2 +1,5 @@
 import './unit-price';
+import './delivery-time';
+import './tax-info';
+
 export * from './component-init'

assets/js/blocks/product-elements/shared/config.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, grid } from '@wordpress/icons';
+import { __experimentalGetSpacingClassesAndStyles } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -26,6 +27,49 @@ const sharedConfig = {
     },
     supports: {
         html: false,
+        color: {
+            text: true,
+            background: true,
+            link: false,
+            __experimentalSkipSerialization: true,
+        },
+        typography: {
+            fontSize: true,
+            lineHeight: true,
+            __experimentalFontFamily: true,
+            __experimentalFontWeight: true,
+            __experimentalFontStyle: true,
+            __experimentalSkipSerialization: true,
+            __experimentalLetterSpacing: true,
+        },
+        ...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
+            spacing: {
+                margin: true,
+                padding: true,
+            },
+        } ),
+    },
+    attributes: {
+        productId: {
+            type: 'number',
+            default: 0,
+        },
+        isDescendentOfQueryLoop: {
+            type: 'boolean',
+            default: false,
+        },
+        textAlign: {
+            type: 'string',
+            default: '',
+        },
+        isDescendentOfSingleProductTemplate: {
+            type: 'boolean',
+            default: false,
+        },
+        isDescendentOfSingleProductBlock: {
+            type: 'boolean',
+            default: false,
+        }
     },
     ancestor: [ 'woocommerce/all-products', 'woocommerce/single-product' ],
     save

assets/js/blocks/product-elements/shared/editor.scss

@@ -0,0 +1,12 @@
+.wc-gzd-block-components-product-price-label {
+  display: block;
+}
+
+.wc-gzd-block-components-product-price-label {
+  &.wc-gzd-block-components-product-price-label--align-center {
+    text-align: center;
+  }
+  &.wc-gzd-block-components-product-price-label--align-right {
+    text-align: right;
+  }
+}

assets/js/blocks/product-elements/shared/formatted-price-label.js

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { isValidElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const FormattedPriceLabel = ( {
+    align,
+    className,
+    labelType,
+    formattedLabel,
+    labelClassName,
+    labelStyle,
+    style,
+} ) => {
+    const wrapperClassName = classNames(
+        className,
+        'wc-gzd-block-components-product-' + labelType,
+        'wc-gzd-block-components-product-price-label',
+        {
+            [ `wc-gzd-block-components-product-price-label--align-${ align }` ]: align,
+        }
+    );
+
+    let labelComponent = (
+        <span
+            className={ classNames(
+                'wc-gzd-block-components-product-' + labelType + '__value',
+                labelClassName
+            ) }
+        />
+    );
+
+    if ( formattedLabel ) {
+        if ( isValidElement( formattedLabel ) ) {
+            labelComponent = (
+                <span
+                    className={ classNames(
+                        'wc-gzd-block-components-product-' + labelType + '__value',
+                        labelClassName
+                    ) }
+                    style={ labelStyle }
+                >
+                    { formattedLabel }
+                </span>
+            );
+        } else {
+            labelComponent = (
+                <span
+                    className={ classNames(
+                        'wc-gzd-block-components-product-' + labelType + '__value',
+                        labelClassName
+                    ) }
+                    style={ labelStyle }
+                    dangerouslySetInnerHTML={ {
+                        __html: formattedLabel,
+                    } }
+                />
+            );
+        }
+    }
+
+    return (
+        <span className={ wrapperClassName } style={ style }>
+			{ labelComponent }
+		</span>
+    );
+};
+
+export default FormattedPriceLabel;