From 45109f4ebcf772a2a3edb1cdf3da01996dcfbd6b Mon Sep 17 00:00:00 2001 From: Alexandre Lara Date: Mon, 29 May 2023 16:54:36 -0300 Subject: [PATCH] Product Rating block: Add Single Product template support to the block (#9499) * Add Single Product template support to Product Rating block * Remove example attribute from block.json Co-authored-by: Luigi Teschio * Set isDescedentOfSingleProductTemplate attribute default to false * Remove withProductSelector HOC Since we are using the `ancestor` key then we don't need to use this HOC anymore * Remove unused import on Product Rating Edit component --------- Co-authored-by: Luigi Teschio --- .../product-elements/rating/attributes.ts | 25 ---------- .../blocks/product-elements/rating/block.json | 38 +++++++++++++++ .../blocks/product-elements/rating/edit.tsx | 46 +++++++++++-------- .../blocks/product-elements/rating/index.ts | 21 ++++----- .../blocks/product-elements/rating/types.ts | 1 + 5 files changed, 75 insertions(+), 56 deletions(-) delete mode 100644 assets/js/atomic/blocks/product-elements/rating/attributes.ts create mode 100644 assets/js/atomic/blocks/product-elements/rating/block.json diff --git a/assets/js/atomic/blocks/product-elements/rating/attributes.ts b/assets/js/atomic/blocks/product-elements/rating/attributes.ts deleted file mode 100644 index d8bc88bb321..00000000000 --- a/assets/js/atomic/blocks/product-elements/rating/attributes.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * External dependencies - */ -import type { BlockAttributes } from '@wordpress/blocks'; - -export const blockAttributes: BlockAttributes = { - productId: { - type: 'number', - default: 0, - }, - isDescendentOfQueryLoop: { - type: 'boolean', - default: false, - }, - textAlign: { - type: 'string', - default: '', - }, - isDescendentOfSingleProductBlock: { - type: 'boolean', - default: false, - }, -}; - -export default blockAttributes; diff --git a/assets/js/atomic/blocks/product-elements/rating/block.json b/assets/js/atomic/blocks/product-elements/rating/block.json new file mode 100644 index 00000000000..b9e82fc6916 --- /dev/null +++ b/assets/js/atomic/blocks/product-elements/rating/block.json @@ -0,0 +1,38 @@ +{ + "name": "woocommerce/product-rating", + "version": "1.0.0", + "icon": "info", + "title": "Product Rating", + "description": "Display the average rating of a product.", + "attributes": { + "productId": { + "type": "number", + "default": 0 + }, + "isDescendentOfQueryLoop": { + "type": "boolean", + "default": false + }, + "textAlign": { + "type": "string", + "default": "" + }, + "isDescendentOfSingleProductBlock": { + "type": "boolean", + "default": false + }, + "isDescendentOfSingleProductTemplate": { + "type": "boolean", + "default": false + } + }, + "usesContext": [ "query", "queryId", "postId" ], + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "supports": { + "align": true + }, + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/assets/js/atomic/blocks/product-elements/rating/edit.tsx b/assets/js/atomic/blocks/product-elements/rating/edit.tsx index 78562b950e1..f8072aecb39 100644 --- a/assets/js/atomic/blocks/product-elements/rating/edit.tsx +++ b/assets/js/atomic/blocks/product-elements/rating/edit.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; import { AlignmentToolbar, BlockControls, @@ -10,22 +9,20 @@ import { import type { BlockEditProps } from '@wordpress/blocks'; import { useEffect } from '@wordpress/element'; import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import Block from './block'; -import withProductSelector from '../shared/with-product-selector'; -import { BLOCK_TITLE, BLOCK_ICON } from './constants'; import { BlockAttributes } from './types'; import './editor.scss'; import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block'; -const Edit = ( { - attributes, - setAttributes, - context, -}: BlockEditProps< BlockAttributes > & { context: Context } ): JSX.Element => { +const Edit = ( + props: BlockEditProps< BlockAttributes > & { context: Context } +): JSX.Element => { + const { attributes, setAttributes, context } = props; const blockProps = useBlockProps( { className: 'wp-block-woocommerce-product-rating', } ); @@ -39,14 +36,33 @@ const Edit = ( { useIsDescendentOfSingleProductBlock( { blockClientId: blockProps?.id, } ); + const { isDescendentOfSingleProductTemplate } = useSelect( + ( select ) => { + const store = select( 'core/edit-site' ); + const postId = store?.getEditedPostId< string | undefined >(); + + return { + isDescendentOfSingleProductTemplate: Boolean( + postId?.includes( '//single-product' ) && + ! isDescendentOfQueryLoop && + ! isDescendentOfSingleProductBlock + ), + }; + }, + [ isDescendentOfQueryLoop, isDescendentOfSingleProductBlock ] + ); useEffect( () => { - setAttributes( { isDescendentOfQueryLoop } ); - setAttributes( { isDescendentOfSingleProductBlock } ); + setAttributes( { + isDescendentOfQueryLoop, + isDescendentOfSingleProductBlock, + isDescendentOfSingleProductTemplate, + } ); }, [ setAttributes, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, + isDescendentOfSingleProductTemplate, ] ); return ( @@ -65,11 +81,5 @@ const Edit = ( { ); }; -export default withProductSelector( { - icon: BLOCK_ICON, - label: BLOCK_TITLE, - description: __( - 'Choose a product to display its rating.', - 'woo-gutenberg-products-block' - ), -} )( Edit ); + +export default Edit; diff --git a/assets/js/atomic/blocks/product-elements/rating/index.ts b/assets/js/atomic/blocks/product-elements/rating/index.ts index 576de8ceaa1..cb70ac847b9 100644 --- a/assets/js/atomic/blocks/product-elements/rating/index.ts +++ b/assets/js/atomic/blocks/product-elements/rating/index.ts @@ -1,28 +1,20 @@ /** * External dependencies */ -import { registerBlockType } from '@wordpress/blocks'; import type { BlockConfiguration } from '@wordpress/blocks'; +import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils'; /** * Internal dependencies */ import sharedConfig from '../shared/config'; -import attributes from './attributes'; import edit from './edit'; -import { - BLOCK_TITLE as title, - BLOCK_ICON as icon, - BLOCK_DESCRIPTION as description, -} from './constants'; +import { BLOCK_ICON as icon } from './constants'; +import metadata from './block.json'; import { supports } from './support'; const blockConfig: BlockConfiguration = { ...sharedConfig, - apiVersion: 2, - title, - description, - usesContext: [ 'query', 'queryId', 'postId' ], ancestor: [ 'woocommerce/all-products', 'woocommerce/single-product', @@ -30,9 +22,12 @@ const blockConfig: BlockConfiguration = { 'woocommerce/product-template', ], icon: { src: icon }, - attributes, supports, edit, }; -registerBlockType( 'woocommerce/product-rating', { ...blockConfig } ); +registerBlockSingleProductTemplate( { + blockName: 'woocommerce/product-rating', + blockMetadata: metadata, + blockSettings: blockConfig, +} ); diff --git a/assets/js/atomic/blocks/product-elements/rating/types.ts b/assets/js/atomic/blocks/product-elements/rating/types.ts index b2f248607f6..f6f8e5296ac 100644 --- a/assets/js/atomic/blocks/product-elements/rating/types.ts +++ b/assets/js/atomic/blocks/product-elements/rating/types.ts @@ -2,5 +2,6 @@ export interface BlockAttributes { productId: number; isDescendentOfQueryLoop: boolean; isDescendentOfSingleProductBlock: boolean; + isDescendentOfSingleProductTemplate: boolean; textAlign: string; }