Serialize the Interactivity API's store from PHP and hydrate it on the client #8447

DAreRodz · 2023-02-15T18:34:11Z

What

Ports latest changes in https://github.com/WordPress/block-hydration-experiments to add store serialization.

Changes included in this PR

Renamed client-side "transition" to "navigation"
Renamed wpx to store
Fixed class directive when no class attribute is present
Added store hydration on the browser
Added server-side processing of directives, including store serialization

Tracking issue: woocommerce/woocommerce#42486

Why

To keep the Interactivity API in WooCommerce blocks up to date.

How

For the JS part, just copy-pasting the code and updating the values in the constants.js file.

For the PHP part (after copy-pasting):

Replacing wp_ prefixes in global functions with woo_ (excluding WP's ones, likewp_register_script)
Renaming WP_ classes to Woo_ ones (excluding WP's ones, like WP_HTML_Tag_Processor)
Renaming class files from class-wp- to class-woo-
Locating wp- prefixes in directives and replacing them with data-woo- (except wp-html, in a require declaration)
Fixing paths for required files (the file structure is different here)

For all files, removing all TODO comments using a regexp (([^\n]+)?// TODO.*\n).

Do not include in the Testing Notes

github-actions · 2023-02-15T18:34:33Z

check if priority 9 is enough.

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 157 to 159 in 9af6478

// TODO: check if priority 9 is enough.

// TODO: check if `wp_footer` is the most appropriate hook.

add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

change the store tag ID for a better one.

woocommerce-blocks/assets/js/interactivity/store.js

Lines 20 to 31 in 9af6478

// TODO: change the store tag ID for a better one.

const storeTag = document.querySelector(

`script[type="application/json"]#store`

);

if ( ! storeTag ) return {};

try {

const { state } = JSON.parse( storeTag.textContent );

if ( isObject( state ) ) return state;

throw Error( 'Parsed state is not an object' );

} catch ( e ) {

console.log( e );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

Error handling.

woocommerce-blocks/src/Interactivity/directives/tags/woo-context.php

Lines 16 to 19 in 9af6478

// TODO: Error handling.

$context->set_context( $new_context );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

Retain surrounding whitespace from $style_value, if any.

woocommerce-blocks/src/Interactivity/directives/utils.php

Lines 33 to 45 in 9af6478

// TODO: Retain surrounding whitespace from $style_value, if any.

$style_assignment = $style_name . ': ' . $value;

$modified = true;

break;

}

}

if ( ! $modified ) {

$new_style_assignment = $name . ': ' . $value;

// If the last element is empty or whitespace-only, we insert

// the new "key: value" pair before it.

if ( empty( trim( end( $style_assignments ) ) ) ) {

array_splice( $style_assignments, - 1, 0, $new_style_assignment );

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

Add some directive/components registration mechanism.

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 110 to 121 in 9af6478

// TODO: Add some directive/components registration mechanism.

$tag_directives = array(

'woo-context' => 'process_woo_context_tag',

);

$attribute_directives = array(

'data-woo-context' => 'process_woo_context_attribute',

'data-woo-bind' => 'process_woo_bind',

'data-woo-class' => 'process_woo_class',

'data-woo-style' => 'process_woo_style',

);

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

check if `wp_footer` is the most appropriate hook.

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 158 to 159 in 9af6478

// TODO: check if `wp_footer` is the most appropriate hook.

add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

Implement evaluation of complex logical expressions.

woocommerce-blocks/src/Interactivity/directives/utils.php

Lines 9 to 20 in 9af6478

// TODO: Implement evaluation of complex logical expressions.

function evaluate( string $path, array $context = array() ) {

$current = array_merge(

Woo_Directive_Store::get_data(),

array( 'context' => $context )

);

$array = explode( '.', $path );

foreach ( $array as $p ) {

if ( isset( $current[ $p ] ) ) {

$current = $current[ $p ];

} else {

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

find a better ID for the script tag.

woocommerce-blocks/src/Interactivity/directives/class-woo-directive-store.php

Lines 27 to 32 in 9af6478

// TODO: find a better ID for the script tag.

$id = 'store';

$store = self::serialize();

echo "<script id=\"$id\" type=\"application/json\">$store</script>";

}

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

Do we want to unset styles if they're null? $tags->remove...

Do we want to unset styles if they're null? $tags->remove_class( $style_name );

https://github.com/woocommerce/woocommerce-blocks/blob/9af64783ef376034d51ec0c4700e2239bd3257dd/src/Interactivity/directives/attributes/woo-style.php#L25-L30

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:34:33Z

Error handling.

woocommerce-blocks/src/Interactivity/directives/attributes/woo-context.php

Lines 16 to 19 in 9af6478

// TODO: Error handling.

$context->set_context( $new_context );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions · 2023-02-15T18:36:12Z

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8447.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added
`reviews-frontend.js`	`react`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`attribute-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`cart-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wc-settings`, `wp-polyfill`	⚠️
`price-filter-frontend.js`	`lodash`, `react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`single-product-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`stock-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

Files with errors: 493
Total errors: 2341

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/interactivity/store.js

_{comments-aggregator}

github-actions · 2023-02-15T18:41:13Z

Size Change: +207 B (0%)

Total Size: 1.11 MB

Filename	Size	Change
`build/woo-directives-runtime.js`	2.73 kB	+207 B (+8%)	🔍

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	7.98 kB
`build/active-filters-wrapper-frontend.js`	5.99 kB
`build/active-filters.js`	7.33 kB
`build/all-products-frontend.js`	11.7 kB
`build/all-products.js`	36.5 kB
`build/all-reviews.js`	7.66 kB
`build/attribute-filter-frontend.js`	22.4 kB
`build/attribute-filter-wrapper-frontend.js`	7.08 kB
`build/attribute-filter.js`	12.4 kB
`build/blocks-checkout.js`	41.2 kB
`build/breadcrumbs.js`	2.05 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.38 kB
`build/cart-blocks/cart-cross-sells-frontend.js`	253 B
`build/cart-blocks/cart-cross-sells-products-frontend.js`	9.71 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.19 kB
`build/cart-blocks/cart-express-payment-frontend.js`	720 B
`build/cart-blocks/cart-items-frontend.js`	299 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.35 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.06 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.24 kB
`build/cart-blocks/cart-totals-frontend.js`	322 B
`build/cart-blocks/empty-cart-frontend.js`	345 B
`build/cart-blocks/filled-cart-frontend.js`	655 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	1.62 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.12 kB
`build/cart-blocks/order-summary-fee-frontend.js`	274 B
`build/cart-blocks/order-summary-heading-frontend.js`	455 B
`build/cart-blocks/order-summary-shipping-frontend.js`	14.8 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	275 B
`build/cart-blocks/order-summary-taxes-frontend.js`	434 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.24 kB
`build/cart-frontend.js`	28.9 kB
`build/cart.js`	47.4 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.85 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	3.92 kB
`build/checkout-blocks/billing-address-frontend.js`	1.18 kB
`build/checkout-blocks/contact-information-frontend.js`	2.05 kB
`build/checkout-blocks/express-payment-frontend.js`	1.13 kB
`build/checkout-blocks/fields-frontend.js`	345 B
`build/checkout-blocks/order-note-frontend.js`	1.14 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.67 kB
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	1.79 kB
`build/checkout-blocks/order-summary-discount-frontend.js`	2.29 kB
`build/checkout-blocks/order-summary-fee-frontend.js`	276 B
`build/checkout-blocks/order-summary-frontend.js`	1.24 kB
`build/checkout-blocks/order-summary-shipping-frontend.js`	14.9 kB
`build/checkout-blocks/order-summary-subtotal-frontend.js`	275 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	435 B
`build/checkout-blocks/payment-frontend.js`	8.43 kB
`build/checkout-blocks/pickup-options-frontend.js`	2.8 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.14 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.28 kB
`build/checkout-blocks/shipping-methods-frontend.js`	4.56 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	324 B
`build/checkout-frontend.js`	30.5 kB
`build/checkout.js`	44.2 kB
`build/customer-account.js`	3.08 kB
`build/featured-category.js`	13.5 kB
`build/featured-product.js`	13.7 kB
`build/filter-wrapper-frontend.js`	14.1 kB
`build/filter-wrapper.js`	2.39 kB
`build/general-style-rtl.css`	1.31 kB
`build/general-style.css`	1.31 kB
`build/handpicked-products.js`	7.24 kB
`build/legacy-template.js`	5.28 kB
`build/mini-cart-component-frontend.js`	28 kB
`build/mini-cart-contents-block/empty-cart-frontend.js`	366 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	268 B
`build/mini-cart-contents-block/footer-frontend.js`	2.86 kB
`build/mini-cart-contents-block/items-frontend.js`	237 B
`build/mini-cart-contents-block/products-table-frontend.js`	589 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	313 B
`build/mini-cart-contents-block/title-frontend.js`	367 B
`build/mini-cart-contents.js`	17.1 kB
`build/mini-cart-frontend.js`	2 kB
`build/mini-cart.js`	4.29 kB
`build/price-filter-frontend.js`	13.8 kB
`build/price-filter-wrapper-frontend.js`	6.99 kB
`build/price-filter.js`	8.39 kB
`build/price-format.js`	1.19 kB
`build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js`	253 B
`build/product-add-to-cart--product-button--product-image--product-rating--product-title.js`	151 B
`build/product-add-to-cart-frontend.js`	6.71 kB
`build/product-add-to-cart.js`	8.61 kB
`build/product-best-sellers.js`	7.6 kB
`build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js`	500 B
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js`	262 B
`build/product-button-frontend.js`	2.22 kB
`build/product-button.js`	3.99 kB
`build/product-categories.js`	2.36 kB
`build/product-category-list-frontend.js`	1.19 kB
`build/product-category-list.js`	502 B
`build/product-category.js`	8.58 kB
`build/product-image-frontend.js`	2.23 kB
`build/product-image.js`	4.09 kB
`build/product-new.js`	7.58 kB
`build/product-on-sale.js`	7.91 kB
`build/product-price-frontend.js`	2.32 kB
`build/product-price.js`	1.58 kB
`build/product-query.js`	6.6 kB
`build/product-rating-frontend.js`	1.65 kB
`build/product-rating.js`	920 B
`build/product-results-count.js`	1.65 kB
`build/product-sale-badge-frontend.js`	1.45 kB
`build/product-sale-badge.js`	816 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	629 B
`build/product-sku.js`	378 B
`build/product-stock-indicator-frontend.js`	1.31 kB
`build/product-stock-indicator.js`	645 B
`build/product-summary-frontend.js`	1.58 kB
`build/product-summary.js`	920 B
`build/product-tag-list-frontend.js`	1.18 kB
`build/product-tag-list.js`	497 B
`build/product-tag.js`	8.07 kB
`build/product-title-frontend.js`	1.65 kB
`build/product-title.js`	3.46 kB
`build/product-top-rated.js`	7.82 kB
`build/products-by-attribute.js`	8.52 kB
`build/rating-filter-frontend.js`	20.9 kB
`build/rating-filter-wrapper-frontend.js`	5.61 kB
`build/rating-filter.js`	7.42 kB
`build/reviews-by-category.js`	11.2 kB
`build/reviews-by-product.js`	12.3 kB
`build/reviews-frontend.js`	7.14 kB
`build/single-product-frontend.js`	17.9 kB
`build/single-product.js`	9.94 kB
`build/stock-filter-frontend.js`	21.1 kB
`build/stock-filter-wrapper-frontend.js`	5.85 kB
`build/stock-filter.js`	8.14 kB
`build/store-notices.js`	1.69 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js`	6.86 kB
`build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js`	7.69 kB
`build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js`	5.26 kB
`build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js`	19.4 kB
`build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js`	7.25 kB
`build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js`	3.14 kB
`build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js`	4.83 kB
`build/vendors--checkout-blocks/shipping-method-frontend.js`	12 kB
`build/vendors--checkout-blocks/shipping-methods-frontend.js`	8.84 kB
`build/wc-blocks-data.js`	21.5 kB
`build/wc-blocks-editor-style-rtl.css`	5.72 kB
`build/wc-blocks-editor-style.css`	5.73 kB
`build/wc-blocks-google-analytics.js`	1.56 kB
`build/wc-blocks-middleware.js`	933 B
`build/wc-blocks-registry.js`	3.15 kB
`build/wc-blocks-shared-context.js`	1.52 kB
`build/wc-blocks-shared-hocs.js`	1.73 kB
`build/wc-blocks-style-rtl.css`	26.7 kB
`build/wc-blocks-style.css`	26.7 kB
`build/wc-blocks-vendors-style-rtl.css`	1.96 kB
`build/wc-blocks-vendors-style.css`	1.96 kB
`build/wc-blocks-vendors.js`	64.4 kB
`build/wc-blocks.js`	2.63 kB
`build/wc-payment-method-bacs.js`	816 B
`build/wc-payment-method-cheque.js`	811 B
`build/wc-payment-method-cod.js`	909 B
`build/wc-payment-method-paypal.js`	837 B
`build/wc-settings.js`	2.6 kB
`build/wc-shipping-method-pickup-location.js`	29.7 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

github-actions · 2023-02-21T09:47:27Z

Move into `WP_HTML_Tag_Processor` (or `WP_HTML_Processor`).

Move into `WP_HTML_Tag_Processor` (or `WP_HTML_Processor`). github.com/WordPress/gutenberg/pull/47573.

woocommerce-blocks/src/Interactivity/directives/woo-process-directives.php

Lines 64 to 76 in 97f39c1

// TODO: Move into `WP_HTML_Tag_Processor` (or `WP_HTML_Processor`).

// See e.g. https://github.com/WordPress/gutenberg/pull/47573.

function is_html_void_element( $tag_name ) {

switch ( $tag_name ) {

case 'AREA':

case 'BASE':

case 'BR':

case 'COL':

case 'EMBED':

case 'HR':

case 'IMG':

case 'INPUT':

case 'LINK':

🚀 This comment was generated by the automations bot based on a `todo` comment in `97f39c1` in #8447. cc @DAreRodz

github-actions · 2023-02-21T09:47:27Z

check if `wp_footer` is the most appropriate hook.

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 125 to 126 in 97f39c1

// TODO: check if `wp_footer` is the most appropriate hook.

add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a `todo` comment in `97f39c1` in #8447. cc @DAreRodz

github-actions · 2023-02-21T09:47:27Z

Do we want to unset styles if they're null? $tags->remove...

Do we want to unset styles if they're null? $tags->remove_class( $style_name );

https://github.com/woocommerce/woocommerce-blocks/blob/97f39c1c138c6a57944ea57f58f7467cf392d424/src/Interactivity/directives/attributes/woo-style.php#L25-L30

🚀 This comment was generated by the automations bot based on a `todo` comment in `97f39c1` in #8447. cc @DAreRodz

github-actions · 2023-02-21T13:05:54Z

Move into `WP_HTML_Tag_Processor` (or `WP_HTML_Processor`).

Move into `WP_HTML_Tag_Processor` (or `WP_HTML_Processor`). github.com/WordPress/gutenberg/pull/47573.

woocommerce-blocks/src/Interactivity/directives/woo-process-directives.php

Lines 64 to 76 in 0cd9a23

// TODO: Move into `WP_HTML_Tag_Processor` (or `WP_HTML_Processor`).

// See e.g. https://github.com/WordPress/gutenberg/pull/47573.

function is_html_void_element( $tag_name ) {

switch ( $tag_name ) {

case 'AREA':

case 'BASE':

case 'BR':

case 'COL':

case 'EMBED':

case 'HR':

case 'IMG':

case 'INPUT':

case 'LINK':

🚀 This comment was generated by the automations bot based on a `todo` comment in `0cd9a23` in #8447. cc @DAreRodz

github-actions · 2023-02-21T13:05:54Z

check if `wp_footer` is the most appropriate hook.

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 125 to 126 in 0cd9a23

// TODO: check if `wp_footer` is the most appropriate hook.

add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a `todo` comment in `0cd9a23` in #8447. cc @DAreRodz

github-actions · 2023-02-21T13:05:54Z

Do we want to unset styles if they're null? $tags->remove...

Do we want to unset styles if they're null? $tags->remove_class( $style_name );

https://github.com/woocommerce/woocommerce-blocks/blob/0cd9a2337f8277ed3c0d9722fb97f7c3f995349d/src/Interactivity/directives/attributes/woo-style.php#L25-L30

🚀 This comment was generated by the automations bot based on a `todo` comment in `0cd9a23` in #8447. cc @DAreRodz

luisherranz

The JS part looks good to me.

For the PHP part, maybe @ockham could take a look?

DAreRodz · 2023-02-22T10:07:33Z

Thanks for taking a look, @luisherranz.

BTW, for anyone following this PR: sorry for the noise with the TODO messages; I'll try not to push any of them the next time. 🙇

DAreRodz · 2023-02-23T11:58:40Z

@ockham, could you take a look at the PHP files, just to be sure I ported everything correctly from our repo? Thanks! 🙂

ockham · 2023-02-27T16:16:10Z

src/Interactivity/directives/utils.php

+
+require_once  __DIR__ . '/class-woo-directive-store.php';
+
+function store( $data ) {


The function names in this file might later collide with the ones we're using in the Block Interactivity API. Have you considered prefixing them?

ockham · 2023-02-27T16:17:43Z

src/Interactivity/directives/woo-process-directives.php

+}
+
+// See e.g. https://github.com/WordPress/gutenberg/pull/47573.
+function is_html_void_element( $tag_name ) {


Another function name to potentially prefix 😊

ockham · 2023-02-27T16:19:29Z

src/Interactivity/woo-directives.php

@@ -0,0 +1,123 @@
+<?php
+include_once __DIR__ . '/../../../gutenberg/lib/experimental/html/wp-html.php';


Note that the files in lib/experimental/html were recently moved to a different location. You might want to carry over the changes from WordPress/block-interactivity-experiments#162 😅

ockham · 2023-02-27T16:21:44Z

src/Interactivity/woo-directives.php

+	if ( isset( $instance->parsed_block['isolated'] ) ) {
+		$w = new WP_HTML_Tag_Processor( $block_content );
+		$w->next_tag();
+		$w->set_attribute( 'data-woo-ignore', '' );


I think the preferred way of doing this is

Suggested change

$w->set_attribute( 'data-woo-ignore', '' );

$w->set_attribute( 'data-woo-ignore', true );

The HTML Tag Processor is smart enough to translate that to

<some-tag data-woo-ignore>

(and not <some-tag data-woo-ignore="true">, if that was your concern 😄 ).

Ah, nice! In that case, I think we'd have to change that in our repo as well (I just copied the code from there).

ockham · 2023-02-27T16:21:59Z

src/Interactivity/woo-directives.php

+	// Add the `data-woo-island` attribute if it's interactive.
+	$w = new WP_HTML_Tag_Processor( $block_content );
+	$w->next_tag();
+	$w->set_attribute( 'data-woo-island', '' );


Same as https://github.com/woocommerce/woocommerce-blocks/pull/8447/files#r1118980149

ockham · 2023-02-27T16:23:46Z

@ockham, could you take a look at the PHP files, just to be sure I ported everything correctly from our repo? Thanks! 🙂

I left a few notes! (Looking good overall though 😊)

DAreRodz · 2023-02-28T16:32:50Z

Thanks for your reviews, @luisherranz and @ockham. I will merge this PR even though we don't have explicit approval, as I know @gigitux also reviewed the code. 😁

DAreRodz added 7 commits January 27, 2023 17:21

Update Interactivity API

5067e7a

Change wp prefixes to woo

92d0d9d

Use woo prefix for the directives runtime bundle

0199ade

Merge branch 'trunk' into update/interactivity-api-prefixes

ceedc72

Update Interactivity API runtime

6277a3c

Hardcode php from interactivity API

423c858

Temporarily add gutenberg plugin as dependency

9af6478

DAreRodz mentioned this pull request Dec 11, 2023

Tracking issue: Adding directives to WooCommerce blocks woocommerce/woocommerce#42486

Open

6 tasks

DAreRodz mentioned this pull request Feb 20, 2023

Update directives prefix to data-woo- #8316

Merged

1 task

DAreRodz added 5 commits February 20, 2023 18:29

Merge branch 'trunk' into update/interactivity-api-store-ssr

36bd2c5

Exclude Interactivity API files from phpcs checks

78b7db2

Update Interactivity API js files

92f5a85

Update Interactivity API php files

0c11440

Remove gutenberg from wp-env plugins

97f39c1

Fix registered runtime paths

28dd2ad

DAreRodz added 2 commits February 21, 2023 16:40

Remove TODO comments from Interactivity API files

68b0a66

Merge branch 'trunk' into update/interactivity-api-store-ssr

17fe079

luisherranz reviewed Feb 21, 2023

View reviewed changes

DAreRodz added 2 commits February 22, 2023 18:33

Merge branch 'trunk' into update/interactivity-api-store-ssr

fa0ef8a

Merge branch 'trunk' into update/interactivity-api-store-ssr

92c93af

DAreRodz requested a review from ockham February 23, 2023 11:56

DAreRodz mentioned this pull request Feb 23, 2023

Use navigate function inside filter blocks #8524

Closed

1 task

ockham reviewed Feb 27, 2023

View reviewed changes

DAreRodz added 6 commits February 28, 2023 16:02

Merge branch 'trunk' into update/interactivity-api-store-ssr

a824616

Add missing prefix to some global functions

f7ee7d1

Use true as value for boolean attributes

ebd1119

Add wp-html file

2f36582

Merge branch 'trunk' into update/interactivity-api-store-ssr

248de47

Change requires in wp-html with includes

e842182

DAreRodz merged commit 72ed66a into trunk Feb 28, 2023

DAreRodz deleted the update/interactivity-api-store-ssr branch February 28, 2023 16:33

DAreRodz mentioned this pull request Mar 1, 2023

Fix Interactivity API setup #8593

Merged

1 task

Aljullu added the skip-changelog PRs that you don't want to appear in the changelog. label Mar 13, 2023

Aljullu added this to the 9.8.0 milestone Mar 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Serialize the Interactivity API's store from PHP and hydrate it on the client #8447

Serialize the Interactivity API's store from PHP and hydrate it on the client #8447

DAreRodz commented Feb 15, 2023 •

edited

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023 •

edited

github-actions bot commented Feb 15, 2023 •

edited

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

luisherranz left a comment

DAreRodz commented Feb 22, 2023

DAreRodz commented Feb 23, 2023

ockham Feb 27, 2023

ockham Feb 27, 2023

ockham Feb 27, 2023

ockham Feb 27, 2023

DAreRodz Feb 28, 2023

ockham Feb 27, 2023

ockham commented Feb 27, 2023

DAreRodz commented Feb 28, 2023


		require_once __DIR__ . '/class-woo-directive-store.php';

		function store( $data ) {

		@@ -0,0 +1,123 @@
		<?php
		include_once __DIR__ . '/../../../gutenberg/lib/experimental/html/wp-html.php';

	$w->set_attribute( 'data-woo-ignore', '' );
	$w->set_attribute( 'data-woo-ignore', true );

Serialize the Interactivity API's store from PHP and hydrate it on the client #8447

Serialize the Interactivity API's store from PHP and hydrate it on the client #8447

Conversation

DAreRodz commented Feb 15, 2023 • edited

What

Why

How

github-actions bot commented Feb 15, 2023

check if priority 9 is enough.

woocommerce-blocks/src/Interactivity/woo-directives.php Lines 157 to 159 in 9af6478 // TODO: check if priority 9 is enough. // TODO: check if `wp_footer` is the most appropriate hook. add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

change the store tag ID for a better one.

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

Error handling.

woocommerce-blocks/src/Interactivity/directives/tags/woo-context.php Lines 16 to 19 in 9af6478 // TODO: Error handling. $context->set_context( $new_context ); }

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

Retain surrounding whitespace from $style_value, if any.

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

Add some directive/components registration mechanism.

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

check if `wp_footer` is the most appropriate hook.

woocommerce-blocks/src/Interactivity/woo-directives.php Lines 158 to 159 in 9af6478 // TODO: check if `wp_footer` is the most appropriate hook. add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

Implement evaluation of complex logical expressions.

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

find a better ID for the script tag.

woocommerce-blocks/src/Interactivity/directives/class-woo-directive-store.php Lines 27 to 32 in 9af6478 // TODO: find a better ID for the script tag. $id = 'store'; $store = self::serialize(); echo "<script id=\"$id\" type=\"application/json\">$store</script>"; } }

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

Do we want to unset styles if they're null? $tags->remove...

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023

Error handling.

woocommerce-blocks/src/Interactivity/directives/attributes/woo-context.php Lines 16 to 19 in 9af6478 // TODO: Error handling. $context->set_context( $new_context ); }

🚀 This comment was generated by the automations bot based on a todo comment in 9af6478 in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023 • edited

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented Feb 15, 2023 • edited

github-actions bot commented Feb 21, 2023

Move into `WP_HTML_Tag_Processor` (or `WP_HTML_Processor`).

🚀 This comment was generated by the automations bot based on a todo comment in 97f39c1 in #8447. cc @DAreRodz

github-actions bot commented Feb 21, 2023

check if `wp_footer` is the most appropriate hook.

woocommerce-blocks/src/Interactivity/woo-directives.php Lines 125 to 126 in 97f39c1 // TODO: check if `wp_footer` is the most appropriate hook. add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a todo comment in 97f39c1 in #8447. cc @DAreRodz

github-actions bot commented Feb 21, 2023

Do we want to unset styles if they're null? $tags->remove...

🚀 This comment was generated by the automations bot based on a todo comment in 97f39c1 in #8447. cc @DAreRodz

github-actions bot commented Feb 21, 2023

Move into `WP_HTML_Tag_Processor` (or `WP_HTML_Processor`).

🚀 This comment was generated by the automations bot based on a todo comment in 0cd9a23 in #8447. cc @DAreRodz

github-actions bot commented Feb 21, 2023

check if `wp_footer` is the most appropriate hook.

woocommerce-blocks/src/Interactivity/woo-directives.php Lines 125 to 126 in 0cd9a23 // TODO: check if `wp_footer` is the most appropriate hook. add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a todo comment in 0cd9a23 in #8447. cc @DAreRodz

github-actions bot commented Feb 21, 2023

Do we want to unset styles if they're null? $tags->remove...

🚀 This comment was generated by the automations bot based on a todo comment in 0cd9a23 in #8447. cc @DAreRodz

luisherranz left a comment

Choose a reason for hiding this comment

DAreRodz commented Feb 22, 2023

DAreRodz commented Feb 23, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ockham commented Feb 27, 2023

DAreRodz commented Feb 28, 2023

DAreRodz commented Feb 15, 2023 •

edited

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 157 to 159 in 9af6478

// TODO: check if priority 9 is enough.

// TODO: check if `wp_footer` is the most appropriate hook.

add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

woocommerce-blocks/src/Interactivity/directives/tags/woo-context.php

Lines 16 to 19 in 9af6478

// TODO: Error handling.

$context->set_context( $new_context );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 158 to 159 in 9af6478

// TODO: check if `wp_footer` is the most appropriate hook.

add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

woocommerce-blocks/src/Interactivity/directives/class-woo-directive-store.php

Lines 27 to 32 in 9af6478

// TODO: find a better ID for the script tag.

$id = 'store';

$store = self::serialize();

echo "<script id=\"$id\" type=\"application/json\">$store</script>";

}

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

woocommerce-blocks/src/Interactivity/directives/attributes/woo-context.php

Lines 16 to 19 in 9af6478

// TODO: Error handling.

$context->set_context( $new_context );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `9af6478` in #8447. cc @DAreRodz

github-actions bot commented Feb 15, 2023 •

edited

github-actions bot commented Feb 15, 2023 •

edited

🚀 This comment was generated by the automations bot based on a `todo` comment in `97f39c1` in #8447. cc @DAreRodz

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 125 to 126 in 97f39c1

// TODO: check if `wp_footer` is the most appropriate hook.

add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a `todo` comment in `97f39c1` in #8447. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `97f39c1` in #8447. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `0cd9a23` in #8447. cc @DAreRodz

woocommerce-blocks/src/Interactivity/woo-directives.php

Lines 125 to 126 in 0cd9a23

// TODO: check if `wp_footer` is the most appropriate hook.

add_action( 'wp_footer', array( 'Woo_Directive_Store', 'render' ), 9 );

🚀 This comment was generated by the automations bot based on a `todo` comment in `0cd9a23` in #8447. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `0cd9a23` in #8447. cc @DAreRodz