From 38fcacb094b6eb2d38e6f9b9d1895abe8c438d9f Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 18 Jan 2023 19:19:07 +0100 Subject: [PATCH 01/11] Add Product Image Gallery #8233 Add Product Image Gallery --- assets/js/atomic/blocks/index.js | 1 + .../product-image-gallery/block.json | 12 +++++ .../product-image-gallery/edit.tsx | 3 ++ .../product-image-gallery/index.ts | 15 ++++++ src/BlockTypes/ProductImageGallery.php | 49 +++++++++++++++++++ src/BlockTypesController.php | 1 + 6 files changed, 81 insertions(+) create mode 100644 assets/js/atomic/blocks/product-elements/product-image-gallery/block.json create mode 100644 assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx create mode 100644 assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts create mode 100644 src/BlockTypes/ProductImageGallery.php diff --git a/assets/js/atomic/blocks/index.js b/assets/js/atomic/blocks/index.js index 5a1ff791cbd..6745263834d 100644 --- a/assets/js/atomic/blocks/index.js +++ b/assets/js/atomic/blocks/index.js @@ -13,3 +13,4 @@ import './product-elements/category-list'; import './product-elements/tag-list'; import './product-elements/stock-indicator'; import './product-elements/add-to-cart'; +import './product-elements/product-image-gallery'; diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json new file mode 100644 index 00000000000..25d5506e570 --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json @@ -0,0 +1,12 @@ +{ + "name": "woocommerce/product-image-gallery", + "version": "1.0.0", + "title": "Product image gallery", + "description": "", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "usesContext": [ "postId", "postType", "queryId" ], + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx new file mode 100644 index 00000000000..f105412546b --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx @@ -0,0 +1,3 @@ +export const ProductImageGalleryEdit = ( props ) => { + return placeholder; +}; diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts new file mode 100644 index 00000000000..58d29ad826e --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts @@ -0,0 +1,15 @@ +/** + * External dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import metadata from './block.json'; + +/** + * Internal dependencies + */ +import { ProductImageGalleryEdit } from './edit'; + +registerBlockType( metadata, { + icon: 'tickets', + edit: ProductImageGalleryEdit, +} ); diff --git a/src/BlockTypes/ProductImageGallery.php b/src/BlockTypes/ProductImageGallery.php new file mode 100644 index 00000000000..32ab6b83c58 --- /dev/null +++ b/src/BlockTypes/ProductImageGallery.php @@ -0,0 +1,49 @@ +context['postId']; + global $product; + $product = wc_get_product( $post_id ); + + if ( class_exists( 'WC_Frontend_Scripts' ) ) { + $frontend_scripts = new \WC_Frontend_Scripts(); + $frontend_scripts::load_scripts(); + } + + ob_start(); + woocommerce_show_product_images(); + $product_image_gallery_html = ob_get_clean(); + + return $product_image_gallery_html; + } +} diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php index dadfc4ee512..5ef64cd806d 100644 --- a/src/BlockTypesController.php +++ b/src/BlockTypesController.php @@ -186,6 +186,7 @@ protected function get_block_types() { 'ProductCategory', 'ProductCategoryList', 'ProductImage', + 'ProductImageGallery', 'ProductNew', 'ProductOnSale', 'ProductPrice', From 13dc04645bef60cbb693ff67e0154233298722e4 Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 30 Jan 2023 14:47:00 +0100 Subject: [PATCH 02/11] Add Product Image Gallery block --- .../product-image-gallery/block.json | 17 ++++++- .../product-image-gallery/edit.tsx | 49 ++++++++++++++----- .../product-image-gallery/index.ts | 19 +++++-- .../product-image-gallery/style.scss | 11 +++++ assets/js/atomic/utils/index.js | 1 + src/BlockTypes/ProductImageGallery.php | 26 +++++++++- 6 files changed, 104 insertions(+), 19 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json index 25d5506e570..76aa69ac84e 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json @@ -1,9 +1,22 @@ { "name": "woocommerce/product-image-gallery", "version": "1.0.0", - "title": "Product image gallery", - "description": "", + "title": "Product Image Gallery", + "icon": "image", + "description": "Display the main product images.", "category": "woocommerce", + "supports": { + "align": true, + "reusable": false, + "spacing": { + "margin": true + }, + "__experimentalBorder": { + "radius": true, + "__experimentalSkipSerialization": true + }, + "__experimentalSelector": ".wp-block-woocommerce-product-image-gallery img" + }, "keywords": [ "WooCommerce" ], "usesContext": [ "postId", "postType", "queryId" ], "textdomain": "woo-gutenberg-products-block", diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx index 4d54b44b559..0643dab1315 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx @@ -1,21 +1,48 @@ -/** - * Internal dependencies - */ - /** * External dependencies */ +import { useBorderProps } from '@woocommerce/base-hooks'; import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings'; import { isEmptyObject } from '@woocommerce/types'; import { useBlockProps } from '@wordpress/block-editor'; import { BlockAttributes } from '@wordpress/blocks'; -const Placeholder = () => { +/** + * Internal dependencies + */ +import './editor.scss'; + +const Placeholder = ( { attributes }: BlockAttributes ) => { + const marginProps = useBorderProps( attributes ); + return ( - Placeholder +
+ Placeholder +
+ { [ ...Array( 4 ).keys() ].map( ( index ) => { + return ( + Placeholder + ); + } ) } +
+
); }; @@ -30,13 +57,13 @@ interface Props { context: Context; } -const Edit = ( { context }: Props ) => { +const Edit = ( { context, attributes }: Props ) => { const blockProps = useBlockProps(); if ( isEmptyObject( context ) ) { return (
- +
); } diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts index 58d4027c88e..99ac2c7f4a4 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts @@ -1,7 +1,8 @@ /** * External dependencies */ -import { registerBlockType } from '@wordpress/blocks'; +import { registerBlockType, unregisterBlockType } from '@wordpress/blocks'; +import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils'; /** * Internal dependencies @@ -9,9 +10,17 @@ import { registerBlockType } from '@wordpress/blocks'; import edit from './edit'; import save from './save'; import metadata from './block.json'; +import './style.scss'; -registerBlockType( metadata, { - icon: 'tickets', - edit, - save, +registerBlockSingleProductTemplate( { + registerBlockFn: () => { + registerBlockType( metadata, { + edit, + save, + } ); + }, + unregisterBlockFn: () => { + unregisterBlockType( metadata.name ); + }, + blockName: metadata.name, } ); diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss b/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss index e69de29bb2d..a4abddab1bf 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss @@ -0,0 +1,11 @@ +.woocommerce-product-gallery { + border-radius: inherit; + + .woocommerce-product-gallery__wrapper { + border-radius: inherit; + + .woocommerce-product-gallery__image { + border-radius: inherit; + } + } + } diff --git a/assets/js/atomic/utils/index.js b/assets/js/atomic/utils/index.js index f10a14b6858..06280bb433f 100644 --- a/assets/js/atomic/utils/index.js +++ b/assets/js/atomic/utils/index.js @@ -2,3 +2,4 @@ export * from './get-block-map'; export * from './create-blocks-from-template'; export * from './render-parent-block'; export * from './render-standalone-blocks'; +export * from './register-block-single-product-template'; diff --git a/src/BlockTypes/ProductImageGallery.php b/src/BlockTypes/ProductImageGallery.php index 32ab6b83c58..3ce3fdc312f 100644 --- a/src/BlockTypes/ProductImageGallery.php +++ b/src/BlockTypes/ProductImageGallery.php @@ -1,6 +1,9 @@ 'img', + ); + } + /** * Include and render the block. * @@ -40,10 +54,20 @@ protected function render( $attributes, $content, $block ) { $frontend_scripts::load_scripts(); } + $classname = $attributes['className'] ?? ''; + $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); + ob_start(); woocommerce_show_product_images(); $product_image_gallery_html = ob_get_clean(); - return $product_image_gallery_html; + return sprintf( + '
%4$s
', + esc_attr( $classes_and_styles['classes'] ), + esc_attr( $classname ), + esc_attr( $classes_and_styles['styles'] ), + $product_image_gallery_html + ); + } } From 21a1fea12282af175b12226447bcf81075d81060 Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 30 Jan 2023 16:31:45 +0100 Subject: [PATCH 03/11] remove support global styles --- .../product-elements/product-image-gallery/block.json | 10 +--------- .../product-elements/product-image-gallery/edit.tsx | 5 ++++- .../product-elements/product-image-gallery/editor.scss | 4 ---- src/BlockTypes/ProductImageGallery.php | 10 ---------- 4 files changed, 5 insertions(+), 24 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json index 76aa69ac84e..9dd08179132 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json @@ -7,15 +7,7 @@ "category": "woocommerce", "supports": { "align": true, - "reusable": false, - "spacing": { - "margin": true - }, - "__experimentalBorder": { - "radius": true, - "__experimentalSkipSerialization": true - }, - "__experimentalSelector": ".wp-block-woocommerce-product-image-gallery img" + "reusable": false }, "keywords": [ "WooCommerce" ], "usesContext": [ "postId", "postType", "queryId" ], diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx index 0643dab1315..7740bccab2a 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx @@ -6,6 +6,7 @@ import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings'; import { isEmptyObject } from '@woocommerce/types'; import { useBlockProps } from '@wordpress/block-editor'; import { BlockAttributes } from '@wordpress/blocks'; +import { Disabled } from '@wordpress/components'; /** * Internal dependencies @@ -63,7 +64,9 @@ const Edit = ( { context, attributes }: Props ) => { if ( isEmptyObject( context ) ) { return (
- + + +
); } diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss b/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss index 5c176af5243..ad1d09c6d26 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss @@ -1,16 +1,12 @@ .wc-block-editor-product-gallery { - border-style: none; - img { width: 500px; height: 500px; - border-radius: inherit; } .wc-block-editor-product-gallery__gallery { img { width: 100px; height: 100px; - border-radius: inherit; } } } diff --git a/src/BlockTypes/ProductImageGallery.php b/src/BlockTypes/ProductImageGallery.php index 3ce3fdc312f..23f0b0865f7 100644 --- a/src/BlockTypes/ProductImageGallery.php +++ b/src/BlockTypes/ProductImageGallery.php @@ -24,16 +24,6 @@ protected function get_block_type_uses_context() { return [ 'query', 'queryId', 'postId' ]; } - /** - * Get block attributes. - * - * @return array - */ - protected function get_block_type_supports() { - return array( - '__experimentalSelector' => 'img', - ); - } /** * Include and render the block. From d9900e006606d9d406442374f84eb4e00073673f Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 30 Jan 2023 16:31:45 +0100 Subject: [PATCH 04/11] remove support global styles --- .../product-elements/product-image-gallery/block.json | 10 +--------- .../product-elements/product-image-gallery/edit.tsx | 5 ++++- .../product-image-gallery/editor.scss | 4 ---- .../product-elements/product-image-gallery/index.ts | 1 - .../product-elements/product-image-gallery/style.scss | 11 ----------- src/BlockTypes/ProductImageGallery.php | 10 ---------- 6 files changed, 5 insertions(+), 36 deletions(-) delete mode 100644 assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json index 76aa69ac84e..9dd08179132 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json @@ -7,15 +7,7 @@ "category": "woocommerce", "supports": { "align": true, - "reusable": false, - "spacing": { - "margin": true - }, - "__experimentalBorder": { - "radius": true, - "__experimentalSkipSerialization": true - }, - "__experimentalSelector": ".wp-block-woocommerce-product-image-gallery img" + "reusable": false }, "keywords": [ "WooCommerce" ], "usesContext": [ "postId", "postType", "queryId" ], diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx index 0643dab1315..7740bccab2a 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx @@ -6,6 +6,7 @@ import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings'; import { isEmptyObject } from '@woocommerce/types'; import { useBlockProps } from '@wordpress/block-editor'; import { BlockAttributes } from '@wordpress/blocks'; +import { Disabled } from '@wordpress/components'; /** * Internal dependencies @@ -63,7 +64,9 @@ const Edit = ( { context, attributes }: Props ) => { if ( isEmptyObject( context ) ) { return (
- + + +
); } diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss b/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss index 5c176af5243..ad1d09c6d26 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss @@ -1,16 +1,12 @@ .wc-block-editor-product-gallery { - border-style: none; - img { width: 500px; height: 500px; - border-radius: inherit; } .wc-block-editor-product-gallery__gallery { img { width: 100px; height: 100px; - border-radius: inherit; } } } diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts index 99ac2c7f4a4..7ed4f0142a9 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts @@ -10,7 +10,6 @@ import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils'; import edit from './edit'; import save from './save'; import metadata from './block.json'; -import './style.scss'; registerBlockSingleProductTemplate( { registerBlockFn: () => { diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss b/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss deleted file mode 100644 index a4abddab1bf..00000000000 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss +++ /dev/null @@ -1,11 +0,0 @@ -.woocommerce-product-gallery { - border-radius: inherit; - - .woocommerce-product-gallery__wrapper { - border-radius: inherit; - - .woocommerce-product-gallery__image { - border-radius: inherit; - } - } - } diff --git a/src/BlockTypes/ProductImageGallery.php b/src/BlockTypes/ProductImageGallery.php index 3ce3fdc312f..23f0b0865f7 100644 --- a/src/BlockTypes/ProductImageGallery.php +++ b/src/BlockTypes/ProductImageGallery.php @@ -24,16 +24,6 @@ protected function get_block_type_uses_context() { return [ 'query', 'queryId', 'postId' ]; } - /** - * Get block attributes. - * - * @return array - */ - protected function get_block_type_supports() { - return array( - '__experimentalSelector' => 'img', - ); - } /** * Include and render the block. From 795a6980d6e084b183b7499f163689df18e4bad2 Mon Sep 17 00:00:00 2001 From: Luigi Date: Tue, 31 Jan 2023 12:04:49 +0100 Subject: [PATCH 05/11] address CSS feedback --- .../product-elements/product-image-gallery/edit.tsx | 10 +--------- .../product-elements/product-image-gallery/editor.scss | 2 +- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx index 588492b11ed..da45b7bb8c4 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx @@ -17,22 +17,14 @@ const Placeholder = () => {
Placeholder -
+
{ [ ...Array( 4 ).keys() ].map( ( index ) => { return ( Placeholder ); diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss b/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss index ad1d09c6d26..962cafb0cd4 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss @@ -3,7 +3,7 @@ width: 500px; height: 500px; } - .wc-block-editor-product-gallery__gallery { + .wc-block-editor-product-gallery__other-images { img { width: 100px; height: 100px; From dc48ddf0b385829545c64c810d0beaa0a2d50f31 Mon Sep 17 00:00:00 2001 From: Luigi Date: Tue, 31 Jan 2023 12:15:07 +0100 Subject: [PATCH 06/11] add support for the custom classname --- .../product-image-gallery/save.tsx | 16 ++++++++++++++-- src/BlockTypes/ProductImageGallery.php | 7 ++----- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/save.tsx b/assets/js/atomic/blocks/product-elements/product-image-gallery/save.tsx index 03b39b248c5..26f6ea20404 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/save.tsx +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/save.tsx @@ -3,8 +3,20 @@ */ import { useBlockProps } from '@wordpress/block-editor'; -export const Save = (): JSX.Element => { - return
; +type Props = { + attributes: Record< string, unknown > & { + className?: string; + }; +}; + +export const Save = ( { attributes }: Props ): JSX.Element => { + return ( +
+ ); }; export default Save; diff --git a/src/BlockTypes/ProductImageGallery.php b/src/BlockTypes/ProductImageGallery.php index 23f0b0865f7..43e84ebbe32 100644 --- a/src/BlockTypes/ProductImageGallery.php +++ b/src/BlockTypes/ProductImageGallery.php @@ -44,18 +44,15 @@ protected function render( $attributes, $content, $block ) { $frontend_scripts::load_scripts(); } - $classname = $attributes['className'] ?? ''; - $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); + $classname = $attributes['className'] ?? ''; ob_start(); woocommerce_show_product_images(); $product_image_gallery_html = ob_get_clean(); return sprintf( - '
%4$s
', - esc_attr( $classes_and_styles['classes'] ), + '
%2$s
', esc_attr( $classname ), - esc_attr( $classes_and_styles['styles'] ), $product_image_gallery_html ); From e526eff91a4bd6e955e62793f5b18c259305e5ce Mon Sep 17 00:00:00 2001 From: Luigi Date: Tue, 31 Jan 2023 17:05:15 +0100 Subject: [PATCH 07/11] remove save function --- .../product-image-gallery/index.ts | 2 -- .../product-image-gallery/save.tsx | 22 ------------------- 2 files changed, 24 deletions(-) delete mode 100644 assets/js/atomic/blocks/product-elements/product-image-gallery/save.tsx diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts index 7ed4f0142a9..2f37200749b 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts @@ -8,14 +8,12 @@ import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils'; * Internal dependencies */ import edit from './edit'; -import save from './save'; import metadata from './block.json'; registerBlockSingleProductTemplate( { registerBlockFn: () => { registerBlockType( metadata, { edit, - save, } ); }, unregisterBlockFn: () => { diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/save.tsx b/assets/js/atomic/blocks/product-elements/product-image-gallery/save.tsx deleted file mode 100644 index 26f6ea20404..00000000000 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/save.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/** - * External dependencies - */ -import { useBlockProps } from '@wordpress/block-editor'; - -type Props = { - attributes: Record< string, unknown > & { - className?: string; - }; -}; - -export const Save = ( { attributes }: Props ): JSX.Element => { - return ( -
- ); -}; - -export default Save; From 66595f10add88fe3f6b6cb3947ab987dde41fd30 Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 1 Feb 2023 13:00:30 +0100 Subject: [PATCH 08/11] add second parameter to the subscribe function --- .../js/atomic/utils/register-block-single-product-template.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/js/atomic/utils/register-block-single-product-template.ts b/assets/js/atomic/utils/register-block-single-product-template.ts index ba0e891a485..80838714879 100644 --- a/assets/js/atomic/utils/register-block-single-product-template.ts +++ b/assets/js/atomic/utils/register-block-single-product-template.ts @@ -42,5 +42,6 @@ export const registerBlockSingleProductTemplate = ( { if ( block !== undefined ) { unregisterBlockFn(); } - } ); + // @ts-expect-error: The type definition for `subscribe` is incorrect. This PR fixes it: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64177 + }, 'core/edit-site' ); }; From 8aee84125143d2ecf3eaf3af1b74ca449b034cb2 Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 13 Feb 2023 11:13:53 +0100 Subject: [PATCH 09/11] update @types/wordpress__data package --- .../utils/register-block-single-product-template.ts | 1 - package-lock.json | 11 +++++++---- package.json | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/assets/js/atomic/utils/register-block-single-product-template.ts b/assets/js/atomic/utils/register-block-single-product-template.ts index 80838714879..675e335b06d 100644 --- a/assets/js/atomic/utils/register-block-single-product-template.ts +++ b/assets/js/atomic/utils/register-block-single-product-template.ts @@ -42,6 +42,5 @@ export const registerBlockSingleProductTemplate = ( { if ( block !== undefined ) { unregisterBlockFn(); } - // @ts-expect-error: The type definition for `subscribe` is incorrect. This PR fixes it: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64177 }, 'core/edit-site' ); }; diff --git a/package-lock.json b/package-lock.json index 96d1f2aea73..06fdcaaf453 100644 --- a/package-lock.json +++ b/package-lock.json @@ -82,7 +82,7 @@ "@types/wordpress__blocks": "11.0.7", "@types/wordpress__components": "^23.0.0", "@types/wordpress__core-data": "^2.4.5", - "@types/wordpress__data": "^6.0.1", + "@types/wordpress__data": "^6.0.2", "@types/wordpress__data-controls": "2.2.0", "@types/wordpress__editor": "^11.0.0", "@types/wordpress__notices": "^3.5.0", @@ -11680,9 +11680,10 @@ "license": "MIT" }, "node_modules/@types/wordpress__data": { - "version": "6.0.1", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@types/wordpress__data/-/wordpress__data-6.0.2.tgz", + "integrity": "sha512-Pu67knXXoTWgCpxTKwePNZz/iKkYe8AQbkkSD/Ba1mw8t4zgEM+jJs5IV5N5ij/awwjs4Subj8mkvS3jMTDwyw==", "dev": true, - "license": "MIT", "dependencies": { "@types/react": "*", "redux": "^4.1.0" @@ -58730,7 +58731,9 @@ "dev": true }, "@types/wordpress__data": { - "version": "6.0.1", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@types/wordpress__data/-/wordpress__data-6.0.2.tgz", + "integrity": "sha512-Pu67knXXoTWgCpxTKwePNZz/iKkYe8AQbkkSD/Ba1mw8t4zgEM+jJs5IV5N5ij/awwjs4Subj8mkvS3jMTDwyw==", "dev": true, "requires": { "@types/react": "*", diff --git a/package.json b/package.json index 6b24618f34c..9474f765df1 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "@types/wordpress__blocks": "11.0.7", "@types/wordpress__components": "^23.0.0", "@types/wordpress__core-data": "^2.4.5", - "@types/wordpress__data": "^6.0.1", + "@types/wordpress__data": "^6.0.2", "@types/wordpress__data-controls": "2.2.0", "@types/wordpress__editor": "^11.0.0", "@types/wordpress__notices": "^3.5.0", From 32f97dd1f85368c80e105ebd118f7a938f1e6857 Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 13 Feb 2023 11:51:36 +0100 Subject: [PATCH 10/11] update placeholder, icon and description --- .../product-elements/product-image-gallery/block.json | 4 ++-- .../product-elements/product-image-gallery/edit.tsx | 4 ++-- .../product-elements/product-image-gallery/editor.scss | 1 + .../product-elements/product-image-gallery/index.ts | 2 ++ images/block-placeholders/product-image-gallery.svg | 9 +++++++++ 5 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 images/block-placeholders/product-image-gallery.svg diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json index 9dd08179132..0a1247cbc34 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/block.json @@ -2,8 +2,8 @@ "name": "woocommerce/product-image-gallery", "version": "1.0.0", "title": "Product Image Gallery", - "icon": "image", - "description": "Display the main product images.", + "icon": "gallery", + "description": "Display a product's images.", "category": "woocommerce", "supports": { "align": true, diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx index da45b7bb8c4..df6fb8ed95e 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx @@ -16,7 +16,7 @@ const Placeholder = () => { return (
Placeholder
@@ -24,7 +24,7 @@ const Placeholder = () => { return ( Placeholder ); diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss b/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss index 962cafb0cd4..40696afdbba 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss @@ -7,6 +7,7 @@ img { width: 100px; height: 100px; + margin: 5px; } } } diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts index 2f37200749b..7c00f9ccf6e 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts @@ -1,6 +1,7 @@ /** * External dependencies */ +import { gallery as icon } from '@wordpress/icons'; import { registerBlockType, unregisterBlockType } from '@wordpress/blocks'; import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils'; @@ -13,6 +14,7 @@ import metadata from './block.json'; registerBlockSingleProductTemplate( { registerBlockFn: () => { registerBlockType( metadata, { + icon, edit, } ); }, diff --git a/images/block-placeholders/product-image-gallery.svg b/images/block-placeholders/product-image-gallery.svg new file mode 100644 index 00000000000..a9a75f82cf4 --- /dev/null +++ b/images/block-placeholders/product-image-gallery.svg @@ -0,0 +1,9 @@ + + + + Layer 1 + + + + + \ No newline at end of file From e3be328a98a76aff295f7287cd70d8c826bc46aa Mon Sep 17 00:00:00 2001 From: Luigi Date: Mon, 13 Feb 2023 12:05:31 +0100 Subject: [PATCH 11/11] update tsconfig --- .../blocks/product-elements/product-image-gallery/index.ts | 1 + tsconfig.json | 1 + 2 files changed, 2 insertions(+) diff --git a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts index 7c00f9ccf6e..ca81e18eee9 100644 --- a/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts +++ b/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts @@ -13,6 +13,7 @@ import metadata from './block.json'; registerBlockSingleProductTemplate( { registerBlockFn: () => { + // @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core. registerBlockType( metadata, { icon, edit, diff --git a/tsconfig.json b/tsconfig.json index 5dccc2bbc15..2a1a5b6c03b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "include": [ "./assets/js/**/*", "./packages/checkout/**/*", + "./assets/js/blocks/**/block.json", "./assets/js/atomic/blocks/**/block.json", "./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/**/block.json", "./storybook/**/*",