Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add Shopping Button Inner block #5614

Merged
merged 2 commits into from
Feb 15, 2022
Merged

Add Shopping Button Inner block #5614

merged 2 commits into from
Feb 15, 2022

Conversation

dinhtungdu
Copy link
Member

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

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

Manual Testing

How to test the changes in this Pull Request:

  1. Install and activate Gutenberg plugin.
  2. Clear any customizations to the Mini Cart block.
  3. Add Mini Cart block to a page.
  4. On the front end, ensure the cart is empty.
  5. Open the Mini Cart, see the Shopping button link to the correct Shop page.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above, or
  • See steps below.

@dinhtungdu dinhtungdu added status: needs review type: bug The issue/PR concerns a confirmed bug. skip-changelog PRs that you don't want to appear in the changelog. block: mini-cart Issues related to the Mini-Cart block. labels Jan 23, 2022
@dinhtungdu dinhtungdu self-assigned this Jan 23, 2022
@rubikuserbot rubikuserbot requested review from a team and frontdevde and removed request for a team January 23, 2022 10:24
@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2022

Size Change: +227 B (0%)

Total Size: 813 kB

Filename Size Change
build/wc-blocks-style-rtl.css 22.1 kB +118 B (+1%)
build/wc-blocks-style.css 22.1 kB +109 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.37 kB
build/active-filters.js 7.05 kB
build/all-products-frontend.js 18.8 kB
build/all-products.js 34 kB
build/all-reviews.js 8.06 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 255 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.69 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 6.94 kB
build/atomic-block-components/add-to-cart.js 6.5 kB
build/atomic-block-components/button-frontend.js 1.54 kB
build/atomic-block-components/button.js 914 B
build/atomic-block-components/category-list-frontend.js 457 B
build/atomic-block-components/category-list.js 459 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 703 B
build/atomic-block-components/rating.js 700 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 624 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 468 B
build/atomic-block-components/stock-indicator-frontend.js 939 B
build/atomic-block-components/stock-indicator.js 623 B
build/atomic-block-components/summary-frontend.js 1.24 kB
build/atomic-block-components/summary.js 924 B
build/atomic-block-components/tag-list-frontend.js 460 B
build/atomic-block-components/tag-list.js 459 B
build/atomic-block-components/title-frontend.js 1.21 kB
build/atomic-block-components/title.js 934 B
build/attribute-filter-frontend.js 16.8 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.15 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 5.18 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.49 kB
build/cart-blocks/order-summary-frontend.js 8.86 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.6 kB
build/cart.js 43.7 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 888 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.46 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.3 kB
build/checkout-blocks/payment-frontend.js 7.75 kB
build/checkout-blocks/shipping-address-frontend.js 976 B
build/checkout-blocks/shipping-methods-frontend.js 4.8 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 47.7 kB
build/checkout.js 45.2 kB
build/featured-category.js 8.61 kB
build/featured-product.js 9.62 kB
build/handpicked-products.js 7.09 kB
build/legacy-template.js 2.18 kB
build/mini-cart-component-frontend.js 14.3 kB
build/mini-cart-contents.js 3.82 kB
build/mini-cart-frontend.js 1.81 kB
build/mini-cart.js 6.39 kB
build/price-filter-frontend.js 12.6 kB
build/price-filter.js 8.51 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.37 kB
build/product-categories.js 3.17 kB
build/product-category.js 8.49 kB
build/product-new.js 7.67 kB
build/product-on-sale.js 7.99 kB
build/product-search.js 2.18 kB
build/product-tag.js 7.8 kB
build/product-top-rated.js 7.9 kB
build/products-by-attribute.js 8.39 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 12.6 kB
build/reviews-frontend.js 7.34 kB
build/single-product-frontend.js 22.2 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.61 kB
build/stock-filter.js 6.69 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.84 kB
build/wc-blocks-editor-style.css 4.84 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 69.7 kB
build/wc-blocks.js 2.62 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

@gigitux gigitux self-requested a review February 1, 2022 16:39
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR looks great!

I noticed that now the UI of the button is changed:
image
with the current PR

image
previous implementation

I will try to restore the previous design

@gigitux
Copy link
Contributor

gigitux commented Feb 2, 2022

After some investigation, I discovered that it is necessary to add this code in the template:

<!-- wp:buttons -->
	<div class="wp-block-buttons">
		<!-- wp:button -->
		<!-- /wp:button -->
<!-- /wp:buttons -->

It is necessary because, in this way, Gutenberg loads the style of buttons from theme settings.

@gigitux gigitux requested a review from Aljullu February 2, 2022 16:21
<div class="wp-block-button aligncenter is-style-outline">
<a href="/" class="wp-block-button__link">Start shopping</a>
</div>
<!-- wp:button -->
Copy link
Member Author

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.

Copy link
Contributor

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.

Copy link
Member Author

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.

Copy link
Member Author

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

Copy link
Contributor

@gigitux gigitux Feb 9, 2022

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?

Copy link
Member Author

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.

Copy link
Member Author

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 : )

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, sure!

Copy link
Member Author

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!

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🚢

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. skip-changelog PRs that you don't want to appear in the changelog. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mini Cart: Start shopping button should link to the store
3 participants