[Product Collection] Add unique ID attribute (#43314)
* Add unique ID attribute to Product Collection block In this update, we introduced a unique identifier for each instance of the Product Collection block. This change involves several key modifications: 1. **Block JSON Update**: Added a new `id` attribute in `block.json` to store the unique identifier for each block instance. 2. **Product Collection Content Update**: In `product-collection-content.tsx`, we utilized the `uuid` library to generate a unique ID. This is done in a `useEffect` hook, ensuring that each block instance receives a distinct ID upon initialization. 3. **Type Definitions**: The `ProductCollectionAttributes` interface in `types.ts` was updated to include the new `id` attribute, aligning with our enhanced data structure. 4. **Package Dependencies**: To support this feature, `@types/uuid` and `uuid` were added to `package.json`, ensuring we have the necessary tools for ID generation. This enhancement is pivotal for uniquely identifying each Product Collection block, paving the way for more robust and individualized block handling in the future. * Rename uniqueId to id * Add lock file * Add 'id' context to product collection and template * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Merge trunk with 42861-introduce-a-unique-identifier-for-each-product-collection-block * Regenerate the lockfile * Remove autogenerated change in plugins/woocommerce/package.json * Regenerate lock file * Rerun CI actions * Delete pnpm-lock.yaml file & regenerate it using pnpm install command --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Manish Menaria
GitHub
parent
5f6e18e922
commit
8c284a5074
|
|
@ -9,6 +9,9 @@
|
|||
"keywords": [ "WooCommerce", "Products (Beta)" ],
|
||||
"textdomain": "woocommerce",
|
||||
"attributes": {
|
||||
"id": {
|
||||
"type": "string"
|
||||
},
|
||||
"queryId": {
|
||||
"type": "number"
|
||||
},
|
||||
|
|
@ -34,6 +37,7 @@
|
|||
}
|
||||
},
|
||||
"providesContext": {
|
||||
"id": "id",
|
||||
"queryId": "queryId",
|
||||
"query": "query",
|
||||
"displayLayout": "displayLayout"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
|
||||
import { useInstanceId } from '@wordpress/compose';
|
||||
import { useEffect } from '@wordpress/element';
|
||||
import { v4 as uuidV4 } from 'uuid';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -39,6 +40,16 @@ const ProductCollectionContent = (
|
|||
}
|
||||
}, [ queryId, instanceId, setAttributes ] );
|
||||
|
||||
/**
|
||||
* We need to set a unique ID for each instance of this block.
|
||||
* This will help us uniquely identify each block.
|
||||
*/
|
||||
useEffect( () => {
|
||||
if ( ! attributes?.id ) {
|
||||
setAttributes( { id: uuidV4() } );
|
||||
}
|
||||
}, [ attributes, setAttributes ] );
|
||||
|
||||
/**
|
||||
* Because of issue https://github.com/WordPress/gutenberg/issues/7342,
|
||||
* We are using this workaround to set default attributes.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import type { BlockEditProps } from '@wordpress/blocks';
|
|||
import { type AttributeMetadata } from '@woocommerce/types';
|
||||
|
||||
export interface ProductCollectionAttributes {
|
||||
id: string;
|
||||
query: ProductCollectionQuery;
|
||||
queryId: number;
|
||||
queryContext: [
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@
|
|||
"category": "woocommerce",
|
||||
"description": "Contains the block elements used to render a product.",
|
||||
"keywords": [ "WooCommerce" ],
|
||||
"textdomain": "woocommerce",
|
||||
"textdomain": "woocommerce",
|
||||
"usesContext": [
|
||||
"id",
|
||||
"queryId",
|
||||
"query",
|
||||
"queryContext",
|
||||
|
|
|
|||
|
|
@ -116,8 +116,8 @@
|
|||
"@babel/plugin-proposal-class-properties": "7.18.6",
|
||||
"@babel/plugin-proposal-optional-chaining": "7.21.0",
|
||||
"@babel/plugin-syntax-jsx": "7.22.5",
|
||||
"@babel/preset-react": "7.23.3",
|
||||
"@babel/polyfill": "7.12.1",
|
||||
"@babel/preset-react": "7.23.3",
|
||||
"@babel/preset-typescript": "7.23.2",
|
||||
"@bartekbp/typescript-checkstyle": "5.0.0",
|
||||
"@octokit/action": "5.0.2",
|
||||
|
|
@ -153,6 +153,7 @@
|
|||
"@types/react": "^17.0.71",
|
||||
"@types/react-dom": "18.0.10",
|
||||
"@types/react-transition-group": "^4.4.10",
|
||||
"@types/uuid": "^9.0.7",
|
||||
"@types/wordpress__block-editor": "6.0.6",
|
||||
"@types/wordpress__blocks": "11.0.9",
|
||||
"@types/wordpress__components": "^23.0.10",
|
||||
|
|
@ -316,6 +317,7 @@
|
|||
"trim-html": "0.1.9",
|
||||
"use-debounce": "9.0.4",
|
||||
"usehooks-ts": "^2.9.1",
|
||||
"uuid": "^9.0.1",
|
||||
"wordpress-components": "npm:@wordpress/components@14.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: add
|
||||
Comment: Add "id" attribute which will be unique for each Product Collection block
|
||||
|
||||
|
|
@ -3941,6 +3941,9 @@ importers:
|
|||
usehooks-ts:
|
||||
specifier: ^2.9.1
|
||||
version: 2.9.1(react-dom@17.0.2)(react@17.0.2)
|
||||
uuid:
|
||||
specifier: ^9.0.1
|
||||
version: 9.0.1
|
||||
wordpress-components:
|
||||
specifier: npm:@wordpress/components@14.2.0
|
||||
version: /@wordpress/components@14.2.0(@types/react@17.0.71)(react-dom@17.0.2)(react-with-direction@1.4.0)(react@17.0.2)(reakit-utils@0.15.2)(redux@4.2.1)
|
||||
|
|
@ -4084,6 +4087,9 @@ importers:
|
|||
'@types/react-transition-group':
|
||||
specifier: ^4.4.10
|
||||
version: 4.4.10
|
||||
'@types/uuid':
|
||||
specifier: ^9.0.7
|
||||
version: 9.0.7
|
||||
'@types/wordpress__block-editor':
|
||||
specifier: 6.0.6
|
||||
version: 6.0.6(react-dom@17.0.2)(react@17.0.2)
|
||||
|
|
@ -46931,6 +46937,7 @@ packages:
|
|||
react-is: 16.13.1
|
||||
scheduler: 0.19.1
|
||||
dev: true
|
||||
bundledDependencies: false
|
||||
|
||||
/react-test-renderer@17.0.2(react@17.0.2):
|
||||
resolution: {integrity: sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==}
|
||||
|
|
|
|||
Loading…
Reference in New Issue