From f6a4b3c143d5b75510480abd516bcd801849cfa9 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 6 Jul 2023 17:08:39 +0200 Subject: [PATCH] Product Gallery: Add Large Image inner block (https://github.com/woocommerce/woocommerce-blocks/pull/10045) * Product Gallery: Add an new block base code * Product Gallery: Add experimental flag * Product Gallery: Add Large Image block code * Product Gallery Large Image: Remove unsed types * Product Gallery: Move the block from registerBlockType to registerBlockSingleProductTemplate * Product Gallery: Update icon * Product Gallery: Add missing icon import * Product Gallery Large Image: Add experimental mode check * Product Gallery Large Image: Deregister unnecessary block settings * Product Gallery Large Image: Add experimental flag to the Product Gallery Large Image and remove the icon override * Product Gallery Large Image: Add zoom and correct styling * Product Gallery Large Image: Remove commented out unnecessary code * Product Gallery Large Image: Re-add the removed action after capturing the large image html * Product Gallery Large Image: Update Large Image icon and description. Move metadata to the block.json file. --- .../js/blocks/product-gallery/index.tsx | 4 +- .../product-gallery-large-image/block.json | 13 +++ .../product-gallery-large-image/edit.tsx | 34 ++++++++ .../product-gallery-large-image/icon.tsx | 18 +++++ .../product-gallery-large-image/index.tsx | 22 +++++ .../product-gallery-large-image/style.scss | 23 ++++++ .../woocommerce-blocks/bin/webpack-entries.js | 4 + .../BlockTypes/ProductGalleryLargeImage.php | 80 +++++++++++++++++++ .../src/BlockTypesController.php | 1 + 9 files changed, 197 insertions(+), 2 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/icon.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/index.tsx create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/style.scss create mode 100644 plugins/woocommerce-blocks/src/BlockTypes/ProductGalleryLargeImage.php diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/index.tsx index 0ba762283ff..a7663318698 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/index.tsx @@ -10,18 +10,18 @@ import { isExperimentalBuild } from '@woocommerce/block-settings'; import { Edit, Save } from './edit'; import metadata from './block.json'; import icon from './icon'; +import './inner-blocks/product-gallery-large-image'; if ( isExperimentalBuild() ) { registerBlockSingleProductTemplate( { blockName: metadata.name, - // @ts-expect-error: `metadata` currently does not have a type definition in WordPress core blockMetadata: metadata, blockSettings: { icon, - // @ts-expect-error `edit` can be extended to include other attributes edit: Edit, save: Save, ancestor: [ 'woocommerce/single-product' ], }, + isAvailableOnPostEditor: true, } ); } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json new file mode 100644 index 00000000000..35552107136 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/block.json @@ -0,0 +1,13 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "woocommerce/product-gallery-large-image", + "version": "1.0.0", + "title": "Large Image", + "description": "Display the Large Image of a product.", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "usesContext": [ "postId" ], + "textdomain": "woo-gutenberg-products-block", + "ancestor": [ "woocommerce/product-gallery" ] +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx new file mode 100644 index 00000000000..ca6e2a2b5cb --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings'; +import { useBlockProps } from '@wordpress/block-editor'; +import { Disabled } from '@wordpress/components'; + +export const Edit = (): JSX.Element => { + const blockProps = useBlockProps( { + className: 'wc-block-editor-product-gallery_large-image', + } ); + const Placeholder = () => { + return ( +
+ Placeholder +
+ ); + }; + + return ( +
+ + + +
+ ); +}; + +export const Save = (): JSX.Element => { + return
; +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/icon.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/icon.tsx new file mode 100644 index 00000000000..3cc6ac1133e --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/icon.tsx @@ -0,0 +1,18 @@ +const Icon = () => ( + + + +); + +export default Icon; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/index.tsx new file mode 100644 index 00000000000..46f7c25bf95 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/index.tsx @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import { isExperimentalBuild } from '@woocommerce/block-settings'; + +/** + * Internal dependencies + */ +import icon from './icon'; +import { Edit, Save } from './edit'; +import metadata from './block.json'; +import './style.scss'; + +if ( isExperimentalBuild() ) { + // @ts-expect-error: `metadata` currently does not have a type definition in WordPress core + registerBlockType( metadata, { + icon, + edit: Edit, + save: Save, + } ); +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/style.scss new file mode 100644 index 00000000000..1f82c1b43fd --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/style.scss @@ -0,0 +1,23 @@ +.woocommerce .wp-block-woocommerce-product-gallery-large-image { + position: relative; + // This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container + clear: both; + + span.onsale { + right: unset; + z-index: 1; + left: -1rem; + } +} + +// This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container +.woocommerce .wp-block-woocommerce-product-gallery-large-image::after { + clear: both; + content: ""; + display: table; +} + + +.woocommerce .wp-block-woocommerce-product-gallery-large-image .woocommerce-product-gallery.images { + width: auto; +} diff --git a/plugins/woocommerce-blocks/bin/webpack-entries.js b/plugins/woocommerce-blocks/bin/webpack-entries.js index 7e9ae06710a..be584009914 100644 --- a/plugins/woocommerce-blocks/bin/webpack-entries.js +++ b/plugins/woocommerce-blocks/bin/webpack-entries.js @@ -50,6 +50,10 @@ const blocks = { 'product-gallery': { isExperimental: true, }, + 'product-gallery-large-image': { + customDir: 'product-gallery/inner-blocks/product-gallery-large-image', + isExperimental: true, + }, 'product-new': {}, 'product-on-sale': {}, 'product-query': { diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductGalleryLargeImage.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductGalleryLargeImage.php new file mode 100644 index 00000000000..ae7de3e0d0c --- /dev/null +++ b/plugins/woocommerce-blocks/src/BlockTypes/ProductGalleryLargeImage.php @@ -0,0 +1,80 @@ +context['postId']; + + if ( ! isset( $post_id ) ) { + return ''; + } + + global $product; + + $previous_product = $product; + $product = wc_get_product( $post_id ); + if ( ! $product instanceof \WC_Product ) { + $product = $previous_product; + + return ''; + } + + if ( class_exists( 'WC_Frontend_Scripts' ) ) { + $frontend_scripts = new \WC_Frontend_Scripts(); + $frontend_scripts::load_scripts(); + } + + ob_start(); + woocommerce_show_product_sale_flash(); + $sale_badge_html = ob_get_clean(); + + ob_start(); + remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 ); + woocommerce_show_product_images(); + $product_image_gallery_html = ob_get_clean(); + add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 ); + + $product = $previous_product; + $classname = $attributes['className'] ?? ''; + return sprintf( + '
%2$s %3$s
', + esc_attr( $classname ), + $sale_badge_html, + $product_image_gallery_html + ); + } +} diff --git a/plugins/woocommerce-blocks/src/BlockTypesController.php b/plugins/woocommerce-blocks/src/BlockTypesController.php index 1695cea0d22..5a62e04fb52 100644 --- a/plugins/woocommerce-blocks/src/BlockTypesController.php +++ b/plugins/woocommerce-blocks/src/BlockTypesController.php @@ -191,6 +191,7 @@ final class BlockTypesController { 'ProductCategories', 'ProductCategory', 'ProductGallery', + 'ProductGalleryLargeImage', 'ProductImage', 'ProductImageGallery', 'ProductNew',