Fix: Featured invalid-id item handled with new item picker panel #59033

Kallyan01 · 2025-06-20T14:26:57Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR introduces a custom hook useFeaturedItemStatus to handle invalid selected items for the Featured Product and Featured Category block.

The useFeaturedItemStatus hook:

Accepts an itemId and an itemType ('product' or 'category')
Returns three state values:
- status: the current publish status of the item ('publish', 'draft', etc.)
- isDeleted: a boolean indicating whether the item has been deleted .
- isLoading: indicates the loading state during fetch.

Closes #42677 .

Screenshots or screen recordings:

featured-item-invalid-id-fix-video.mov

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Add a Featured Product or Featured Category block to a post/page.
Select an item from the picker and publish the page.
Delete the selected product/category from the dashboard.
Reopen the editor:
- The block should automatically switch to edit mode
- The picker UI should prompt the user to select a new item
Repeat the same steps for both block types to ensure consistency.

Testing that has already taken place:

Changelog entry

Automatically create a changelog entry from the details below.

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

Summary by CodeRabbit

Bug Fixes
- Improved handling of invalid or deleted product and category references in featured item blocks to prevent display errors or inconsistencies.
New Features
- Added contextual feedback in edit mode when a selected product or category is no longer available.
- Introduced a new info icon with updated styling and color in the featured items block for clearer status indication.
Style
- Updated the info icon color in the featured items block for enhanced visual clarity.

… or deleted

coderabbitai · 2025-06-20T14:27:04Z

Walkthrough

The changes introduce logic to handle cases where a featured product or category in WooCommerce blocks becomes invalid, such as when deleted or unpublished. A new React hook checks the item’s status, and the block editor UI now displays a contextual message if the item is unavailable. Minor style updates and utility functions support this behavior.

Changes

File(s)	Change Summary
plugins/woocommerce/changelog/fix-develop-featured-items-invalid-id	Changelog entry describing the fix for handling invalid featured item IDs.
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/style.scss	Added CSS rule for orange info icon in featured items block.
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts	New React hook to determine the status, deletion, and loading state of a featured product or category.
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/utils.ts	Added utility function to generate a localized description for invalid featured items.
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx	Integrated new hook, updated edit mode logic, and changed UI to display contextual invalid item messages.

Assessment against linked issues

Objective	Addressed	Explanation
Display a message in the editor if the Featured Product is not 'Published' (#42677)	✅
Display a message if the Featured Product is deleted or otherwise unavailable (#42677)	✅

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes were found.

✨ Finishing Touches

📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 6

🧹 Nitpick comments (4)

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/utils.ts (1)
4-4: Import organization improvement.

Consider keeping external dependencies at the top and internal dependencies below for better organization consistency.
/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
 * Internal dependencies
 */
import { BLOCK_NAMES } from './constants';
-import { Coordinates, ImageFit } from './types';
-
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
+import { Coordinates, ImageFit } from './types';
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts (1)
12-21: Improve TypeScript interfaces.

The interfaces could be more specific and descriptive.
-interface FeaturedItemProps {
+interface UseFeaturedItemStatusProps {
 	itemId: number | undefined;
-	itemType: string;
+	itemType: typeof BLOCK_NAMES.featuredProduct | typeof BLOCK_NAMES.featuredCategory;
 }

-interface FeaturedItemReturnType {
+interface UseFeaturedItemStatusReturn {
-	status: string | null;
-	isDeleted: boolean | null;
+	status: 'publish' | 'draft' | 'deleted' | null;
+	isDeleted: boolean;
 	isLoading: boolean;
 }
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx (1)
51-51: Update interface for consistency.

The isLoading property was added but the interface description could be clearer.
 interface EditModeRequiredProps< T > {
 	attributes: EditModeRequiredAttributes & EditorBlock< T >[ 'attributes' ];
 	debouncedSpeak: ( label: string ) => void;
 	setAttributes: ( attrs: Partial< EditModeRequiredAttributes > ) => void;
 	triggerUrlUpdate: () => void;
-	isLoading: boolean;
+	isLoading?: boolean; // Optional since it's derived from the hook
 }
plugins/woocommerce/changelog/fix-develop-featured-items-invalid-id (1)
4-4: Improve changelog entry clarity and grammar.

The description could be more specific and grammatically correct.
-Handled the invalid product id once the product is deleted or moved to draft in featured item blocks .
+Handle invalid product/category IDs when items are deleted or moved to draft in featured item blocks.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 966b4f8 and c92b874.

📒 Files selected for processing (5)

plugins/woocommerce/changelog/fix-develop-featured-items-invalid-id (1 hunks)
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/style.scss (1 hunks)
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts (1 hunks)
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/utils.ts (2 hunks)
plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx (3 hunks)

🔇 Additional comments (1)

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/style.scss (1)

184-186: LGTM! Clean CSS implementation.

The CSS rule properly uses CSS custom properties with a fallback color and follows the established naming conventions. The orange color choice effectively communicates the warning/info state for invalid items.

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/utils.ts

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx

github-actions · 2025-06-25T13:19:49Z

Testing Guidelines

Hi ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

🖼️ Screenshots or screen recordings.
📝 List of functionality tested / steps followed.
🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

gigitux

Thanks for working on this! Everything works as expected:

Screen.Capture.on.2025-06-26.at.14-53-11.mp4

I left a few comments, but they are pretty straightforward to fix.

I see two interesting follow-ups if you are interested in working on:

Remove editMode attribute -> I think that we should not have the editMode attribute because it is just a “flag” for the editor side, but handle with a React state.
We have the same issue for other blocks. It would be interesting to create a block that renders the list of product/category/etc and handles the invalid ID too. At the same time, I don't know how much effort is required.

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/utils.ts

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/with-edit-mode.tsx

gigitux · 2025-06-26T13:00:20Z

Also, it looks like that this PR breaks some E2E tests. Can you investigate why?

…tton was not usable is resolved

Kallyan01 · 2025-07-04T10:44:46Z

Hello @gigitux ,
I have resolved the e2e testcases , the item picker Done button was causing the failure because we were skipping click event on it entirely and setting the editMode to false once the user selects an option. I've resolved that issue now .

I have a doubt regarding product_variation postType . Can we make it available in rest api ?

	register_post_type(
			'product_variation',
			apply_filters(
				'woocommerce_register_post_type_product_variation',
				array(
					'label'           => __( 'Variations', 'woocommerce' ),
					'public'          => false,
					'hierarchical'    => false,
					'supports'        => false,
					'capability_type' => 'product',
					'rewrite'         => false,
					'show_in_rest'    => true,
				)
			)
		);

The reason behind this change is , while i was performing test on the productPicker i've noticed it's only working for single products .Whenever i'm selecting a variable product option -> save -> refresh it , it's causing edit mode to true as the product was not found as it's a product_variation type post [ref].

Kallyan01 · 2025-08-01T11:46:05Z

@gigitux if i'm not wrong the failed CI test isn't associated with this PRs changes.

gigitux · 2025-08-01T12:16:53Z

@gigitux if i'm not wrong the failed CI test isn't associated with this PRs changes.

You're right!

gigitux

Thanks, I left a comment regarding a refactor that it is needed. Also, I noticed that the label is wrong when the product list is rendered: can you replicate it?

Screen.Capture.on.2025-08-01.at.14-26-13.mp4

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts

…s invalid-ids

Kallyan01 · 2025-08-04T14:36:59Z

@gigitux resolved the feedbacks, Thanks!

featured-items-edit-mode-test.mov

gigitux

I tested the PR and now it works correctly! I left a small feedback; once you fix it, I will do the final round of testing! Thanks! 🙇

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts

Kallyan01 · 2025-08-06T13:50:00Z

I tested the PR and now it works correctly! I left a small feedback; once you fix it, I will do the final round of testing! Thanks! 🙇

Thanks, removed the parenthesis.

gigitux

Thanks for all your work. LGTM! Everything works as expected!

Blocks with not deleted product

Screen.Capture.on.2025-08-08.at.08-44-56.mp4

Blocks with deleted product

Screen.Capture.on.2025-08-08.at.08-46-04.mp4

It is not related to this PR, but I noticed a different behavior between the Featured Category block and the Featured Product block.

When the category is deleted, the block renders nothing on the frontend. However, in the Featured Product block, the product is still displayed. This likely happens because the PHP render logic for Featured Product doesn’t check whether the product is in the trash.

…ter type safety

gigitux · 2025-08-08T07:14:58Z

Also, with 3d5f993, I update the error type from Error to ErrorObject.

Why

Upstream HOCs (withProduct/withCategory) return Promise<ErrorObject> via formatError().
withEditMode passes this to downstream HOCs.
Downstream (withApiError) expects ErrorObject for ErrorPlaceholder.

I hope that it makes sense!

Kallyan01 added 4 commits June 20, 2025 19:50

Feat: Improved error handling when product or category is unpublished…

bf557c3

… or deleted

Fix: Resolved issues with initial loading functionality

2018432

Fix: Resolved featured item selector panel bug

abb0f6e

Feat: Hook logic improved

c92b874

github-actions bot added type: community contribution plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jun 20, 2025

coderabbitai bot reviewed Jun 20, 2025

View reviewed changes

Kallyan01 added 4 commits June 20, 2025 20:19

Merge branch 'trunk' into fix/featured-item-invalid-id

98055e3

Fix: Code feedbacks resolved

a24fe54

Merge branch 'trunk' into fix/featured-item-invalid-id

fce5522

Merge branch 'trunk' into fix/featured-item-invalid-id

3c680c5

Kallyan01 mentioned this pull request Jun 25, 2025

Featured Product: display a message in the editor if the product is not 'Published' #42677

Closed

Aljullu requested review from a team and gigitux and removed request for a team June 25, 2025 13:19

gigitux requested changes Jun 26, 2025

View reviewed changes

Kallyan01 added 10 commits June 27, 2025 16:39

Fix: Type errors resolved

a934a2c

Merge branch 'trunk' into fix/featured-item-invalid-id

a13d0e9

Fix: Removed caps letter in-between error message

98ede9d

Fix: Resolved featured-category picker bug

6a1f9e4

Merge branch 'trunk' into fix/featured-item-invalid-id

be2c1e3

Fix: Lint errors resolved

32392a9

Merge branch 'trunk' into fix/featured-item-invalid-id

7ee56ca

Fix: Category and Product picker item selection bug where the done bu…

e7f78eb

…tton was not usable is resolved

Fix: Resolved radio button issue on select

46852fb

Fix: Loading issue resolved

b7e8425

Merge branch 'trunk' into fix/featured-item-invalid-id

43b2352

Kallyan01 requested a review from gigitux July 25, 2025 15:37

Kallyan01 and others added 4 commits July 28, 2025 17:11

Merge branch 'trunk' into fix/featured-item-invalid-id

94da570

Fix: Resolved failing linting tests

543edc4

Merge branch 'trunk' into fix/featured-item-invalid-id

dbcdc5b

Merge branch 'trunk' into fix/featured-item-invalid-id

fa22e81

gigitux requested changes Aug 1, 2025

View reviewed changes

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts Outdated Show resolved Hide resolved

Kallyan01 added 6 commits August 4, 2025 13:39

Merge branch 'trunk' into fix/featured-item-invalid-id

bf19262

Fix: Resolved the invalid-product message on valid product editmode

3fb6988

Feat: Used useProduct hook to fetch product details

7508c66

Fix: Resolved isLoading state issue on featured category

f533292

Fix: Flash of api error on featured-items blocks for deleted product'…

a3aa8e4

…s invalid-ids

Merge branch 'trunk' into fix/featured-item-invalid-id

4aac6d5

Kallyan01 requested a review from gigitux August 4, 2025 14:37

gigitux requested changes Aug 5, 2025

View reviewed changes

plugins/woocommerce/client/blocks/assets/js/blocks/featured-items/use-featured-item-status.ts Outdated Show resolved Hide resolved

Fix: Removed unwanted parenthesis

319627a

Kallyan01 requested a review from gigitux August 6, 2025 13:48

Merge branch 'trunk' into fix/featured-item-invalid-id

5d2c645

gigitux approved these changes Aug 8, 2025

View reviewed changes

Update error type in EditModeRequiredProps to use ErrorObject for bet…

3d5f993

…ter type safety

fix lint error

e80972e

gigitux enabled auto-merge (squash) August 8, 2025 07:24

gigitux merged commit 1131d03 into woocommerce:trunk Aug 8, 2025
31 checks passed

github-actions bot added this to the 10.2.0 milestone Aug 8, 2025

Kallyan01 deleted the fix/featured-item-invalid-id branch August 8, 2025 17:05

Fix: Featured invalid-id item handled with new item picker panel #59033

Fix: Featured invalid-id item handled with new item picker panel #59033

Uh oh!

Conversation

Kallyan01 commented Jun 20, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Submission Review Guidelines:

Changes proposed in this Pull Request:

Screenshots or screen recordings:

How to test the changes in this Pull Request:

Testing that has already taken place:

Changelog entry

Significance

Type

Message

Comment

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Assessment against linked issues

Assessment against linked issues: Out-of-scope changes

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing Guidelines

Uh oh!

gigitux left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gigitux commented Jun 26, 2025

Uh oh!

Kallyan01 commented Jul 4, 2025

Uh oh!

Kallyan01 commented Aug 1, 2025

Uh oh!

gigitux commented Aug 1, 2025

Uh oh!

gigitux left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Kallyan01 commented Aug 4, 2025

Uh oh!

gigitux left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Kallyan01 commented Aug 6, 2025

Uh oh!

gigitux left a comment

Choose a reason for hiding this comment

Blocks with not deleted product

Blocks with deleted product

Uh oh!

gigitux commented Aug 8, 2025

Uh oh!

Kallyan01 commented Jun 20, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jun 20, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

github-actions bot commented Jun 25, 2025 •

edited

Loading