From 4b6f3cae7ee00aa7fd014968c733b7d815188aa2 Mon Sep 17 00:00:00 2001 From: "Daniel W. Robert" Date: Fri, 7 Oct 2022 12:08:33 -0400 Subject: [PATCH] Add Product Query Support for Atomic Price Block (https://github.com/woocommerce/woocommerce-blocks/pull/7199) * Add attributes, settings, and editor PQ settings. - Adds isDescendentOfQueryLoop attribute and sets up usage in editor. - Connects Context (via useContext) in editor. - Sets up necessary hierarchy in block index file settings. * Add server-side rendered product price. Adds the SSR output for the atomic Price block for PQ support. * Remove Save attribute from JS index. To allow for the block to be SSR, we need to remove the Save attrubite/function on the JS side and allow for the PHP class to handle it on the backend. * Update PHP asset register method for added clarity * Adjust block attr/context spreading for clarity. --- .../product-elements/price/attributes.js | 4 ++ .../blocks/product-elements/price/edit.js | 16 ++++++- .../blocks/product-elements/price/index.js | 9 +++- .../src/BlockTypes/ProductPrice.php | 43 +++++++++++++++++-- 4 files changed, 64 insertions(+), 8 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js index 3b90595ded3..d2baa73ae36 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js @@ -8,6 +8,10 @@ let blockAttributes = { type: 'number', default: 0, }, + isDescendentOfQueryLoop: { + type: 'boolean', + default: false, + }, }; if ( isFeaturePluginBuild() ) { diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js index d2adfc743b3..e0acf021781 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js @@ -8,6 +8,7 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; +import { useEffect } from 'react'; /** * Internal dependencies @@ -16,8 +17,19 @@ import Block from './block'; import withProductSelector from '../shared/with-product-selector'; import { BLOCK_TITLE, BLOCK_ICON } from './constants'; -const PriceEdit = ( { attributes, setAttributes } ) => { +const PriceEdit = ( { attributes, setAttributes, context } ) => { const blockProps = useBlockProps(); + const blockAttrs = { + ...attributes, + ...context, + }; + const isDescendentOfQueryLoop = Number.isFinite( context.queryId ); + + useEffect( + () => setAttributes( { isDescendentOfQueryLoop } ), + [ setAttributes, isDescendentOfQueryLoop ] + ); + return ( <> @@ -31,7 +43,7 @@ const PriceEdit = ( { attributes, setAttributes } ) => { ) }
- +
); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js index 9ebb4f49637..c677df16713 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js @@ -9,7 +9,6 @@ import { registerBlockType } from '@wordpress/blocks'; */ import sharedConfig from '../shared/config'; import edit from './edit'; -import { Save } from './save'; import attributes from './attributes'; import { BLOCK_TITLE as title, @@ -22,10 +21,16 @@ 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, edit, - save: Save, supports: { ...sharedConfig.supports, ...( isFeaturePluginBuild() && { diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php index c067f673f34..ba078082b3b 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php @@ -45,12 +45,47 @@ class ProductPrice extends AbstractBlock { } /** - * Register script and style assets for the block type before it is registered. + * Overwrite parent method to prevent script registration. * - * 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() { - parent::register_block_type_assets(); - $this->register_chunk_translations( [ $this->block_name ] ); + 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 ) { + return sprintf( + '
+ %s +
', + $product->get_price_html() + ); + } } }