CYS - add shuffle feature

[gigitux]

Warning

This PR is blocked by #47322

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 allows the user to shuffle patterns of the same category. Currently, the only category available is WooCommerce, and for this reason, header/footer patterns will be rendered.

We will introduce multiple categories with #47328.

Screen.Capture.on.2024-05-10.at.14-29-37.mp4

Closes #47325 and #47326.

Note: Shuffling option is not displayed on the first template because the pattern has to be parsed before. Currently, we parsed them on the homepage preview: https://github.com/woocommerce/woocommerce/blob/cca31dfc1862d6f10495b97fc3de8a798b49510e/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx/#L120-L125

We should revisit/add this logic when we will migrate patterns to PTK #45835

How to test the changes in this Pull Request:

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

1. Ensure that you have Gutenberg enabled.
2. Make sure you have the WooCommerce beta tester plugin installed
3. Head over to Tools > WCA Test Helper > Features
4. Make sure you see the pattern-toolkit-full-composability on the list.
5. Enable it.
6. Head over to WooCommerce > Home > Customize your store.
7. Click on "Start designing" and proceed to the Pattern Assembler.
8. Click on "Design your Homepage".
9. Switch Pattern.
10. Ensure that the block toolbar appears, and you can shuffle patterns.

Changelog entry

• Automatically create a changelog entry from the details below.

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

CYS: add shuffle feature.

Comment

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[nefeline]

hey @gigitux ! Since this PR is experimental, what is the outcome you are expecting from the review here? I'm seeing multiple issues, so I'm wary this is really ready for a peer review. To list a few:

• Scrolling up and down is mostly impossible

Screen.Recording.2024-05-11.at.18.38.52.mov

• Shuffling option is not displayed on the first template, only when you click on the second one it shows up

Screen.Recording.2024-05-11.at.18.38.19.mov

• Sometimes the Assembler doesn't load at all with the following error:

• Sometimes clicking on the shuffle button doesn't shuffle any patterns at all

• The shuffle option is not displayed for all patterns

The list goes on: do you want to work on this a bit further?

[gigitux]

Thanks for your great review! Given that the full compatibility will require many changes (and rely on experimental APIs), I'm proceeding with small PRs.

The goal of this PR is to add support for the shuffle feature. All the issues you shared mostly relate to the Toolbar position/behavior. These issues will be addressed in other PRs/issues. For example:

Shuffling option is not displayed on the first template, only when you click on the second one it shows up

Will be addressed with:

#47371

[nefeline]

Thanks for your great review! Given that the full compatibility will require many changes (and rely on experimental APIs), I'm proceeding with small PRs.

The goal of this PR is to add support for the shuffle feature. All the issues you shared mostly relate to the Toolbar position/behavior. These issues will be addressed in other PRs/issues. For example:

Shuffling option is not displayed on the first template, only when you click on the second one it shows up

Will be addressed with:

#47371

Thanks for clarifying. For the upcoming PRs, can you please ensure that all known issues are documented in the description so the reviewers are aware of the exact problems that are expected and the ones that aren't?

Also, can you please add this feature behind the newly created pattern-toolkit-full-composability feature flag so we can enable/disable this feature via the Woo Beta tester plugin? Thanks.

[nefeline]

I'm going ahead and marking this PR as blocked: the issues identified here are too critical for us to merge it without solving them, especially being unable to scroll the frame or access it at all: as soon as those are out of the way, we should be all set.

[gigitux]

I'm going ahead and marking this PR as blocked: the issues identified here are too critical for us to merge it without solving them, especially being unable to scroll the frame or access it at all: as soon as those are out of the way, we should be all set.

Thanks for adding this comment. I will address the feedback with #47415

[nefeline]

Thanks for adding this comment. I will address the feedback with #47415

thanks! FYI I see you added the "The toolbar renders logic will be addressed in #47415" today, after code review, to the PR description. Based on our convo on slack ( p1715675299113609/1715674447.556159-slack-C053716F2H2 ), I went ahead and removed that to avoid any confusion for anyone reading this PR in the future: as the issues were raised during code review, it's not something that has been documented originally when the PR was opened.

[gigitux]

Hey @nefeline, I created a follow-up PR: #47415 - can you review this and the linked one? So, when everything is approved, I will merge them! Thanks!

[github-actions]

Hi @albarin, @nefeline, @imanish003,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[gigitux]

Hey @nefeline, given that #47415, can we merge this PR as well?

[albarin]

Looking good! TY!

[nefeline]

Thanks for the updates, Luigi! Confirmed that patterns are being switched, with a few caveats:

1- I think this was mentioned here earlier, but whenever clicking on "Design your homepage" for the very first time, the toolbar to switch patterns is not displayed on the first template.
2. Even after the user leaves the "Design your homepage" section, they can still see the tooltip with the shuffle over the patterns.
3. Whenever clicking on shuffle, it includes header and footer patterns to the mix, we should make sure those are not part of the available options for the body.

I'm ok with addressing those separately, as long as we have issues to solve the aforementioned problems :)