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.
This commit is contained in:
Daniel Dudzic
GitHub
parent
ad973e9b46
commit
f6a4b3c143
|
|
@ -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,
|
||||
} );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" ]
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className="wc-block-editor-product-gallery-large-image">
|
||||
<img
|
||||
src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
|
||||
alt="Placeholder"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<Disabled>
|
||||
<Placeholder />
|
||||
</Disabled>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Save = (): JSX.Element => {
|
||||
return <div { ...useBlockProps.save() }></div>;
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
const Icon = () => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.22448 1.5L1.5 6.81504V11.7072L5.12953 9.06066C5.38061 8.87758 5.71858 8.86829 5.97934 9.0373L8.90601 10.9342L12.4772 7.46225C12.7683 7.17925 13.2317 7.17925 13.5228 7.46225L16.5 10.3568V2C16.5 1.72386 16.2761 1.5 16 1.5H6.22448ZM1.5 13.5636V16C1.5 16.2761 1.72386 16.5 2 16.5H16C16.2761 16.5 16.5 16.2761 16.5 16V12.4032L16.4772 12.4266L13 9.04603L9.52279 12.4266C9.27191 12.6706 8.88569 12.7086 8.59206 12.5183L5.59643 10.5766L1.5 13.5636ZM0 2C0 0.89543 0.895431 0 2 0H16C17.1046 0 18 0.895431 18 2V16C18 17.1046 17.1046 18 16 18H2C0.89543 18 0 17.1046 0 16V2Z"
|
||||
fill="#1E1E1E"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default Icon;
|
||||
|
|
@ -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,
|
||||
} );
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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': {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
<?php
|
||||
namespace Automattic\WooCommerce\Blocks\BlockTypes;
|
||||
|
||||
/**
|
||||
* ProductGalleryLargeImage class.
|
||||
*/
|
||||
class ProductGalleryLargeImage extends AbstractBlock {
|
||||
/**
|
||||
* Block name.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $block_name = 'product-gallery-large-image';
|
||||
|
||||
/**
|
||||
* It isn't necessary register block assets because it is a server side block.
|
||||
*/
|
||||
protected function register_block_type_assets() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register the context
|
||||
*
|
||||
* @return string[]
|
||||
*/
|
||||
protected function get_block_type_uses_context() {
|
||||
return [ 'query', 'queryId', 'postId' ];
|
||||
}
|
||||
|
||||
/**
|
||||
* Include and render the block.
|
||||
*
|
||||
* @param array $attributes Block attributes. Default empty array.
|
||||
* @param string $content Block content. Default empty string.
|
||||
* @param WP_Block $block Block instance.
|
||||
* @return string Rendered block type output.
|
||||
*/
|
||||
protected function render( $attributes, $content, $block ) {
|
||||
$post_id = $block->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(
|
||||
'<div class="wp-block-woocommerce-product-gallery-large-image %1$s">%2$s %3$s</div>',
|
||||
esc_attr( $classname ),
|
||||
$sale_badge_html,
|
||||
$product_image_gallery_html
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -191,6 +191,7 @@ final class BlockTypesController {
|
|||
'ProductCategories',
|
||||
'ProductCategory',
|
||||
'ProductGallery',
|
||||
'ProductGalleryLargeImage',
|
||||
'ProductImage',
|
||||
'ProductImageGallery',
|
||||
'ProductNew',
|
||||
|
|
|
|||
Loading…
Reference in New Issue