This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Add style to the Mini Cart buttons
#8776
Merged
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
albarin
added
type: enhancement
|
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/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx |
|
Size Change: -59.4 kB (-5%) ✅ Total Size: 1.06 MB
ℹ️ View Unchanged
|
albarin
force-pushed
the
8736/add-styles-to-mini-cart-buttons
branch
from
239c946 to
3256614
Compare
woocommercebot
requested review from
a team and
roykho
and removed request for
a team
Aljullu
reviewed
Mar 20, 2023
There was a problem hiding this comment.
This is overall working well, thanks for working on this, @albarin! I noticed one issue that should be fixed, though. To reproduce: make some edits to the button texts in trunk, then, check out this branch and build. If you go to the frontend, you will see the buttons are not displayed at all (as the new Mini Cart footer block only renders inner blocks, but in the saved template there are no inner blocks!):
In the editor, the buttons are displayed, but the text modifications that were done are lost.
I'm not sure, but we might need to add a deprecation to make the legacy mode 'transition' to the new one?
Besides that, a minor one: we should preload the new frontend scripts: https://github.com/woocommerce/woocommerce-blocks/blob/trunk/src/BlockTypes/MiniCart.php#L276-L283. (I wonder if there is a way to make it simpler, so every time we create a new block we don't need to add it to this list 🤔 )
...s/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
Outdated
Show resolved
Hide resolved
.../blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.json
Outdated
Show resolved
Hide resolved
...s/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.json
Outdated
Show resolved
Hide resolved
Ouch, great catch 👌 I'll explore if we can use the deprecation thing to fix this. |
|
@Aljullu could you have another look? I think I fixed the issue using the block deprecation approach. |
Aljullu
reviewed
Mar 22, 2023
There was a problem hiding this comment.
This is shaping up nicely. Overall the deprecation works well, but I found some edge cases.
If the theme has a custom template part for the Mini Cart, I think the deprecation is not running (so the same issue happens; no buttons in the frontend). You can reproduce as follows:
- Add a
/parts/mini-cart.htmlfile to your block theme with the contents of the previous Mini Cart template part. - Go to the frontend, the buttons are not visible.
assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/index.tsx
Outdated
Show resolved
Hide resolved
assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
Outdated
Show resolved
Hide resolved
|
@Aljullu I've changed the migrate function and the way children/buttons are rendered. I'm not particularly fond of the way to check if there are children, but I haven't been able to find another way so far. |
Aljullu
approved these changes
Mar 23, 2023
There was a problem hiding this comment.
I've changed the migrate function and the way children/buttons are rendered. I'm not particularly fond of the way to check if there are children, but I haven't been able to find another way so far.
Yeah... I have been for some hours running in circles trying different approaches but couldn't find a better one. We will probably hit the same problem in #6259 and in any other issue where we want to break blocks into smaller pieces.
I think it's ok for now and we can iterate on it later if we find a better approach. I left some comments below, but pre-approving. Good job, @albarin, this issue was a tricky one!
...ts/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
Outdated
Show resolved
Hide resolved
...s/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
Outdated
Show resolved
Hide resolved
assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Aljullu
reviewed
Mar 24, 2023
assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
Show resolved
Hide resolved
Open
5 tasks
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 converts the
View my cartandGo to checkoutbuttons to inner blocks and adds the ability to style them.Fixes #8736
Testing
Automated Tests
User Facing Testing
Mini cartblock to the header template of your site.Site Editorand edit theMini carttemplate part.List viewand select theFilled Mini Cart view.View my cartbutton and check that you can change the background and text colors of the button.Go to checkoutbutton and check that you can change the background and text colors of the button.WooCommerce Visibility
Changelog