Add to the Product Button block the support for the Product Query block (https://github.com/woocommerce/woocommerce-blocks/pull/6948)
* Adds to the Product Image Block the support for the Product Query Block Adds to the Product Image Block the support for the Product Query Block woocommerce/woocommerce-blocks#6911 * use shared config * use shared config * use shared config * Add to the Product Button Block the support for the Product Query Block * Add to the Product Image Block the support for the Product Query Block * fix lint errors * address feedback * set grid view and font-size L as default
This commit is contained in:
parent
7125b08655
commit
3732363ba6
|
@ -3,6 +3,10 @@ export const blockAttributes = {
|
|||
type: 'number',
|
||||
default: 0,
|
||||
},
|
||||
isDescendentOfQueryLoop: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
};
|
||||
|
||||
export default blockAttributes;
|
||||
|
|
|
@ -1,33 +1,30 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Disabled } from '@wordpress/components';
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Block from './block';
|
||||
import withProductSelector from '../shared/with-product-selector';
|
||||
import { BLOCK_TITLE, BLOCK_ICON } from './constants';
|
||||
|
||||
const Edit = ( { attributes } ) => {
|
||||
const Edit = ( { attributes, setAttributes, context } ) => {
|
||||
const blockProps = useBlockProps();
|
||||
const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
|
||||
|
||||
useEffect(
|
||||
() => setAttributes( { isDescendentOfQueryLoop } ),
|
||||
[ setAttributes, isDescendentOfQueryLoop ]
|
||||
);
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<Disabled>
|
||||
<Block { ...attributes } />
|
||||
<Block { ...{ ...attributes, ...context } } />
|
||||
</Disabled>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withProductSelector( {
|
||||
icon: BLOCK_ICON,
|
||||
label: BLOCK_TITLE,
|
||||
description: __(
|
||||
'Choose a product to display its add to cart button.',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
} )( Edit );
|
||||
export default Edit;
|
||||
|
|
|
@ -15,17 +15,22 @@ import {
|
|||
BLOCK_DESCRIPTION as description,
|
||||
} from './constants';
|
||||
import { supports } from './supports';
|
||||
import { Save } from '../title/save';
|
||||
|
||||
const blockConfig = {
|
||||
apiVersion: 2,
|
||||
title,
|
||||
description,
|
||||
parent: [ 'core/group' ],
|
||||
ancestor: [
|
||||
'@woocommerce/all-products',
|
||||
'@woocommerce/single-product',
|
||||
'core/post-template',
|
||||
],
|
||||
usesContext: [ 'query', 'queryId', 'postId' ],
|
||||
icon: { src: icon },
|
||||
attributes,
|
||||
supports,
|
||||
edit,
|
||||
save: Save,
|
||||
};
|
||||
|
||||
registerBlockType( 'woocommerce/product-button', {
|
||||
|
|
|
@ -36,3 +36,7 @@
|
|||
border-color: var(--button--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-button.wc-block-components-product-button[data-is-descendent-of-query-loop="true"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
<?php
|
||||
namespace Automattic\WooCommerce\Blocks\BlockTypes;
|
||||
|
||||
use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
|
||||
|
||||
/**
|
||||
* ProductButton class.
|
||||
*/
|
||||
|
@ -51,12 +53,61 @@ class ProductButton extends AbstractBlock {
|
|||
}
|
||||
|
||||
/**
|
||||
* Register script and style assets for the block type before it is registered.
|
||||
*
|
||||
* This registers the scripts; it does not enqueue them.
|
||||
* It is necessary to register and enqueues assets during the render phase because we want to load assets only if the block has the content.
|
||||
*/
|
||||
protected function register_block_type_assets() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register the context.
|
||||
*/
|
||||
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 ) {
|
||||
if ( ! empty( $content ) ) {
|
||||
parent::register_block_type_assets();
|
||||
$this->register_chunk_translations( [ $this->block_name ] );
|
||||
return $content;
|
||||
}
|
||||
|
||||
$post_id = $block->context['postId'];
|
||||
$product = wc_get_product( $post_id );
|
||||
|
||||
if ( $product ) {
|
||||
$cart_redirect_after_add = get_option( 'woocommerce_cart_redirect_after_add' ) === 'yes';
|
||||
$html_element = ( ! $product->has_options() && $product->is_purchasable() && $product->is_in_stock() && ! $cart_redirect_after_add ) ? 'button' : 'a';
|
||||
$styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'border_radius', 'font_size', 'text_color' ) );
|
||||
|
||||
return apply_filters(
|
||||
'woocommerce_loop_add_to_cart_link',
|
||||
sprintf(
|
||||
'<div class="wp-block-button wc-block-components-product-button wc-block-grid__product-add-to-cart">
|
||||
<%s href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="wp-block-button__link %s wc-block-components-product-button__button product_type_%s %s" style="%s">%s</%s>
|
||||
</div>',
|
||||
$html_element,
|
||||
esc_url( $product->add_to_cart_url() ),
|
||||
esc_attr( $product->get_id() ),
|
||||
esc_attr( $product->get_sku() ),
|
||||
$product->is_purchasable() ? 'ajax_add_to_cart add_to_cart_button' : '',
|
||||
esc_attr( $product->get_type() ),
|
||||
$styles_and_classes['classes'],
|
||||
$styles_and_classes['styles'],
|
||||
esc_html( $product->add_to_cart_text() ),
|
||||
$html_element
|
||||
),
|
||||
$product
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue