Migration of Product Collection and Product Button blocks to the new `store()` API #11558

luisherranz · 2023-11-02T16:28:20Z

What

Migrates both the Product Collection and the Product Button block to the new store() API.

Resources:

Why

Because we are switching from the old store() API to the new store() API, and we need to migrate all the blocks at once.

Testing Instructions

Load a template that contains with Product Button blocks
Test that it keeps working as exactly as it is working on trunk

Screenshots or screencast

I made a video to explain the migration of this block:

https://www.loom.com/share/cbe30d0c820e4f99a3e6697a5f85b759

WooCommerce Visibility

Required:

WooCommerce Core
Feature plugin
Experimental
N/A

Checklist

Required:

This PR has either a [type] label or a [skip-changelog] label.
This PR is assigned to a milestone.

Conditional:

This PR has a changelog description (if [skip-changelog] label is not present).
This PR adds/removes a feature flag & I've updated this doc.
This PR adds/removes an experimental interfaces, and I've updated this doc.
This PR has been accessibility tested.
This PR has had any necessary documentation added/updated.

Changelog

Add suggested changelog entry here.

Migrate the Product Button to the new store() API of the Interactivity API.

…-refactor-product-button-with-new-store-api

Because the animation was broken.

…-refactor-product-button-with-new-store-api

Aljullu

I really like how the code gets much simpler with these changes, good job @luisherranz!

The code changes look good to me and I did some smoke testing and everything is working as expected. However, I don't have much experience in how the Interactivity API worked before, so I would also like if @gigitux can take a look and give his approvall.

By the way, before merging there will need to be some changes to the PR itself: WooCommerce Visibility should be WooCommerce Core and we should add a type label (I guess type: enhancement?).

Aljullu · 2023-11-10T14:18:43Z

assets/js/atomic/blocks/product-elements/button/frontend.tsx

-				} );
+				return getTextButton(
+					context.addToCartText,
+					state.inTheCartText!,


Heads-up that there is an ESLint warning in this line and L121.

gigitux

Thanks for your precious work and the helpful video!

I just added a NIT, feel free to skip it! However, I noticed two things:

A Circular dependency is detected:

Currently, there is an E2E test that fails: "21 [blockTheme] › product-collection/product-collection.block_theme.spec.ts:29:2 › Product Collection › Renders product collection block correctly with 9 items (27.0s)". I already re-run it, but it failed again:

gigitux · 2023-11-13T10:44:37Z

src/BlockTypes/ProductButton.php

@@ -168,20 +164,27 @@ protected function render( $attributes, $content, $block ) {
 				$this->prevent_cache();
 			}

-			$div_directives = 'data-wc-context=\'' . wp_json_encode( $context, JSON_NUMERIC_CHECK ) . '\'';
+			$interactive = array(
+				'namespace' => 'woocommerce/product-button',


NIT: We could use using the variables to compose the namespace:

Suggested change

'namespace' => 'woocommerce/product-button',

'namespace' => $this->namespace . "/" . $this->block_name,

luisherranz · 2023-11-13T11:05:46Z

A Circular dependency is detected

We can turn CHECK_CIRCULAR_DEPS off in the Interactivity API config.

gigitux · 2023-11-13T11:14:41Z

A Circular dependency is detected

We can turn CHECK_CIRCULAR_DEPS off in the Interactivity API config.

I didn't check the code, but circular dependency could introduce some issues that could be hard to find/debug. I would be more oriented to fix the circular dependency, but it is just an opinion based on my past experience.

luisherranz · 2023-11-13T11:28:24Z

Oh, sorry, I didn't explain myself well enough. I wouldn't suggest changing how you manage your code. But that warning comes from the Interactivity API runtime, so it's ok to remove that circle dep check in the specific Webpack config of the Interactivity API runtime. It won't affect any Woo code.

gigitux · 2023-11-13T11:34:24Z

Oh, sorry, I didn't explain myself well enough. I wouldn't suggest changing how you manage your code. But that warning comes from the Interactivity API runtime, so it's ok to remove that circle dep check in the specific Webpack config of the Interactivity API runtime. It won't affect any Woo code.

Yeah, I got it!
My suggestion was to fix it, even if it is in the Interactivity API runtime (not a blocker for this PR). But as I said, it is just an opinion that I have on circular dependency based on past experience :D

luisherranz · 2023-11-13T11:53:16Z

Thanks, Luigi. For now, we're trying to make things work and want to keep iterating fast. We'll make them pretty after we move them to Gutenberg and we are about to merge them with WP Core 🙂

DAreRodz · 2023-11-13T12:27:42Z

By the way, before merging there will need to be some changes to the PR itself: WooCommerce Visibility should be WooCommerce Core and we should add a type label (I guess type: enhancement?).

I've updated the visibility and the type label. Feel free to modify them as needed. 🙂

BTW, this branch uses another PR as the base branch, but I added the changes just in case we decide to merge the base branch first to trunk.

gigitux · 2023-11-13T13:37:25Z

With 1a3d9ca I fixed the E2E test failure. For more details, check this issue (we should use WP_HTML_Tag_Processor). The other E2E tests fail due to the Product Gallery block and it is outside of the scope of this PR.

Thanks, Luigi. For now, we're trying to make things work and want to keep iterating fast. We'll make them pretty after we move them to Gutenberg and we are about to merge them with WP Core

Thanks for the clarification. It makes sense 👍

gigitux

LGTM! Thanks for your work!

…-refactor-product-button-with-new-store-api

* Migrate Product Gallery block to new Interactivity API store * Fix some references * Add missing data-wc-interactive * Fix an additional namespace * Remove unnecessary click handler * Dialog working * Refactor action names * Reindex PHP array There was some missing indexes, which turned the array into an object in JS. * Remove unused event handlers * Move next/previous logic to external function * Move StorePart util to the types folder * Rename namespace to `woocommerce/product-gallery` * Undo product collection namespace renaming * Remove unnecessary namespace * Don't hide the large image on page load * Minor refactorings * Fix eslint error * Fix php cs errors with spacing and double arrows alignment * Disable no-use-before-define rule for eslint * Disable @typescript-eslint/ban-types rule for eslint * Fix parsed context error in e2e tests * Fix context parser for Thumbnail image * Move store to the top of the frontend file * Add interactivity api utils to the @woocommerce/utils alias * Replace deprecated event attribute --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: roykho <roykho77@gmail.com>

github-actions · 2023-11-16T17:22:21Z

Replace with an interactive block that calls `actions.sel...

Replace with an interactive block that calls `actions.selectImage`.

woocommerce-blocks/assets/js/blocks/product-gallery/frontend.tsx

Lines 83 to 94 in c10c777

// TODO: Replace with an interactive block that calls `actions.selectImage`.

const observer = new MutationObserver( function ( mutations ) {

for ( const mutation of mutations ) {

const mutationTarget = mutation.target as HTMLElement;

const currentImageAttribute =

mutationTarget.getAttribute( 'current-image' );

if (

mutation.type === 'attributes' &&

currentImageAttribute &&

context.visibleImagesIds.includes(

currentImageAttribute

)

🚀 This comment was generated by the automations bot based on a `todo` comment in `c10c777` in #11558. cc @luisherranz

DAreRodz · 2023-11-16T22:52:36Z

I've merged it even though some tests did not pass. 🤔

To be honest, I'm wondering if they were failing because of a real issue in the code, because everything was green in #11721 and that branch already contained all the changes from this one (#11558), so they should be equivalent once it was merged here.

* Sync Interactivity API code with Gutenberg * New store() API * Store raw actions * Update wc-interactivity-store implementation * Replace `wc_store` with `wc_initial_state` * Parse and populate initial state * Allow store parts in `store()` * Accept namespaces in directive paths * Add $$namespace to directives' object values * Make namespace parsing more robust * Use DeepPartial type for store parts * Do not pass `rawStore` to `afterLoad` callbacks * Simplify `store()` a bit * Implement `privateStore()` * Sync context directive with Gutenberg * Refactor scope and extract getters per scope * Add namespace to getters and actions * Remove current privateStore implementation * Remove `afterLoad` option from `store` * Use same proxy handlers for ns, getters and actions * Set scope inside `evaluate` * Refactor proxy handlers * Improve types a bit * Catch errors in async actions * Implement stacks for scopes and namespaces * Implement `getElement` * Change directives object structure * Remove unnecessary import * Implement private stores * Return value from sync actions * Minor optimizations and improved comments * Don't use async inside `data-wp-watch` * Use a single Provider in context directive * Remove DeepPartial type * Do not check if element exists * Add the `current` prop of state inside the scope * Move getters outside scope * Fix wc-key assignment * Fix missing `navigate` in directives * Fix namespace not being picked in the same element * Deep merge raw stores instead of proxied ones * Fix namespace assignment * Allow forward slashes in namespaces * Migration of Product Collection and Product Button blocks to the new `store()` API (#11558) * Refactor Product Button with new store() API * Use `wc_initial_state` in Product Button * Fix namespace * Remove unnecessary state * Test namespaces in directive paths * Add test context with namespace * Simplify woo-test context * Move addToCart and animations to a file * Do not pass `rawStore` to `afterLoad` callbacks * Move callbacks and actions back to the main file Because the animation was broken. * Remove selectors in favor of state * Use default ns in `getContext` for state and actions * Remove `afterLoad` callback * Remove unnecessary ns * Fix getContext in add-to-cart * Replace namespace and delete unnecessary store * Pass context types only once * Use an alternative for requestIdleCallback * Add previous react code for notices * Add namespace to Product Collection block * Replace getTextButton with getButtonText * Add block name to the ProductCollection namespace * fix style HTML code * Remove circular deps error on the Interactivity API * Product Gallery block: Migrate to new Interactivity API store (#11721) * Migrate Product Gallery block to new Interactivity API store * Fix some references * Add missing data-wc-interactive * Fix an additional namespace * Remove unnecessary click handler * Dialog working * Refactor action names * Reindex PHP array There was some missing indexes, which turned the array into an object in JS. * Remove unused event handlers * Move next/previous logic to external function * Move StorePart util to the types folder * Rename namespace to `woocommerce/product-gallery` * Undo product collection namespace renaming * Remove unnecessary namespace * Don't hide the large image on page load * Minor refactorings * Fix eslint error * Fix php cs errors with spacing and double arrows alignment * Disable no-use-before-define rule for eslint * Disable @typescript-eslint/ban-types rule for eslint * Fix parsed context error in e2e tests * Fix context parser for Thumbnail image * Move store to the top of the frontend file * Add interactivity api utils to the @woocommerce/utils alias * Replace deprecated event attribute --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: roykho <roykho77@gmail.com> --------- Co-authored-by: David Arenas <david.arenas@automattic.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com> * Fix error when closing product gallery dialog with keyboard escape key * use wc_initial_state instead of wc_store --------- Co-authored-by: Luis Herranz <luisherranz@gmail.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: roykho <roykho77@gmail.com>

luisherranz and others added 30 commits September 26, 2023 10:52

Refactor Product Button with new store() API

ec5d9e9

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

92b900a

…-refactor-product-button-with-new-store-api

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

32e030f

…-refactor-product-button-with-new-store-api

Use wc_initial_state in Product Button

33efe6e

Fix namespace

f7cdae7

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

18c026b

…-refactor-product-button-with-new-store-api

Remove unnecessary state

5edf77f

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

a3d70f7

…-refactor-product-button-with-new-store-api

Test namespaces in directive paths

34ae8ae

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

768a530

…-refactor-product-button-with-new-store-api

Add test context with namespace

d67b0d6

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

9851e71

…-refactor-product-button-with-new-store-api

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

59d9ab9

…-refactor-product-button-with-new-store-api

Simplify woo-test context

4c2a6b2

Move addToCart and animations to a file

ff7dd17

Do not pass rawStore to afterLoad callbacks

025c855

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

a962188

…-refactor-product-button-with-new-store-api

Move callbacks and actions back to the main file

029cbba

Because the animation was broken.

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

394ea18

…-refactor-product-button-with-new-store-api

Remove selectors in favor of state

9659de0

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

3d0136c

…-refactor-product-button-with-new-store-api

Use default ns in getContext for state and actions

e8132a8

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

536a56f

…-refactor-product-button-with-new-store-api

Remove afterLoad callback

35354ea

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

c69de99

…-refactor-product-button-with-new-store-api

Remove unnecessary ns

ae1e275

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

1ee00d5

…-refactor-product-button-with-new-store-api

Fix getContext in add-to-cart

730defd

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

8a35b50

…-refactor-product-button-with-new-store-api

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

5c8b614

…-refactor-product-button-with-new-store-api

github-actions bot added this to the 11.6.0 milestone Nov 10, 2023

github-actions bot added the status: ready to merge label Nov 10, 2023

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

6f6f540

…-refactor-product-button-with-new-store-api

Aljullu reviewed Nov 10, 2023

View reviewed changes

luisherranz mentioned this pull request Nov 10, 2023

Interactivity API: implement the new store() API #11065

Closed

26 tasks

gigitux suggested changes Nov 13, 2023

View reviewed changes

DAreRodz added 2 commits November 13, 2023 12:47

Replace getTextButton with getButtonText

5938fef

Add block name to the ProductCollection namespace

cefa07c

DAreRodz added the type: enhancement The issue is a request for an enhancement. label Nov 13, 2023

fix style HTML code

1a3d9ca

gigitux approved these changes Nov 13, 2023

View reviewed changes

DAreRodz mentioned this pull request Nov 15, 2023

Interactivity API: implement the new store() API #11071

Merged

4 tasks

Merge branch 'interactivity-api-new-store-api' into interactivity-api…

95af234

…-refactor-product-button-with-new-store-api

luisherranz mentioned this pull request Nov 15, 2023

Tracking Issue: More core blocks and new store() API WordPress/gutenberg#53740

Closed

21 tasks

luisherranz and others added 2 commits November 16, 2023 15:54

Remove circular deps error on the Interactivity API

45754a0

DAreRodz merged commit 9ea4bfe into interactivity-api-new-store-api Nov 16, 2023
28 of 29 checks passed

DAreRodz deleted the interactivity-api-refactor-product-button-with-new-store-api branch November 16, 2023 22:45

github-actions bot removed the status: ready to merge label Nov 16, 2023

wavvves mentioned this pull request Nov 22, 2023

Update WooCommerce Blocks to 11.6.0 woocommerce/woocommerce#41641

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration of Product Collection and Product Button blocks to the new `store()` API #11558

Migration of Product Collection and Product Button blocks to the new `store()` API #11558

luisherranz commented Nov 2, 2023 •

edited by DAreRodz

Loading

Aljullu left a comment

Aljullu Nov 10, 2023

gigitux left a comment

gigitux Nov 13, 2023

luisherranz commented Nov 13, 2023

gigitux commented Nov 13, 2023

luisherranz commented Nov 13, 2023 •

edited

Loading

gigitux commented Nov 13, 2023

luisherranz commented Nov 13, 2023

DAreRodz commented Nov 13, 2023

gigitux commented Nov 13, 2023

gigitux left a comment

github-actions bot commented Nov 16, 2023

DAreRodz commented Nov 16, 2023

	'namespace' => 'woocommerce/product-button',
	'namespace' => $this->namespace . "/" . $this->block_name,

Migration of Product Collection and Product Button blocks to the new store() API #11558

Migration of Product Collection and Product Button blocks to the new store() API #11558

Conversation

luisherranz commented Nov 2, 2023 • edited by DAreRodz Loading

What

Why

Testing Instructions

Screenshots or screencast

WooCommerce Visibility

Checklist

Changelog

Aljullu left a comment

Choose a reason for hiding this comment

Aljullu Nov 10, 2023

Choose a reason for hiding this comment

gigitux left a comment

Choose a reason for hiding this comment

gigitux Nov 13, 2023

Choose a reason for hiding this comment

luisherranz commented Nov 13, 2023

gigitux commented Nov 13, 2023

luisherranz commented Nov 13, 2023 • edited Loading

gigitux commented Nov 13, 2023

luisherranz commented Nov 13, 2023

DAreRodz commented Nov 13, 2023

gigitux commented Nov 13, 2023

gigitux left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 16, 2023

Replace with an interactive block that calls `actions.sel...

🚀 This comment was generated by the automations bot based on a todo comment in c10c777 in #11558. cc @luisherranz

DAreRodz commented Nov 16, 2023

Migration of Product Collection and Product Button blocks to the new `store()` API #11558

Migration of Product Collection and Product Button blocks to the new `store()` API #11558

luisherranz commented Nov 2, 2023 •

edited by DAreRodz

Loading

luisherranz commented Nov 13, 2023 •

edited

Loading

🚀 This comment was generated by the automations bot based on a `todo` comment in `c10c777` in #11558. cc @luisherranz