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

Add custom className support to Checkout Inner Blocks #4978

Merged
merged 10 commits into from
Oct 20, 2021

Conversation

mikejolley
Copy link
Member

Updates renderInnerBlocks to pass the className to our components, and then adds classname support to all checkout inner blocks.

Fixes #4963

Testing

How to test the changes in this Pull Request:

  1. Smoke test checkout
  2. Confirm you can add classnames to checkout inner blocks and then are shown on the frontend
    • Select inner block e.g. shipping address
    • Toggle open the advanced section in the inspector
    • Add custom CSS class
    • View frontend
    • Inspect the element using browser tools and confirm the class is present

Changelog

Fix custom classname support for inner checkout blocks

@mikejolley mikejolley self-assigned this Oct 20, 2021
@rubikuserbot rubikuserbot requested review from a team and opr and removed request for a team October 20, 2021 15:25

const Main = ( { children, className } ) => {
const Main = forwardRef( ( { children, className = '' }, ref ) => {
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 allowed me to combine 2 wrapper divs into one (functional components do not support refs so we need to forward to the div).

@mikejolley mikejolley added the block: checkout Issues related to the checkout block. label Oct 20, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Oct 20, 2021

Size Change: +811 B (0%)

Total Size: 1.23 MB

Filename Size Change
build/active-filters-frontend.js 8.35 kB -1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 8.51 kB -2 B (0%)
build/atomic-block-components/button-frontend.js 1.74 kB -3 B (0%)
build/atomic-block-components/category-list-frontend.js 468 B +2 B (0%)
build/atomic-block-components/image-frontend.js 1.88 kB +3 B (0%)
build/atomic-block-components/price-frontend.js 2.13 kB -2 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 611 B -1 B (0%)
build/attribute-filter-frontend.js 18.8 kB -2 B (0%)
build/cart-blocks/checkout-button-frontend.js 1.21 kB -1 B (0%)
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB -1 B (0%)
build/cart-blocks/express-payment-frontend.js 1.58 kB -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 802 B +1 B (0%)
build/cart-blocks/items-frontend.js 300 B +46 B (+18%) ⚠️
build/cart-blocks/order-summary-frontend.js 7.3 kB -3 B (0%)
build/cart-blocks/totals-frontend.js 313 B +45 B (+17%) ⚠️
build/cart-frontend.js 91.7 kB +28 B (0%)
build/cart-i2-frontend.js 52.4 kB +16 B (0%)
build/cart-i2.js 49.5 kB +39 B (0%)
build/cart.js 46.6 kB +36 B (0%)
build/checkout-blocks/actions-frontend.js 1.51 kB +36 B (+2%)
build/checkout-blocks/billing-address-frontend.js 2.66 kB +16 B (+1%)
build/checkout-blocks/contact-information-frontend.js 3.89 kB +15 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.92 kB +6 B (0%)
build/checkout-blocks/fields-frontend.js 345 B +55 B (+19%) ⚠️
build/checkout-blocks/order-note-frontend.js 1.56 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 12.7 kB +2 B (0%)
build/checkout-blocks/payment-frontend.js 4.58 kB -4 B (0%)
build/checkout-blocks/shipping-address-frontend.js 3.06 kB +15 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.57 kB +12 B (0%)
build/checkout-blocks/terms-frontend.js 1.65 kB +9 B (+1%)
build/checkout-blocks/totals-frontend.js 328 B +57 B (+21%) 🚨
build/checkout-frontend.js 54.4 kB +15 B (0%)
build/checkout.js 53.3 kB +130 B (0%)
build/mini-cart-component-frontend.js 36.8 kB -2 B (0%)
build/reviews-frontend.js 8.96 kB +2 B (0%)
build/single-product-frontend.js 26.3 kB +17 B (0%)
build/stock-filter-frontend.js 8.77 kB +2 B (0%)
build/wc-blocks-editor-style-rtl.css 15.6 kB +2 B (0%)
build/wc-blocks-style-rtl.css 20.6 kB +112 B (+1%)
build/wc-blocks-style.css 20.6 kB +116 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters.js 8.02 kB
build/all-products-frontend.js 23.1 kB
build/all-products.js 37.2 kB
build/all-reviews.js 9.56 kB
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.81 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 333 B
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list.js 470 B
build/atomic-block-components/image.js 1.35 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 562 B
build/atomic-block-components/rating.js 567 B
build/atomic-block-components/sale-badge-frontend.js 859 B
build/atomic-block-components/sale-badge.js 869 B
build/atomic-block-components/sku-frontend.js 392 B
build/atomic-block-components/sku.js 392 B
build/atomic-block-components/stock-indicator.js 611 B
build/atomic-block-components/summary-frontend.js 908 B
build/atomic-block-components/summary.js 913 B
build/atomic-block-components/tag-list-frontend.js 467 B
build/atomic-block-components/tag-list.js 472 B
build/atomic-block-components/title-frontend.js 1.47 kB
build/atomic-block-components/title.js 1.29 kB
build/attribute-filter.js 12.3 kB
build/blocks-checkout.js 21.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/empty-cart-frontend.js 327 B
build/cart-blocks/line-items-frontend.js 5.53 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/featured-category.js 7.73 kB
build/featured-product.js 9.41 kB
build/handpicked-products.js 6.27 kB
build/mini-cart-frontend.js 2.29 kB
build/mini-cart.js 2.34 kB
build/price-filter-frontend.js 14.3 kB
build/price-filter.js 9.67 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.61 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.13 kB
build/product-search.js 2.69 kB
build/product-tag.js 6.58 kB
build/product-top-rated.js 6.73 kB
build/products-by-attribute.js 7.7 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/single-product.js 9.77 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.2 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 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.1 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.02 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style.css 15.6 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.47 kB
build/wc-blocks-registry.js 3.71 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 254 kB
build/wc-blocks.js 3.49 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

@mikejolley
Copy link
Member Author

@senadir Should I avoid classnames on the frontend?

@@ -86,6 +90,7 @@ export const Edit = ( {
<Block
showReturnToCart={ showReturnToCart }
cartPageId={ cartPageId }
className={ className }
Copy link
Member

Choose a reason for hiding this comment

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

Classname should exist on the useBlockProps here right?

@senadir
Copy link
Member

senadir commented Oct 20, 2021

@senadir Should I avoid classnames on the frontend?

Package? it's pretty lightweight and we already use it.

Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

This is testing and looking fine! we will do Cart in a follow up

@mikejolley mikejolley merged commit d761be1 into trunk Oct 20, 2021
@mikejolley mikejolley deleted the fix/inner-block-classname-support branch October 20, 2021 16:18
@frontdevde frontdevde added the type: bug The issue/PR concerns a confirmed bug. label Oct 26, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
* Pass classname from DOM to react components

* Actions Block ClassName support

* Form step field classname support

* Payment block className support

* Classname support for fields and totals

* Order summary classname support

* Classname support for order note block

* Express payment classname support

* Terms block custom class

* Let useBlockProps handle class in actions block
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
* Pass classname from DOM to react components

* Actions Block ClassName support

* Form step field classname support

* Payment block className support

* Classname support for fields and totals

* Order summary classname support

* Classname support for order note block

* Express payment classname support

* Terms block custom class

* Let useBlockProps handle class in actions block
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkout: additional classes for inner blocks do not appear on the front-end
3 participants