Experiment: Add a simple price filter block with directives #8221

DAreRodz · 2023-01-17T13:27:31Z

What?

This is a simple reimplementation of the Price Filter block using directives to filter a list of products by price.

Tracking issue: woocommerce/woocommerce#42486

Why?

The idea is to test and showcase how a block to filter a list of products would be implemented with directives. Also, to ease a future transition to this new API in case it finally becomes standard.

How?

This PR continues the work on #8026 and implements a new block called Simple Price Filter. The most interesting changes are in:

/assets/js/blocks/simple-price-filter/view.js (state and logic)
/src/BlockTypes/SimplePriceFilter.php (server-side rendering)

Video

This is a video recording that shows the block in action. You can see that functionality and appearance is slightly different than the original block, but I think is close enough for this demo.

The URL changes, and the Products list is refreshed, but the page is not reloaded.

Screen.Recording.2023-01-18.at.13.43.55.mov

Next steps

Get a similar appearance as the current Price Filter block
Put an initial range of prices (this can be hardcoded for now).
Fix server-side rendering for the state
Handle currencies properly

A plugin for optional chaining is required as the repo uses Webpack 4 for now.

Co-authored-by: Luis Herranz <luisherranz@users.noreply.github.com>

bin/webpack-helpers.js

github-actions · 2023-01-18T11:44:13Z

get this value from SSR.

woocommerce-blocks/assets/js/blocks/simple-price-filter/view.js

Lines 36 to 47 in b9519c6

maxRange: 90, // TODO: get this value from SSR.

isMinActive: true,

isMaxActive: false,

},

},

derived: {

filters: {

rangeStyle: ( { state } ) => {

const { minPrice, maxPrice, maxRange } = state.filters;

return {

'--low': `${ ( 100 * minPrice ) / maxRange }%`,

'--high': `${ ( 100 * maxPrice ) / maxRange }%`,

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

github-actions · 2023-01-18T11:44:13Z

get this value from DB.

woocommerce-blocks/src/BlockTypes/SimplePriceFilter.php

Lines 25 to 36 in b9519c6

$max_range = 90; // TODO: get this value from DB.

// CSS variables for the range bar style.

$__low = 100 * $min_price / $max_range;

$__high = 100 * $max_price / $max_range;

$range_style = "--low: $low%; --high: $high%";

return "

<div $wrapper_attributes>

<div

class='range'

style='$range_style'

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

This reverts commit 7c6cbee.

github-actions · 2023-01-18T11:47:52Z

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8221.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: 495
Total errors: 2352

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

assets/js/blocks/simple-price-filter/index.js

assets/js/blocks/simple-price-filter/view.js

_{comments-aggregator}

github-actions · 2023-01-18T11:51:33Z

Size Change: +3.22 kB (0%)

Total Size: 1.11 MB

Filename	Size	Change
`build/active-filters.js`	7.33 kB	-1 B (0%)
`build/all-products.js`	36.4 kB	-3 B (0%)
`build/all-reviews.js`	7.67 kB	+1 B (0%)
`build/attribute-filter.js`	12.4 kB	-1 B (0%)
`build/cart.js`	47.4 kB	-4 B (0%)
`build/catalog-sorting.js`	1.7 kB	-1 B (0%)
`build/checkout.js`	44.2 kB	-1 B (0%)
`build/featured-product.js`	13.7 kB	-2 B (0%)
`build/filter-wrapper.js`	2.39 kB	+1 B (0%)
`build/handpicked-products.js`	7.24 kB	-2 B (0%)
`build/legacy-template.js`	5.28 kB	-1 B (0%)
`build/product-add-to-cart.js`	8.61 kB	+1 B (0%)
`build/product-best-sellers.js`	7.59 kB	-3 B (0%)
`build/product-categories.js`	2.36 kB	+2 B (0%)
`build/product-category.js`	8.58 kB	+1 B (0%)
`build/product-new.js`	7.58 kB	-4 B (0%)
`build/product-on-sale.js`	7.9 kB	-5 B (0%)
`build/product-query.js`	6.6 kB	-2 B (0%)
`build/product-search.js`	2.63 kB	+3 B (0%)
`build/product-tag.js`	8.07 kB	+4 B (0%)
`build/product-title.js`	3.46 kB	-1 B (0%)
`build/products-by-attribute.js`	8.53 kB	+3 B (0%)
`build/rating-filter.js`	7.42 kB	-1 B (0%)
`build/reviews-by-category.js`	11.2 kB	-3 B (0%)
`build/reviews-by-product.js`	12.3 kB	-3 B (0%)
`build/single-product.js`	9.93 kB	-6 B (0%)
`build/wc-blocks-style-rtl.css`	27 kB	+245 B (+1%)
`build/wc-blocks-style.css`	26.9 kB	+248 B (+1%)
`build/wc-blocks-vendors.js`	64.4 kB	+2 B (0%)
`build/woo-directives-runtime.js`	2.8 kB	+74 B (+3%)
`build/woo-directives-vendors.js`	7.91 kB	+6 B (0%)
`build/simple-price-filter.js`	632 B	+632 B (new file)	🆕
`build/woo-directives-simple-price-filter.js`	2.04 kB	+2.04 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	7.98 kB
`build/active-filters-wrapper-frontend.js`	5.99 kB
`build/all-products-frontend.js`	11.7 kB
`build/attribute-filter-frontend.js`	22.4 kB
`build/attribute-filter-wrapper-frontend.js`	7.08 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/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/customer-account.js`	3.08 kB
`build/featured-category.js`	13.5 kB
`build/filter-wrapper-frontend.js`	14.1 kB
`build/general-style-rtl.css`	1.31 kB
`build/general-style.css`	1.31 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-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-category-list-frontend.js`	1.19 kB
`build/product-category-list.js`	502 B
`build/product-image-frontend.js`	2.23 kB
`build/product-image.js`	4.09 kB
`build/product-price-frontend.js`	2.32 kB
`build/product-price.js`	1.58 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-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-title-frontend.js`	1.65 kB
`build/product-top-rated.js`	7.82 kB
`build/rating-filter-frontend.js`	20.9 kB
`build/rating-filter-wrapper-frontend.js`	5.61 kB
`build/reviews-frontend.js`	7.14 kB
`build/single-product-frontend.js`	17.9 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-vendors-style-rtl.css`	1.96 kB
`build/wc-blocks-vendors-style.css`	1.96 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

_{compressed-size-action}

github-actions · 2023-02-21T10:26: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 78b0882

// 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 `78b0882` in #8221. cc @DAreRodz

github-actions · 2023-02-21T10:26:55Z

Implement evaluation of complex logical expressions.

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

Lines 9 to 20 in 78b0882

// 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 `78b0882` in #8221. cc @DAreRodz

github-actions · 2023-02-21T10:26:55Z

Add some directive/components registration mechanism.

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

Lines 101 to 112 in 78b0882

// 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 `78b0882` in #8221. cc @DAreRodz

github-actions · 2023-02-21T10:26:55Z

Error handling.

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

Lines 16 to 19 in 78b0882

// TODO: Error handling.

$context->set_context( $new_context );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

github-actions · 2023-02-21T10:26:55Z

Error handling.

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

Lines 16 to 19 in 78b0882

// TODO: Error handling.

$context->set_context( $new_context );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

github-actions · 2023-02-21T10:26:55Z

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/78b08828b3e638ed0743d73932210770c84d218d/src/Interactivity/directives/attributes/woo-style.php#L25-L30

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

github-actions · 2023-02-21T10:37:39Z

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 81cf10e

// 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 `81cf10e` in #8221. cc @DAreRodz

github-actions · 2023-02-21T10:37:39Z

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/81cf10e8d21e1fa87820497ccf5a58a555f85ae6/src/Interactivity/directives/attributes/woo-style.php#L25-L30

🚀 This comment was generated by the automations bot based on a `todo` comment in `81cf10e` in #8221. cc @DAreRodz

github-actions · 2023-02-21T10:37:39Z

check if `wp_footer` is the most appropriate hook.

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

Lines 125 to 126 in 81cf10e

// 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 `81cf10e` in #8221. cc @DAreRodz

gziolo · 2023-02-21T10:59:00Z

This bot is making a lot of noise about todo items 😅

…-price-filter-block

DAreRodz · 2023-02-22T10:01:59Z

This bot is making a lot of noise about todo items 😅

I know 😓 I'll put extra care not to push TODO comments the next time. In the end, those messages only make sense in the original repository, so removing them here is no problem.

github-actions · 2023-03-19T09:03:26Z

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

DAreRodz · 2023-06-20T19:36:13Z

Closing this PR as I created a new one for this demo: #9926

SantosGuillamot and others added 18 commits December 21, 2022 16:59

Add Interactivity API scripts

5807789

Enqueue scripts if Products exists for testing

53dc29d

Test client-side transitions

f316faa

Remove script enqueue

640df94

Remove hpq dependency

915270d

Update Interactivity scripts to latest version

f9f8c6e

Merge branch 'trunk' into experiment/interactivity-api

a69fc12

Remove interactivity scripts from core entries

8c467ec

Create webpack config for interactivity api

6c9f92b

A plugin for optional chaining is required as the repo uses Webpack 4 for now.

Enqueue the directives runtime

419aff6

Updated wp directives code

2a215b0

Use a filter to enque the directives runtime

e6bafe5

Remove base-interactivity alias for now

7c6cbee

Add path for modules inside base-interactivity

655b125

Create Simple Price Filter block

20bae4c

Co-authored-by: Luis Herranz <luisherranz@users.noreply.github.com>

Add ssr for min and max price

3717d0f

Add logic to reset button

6b69132

Enable directives and client transitions

748a1e9

This was referenced Jan 17, 2023

Experiment: Add a simple price filter block with directives #8218

Closed

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

Open

DAreRodz changed the base branch from trunk to add/interactivity-api January 17, 2023 15:08

luisherranz reviewed Jan 18, 2023

View reviewed changes

bin/webpack-helpers.js Outdated Show resolved Hide resolved

Add a functional range bar

b9519c6

Revert "Remove base-interactivity alias for now"

1d135d4

This reverts commit 7c6cbee.

DAreRodz added 2 commits January 18, 2023 13:21

Fix issues with range values

2688b49

Slightly improve appearance

e95b46a

Add gutenberg plugin to wp-env

81cf10e

DAreRodz added 2 commits February 21, 2023 12:58

Fix directive prefix in constants

1874a4c

Merge branch 'update/interactivity-api-store-ssr' into try/add-simple…

02f25fd

…-price-filter-block

DAreRodz changed the base branch from trunk to update/interactivity-api-store-ssr February 21, 2023 12:03

DAreRodz added 5 commits February 21, 2023 13:24

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

e3df31b

Avoid a Fatal error when importing wp-html

0cd9a23

Merge branch 'update/interactivity-api-store-ssr' into try/add-simple…

64c8aa7

…-price-filter-block

Remove TODO comments from Interactivity API files

68b0a66

Merge branch 'update/interactivity-api-store-ssr' into try/add-simple…

d3fc1cb

…-price-filter-block

Base automatically changed from update/interactivity-api-store-ssr to trunk February 28, 2023 16:33

DAreRodz added 3 commits February 28, 2023 18:12

Merge branch 'trunk' into try/add-simple-price-filter-block

97c47a3

Use woo_directives_store

c1b8397

Remove unnecessary alias from webpack helpers

6653daa

github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 19, 2023

DAreRodz removed the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 21, 2023

DAreRodz mentioned this pull request Jun 20, 2023

Experiment: Simple price filter block using the Interactivity API #9926

Draft

DAreRodz closed this Jun 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Experiment: Add a simple price filter block with directives #8221

Experiment: Add a simple price filter block with directives #8221

DAreRodz commented Jan 17, 2023 •

edited

Loading

github-actions bot commented Jan 18, 2023

github-actions bot commented Jan 18, 2023

github-actions bot commented Jan 18, 2023 •

edited

Loading

github-actions bot commented Jan 18, 2023 •

edited

Loading

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

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

github-actions bot commented Feb 21, 2023

gziolo commented Feb 21, 2023

DAreRodz commented Feb 22, 2023

github-actions bot commented Mar 19, 2023

DAreRodz commented Jun 20, 2023

Experiment: Add a simple price filter block with directives #8221

Experiment: Add a simple price filter block with directives #8221

Conversation

DAreRodz commented Jan 17, 2023 • edited Loading

What?

Why?

How?

Video

Next steps

github-actions bot commented Jan 18, 2023

get this value from SSR.

🚀 This comment was generated by the automations bot based on a todo comment in b9519c6 in #8221. cc @DAreRodz

github-actions bot commented Jan 18, 2023

get this value from DB.

🚀 This comment was generated by the automations bot based on a todo comment in b9519c6 in #8221. cc @DAreRodz

github-actions bot commented Jan 18, 2023 • edited Loading

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented Jan 18, 2023 • edited Loading

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 78b0882 in #8221. cc @DAreRodz

github-actions bot commented Feb 21, 2023

Implement evaluation of complex logical expressions.

🚀 This comment was generated by the automations bot based on a todo comment in 78b0882 in #8221. cc @DAreRodz

github-actions bot commented Feb 21, 2023

Add some directive/components registration mechanism.

🚀 This comment was generated by the automations bot based on a todo comment in 78b0882 in #8221. cc @DAreRodz

github-actions bot commented Feb 21, 2023

Error handling.

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

🚀 This comment was generated by the automations bot based on a todo comment in 78b0882 in #8221. cc @DAreRodz

github-actions bot commented Feb 21, 2023

Error handling.

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

🚀 This comment was generated by the automations bot based on a todo comment in 78b0882 in #8221. cc @DAreRodz

github-actions bot commented Feb 21, 2023

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

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

🚀 This comment was generated by the automations bot based on a todo comment in 78b0882 in #8221. 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 81cf10e in #8221. cc @DAreRodz

github-actions bot commented Feb 21, 2023

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

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

🚀 This comment was generated by the automations bot based on a todo comment in 81cf10e in #8221. 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 81cf10e // 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 81cf10e in #8221. cc @DAreRodz

gziolo commented Feb 21, 2023

DAreRodz commented Feb 22, 2023

github-actions bot commented Mar 19, 2023

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

DAreRodz commented Jun 20, 2023

DAreRodz commented Jan 17, 2023 •

edited

Loading

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

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

github-actions bot commented Jan 18, 2023 •

edited

Loading

github-actions bot commented Jan 18, 2023 •

edited

Loading

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

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

Lines 16 to 19 in 78b0882

// TODO: Error handling.

$context->set_context( $new_context );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

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

Lines 16 to 19 in 78b0882

// TODO: Error handling.

$context->set_context( $new_context );

}

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `78b0882` in #8221. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `81cf10e` in #8221. cc @DAreRodz

🚀 This comment was generated by the automations bot based on a `todo` comment in `81cf10e` in #8221. cc @DAreRodz

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

Lines 125 to 126 in 81cf10e

// 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 `81cf10e` in #8221. cc @DAreRodz