Serialize the Interactivity API's store from PHP and hydrate it on the client by DAreRodz · Pull Request #8447 · woocommerce/woocommerce-blocks

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:

Details

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

+
+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

+}
+
+// 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

@@ -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

+	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

+	// 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

Closed

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


		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 );

Uh oh!

Conversation

DAreRodz commented Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

How

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

github-actions Bot commented Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Script Dependencies Report

TypeScript Errors Report

Uh oh!

github-actions Bot commented Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

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

Uh oh!

github-actions Bot commented Feb 21, 2023

check if `wp_footer` is the most appropriate hook.

DAreRodz commented Feb 15, 2023 •

edited

Loading

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

Loading

github-actions Bot commented Feb 15, 2023 •

edited

Loading

🚀 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