This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Experiment: Replace style hooks coming from @wordpress/block-editor
#9251
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
mikejolley
added
type: refactor
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThe
This comment was automatically generated by the TypeScript Errors Report
assets/js/atomic/blocks/product-elements/image/block.tsx
assets/js/atomic/blocks/product-elements/price/block.tsx assets/js/atomic/blocks/product-elements/rating/block.tsx assets/js/atomic/blocks/product-elements/sale-badge/block.tsx assets/js/atomic/blocks/product-elements/sku/block.tsx assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx assets/js/atomic/blocks/product-elements/summary/block.tsx assets/js/atomic/blocks/product-elements/title/block.tsx assets/js/blocks/active-filters/block-wrapper.tsx assets/js/blocks/attribute-filter/block-wrapper.tsx assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx assets/js/blocks/price-filter/block-wrapper.tsx assets/js/blocks/rating-filter/block-wrapper.tsx assets/js/blocks/stock-filter/block-wrapper.tsx |
|
Size Change: -32.6 kB (-3%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
|
Looks like it didn't remove all dependencies in the report, but I don't see them in my local build. Will investigate, should this be the approach we want to take. |
gigitux
reviewed
Apr 27, 2023
nerrad
reviewed
May 1, 2023
nerrad
reviewed
May 1, 2023
mikejolley
force-pushed
the
experiment/replace-block-editor-methods
branch
from
a21bfad to
128a8a9
Compare
|
@nerrad I've hesitating pushing too hard because this is work that affects mostly FSE rather than Rubik, but it would be nice to resolve. I assume next steps are to get another review from a FSE team, and raise the issue upstream to make those hooks available. Is that correct? |
|
Yes. |
|
Logged here: WordPress/gutenberg#50334 |
mikejolley
force-pushed
the
experiment/replace-block-editor-methods
branch
from
112e1e1 to
8164c12
Compare
woocommercebot
requested review from
a team and
opr
and removed request for
a team
opr
approved these changes
May 9, 2023
There was a problem hiding this comment.
I tested this and it seems to be working fine, I played with a bunch of styling options on the products block and the filter blocks, it seems global styles are working fine for all of them.
I did not do a deep code review as I am very unfamiliar with this side of the project, but I looked at all files and didn't find anything that seems obviously problematic. Maybe one of the store editing teams could do a deeper review of the actual code?
Aljullu
reviewed
May 11, 2023
There was a problem hiding this comment.
This is looking great, thanks for working on this, @mikejolley!
I left some inline comments in places where we can avoid spreading objects. It's a minor change but thought I would mention anyway because it keeps code simpler.
Besides that, the only regression I found is when changing the background color of the Product Title inner block in the All Products block:
trunk |
This branch |
|---|---|
 |
 |
...ts/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
Outdated
Show resolved
Hide resolved
tjcafferkey
reviewed
May 12, 2023
tjcafferkey
reviewed
May 12, 2023
...ts/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
Outdated
Show resolved
Hide resolved
tjcafferkey
reviewed
May 12, 2023
...s/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
Outdated
Show resolved
Hide resolved
tjcafferkey
reviewed
May 12, 2023
tjcafferkey
reviewed
May 12, 2023
...ocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-items-counter-block/block.tsx
Outdated
Show resolved
Hide resolved
…i-cart-cart-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]>
mikejolley
force-pushed
the
experiment/replace-block-editor-methods
branch
from
cd6add0 to
cb108e6
Compare
|
Thanks for the reviews @opr @Aljullu @tjcafferkey — I've adjusted those spreads, fixed the missing styles in atomic blocks, and retested. Tests are green so merging! |
mikejolley
added
the
type: technical debt
4 tasks
Aljullu
added a commit
that referenced
this pull request
May 30, 2023
Aljullu
added a commit
that referenced
this pull request
May 30, 2023
4 tasks
Aljullu
added a commit
that referenced
this pull request
May 30, 2023
Aljullu
added a commit
that referenced
this pull request
May 30, 2023
Aljullu
added a commit
that referenced
this pull request
May 30, 2023
Aljullu
added a commit
that referenced
this pull request
May 30, 2023
* Empty commit for release pull request * Empty commit for release pull request * Add 10.0.6 changelog * Update versions to 10.0.6 * Fix Mini-Cart block check to see whether a script has already been enqueued (#9649) * Add 10.0.6 testing steps * Partially uplift #9251 to 10.0.x (#9654) * Update testing ZIP --------- Co-authored-by: github-actions <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]>
Aljullu
added a commit
that referenced
this pull request
May 31, 2023
Aljullu
added a commit
that referenced
this pull request
May 31, 2023
…#9251) * Replace all style hooks with useStyleProps hook * Remove border/color/spacing hooks * Style Props Hook * Make use of `change-case` package * Tidy up block wrappers * Attribute filter does not use frontend.ts nor styles within block * Remove frontend from filter blocks and unused styleprops usage * Tidy up variable names so its clearer attributes are not required specifically from blocks * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/attribute-filter/block-wrapper.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/active-filters/block-wrapper.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/rating-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/stock-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/price-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Simplify styleprop * Styleprops simplify * Fix withFeaturedItem styles * Like the original hook, flatten props and combine with parsed styles --------- Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tom Cafferkey <[email protected]>
Aljullu
added a commit
that referenced
this pull request
May 31, 2023
…#9251) * Replace all style hooks with useStyleProps hook * Remove border/color/spacing hooks * Style Props Hook * Make use of `change-case` package * Tidy up block wrappers * Attribute filter does not use frontend.ts nor styles within block * Remove frontend from filter blocks and unused styleprops usage * Tidy up variable names so its clearer attributes are not required specifically from blocks * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/attribute-filter/block-wrapper.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/active-filters/block-wrapper.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/rating-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/stock-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/price-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Simplify styleprop * Styleprops simplify * Fix withFeaturedItem styles * Like the original hook, flatten props and combine with parsed styles --------- Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tom Cafferkey <[email protected]>
Aljullu
added a commit
that referenced
this pull request
Jun 1, 2023
* Empty commit for release pull request * Empty commit for release pull request * Add 10.2.2 changelog * Update versions to 10.2.2 * Fix Mini-Cart block check to see whether a script has already been enqueued (#9649) * Experiment: Replace style hooks coming from `@wordpress/block-editor` (#9251) * Replace all style hooks with useStyleProps hook * Remove border/color/spacing hooks * Style Props Hook * Make use of `change-case` package * Tidy up block wrappers * Attribute filter does not use frontend.ts nor styles within block * Remove frontend from filter blocks and unused styleprops usage * Tidy up variable names so its clearer attributes are not required specifically from blocks * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/attribute-filter/block-wrapper.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/active-filters/block-wrapper.tsx Co-authored-by: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/rating-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/stock-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/price-filter/block-wrapper.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx Co-authored-by: Tom Cafferkey <[email protected]> * Simplify styleprop * Styleprops simplify * Fix withFeaturedItem styles * Like the original hook, flatten props and combine with parsed styles --------- Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Tom Cafferkey <[email protected]> * Add 10.2.2 testing steps * Fix colors not being applied to Mini-Cart Proceed to Checkout Button in the editor (#9661) * Update 10.2.2 testing steps --------- Co-authored-by: github-actions <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Mike Jolley <[email protected]> Co-authored-by: Tom Cafferkey <[email protected]>
This was referenced Jun 21, 2023
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.
This PR Fixes #8071 by pulling in style functions from the
@wordpress/block-editorpackage for use on our frontend. Style rules come from blockattributes—we just need to translate them to CSS.While this does duplicate methods from Gutenberg, it does:
@wordpress/block-editordependency which is unsuitable for frontend use and largeuseStylePropshookThe downside is maintaining the utils inherited from Gutenberg.
While working on this and cleaning up style usage, I came across 3 blocks which had defined frontend scripts that were not used/needed. These need testing also (in instructions below).
Fixes #8071
Other Checks
Testing
Automated Tests
User Facing Testing
WooCommerce Visibility
Performance Impact
This will have a positive impact on the size of dependencies on the frontend.
Changelog