-
Notifications
You must be signed in to change notification settings - Fork 219
Conversation
Size Change: +227 B (0%) Total Size: 813 kB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After some investigation, I discovered that it is necessary to add this code in the template:
It is necessary because, in this way, Gutenberg loads the style of buttons from theme settings. |
templates/parts/mini-cart.html
Outdated
<div class="wp-block-button aligncenter is-style-outline"> | ||
<a href="/" class="wp-block-button__link">Start shopping</a> | ||
</div> | ||
<!-- wp:button --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@gigitux Thanks for taking care of this! I think instead of using a fake button to load the core button style, we should add dedicated style for the Shopping Button block.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The problem that I see is that every theme has a different style for the button element. In this way, we are able to have the theme style for the button.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@gigitux If the Shopping Button
block is removed then added back, the button style will be broken again because the button block markup is removed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is also breaking the Site Editor:
Screen.Recording.2022-02-09.at.16.20.55.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@dinhtungdu Yes! :(
How can we style the button to make it consistent with most themes? Do you have any ideas?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should keep this block simple with a basic style (square outlined button with color inherit from the parent). If users need more customization, they can replace this block by a button block.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can continue working on this PR if you don't mind : )
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, sure!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I updated the PR, please take another look!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! 🚢
Fixes #5582
Previously, the
Start shopping
button in the Mini Cart template part is a Button block with the link set to the root domain. The reason for this is: we use the template part file as the starter template for the Mini Cart Drawer, so the root domain (/
) makes the most sense to be the default URL of the shopping button.This PR links the correct shop page to the shopping button by creating a new inner block that pulls the
SHOP_URL
from the WC settings. The Shopping Button block can be moved and deleted just like a normal block.The block is styled as an outline button. The button style and alignment can't be changed. If store owners need more styling options, they should replace the block with a
Button
block.Screenshots
N/A. No visual change was introduced.
Testing
Automated Tests
Manual Testing
How to test the changes in this Pull Request:
User Facing Testing
These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).