Add Fill & Outline styles, width settings & new typography controls for Product(Add to cart) button block #8781
Conversation
This commit adds the Fill & Outline styles to the Product button block. You can see new Styles section in Inspector Controls where you will be able to change between Fill & Outline styles.
The button block now has a width selector, which allows the user to set the button to 25%, 50%, 75%, or 100% of the parent container. By default, a button's width is determined by the size of its content. You can find this setting in the button block's sidebar.
Now following typography controls are also available: - Font Family - Appearance - Line height - Letter spacing - Decoration - Letter case
…ocks into add/8085-add-to-cart-button-functionalities
|
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/products/base-utils.js
|
|
Size Change: +492 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
imanish003
added
focus: blocks
woocommercebot
requested review from
a team and
kmanijak
and removed request for
a team
|
Hi @Aljullu, I requested a review from you too, because following will require your opinion too:
Please find more details in PR description 🙏🏻 |
imanish003
changed the title
|
Great work @imanish003! I tested the solution and I found these two discrepancies: Default button (without outline) is shorter on the frontend.In Editor default and outlined button has the same height. Outlined button in the frontend as well. But default button on the frontend is shorter (smaller padding) height.mov100% width button that is technically an anchor exceeds the container (frontend)"Select Options" or "View products" for variable and grouped products don't respect the container max width Also, for small width (25%) they are wider
EDIT: The issue with width of anchor occurs only in Product Catalog, but not in a post
My opinion is we skip that and focus on Products block, so I agree with you ☝️ |
That's weird, I'm no longer able to reproduce #7930 (I tested changing the color of the Add to Cart button):
I don't think I'm entitled to make a decision on this. I agree that the priority is the Products block, but at the same time the All Products block is widely used so I'm not sure about having an experience that feels broken. Tagging @danielwrobert for his thoughts on this. tl;dr when adding support for new styles to the Products block product element blocks, they are exposed to the All Products block product element blocks as well. To make these new styling options work in product element blocks inside All Products block, extra work is required. Options we have:
(I lean towards option 3, but that depends on whether it's worth continuing spending time on the All Products block) |
|
@Aljullu thank you for the ping and for the TL;DR - that's super helpful! 🍻 I agree with option 3. While we don’t want to leave the experience broken for folks who are currently using the All Products block, the Products Block is meant to replace it and we don’t want to let the former hinder the progress of the latter. Time-boxing to determine the necessary effort seems like a good balance. @imanish003 since we already have an open Issue in #7930 it seems like we’re planning to address this either way - it’s just a matter of when – i.e., do we want to hold up the progress of this PR or, if it requires a more involved fix, merge it and circle back. Is that correct? |
|
Hi @Aljullu @danielwrobert, Thank you for sharing your thoughts 🙏🏻
I also tested again, and it looks like all the controls are working fine except Also, I think we may close #7930 if we can't reproduce it anymore. |
In Editor default and outlined button has the same height. Outlined button in the frontend as well. But default button on the frontend is shorter (smaller padding) More info: #8781 (comment)
|
Thanks!
I went ahead and closed it. 🙂 Edit: ups, by mistake I also closed this PR. I have reopened it. 😅 |
Fix following issues: - "Select Options" or "View products" for variable and grouped products don't respect the container max width - Also, for small width (25%) they are wider More info: #8781 (comment)
This commit fixes the width setting not working in the All Products block.
|
@Aljullu @kmanijak I have made changes in this commit to support Width Settings in |
I retested and the issues I reported earlier are gone 💪 However, neither width nor outline is applied to the All Products on the frontend (they work fine in Editor). EDIT:
|
`block.attributes.className` should be kept along with the width setting classes.
```
className: classnames( block.attributes.className, {
[ `has-custom-width wp-block-button__width-${ block.attributes?.width }` ]:
block.attributes?.width,
} )
```
There was a problem hiding this comment.
Works like a charm in Products and All Products blocks! 💪
I left one small comment, so I'm pre-approving ✅
One question: you marked PR as a "Feature Plugin" but I don't see the width setting will enter the WC Core if I'm not mistaken. In that case I think it's better to mark "WC Core", what do you think?
|
Hi @kmanijak, Thanks for pointing this out 🙌🏻
You are right, As Also, I have updated testing step to include it i.e.: |
tarunvijwani
added
the
type: enhancement
tarunvijwani
changed the title
This PR is part of #8085 & adds following controls to product(Add to cart) button in Inspector controls.
Styles: Fill & Outline
Here is a quick demo video:
Screen.Recording.2023-03-18.at.12.16.44.PM.mov
Width Settings
The button block now has a width selector, which allows the user to set the button to 25%, 50%, 75%, or 100% of the parent container. By default, a button's width is determined by the size of its content.
You can find this setting in the button block's sidebar.
Typography controls
Now following typography controls are also available:
Testing
Automated Tests
User Facing Testing
Products blockto it.Add to cart buttonas shown in screenshot below
- In the sidebar, you will see all newly added controlsFollowing newly added controls should work as expected:
Also,
block.tsxfile is imported by Cross-sells products here. So make sure that Add to cart button still works fine for Cross-sell products. You can find more about cross-sell products here.Known issues
All productsblock, but due to already reported issue #7930, these won't work for now. IMO, This issue should be fixed when we will work on #7930 issue. What do you think?WooCommerce Visibility
Changelog