Product Rating block: Add Single Product template support to the block (https://github.com/woocommerce/woocommerce-blocks/pull/9499)
* Add Single Product template support to Product Rating block * Remove example attribute from block.json Co-authored-by: Luigi Teschio <gigitux@gmail.com> * 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 <gigitux@gmail.com>
This commit is contained in:
Alexandre Lara
GitHub
parent
ec797e689f
commit
134b12bef7
|
|
@ -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;
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -2,5 +2,6 @@ export interface BlockAttributes {
|
|||
productId: number;
|
||||
isDescendentOfQueryLoop: boolean;
|
||||
isDescendentOfSingleProductBlock: boolean;
|
||||
isDescendentOfSingleProductTemplate: boolean;
|
||||
textAlign: string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue