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

Customer Account block: Fix padding for the block in the Editor #9009

Merged
merged 2 commits into from
Apr 13, 2023

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented Apr 11, 2023

The Customer Account block currently has no padding set to it. This makes the clickable area too small for this block when the user is on the Editor page.

This PR solves that by adding a padding equal to what we have for the Mini Cart block. I also refactored the CSS classes to follow our guidelines

Fixes #8942

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before After
image image

Testing

Automated Tests

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

User Facing Testing

  1. Log in to your WordPress dashboard;
  2. Go to Appearance > Themes, and select a block theme (for example: Twenty-twenty three);
  3. Go to Appearance > Site Editor;
  4. Click the Edit button;
  5. Click on the "+" icon to add a new block and search for "Customer Account" block in the search bar;
  6. Click on the "Customer Account" block to add it to your page or post;
  7. On the right side, click on the dropdown menu inside the Icon Options section;
  8. Select the "Icon-only" option;
  9. Check that the Customer Account block is displayed as an Icon and that it has some spacing around the icon
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Add spacing around the Customer Account block to make it more easily clickable on the Editor page

@thealexandrelara thealexandrelara self-assigned this Apr 11, 2023
@woocommercebot woocommercebot requested review from a team and kmanijak and removed request for a team April 11, 2023 17:11
@github-actions
Copy link
Contributor

github-actions bot commented Apr 11, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9009.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 450
  • Total errors: 2207

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Apr 11, 2023

Size Change: +86 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters.js 7.49 kB -4 B (0%)
build/all-products.js 38.3 kB -140 B (0%)
build/all-reviews.js 7.66 kB -1 B (0%)
build/attribute-filter.js 13.2 kB -4 B (0%)
build/cart.js 48.7 kB -3 B (0%)
build/checkout.js 46.3 kB +4 B (0%)
build/customer-account.js 3.17 kB +4 B (0%)
build/featured-category.js 14.1 kB +150 B (+1%)
build/featured-product.js 14.3 kB +108 B (+1%)
build/handpicked-products.js 7.92 kB -4 B (0%)
build/legacy-template.js 5.63 kB +1 B (0%)
build/mini-cart-contents.js 17.4 kB -8 B (0%)
build/product-add-to-cart.js 8.8 kB -11 B (0%)
build/product-button.js 4.17 kB +3 B (0%)
build/product-category.js 9.25 kB +2 B (0%)
build/product-image.js 4.29 kB +6 B (0%)
build/product-on-sale.js 8.58 kB +1 B (0%)
build/product-price.js 1.67 kB +2 B (0%)
build/product-query.js 11.3 kB +3 B (0%)
build/product-title.js 3.73 kB -10 B (0%)
build/product-top-rated.js 8.49 kB +1 B (0%)
build/products-by-attribute.js 9.59 kB +3 B (0%)
build/rating-filter.js 6.99 kB -2 B (0%)
build/reviews-by-product.js 13 kB +37 B (0%)
build/single-product.js 11 kB -22 B (0%)
build/stock-filter.js 7.71 kB -3 B (0%)
build/wc-blocks-editor-style-rtl.css 5.83 kB +2 B (0%)
build/wc-blocks-editor-style.css 5.83 kB -1 B (0%)
build/wc-blocks-style-rtl.css 27.5 kB -12 B (0%)
build/wc-blocks-style.css 27.5 kB -13 B (0%)
build/wc-blocks-vendors.js 63.8 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/all-products-frontend.js 11.8 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper-frontend.js 7.08 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.81 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.4 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping-frontend.js 11.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 431 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29.3 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.71 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js 11.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 431 B
build/checkout-blocks/payment-frontend.js 8.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.14 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.64 kB
build/checkout-blocks/shipping-methods-frontend.js 5.83 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.9 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-component-frontend.js 28.3 kB
build/mini-cart-contents-block/cart-button-frontend.js 819 B
build/mini-cart-contents-block/checkout-button-frontend.js 822 B
build/mini-cart-contents-block/empty-cart-frontend.js 361 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 705 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 7.04 kB
build/price-filter.js 8.46 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.42 kB
build/product-best-sellers.js 8.26 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 464 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--product-title.js 262 B
build/product-button-frontend.js 1.91 kB
build/product-categories.js 2.37 kB
build/product-image-frontend.js 1.83 kB
build/product-new.js 8.26 kB
build/product-price-frontend.js 2.11 kB
build/product-rating-frontend.js 1.33 kB
build/product-rating.js 920 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 975 B
build/product-sale-badge.js 797 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 576 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-stock-indicator.js 647 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 923 B
build/product-tag.js 8.75 kB
build/product-title-frontend.js 1.37 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/reviews-by-category.js 11.9 kB
build/reviews-frontend.js 7.1 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.83 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks.js 2.63 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.6 kB
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

What do you think about making similar padding on the frontend to increase the click area, that may be especially useful for mobile shoppers.

I placed the Customer Account and Mini Cart next to each other:
image

Here you can see a comparison of interactive area on the frontend:

Customer Account Mini Cart
image image

Let me know if that's something you think is worth addressing, otherwise, it works well! 💪

@thealexandrelara
Copy link
Contributor Author

What do you think about making similar padding on the frontend to increase the click area, that may be especially useful for mobile shoppers.

Hey @kmanijak thank you for reviewing this PR, I think it is a great suggestion, I just pushed a change with what you suggested, so now the icon has a padding around it 🙌

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

🚀

@github-actions github-actions bot added this to the 10.1.0 milestone Apr 13, 2023
@thealexandrelara thealexandrelara merged commit 06ff47a into trunk Apr 13, 2023
@thealexandrelara thealexandrelara deleted the fix/customer-account-padding-on-editor branch April 13, 2023 12:36
@thealexandrelara thealexandrelara added block: customer account Issues related to the Customer account block. focus: global styles Issues that involve styles/css/layout structure. labels Apr 24, 2023
@shaunandrews
Copy link

Oooh, I missed this! Thanks for fixing!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: customer account Issues related to the Customer account block. focus: global styles Issues that involve styles/css/layout structure.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Customer Account Block: Block appears too small on canvas
3 participants