Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Block Refinement: Price Block [draft] #9398

Draft
wants to merge 34 commits into
base: trunk
Choose a base branch
from

Conversation

nerrad
Copy link
Contributor

@nerrad nerrad commented May 8, 2023

Note: This is still a draft PR - I'll be updating as I work on it. I'll also make note when there is something testable (even early). I also will be breaking this out into smaller PRs.

I'm currently working on some refinements to the Price Block:

CleanShot 2023-05-08 at 14 53 33@2x

A major change here is the singular price block becomes a set of various price blocks to represent different price elements that will conditionally show depending on whether the product is on sale and/or user configuration. This allows for finer control over customizing the price display.

Due to this change, there are a number of things needing done to complete this work (list isn't exhaustive and will be updated as I work on this):

  • Creation of various inner blocks.
  • Figure out inline customization (i.e. post/pre price text).
  • Implement layout controls
  • Implement the PHP side for the new blocks.
  • Implement custom color controls (which also involves populating from parent block). Can use the new Add Color Panel #10062.
  • Various meta things like block name, description, and WooCommerce info (which might be abstracted for rolling out to all blocks)
  • Improved controls for on sale display.
  • Experiment with what is possible for block list view informative updates/display (i.e. displaying the block state as in the designs). I think this is more a nice-to-have at this point if there are no public APIs to do this.
  • Account for block usage in the context of All Products block (at least while this is still fully supported). This also includes
  • Implement Block Context more appropriately - it's just a shell of what I was thinking of heading towards right now.
  • Support for price range (which will be implemented conditionally by the Current Price block).
  • I'm noticing a number of inconsistencies with TS types across various components and blocks that I may try to clean up (but likely will just do in a followup).
  • Get feedback on implementation and work on tweaking (for example, should colors be controllable at the individual inner block level as well? Should the superscript behaviour be tweaked (or be controllable at the individual level?)
  • Make a decision on migration for existing implementations of Price block.
  • Ideally the PR will be broken up into smaller PRs before complete review (where possible). Especially around things like Types fixes, or utility implementation (there's likely room for a couple abstractions here).

A few general notes:

  • I went with creating this as a completely separate block for now so I could move faster without having to think about compatibility issues and allowing for focus on some of the technical challenges in the implementation. There will still need to be some discussion/decision around how to roll it out.
  • withSuperScript behaviour works but not sure it's the best approach. Also needs design review around default behaviour etc.
  • The product data initialization still needs some more work - I'm not completely sure this is a good pattern, but if there is consensus, it would ideally be extracted out of the new price block coupling so we could start using the pattern across other product blocks. It could also be tackled separately.

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before After

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Add suggested changelog entry here.

@nerrad nerrad added type: enhancement The issue is a request for an enhancement. block: product price Issues related to the Product Price block. labels May 8, 2023
@nerrad nerrad self-assigned this May 8, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 8, 2023

this would be good to derive from the WP entity store at ...

this would be good to derive from the WP entity store at some point.


// TODO: this would be good to derive from the WP entity store at some point.
const { products, productsLoading } = useStoreProducts( {
include: productId,
} );
let product = null;
if ( products.length > 0 ) {
product =
products.find(
( productIteration ) => productIteration.id === productId
) || null;
}

🚀 This comment was generated by the automations bot based on a todo comment in 65db924 in #9398. cc @nerrad

@github-actions
Copy link
Contributor

github-actions bot commented May 8, 2023

add template for initial price layout

add template for initial price layout


// todo add template for initial price layout
template={ TEMPLATE }
/>
</div>
</DerivedProductDataContextProvider>
);
};
const Edit = ( props: Props ): JSX.Element => {
return (
<InnerBlockLayoutContextProvider
parentName={ 'woocommerce/price-block' }
parentClassName={ 'wc-block-price-element' }

🚀 This comment was generated by the automations bot based on a todo comment in 65db924 in #9398. cc @nerrad

@github-actions
Copy link
Contributor

github-actions bot commented May 8, 2023

need to replace with ProductPrice component from a (block...

need to replace with ProductPrice component from a (block-new.tsx) implementation (see original price block) */ }


{ /* todo need to replace with ProductPrice component from a (block-new.tsx) implementation (see original price block) */ }
{ originalPrice }
</span>
) }
</>
);
};
export default OriginalPrice;

🚀 This comment was generated by the automations bot based on a todo comment in 65db924 in #9398. cc @nerrad

@github-actions
Copy link
Contributor

github-actions bot commented May 8, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

  • Files with errors: 487
  • Total errors: 2282

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

assets/js/atomic/blocks/product-elements/price-v2/edit.tsx

assets/js/atomic/blocks/product-elements/price-v2/index.ts

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/block.tsx

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/edit.tsx

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/current-price/index.ts

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/edit.tsx

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/index.ts

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/inner-blocks/discount-amount/block.tsx

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/inner-blocks/discount-amount/edit.tsx

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/inner-blocks/discount-amount/index.ts

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/block.tsx

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/edit.tsx

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/original-price/index.ts

assets/js/atomic/blocks/product-elements/price-v2/save.tsx

assets/js/atomic/blocks/product-elements/price-v2/supports.ts

assets/js/atomic/blocks/product-elements/price/block.tsx

assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx

assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 8, 2023

Size Change: +7.52 kB (+1%)

Total Size: 1.35 MB

Filename Size Change
build/active-filters.js 7.51 kB +4 B (0%)
build/all-products-frontend.js 9.93 kB -3 B (0%)
build/all-products-rtl.css 4.3 kB +110 B (+3%)
build/all-products.css 4.3 kB +107 B (+3%)
build/all-products.js 44.1 kB +2.81 kB (+7%) 🔍
build/all-reviews.js 7.76 kB -5 B (0%)
build/attribute-filter.js 13.1 kB -6 B (0%)
build/blocks-checkout.js 35.2 kB +149 B (0%)
build/breadcrumbs.js 2.15 kB -2 B (0%)
build/cart-blocks/cart-accepted-payment-methods-style.js 136 B -1 B (-1%)
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 3.04 kB +153 B (+5%) 🔍
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.5 kB +156 B (+3%)
build/cart-blocks/cart-order-summary-frontend.js 1.4 kB +162 B (+13%) ⚠️
build/cart-blocks/cart-order-summary-style.js 316 B -3 B (-1%)
build/cart-blocks/cart-totals-style.js 229 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-style.js 136 B +1 B (+1%)
build/cart-blocks/order-summary-discount-style.js 136 B -1 B (-1%)
build/cart-blocks/order-summary-fee-style.js 136 B -1 B (-1%)
build/cart-blocks/order-summary-shipping-frontend.js 12.1 kB +143 B (+1%)
build/cart-blocks/order-summary-taxes-style.js 178 B +1 B (+1%)
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB +3 B (0%)
build/cart-rtl.css 9.61 kB +94 B (+1%)
build/cart.css 9.59 kB +94 B (+1%)
build/cart.js 45.1 kB +183 B (0%)
build/catalog-sorting.js 1.71 kB -2 B (0%)
build/checkout-blocks/actions-style.js 680 B +1 B (0%)
build/checkout-blocks/billing-address-style.js 530 B -2 B (0%)
build/checkout-blocks/fields-style.js 248 B -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.79 kB +160 B (+4%)
build/checkout-blocks/order-summary-discount-style.js 137 B +1 B (+1%)
build/checkout-blocks/order-summary-frontend.js 1.4 kB +163 B (+13%) ⚠️
build/checkout-blocks/order-summary-shipping-frontend.js 12 kB +140 B (+1%)
build/checkout-blocks/order-summary-style.js 315 B -3 B (-1%)
build/checkout-blocks/order-summary-subtotal-style.js 136 B -1 B (-1%)
build/checkout-blocks/payment-style.js 459 B -1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.27 kB +145 B (+4%)
build/checkout-blocks/pickup-options-style.js 441 B +1 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.74 kB +159 B (+6%) 🔍
build/checkout-blocks/shipping-method-style.js 1.34 kB -1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.83 kB +142 B (+2%)
build/checkout-blocks/totals-style.js 276 B +1 B (0%)
build/checkout-frontend.js 31.6 kB -4 B (0%)
build/checkout-rtl.css 9.16 kB +90 B (+1%)
build/checkout.css 9.15 kB +92 B (+1%)
build/checkout.js 47.7 kB +178 B (0%)
build/customer-account.js 3.18 kB -1 B (0%)
build/featured-category.js 14.9 kB -10 B (0%)
build/featured-product.js 15.1 kB -9 B (0%)
build/filter-wrapper-frontend.js 14.1 kB -2 B (0%)
build/filter-wrapper.js 2.38 kB -4 B (0%)
build/handpicked-products.js 7.97 kB +5 B (0%)
build/legacy-template.js 8.15 kB -1 B (0%)
build/mini-cart-component-frontend.js 30.8 kB +2 B (0%)
build/mini-cart-contents-block/checkout-button-style.js 465 B +1 B (0%)
build/mini-cart-contents-block/filled-cart-style.js 267 B -1 B (0%)
build/mini-cart-contents-block/products-table-rtl.css 2.21 kB +92 B (+4%)
build/mini-cart-contents-block/products-table-style.js 5.48 kB +163 B (+3%)
build/mini-cart-contents-block/products-table.css 2.2 kB +93 B (+4%)
build/mini-cart-contents-block/shopping-button-style.js 394 B -1 B (0%)
build/mini-cart-contents-block/title-style.js 439 B +2 B (0%)
build/mini-cart-contents-rtl.css 2.75 kB +93 B (+4%)
build/mini-cart-contents.css 2.74 kB +91 B (+3%)
build/mini-cart-contents.js 17.8 kB +173 B (+1%)
build/packages-style-rtl.css 3.64 kB +93 B (+3%)
build/packages-style.css 3.64 kB +93 B (+3%)
build/price-filter-frontend.js 14.6 kB +143 B (+1%)
build/price-filter-rtl.css 2.77 kB +96 B (+4%)
build/price-filter-wrapper-frontend.js 8.72 kB +149 B (+2%)
build/price-filter-wrapper-rtl.css 2.63 kB +96 B (+4%)
build/price-filter-wrapper.css 2.62 kB +95 B (+4%)
build/price-filter.css 2.77 kB +95 B (+4%)
build/price-filter.js 8.66 kB +150 B (+2%)
build/product-add-to-cart.js 8.55 kB -3 B (0%)
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 932 B -1 B (0%)
build/product-average-rating.js 402 B +2 B (+1%)
build/product-best-sellers.js 8.32 kB -6 B (0%)
build/product-button.js 3.88 kB -2 B (0%)
build/product-categories.js 2.71 kB -3 B (0%)
build/product-category.js 9.28 kB -9 B (0%)
build/product-gallery-large-image.js 2.03 kB +3 B (0%)
build/product-gallery-thumbnails.js 3.9 kB -2 B (0%)
build/product-gallery.js 6.09 kB +4 B (0%)
build/product-on-sale.js 8.6 kB -5 B (0%)
build/product-price-rtl.css 782 B +115 B (+17%) ⚠️
build/product-price.css 780 B +115 B (+17%) ⚠️
build/product-price.js 1.82 kB +164 B (+10%) ⚠️
build/product-query.js 12.8 kB -3 B (0%)
build/product-rating-counter.js 688 B +1 B (0%)
build/product-rating-stars.js 939 B +1 B (0%)
build/product-rating.js 1.04 kB -2 B (0%)
build/product-search.js 2.63 kB +2 B (0%)
build/product-stock-indicator.js 708 B -1 B (0%)
build/product-summary.js 916 B -3 B (0%)
build/product-template.js 3.42 kB -3 B (0%)
build/product-title.js 964 B -1 B (0%)
build/product-top-rated.js 8.86 kB -2 B (0%)
build/products-by-attribute.js 9.62 kB -2 B (0%)
build/rating-filter.js 6.88 kB -5 B (0%)
build/reviews-by-category.js 12 kB -5 B (0%)
build/reviews-by-product.js 13.1 kB -9 B (0%)
build/single-product.js 11.2 kB -10 B (0%)
build/stock-filter.js 7.6 kB -3 B (0%)
build/store-notices.js 1.69 kB -2 B (0%)
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB -5 B (0%)
build/wc-blocks-editor-style-rtl.css 6.42 kB +50 B (+1%)
build/wc-blocks-editor-style.css 6.43 kB +50 B (+1%)
build/wc-blocks-vendors.js 65.5 kB -3 B (0%)
build/wc-blocks.js 2.62 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 929 B
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/active-filters.css 1.99 kB
build/add-to-cart-form-rtl.css 355 B
build/add-to-cart-form.css 354 B
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 8.01 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/attribute-filter.css 4.14 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.34 kB
build/cart-blocks/cart-cross-sells-frontend.js 249 B
build/cart-blocks/cart-cross-sells-products-frontend.js 3.72 kB
build/cart-blocks/cart-cross-sells-products-style.js 137 B
build/cart-blocks/cart-cross-sells-style.js 250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5 kB
build/cart-blocks/cart-express-payment-frontend.js 712 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 286 B
build/cart-blocks/cart-items-style.js 219 B
build/cart-blocks/cart-line-items-frontend.js 1.04 kB
build/cart-blocks/cart-line-items-style.js 137 B
build/cart-blocks/cart-totals-frontend.js 289 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/empty-cart-style.js 336 B
build/cart-blocks/filled-cart-frontend.js 650 B
build/cart-blocks/filled-cart-style.js 310 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.57 kB
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-fee-frontend.js 270 B
build/cart-blocks/order-summary-heading-frontend.js 326 B
build/cart-blocks/order-summary-heading-style.js 326 B
build/cart-blocks/order-summary-shipping-style.js 177 B
build/cart-blocks/order-summary-subtotal-frontend.js 270 B
build/cart-blocks/order-summary-subtotal-style.js 136 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-frontend.js 29.7 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/checkout-blocks/actions--checkout-blocks/terms-style.js 484 B
build/checkout-blocks/actions-frontend.js 1.81 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.02 kB
build/checkout-blocks/contact-information-style.js 607 B
build/checkout-blocks/express-payment-frontend.js 1.11 kB
build/checkout-blocks/fields-frontend.js 301 B
build/checkout-blocks/order-note-frontend.js 1.1 kB
build/checkout-blocks/order-summary-cart-items-style.js 137 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.72 kB
build/checkout-blocks/order-summary-coupon-form-style.js 137 B
build/checkout-blocks/order-summary-discount-frontend.js 2.21 kB
build/checkout-blocks/order-summary-fee-frontend.js 273 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-shipping-style.js 137 B
build/checkout-blocks/order-summary-subtotal-frontend.js 271 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/order-summary-taxes-style.js 177 B
build/checkout-blocks/payment-frontend.js 9.12 kB
build/checkout-blocks/shipping-address-frontend.js 4.17 kB
build/checkout-blocks/shipping-address-style.js 475 B
build/checkout-blocks/shipping-methods-style.js 417 B
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/terms-style.js 673 B
build/checkout-blocks/totals-frontend.js 332 B
build/customer-account-rtl.css 388 B
build/customer-account.css 387 B
build/featured-category-rtl.css 971 B
build/featured-category.css 970 B
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
build/legacy-template-rtl.css 238 B
build/legacy-template.css 238 B
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 249 B
build/mini-cart-contents-block/cart-button-frontend.js 1.69 kB
build/mini-cart-contents-block/cart-button-style.js 381 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.77 kB
build/mini-cart-contents-block/empty-cart-frontend.js 357 B
build/mini-cart-contents-block/empty-cart-style.js 355 B
build/mini-cart-contents-block/filled-cart-frontend.js 266 B
build/mini-cart-contents-block/footer-frontend.js 3.77 kB
build/mini-cart-contents-block/footer-rtl.css 400 B
build/mini-cart-contents-block/footer-style.js 2.34 kB
build/mini-cart-contents-block/footer.css 400 B
build/mini-cart-contents-block/items-frontend.js 228 B
build/mini-cart-contents-block/items-style.js 228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 316 B
build/mini-cart-contents-block/products-table-frontend.js 546 B
build/mini-cart-contents-block/shopping-button-frontend.js 488 B
build/mini-cart-contents-block/title-frontend.js 1.85 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.57 kB
build/mini-cart-contents-block/title-items-counter-style.js 302 B
build/mini-cart-contents-block/title-label-frontend.js 1.51 kB
build/mini-cart-contents-block/title-label-style.js 301 B
build/mini-cart-frontend.js 2.79 kB
build/mini-cart-rtl.css 2.56 kB
build/mini-cart.css 2.56 kB
build/mini-cart.js 6.34 kB
build/price-format.js 1.15 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 271 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 150 B
build/product-add-to-cart--product-image--product-title.js 319 B
build/product-add-to-cart-frontend.js 8.51 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-average-rating-frontend.js 1.71 kB
build/product-button-frontend.js 4.87 kB
build/product-button-rtl.css 864 B
build/product-button.css 863 B
build/product-categories-rtl.css 651 B
build/product-categories.css 649 B
build/product-collection.js 13.8 kB
build/product-details-rtl.css 394 B
build/product-details.css 391 B
build/product-gallery-large-image-rtl.css 295 B
build/product-gallery-large-image.css 295 B
build/product-gallery-rtl.css 371 B
build/product-gallery-thumbnails-rtl.css 272 B
build/product-gallery-thumbnails.css 271 B
build/product-gallery.css 373 B
build/product-image-frontend.js 2.65 kB
build/product-image-gallery-rtl.css 304 B
build/product-image-gallery.css 303 B
build/product-image-rtl.css 922 B
build/product-image.css 920 B
build/product-image.js 1.51 kB
build/product-new.js 8.6 kB
build/product-price-frontend.js 247 B
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-rating-counter-frontend.js 2.01 kB
build/product-rating-frontend.js 2.36 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.25 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating.css 244 B
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge-rtl.css 369 B
build/product-sale-badge.css 370 B
build/product-sale-badge.js 671 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-sku-frontend.js 1.84 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-sku.js 522 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator-rtl.css 229 B
build/product-stock-indicator.css 229 B
build/product-summary-frontend.js 2.18 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-tag.js 8.78 kB
build/product-template-rtl.css 418 B
build/product-template.css 418 B
build/product-title-frontend.js 2.21 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.62 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/rating-filter.css 4.19 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-frontend.js 7.06 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.82 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/stock-filter.css 4.01 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 606 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.29 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.55 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.22 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.59 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB
build/vendors--product-add-to-cart-frontend.js 7.52 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 237 B
build/wc-blocks-classic-template-revert-button-style.css 236 B
build/wc-blocks-classic-template-revert-button.js 1.53 kB
build/wc-blocks-data.js 22 kB
build/wc-blocks-google-analytics.js 1.55 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.19 kB
build/wc-blocks-rtl.css 2.46 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.63 kB
build/wc-blocks.css 2.46 kB
build/wc-interactivity.js 10.3 kB
build/wc-payment-method-bacs.js 817 B
build/wc-payment-method-cheque.js 813 B
build/wc-payment-method-cod.js 914 B
build/wc-payment-method-paypal.js 852 B
build/wc-settings.js 2.68 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

@nerrad nerrad force-pushed the update/price-block-improvments branch from 65db924 to 9d76a53 Compare May 15, 2023 18:54
@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label May 23, 2023
@nerrad nerrad force-pushed the update/price-block-improvments branch 2 times, most recently from 3a67f0d to 4f65d67 Compare May 23, 2023 14:43
@nerrad
Copy link
Contributor Author

nerrad commented May 23, 2023

@shaunandrews I have a question regarding this control:

CleanShot 2023-05-23 at 10 46 41@2x

Rather than making the stacking a property of the Price block, what are your thoughts on using the appropriate group block (or variation) in the template?

CleanShot 2023-05-23 at 10 52 59@2x

It would align with how layout is configured generally in GB and provides access to all the controls associated with the group block and the layout options now (and in the future).

I'm wary that by explicitly putting the layout controls on the Price container block itself, it could lead to potential clashes with usage of group (or other layout) blocks elsewhere in a design and particularly limit the creativity that theme development might go with this.

@nerrad
Copy link
Contributor Author

nerrad commented May 23, 2023

Although, I guess the pagination block is using a similar design pattern as what you're proposing, so I could have the layout controls explicitly as a part of the price block 🤔

@nerrad
Copy link
Contributor Author

nerrad commented May 23, 2023

Edit: I decided to just add the layout controls to the top-level Price block. The only caveat is that these controls are experimental from GB.


@shaunandrews, the latest build (as of this comment) is utilizing the group block so you can install and see the UX behaviour for the block.

To test:

  • Download the built zip for this PR (see this comment for the address) or just build this PR.
  • Activate the above plugin on a WP install.
  • Create a page and add the Products (beta) block.
  • Replace the existing "Products Price" block with the new "Price" block and you can see the behaviour for the new block utilizing the group block for layout.

To set expectations, this is just to showcase the behaviour using the group block - I'm still working on the other design elements.

@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label May 24, 2023
@nerrad nerrad force-pushed the update/price-block-improvments branch from ab38659 to 66991fd Compare May 29, 2023 13:33
@github-actions
Copy link
Contributor

can use __experimentalDefaultControls to influence which ...

can use __experimentalDefaultControls to influence which controls are displayed by default


* todo: can use __experimentalDefaultControls to influence which controls are
* displayed by default
*/
export const supports = {
...sharedConfig.supports,
...( isFeaturePluginBuild() && {
color: {
text: true,
background: true,
link: false,
__experimentalSkipSerialization: true,
},

🚀 This comment was generated by the automations bot based on a todo comment in cbc4715 in #9398. cc @nerrad

@nerrad nerrad force-pushed the update/price-block-improvments branch from cbc4715 to 863faed Compare June 5, 2023 13:41
@nerrad nerrad force-pushed the update/price-block-improvments branch from 0f09ffe to 37b4a7e Compare June 12, 2023 20:41
@github-actions
Copy link
Contributor

lift all the preview pricing up to the parent block (acro...

lift all the preview pricing up to the parent block (across all the price inner blocks)


// todo: lift all the preview pricing up to the parent block (across all the price inner blocks)
const oPrice = isDescendentOfSingleProductTemplate ? '3000' : originalPrice;
const cPrice = isDescendentOfSingleProductTemplate ? '5000' : currentPrice;
const DisplayedDiscount =
discountType === 'percentage' ? (
<span className={ priceClassName }>
{ calculateDiscountPercentage( oPrice, cPrice ) }%
</span>
) : (
<FormattedMonetaryAmount
className={ priceClassName }
currency={ currency }
value={ calculateDiscountAmount( oPrice, cPrice ).toString() }
/>
);

🚀 This comment was generated by the automations bot based on a todo comment in 37b4a7e in #9398. cc @nerrad

@github-actions
Copy link
Contributor

this assumes currentPrice is lower than originalPrice

this assumes currentPrice is lower than originalPrice


// todo: this assumes currentPrice is lower than originalPrice
return parseInt( originalPrice, 10 ) - parseInt( currentPrice, 10 );
};
const calculateDiscountPercentage = ( originalPrice, currentPrice ) => {
const discountAmount = calculateDiscountAmount(
originalPrice,
currentPrice
);
return Math.floor(
( discountAmount / parseInt( originalPrice, 10 ) ) * 100
);

🚀 This comment was generated by the automations bot based on a todo comment in 37b4a7e in #9398. cc @nerrad

@github-actions
Copy link
Contributor

need to setup discountType and showDiscount as attributes...

need to setup discountType and showDiscount as attributes/context from the parent block.


// todo: need to setup discountType and showDiscount as attributes/context
// from the parent block.
const {
className,
discountType = 'percentage',
showDiscount = true,
} = attributes;
const { isDescendentOfSingleProductTemplate = false } = context || {};
const { className: stylesClassName, style } = useStyleProps( attributes );
const { parentClassName } = useInnerBlockLayoutContext();
if ( ! showDiscount ) {
return null;
}
const wrapperClassName = classnames(

🚀 This comment was generated by the automations bot based on a todo comment in 37b4a7e in #9398. cc @nerrad

@nerrad nerrad force-pushed the update/price-block-improvments branch from 37b4a7e to 494faa3 Compare June 19, 2023 14:17
From “Product Price” to “Price”
Adds `include` property and makes all properties optional.
I decided to create this refinement as a new block given the change in structure and the potential impact on styling etc. We can make a decision on whether this just replaces the existing block in the future, but for now, this allows testing both in tandem.
This allows for being able to edit the text portion of the discount rendering as its own entity.
@nerrad nerrad force-pushed the update/price-block-improvments branch from cbde25b to 6411938 Compare June 28, 2023 12:56
Comment on lines +11 to +15
"layout": {
"allowSwitching": false,
"allowInheriting": false,
"default": { "type": "flex" }
},
Copy link
Contributor Author

@nerrad nerrad Jul 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note, the layout supports property only became recently available and will surface in WordPress 6.3. Prior to that it was __experimentalLayout which is still supported. It may be better to ship with __experimentalLayout if we want to support WP versions < 6.3 but even then testing should cover which versions of WP this will explicitly be supported by as that may influence what versions of WP this block is surfaced for.

"isDescendentOfSingleProductTemplate",
"woocommerce/isDescendentOfSingleProductBlock":
"isDescendentOfSingleProductBlock",
"woocommerce/withSuperScriptStyle": "withSuperScriptStyle"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not fully implemented yet, I added this as a context value so that it could be used to provide the ability for child blocks to keep their superscript style separate from the parent block. It's possible that isn't great UX in which case this property could potentially just be removed from block context.

Comment on lines +46 to +47
{ "name": "default", "label": "Default", "isDefault": true },
{ "name": "price-super", "label": "Superscript", "isDefault": false }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Block Styles are usually utilized explicitly for css styles, however given withSuperScript also impacts HTML, the selection also triggers attribute/context update.

Copy link
Contributor

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.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Dec 13, 2023
@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Dec 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product price Issues related to the Product Price block. team: Kirigami & Origami type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants