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

Checkout Terms Block: Fix Terms and Conditions checkbox position in editor (#5150) #5191

Merged
merged 1 commit into from
Nov 22, 2021

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Nov 18, 2021

Within the editor, the checkbox appeared aligned at the bottom of the paragraph, while on the front-end it would appear aligned at the top. The alignment was actually correct but a top margin was assigned to checkboxes in the backend.

Instead of removing that globally, this commit resets it for checkboxes within the checkout block.

Fixes #5150

Screenshots

Editor (before):

Screen Shot 2021-11-18 at 23 34 28

Editor (after):

Screen Shot 2021-11-18 at 23 34 05

Reference (front-end):

fe

Testing

Manual Testing

How to test the changes in this Pull Request:

  1. Go to the editor
  2. Add checkout block
  3. Select Terms and Conditions child block
  4. Activate Require checkbox display option
  5. Confirm that the checkbox is aligned to the top of the paragraph

User Facing Testing

Same as above

Changelog

Correctly align Terms and Conditions block checkbox in Checkout block

@sunyatasattva sunyatasattva added skip-changelog PRs that you don't want to appear in the changelog. block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. labels Nov 18, 2021
@sunyatasattva sunyatasattva self-assigned this Nov 18, 2021
@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team November 18, 2021 22:39
@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2021

Size Change: +11 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/wc-blocks-editor-style-rtl.css 15.8 kB +6 B (0%)
build/wc-blocks-editor-style.css 15.8 kB +5 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.24 kB
build/active-filters.js 8 kB
build/all-products-frontend.js 23.5 kB
build/all-products.js 38.3 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 3.19 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart-frontend.js 8.34 kB
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list-frontend.js 466 B
build/atomic-block-components/category-list.js 469 B
build/atomic-block-components/image-frontend.js 1.71 kB
build/atomic-block-components/image.js 1.36 kB
build/atomic-block-components/price-frontend.js 2.13 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 566 B
build/atomic-block-components/sale-badge-frontend.js 861 B
build/atomic-block-components/sale-badge.js 868 B
build/atomic-block-components/sku-frontend.js 390 B
build/atomic-block-components/sku.js 393 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 610 B
build/atomic-block-components/summary-frontend.js 907 B
build/atomic-block-components/summary.js 911 B
build/atomic-block-components/tag-list-frontend.js 468 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.47 kB
build/atomic-block-components/title.js 1.47 kB
build/attribute-filter-frontend.js 18.2 kB
build/attribute-filter.js 12.1 kB
build/blocks-checkout.js 21.3 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/checkout-button-frontend.js 1.21 kB
build/cart-blocks/empty-cart-frontend.js 348 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.74 kB
build/cart-blocks/express-payment-frontend.js 1.59 kB
build/cart-blocks/filled-cart-frontend.js 805 B
build/cart-blocks/items-frontend.js 302 B
build/cart-blocks/line-items-frontend.js 5.87 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.4 kB
build/cart-blocks/totals-frontend.js 324 B
build/cart-frontend.js 52.6 kB
build/cart.js 50.7 kB
build/checkout-blocks/actions-frontend.js 1.48 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.62 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 348 B
build/checkout-blocks/order-note-frontend.js 1.25 kB
build/checkout-blocks/order-summary-frontend.js 12.9 kB
build/checkout-blocks/payment-frontend.js 4.47 kB
build/checkout-blocks/shipping-address-frontend.js 2.72 kB
build/checkout-blocks/shipping-methods-frontend.js 5.54 kB
build/checkout-blocks/terms-frontend.js 1.29 kB
build/checkout-blocks/totals-frontend.js 329 B
build/checkout-frontend.js 54.9 kB
build/checkout.js 54 kB
build/featured-category.js 7.74 kB
build/featured-product.js 9.43 kB
build/handpicked-products.js 6.27 kB
build/legacy-template.js 2.05 kB
build/mini-cart-component-frontend.js 44.8 kB
build/mini-cart-contents.js 2.35 kB
build/mini-cart-frontend.js 2.34 kB
build/mini-cart.js 6.09 kB
build/price-filter-frontend.js 14.2 kB
build/price-filter.js 9.66 kB
build/price-format.js 1.4 kB
build/product-best-sellers.js 6.62 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.48 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.11 kB
build/product-search.js 2.71 kB
build/product-tag.js 6.6 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.71 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 9.03 kB
build/single-product-frontend.js 26.9 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 8.68 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.1 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.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.03 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.19 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.92 kB
build/wc-blocks-style-rtl.css 21.1 kB
build/wc-blocks-style.css 21.1 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 255 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

@sunyatasattva sunyatasattva marked this pull request as draft November 18, 2021 22:55
Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

I checked this as well as MailPoet et al which use checkboxes and spotted no regressions. LGTM 👍🏻

@github-actions github-actions bot added this to the 6.4.0 milestone Nov 19, 2021
@sunyatasattva sunyatasattva marked this pull request as ready for review November 22, 2021 09:08
@sunyatasattva sunyatasattva force-pushed the fix/5150-tos-checkbox-not-aligned branch from 863f38b to d8a42cd Compare November 22, 2021 09:16
…ditor (#5150)

Within the editor, the checkbox appeared aligned at the bottom of the paragraph, while
on the front-end it would appear aligned at the top. The alignment was actually correct
but a top margin was assigned to checkboxes in the backend.

Instead of removing that globally, this commit resets it for checkboxes within the checkout
block.
@sunyatasattva sunyatasattva force-pushed the fix/5150-tos-checkbox-not-aligned branch from d8a42cd to 6dc9cf5 Compare November 22, 2021 09:52
@sunyatasattva sunyatasattva merged commit 710e45d into trunk Nov 22, 2021
@sunyatasattva sunyatasattva deleted the fix/5150-tos-checkbox-not-aligned branch November 22, 2021 10:12
@Aljullu Aljullu added type: bug The issue/PR concerns a confirmed bug. and removed skip-changelog PRs that you don't want to appear in the changelog. labels Nov 22, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
…ditor (woocommerce#5150) (woocommerce#5191)

Within the editor, the checkbox appeared aligned at the bottom of the paragraph, while
on the front-end it would appear aligned at the top. The alignment was actually correct
but a top margin was assigned to checkboxes in the backend.

Instead of removing that globally, this commit resets it for checkboxes within the checkout
block.
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
…ditor (woocommerce#5150) (woocommerce#5191)

Within the editor, the checkbox appeared aligned at the bottom of the paragraph, while
on the front-end it would appear aligned at the top. The alignment was actually correct
but a top margin was assigned to checkboxes in the backend.

Instead of removing that globally, this commit resets it for checkboxes within the checkout
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. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Terms and Conditions block: checkbox not correctly aligned in the editor
3 participants