This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Block Refinement: Price Block [draft] #9398
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
nerrad
added
type: enhancement
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. 🚀 This comment was generated by the automations bot based on a
|
add template for initial price layoutadd template for initial price layout 🚀 This comment was generated by the automations bot based on a
|
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) */ } 🚀 This comment was generated by the automations bot based on a
|
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
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 |
|
Size Change: +7.52 kB (+1%) Total Size: 1.35 MB
ℹ️ View Unchanged
|
nerrad
force-pushed
the
update/price-block-improvments
branch
from
65db924
to
9d76a53
Compare
|
This PR has been marked as 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
bot
added
the
status: stale
nerrad
force-pushed
the
update/price-block-improvments
branch
2 times, most recently
from
3a67f0d
to
4f65d67
Compare
|
@shaunandrews I have a question regarding this control: 
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?
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. |
|
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 🤔 |
|
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:
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
bot
removed
the
status: stale
nerrad
force-pushed
the
update/price-block-improvments
branch
from
ab38659
to
66991fd
Compare
can use __experimentalDefaultControls to influence which ...can use __experimentalDefaultControls to influence which controls are displayed by default 🚀 This comment was generated by the automations bot based on a
|
nerrad
force-pushed
the
update/price-block-improvments
branch
from
cbc4715
to
863faed
Compare
nerrad
force-pushed
the
update/price-block-improvments
branch
from
0f09ffe
to
37b4a7e
Compare
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) 🚀 This comment was generated by the automations bot based on a
|
this assumes currentPrice is lower than originalPricethis assumes currentPrice is lower than originalPrice 🚀 This comment was generated by the automations bot based on a
|
need to setup discountType and showDiscount as attributes...need to setup discountType and showDiscount as attributes/context from the parent block. 🚀 This comment was generated by the automations bot based on a
|
nerrad
force-pushed
the
update/price-block-improvments
branch
from
37b4a7e
to
494faa3
Compare
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
force-pushed
the
update/price-block-improvments
branch
from
cbde25b
to
6411938
Compare
nerrad
commented
Jul 2, 2023
Comment on lines
+11
to
+15
| "layout": { | ||
| "allowSwitching": false, | ||
| "allowInheriting": false, | ||
| "default": { "type": "flex" } | ||
| }, |
There was a problem hiding this comment.
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.
nerrad
commented
Jul 2, 2023
| "isDescendentOfSingleProductTemplate", | ||
| "woocommerce/isDescendentOfSingleProductBlock": | ||
| "isDescendentOfSingleProductBlock", | ||
| "woocommerce/withSuperScriptStyle": "withSuperScriptStyle" |
There was a problem hiding this comment.
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.
nerrad
commented
Jul 2, 2023
Comment on lines
+46
to
+47
| { "name": "default", "label": "Default", "isDefault": true }, | ||
| { "name": "price-super", "label": "Superscript", "isDefault": false } |
There was a problem hiding this comment.
Block Styles are usually utilized explicitly for css styles, however given withSuperScript also impacts HTML, the selection also triggers attribute/context update.
…ginal-price blocks.
…view prices Refactor needed, but for now it shows on the editor
The price parent block also supports color but inner blocks colors take priority
This was referenced Aug 18, 2023
|
This PR has been marked as 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
bot
added
the
status: stale
github-actions
bot
removed
the
status: stale
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
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):
A few general notes:
withSuperScriptbehaviour works but not sure it's the best approach. Also needs design review around default behaviour etc.Accessibility
prefers-reduced-motionOther Checks
Screenshots
Testing
Automated Tests
User Facing Testing
WooCommerce Visibility
Performance Impact
Changelog