Product Collection: carousel layout scaffolding and Editor experience #59519

kmanijak · 2025-07-08T12:58: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 includes:

Experimental Carousel layout to Product Collection
Block manipulation logic. When changing layout it does couple of things:
- switching TO carousel:
  - replace Product Template block with Group block that includes the same Product Template and Product Gallery Next Prev Arrows*
  - removes Pagination block if exists
  - adjusts Inspector Controls by hiding Columns and Max Page to Show options and updating Products per Page label
  - notice about performance impact when setting over 30 products in Products in Carousel option
- switching FROM carousel:
  - replace Group block with the same Product Template from inside and removes arrows
  - adds back Pagination if it's default collection (other collections don't include Pagination by default)
  - adjusts Inspector Controls

when

Editor experience:
- it took me a while to figure out the blocks composition: arrows vs product template but currently user is able to focus on specific blocks by clicking them which seems the most intuitive
- Arrows can be positioned similarly to Product Gallery so they move on a 3x3 grid (top, center, bottom x left, center, ight, spread).
Very limited frontend: for now frontend is very limited to just displaying products in scrollable container with simple snapping. There will be following PRs focusing on it, especially arrows are not displayed at all as they're not yet adjusted to this block.

Additional changes:

move plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/utils/get-inner-block-by-name.ts from Product Filters to plugins/woocommerce/client/blocks/assets/js/utils so I could reuse it as well
add mock to unit tests which starter to fail most likely due to module resolution change related to above.

Disclaimer about Product Gallery Next Prev Arrows. The goal was to reuse the blocks if possible and this block is the perfect candidate but obviously it's totally coupled to Product Gallery. I created the issue Product Collection: adjust Product Gallery Next Prev Arrows to be used in Product Collection's carousel #59626 in which I'm planning to make this block block-agnostic so it can be used by both of these blocks in "neutral" way. So in scope of this PR ignore:

that Arrows don't render on the frontend
that block's name is woocommerce/product-gallery-large-image-next-previous and this is kept as constant in Product Collection.

Closes #59402
Closes #59403

(For Bug Fixes) Bug introduced in PR # .

Screenshots or screen recordings:

How to test the changes in this Pull Request:

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

Install and activate the WooCommerce Beta Tester extension.
Go to WooCommerce Admin Test Helper > Features and enable experimental-blocks

Default collection

Create new post
Add Product Collection and choose "create your own"
Add some custom content and styling to Product Template
Focus on Product Collection and choose Carousel layout
Expected:
- Layout has changed to single row of products
- Product Template block was replaced with Group block including Next/Prev arrows and Product Template
- Pagination block is removed
- styling and inner content was preserved
Try clicking through blocks inside:
- Clicking on product element selects them
- Clicking on arrows selects arrows (there is an issue with editor outlines, I'll tackle it separately)
Save and go to frontend
Expected:
- Content and styling is preserved
- Products can be scrolled horizontally and they snap to center
- Arrows are not yet rendered (check description above)
- Container is scrollable on mobile as well
Go back to Editor
Change layout back to Grid
Expected:
- Layout has changed to grid
- Group block was replaced with Product Template
- Pagination block is back
- Arrows are removed
- styling and inner content was preserved

Custom collection

Repeat previous steps for custom collection by choosing some collection, e.g. "On Sale" in step 2. The only difference is there's no Pagination block, hence:

it won't be removed in step 6
it won't be added in step 12.

Performance notice

Carousel is meant to display only single page hence we display performance notice when merchant decides to set too many products in carousel.

Create new post
Add Product Collection and choose any collection
Focus on Product Collection and choose Carousel layout
Expected: "Products per Page" changed to "Products in Carousel"
Change the value to bigger than 30
Expected: Notice is displayed and it's hidden when you get back below 30 products

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

…ing blocks

…l-carousel-layout-option-and

…mplate

…l-carousel-layout-option-and

…tions more flexible in finding blocks

…l-carousel-layout-option-and

kmanijak · 2025-07-15T13:21:28Z

...ce/client/blocks/assets/js/blocks/product-filters/inner-blocks/taxonomy-filter/test/block.ts

@@ -34,6 +34,9 @@ jest.mock( '@woocommerce/settings', () => ( {
 		}
 		return defaultValue;
 	} ),
+	getSettingWithCoercion: jest.fn( ( key: string, defaultValue: unknown ) => {
+		return defaultValue;
+	} ),


This tests has started to fail with getSettingWithCoercion is not a function. The test has been passing on trunk but failed on this branch which does not make much sense.

Here's what Claude told me:

The reason it works on trunk but fails on your branch is likely due to a difference in how the module resolution is working. On trunk, it might be falling back to the actual implementation for unmocked functions, while on your branch it's strictly enforcing the mock.

And I guess that may be it since I touched plugins/woocommerce/client/blocks/assets/js/utils* adding new util 🤷 Anyway, I added this mock and the test is passing.

kmanijak · 2025-07-15T13:45:59Z

Thanks @gigitux for review!

I addressed your comments, including the one to move to supports.layout. For now, it's a hybrid:

existing layouts: grid and list are handled "manually" (as-is)
new layout: carousel is based on supports.layout attributes.

I refactored the code as well including:

extracting the functions you suggested and cleaning up the code a bit so it's more readable,
and made code more flexible, so for example previously it could leave arrows untouched if Product Template was no longer in a Group block. Now, they should be removed no matter what.

On top of it:

moved plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/utils/get-inner-block-by-name.ts from Product Filters to plugins/woocommerce/client/blocks/assets/js/utils so I could reuse it as well
added mock to unit tests which starter to fail most likely due to module resolution change related to above.

Can I ask you for re-review?

gigitux

Thanks for addressing the feedback and deciding to investigate and implement the carousel with supports.layout 🚀

I left feedback regarding the transition from the carousel layout. I am not convinced that we should remove blocks during the transition.

I'm pretty sure that you're aware, but we need to improve the layout of the warning:

As above, it is not a blocker, we can fix it in a follow-up PR.

gigitux · 2025-07-17T08:01:23Z

...sets/js/blocks/product-collection/edit/inspector-controls/use-carousel-layout-adjustments.ts

+				productTemplate?.clientId,
+				productTemplateUpdatedBlock
+			);
+		}


I think that we should add an extra logic to ensure that we carry all the blocks added in group block:

Screen.Capture.on.2025-07-17.at.09-58-40.mp4

Not a blocker; I'm fine if you want to refine it in a dedicated PR 👍

…l-carousel-layout-option-and

… later

…of Group block

kmanijak · 2025-07-18T10:38:50Z

Thanks for review @gigitux . I addressed the feedback:

Here's improved warning notice

I've updated the logic, so when switching from Carousel to other layout:

remove Arrows
move Product Template from Group to Product Collection or update it's attributes if it's not in Group
remove the Group if empty, leave otherwise (so custom content is preserved)
add Pagination if needed.

Let me know if you want to re-review or you're fine with it as-is 🙌

gigitux · 2025-07-18T17:38:14Z

I can confirm that both issues have been fixed:

Screen.Capture.on.2025-07-18.at.19-33-20.mp4

Awesome! Let's merge it! 🚀

remove Arrows
move Product Template from Group to Product Collection or update it's attributes if it's not in Group
remove the Group if empty, leave otherwise (so custom content is preserved)
add Pagination if needed.

I didn't think about all these scenarios! It looks like that this is a good candidate for a unit test/integration test. I see two reasons:

Document the behaviors.
Ensure that we don't lose some cases with future refactors/improvements.

kmanijak · 2025-07-21T06:58:46Z

I didn't think about all these scenarios! It looks like that this is a good candidate for a unit test/integration test. I see two reasons:
Document the behaviors.
Ensure that we don't lose some cases with future refactors/improvements.

Yeah., I'll be adding them 👍

kmanijak added 8 commits July 8, 2025 11:12

Add carousel layout potion hidden behind feature flag

d730791

Update the layout description

25c23a4

Update Inspector Controls depending on carousel layout

08471d9

Add performance warning notice

ef09f63

Add initial carousel styles

244ddd7

Hide scrollbar

bbc377d

Make sure products are qual width

2c1853d

Avoid applying 'emtpy' styles

5a4fba4

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jul 8, 2025

kmanijak changed the title ~~Wooplug 4883 product collection experimental carousel layout option and~~ Product Collection: carousel layout Jul 8, 2025

kmanijak added 19 commits July 9, 2025 11:00

Adjust the pagination block depending on layout

e83e1dc

Extract the pagination manipulation logic to separate hook

82dfe39

Add constant with arrows block name

c48099b

Rename and adjust logic of replacing pagination with arrows

548e90c

Allow using arrows in Product Collection

e81b161

Allow outline to show around arrows

0d28b80

Temporary: Position the arrows block absolutely but it blocks underly…

091e664

…ing blocks

Merge branch 'trunk' into wooplug-4883-product-collection-experimenta…

27488f2

…l-carousel-layout-option-and

Block.json formatting

38a494c

Add more block names constants

42b4407

Remove unused import

6249cc9

Fix styles in editor

63a88f7

Finalise the logic of block transformation with wrapping blocks in group

afab8fa

Positioning improvement

02d39c2

Make sure the group block in inserted in the same place as product te…

ff48f1d

…mplate

Merge branch 'trunk' into wooplug-4883-product-collection-experimenta…

9206ac8

…l-carousel-layout-option-and

Rename file to better depict its purpose including word carousel

fba3c85

Don't follow the select change

7f82a42

Fix the page overflow issue

9d9e0b5

kmanijak changed the title ~~Product Collection: carousel layout~~ Product Collection: carousel layout scaffolding and Editor experience Jul 12, 2025

kmanijak added 6 commits July 15, 2025 11:46

Move getInnerBlockByName util to @woocommerce/utils

1d10ccb

Move getInnerBlockByName util to @woocommerce/utils

e36d873

Update existing imports

b0a5eb0

Use getInnerBlockBy and getInnerBlockByName utils and make the transi…

970c6b7

…tions more flexible in finding blocks

Merge branch 'trunk' into wooplug-4883-product-collection-experimenta…

2abbb69

…l-carousel-layout-option-and

Add a missing mock that's required after touching the module

d1aa990

kmanijak commented Jul 15, 2025

View reviewed changes

kmanijak requested a review from gigitux July 15, 2025 13:46

gigitux approved these changes Jul 17, 2025

View reviewed changes

kmanijak added 5 commits July 18, 2025 10:43

Merge branch 'trunk' into wooplug-4883-product-collection-experimenta…

28741f1

…l-carousel-layout-option-and

Improve the look of warnign notice

8df16d4

Adjust the logic so the custom content in group is preserved if added…

8252a87

… later

Bring back the case to update Product Tremplate in case it's outside …

cb19e7f

…of Group block

Fix lint

8e25d40

kmanijak merged commit c1b9b7d into trunk Jul 21, 2025
74 of 76 checks passed

kmanijak deleted the wooplug-4883-product-collection-experimental-carousel-layout-option-and branch July 21, 2025 06:58

github-actions bot added this to the 10.1.0 milestone Jul 21, 2025

This was referenced Jul 21, 2025

Product Filters: properly handle special characters in filter option label #59807

Merged

Product Details: restore legacy block setting and default layout #59808

Merged

Refactor filter blocks to use shared DisplayStyleSwitcher component #59900

Merged

kmanijak restored the wooplug-4883-product-collection-experimental-carousel-layout-option-and branch July 24, 2025 13:32

This was referenced Aug 6, 2025

Product Collection: carousel layout frontend #60060

Merged

Replace the Product collection cross-sells collection in the Cart block #60278

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Product Collection: carousel layout scaffolding and Editor experience #59519

Product Collection: carousel layout scaffolding and Editor experience #59519

Uh oh!

kmanijak commented Jul 8, 2025 •

edited

Loading

Uh oh!

kmanijak Jul 15, 2025

Uh oh!

kmanijak commented Jul 15, 2025

Uh oh!

gigitux left a comment

Uh oh!

gigitux Jul 17, 2025

Uh oh!

kmanijak commented Jul 18, 2025

Uh oh!

gigitux commented Jul 18, 2025 •

edited

Loading

Uh oh!

Uh oh!

kmanijak commented Jul 21, 2025

Uh oh!

Uh oh!

Product Collection: carousel layout scaffolding and Editor experience #59519

Product Collection: carousel layout scaffolding and Editor experience #59519

Uh oh!

Conversation

kmanijak commented Jul 8, 2025 • edited 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:

Default collection

Custom collection

Performance notice

Testing that has already taken place:

Changelog entry

Significance

Type

Message

Comment

Uh oh!

kmanijak Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

kmanijak commented Jul 15, 2025

Uh oh!

gigitux left a comment

Choose a reason for hiding this comment

Uh oh!

gigitux Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

kmanijak commented Jul 18, 2025

Uh oh!

gigitux commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

kmanijak commented Jul 21, 2025

Uh oh!

Uh oh!

kmanijak commented Jul 8, 2025 •

edited

Loading

gigitux commented Jul 18, 2025 •

edited

Loading