Product Button: Transition from using CSS margin to Global Styles

[danieldudzic]

As a part of #7954 I'm porting product elements to utilize Global Styles instead of CSS.

This PR moves the margin from CSS to Global Styles for the Product Button element.

User Facing Testing

1. Add a Products block on a new page.
2. Ensure the Product Button margin is displaying correctly (and is present in the Dimensions > Margin setting).
3. Iterate over each Products block pattern (which includes the Product Button block). Make sure the margin is correct.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Performance Impact

Changelog

Enhancement: Move margin for Product Button from CSS to Global Styles.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8239.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: 497
• Total errors: 2251

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: +18 B (0%)

Total Size: 1.08 MB

Filename	Size	Change
build/product-query.js	5.97 kB	-1 B (0%)
build/wc-blocks-style-rtl.css	25.7 kB	+10 B (0%)
build/wc-blocks-style.css	25.6 kB	+9 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.99 kB
build/active-filters-wrapper-frontend.js	6.01 kB
build/active-filters.js	7.31 kB
build/all-products-frontend.js	11.6 kB
build/all-products.js	33.5 kB
build/all-reviews.js	7.67 kB
build/attribute-filter-frontend.js	22.9 kB
build/attribute-filter-wrapper-frontend.js	7.68 kB
build/attribute-filter.js	12.4 kB
build/blocks-checkout.js	41 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.64 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.08 kB
build/cart-blocks/cart-express-payment-frontend.js	720 B
build/cart-blocks/cart-items-frontend.js	299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.34 kB
build/cart-blocks/cart-line-items-frontend.js	1.07 kB
build/cart-blocks/cart-order-summary-frontend.js	1.25 kB
build/cart-blocks/cart-totals-frontend.js	321 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	656 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.69 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	274 B
build/cart-blocks/order-summary-heading-frontend.js	456 B
build/cart-blocks/order-summary-shipping-frontend.js	14.9 kB
build/cart-blocks/order-summary-subtotal-frontend.js	274 B
build/cart-blocks/order-summary-taxes-frontend.js	435 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.24 kB
build/cart-frontend.js	28.5 kB
build/cart.js	47.5 kB
build/catalog-sorting.js	1.71 kB
build/checkout-blocks/actions-frontend.js	1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	3.91 kB
build/checkout-blocks/billing-address-frontend.js	1.15 kB
build/checkout-blocks/contact-information-frontend.js	2.04 kB
build/checkout-blocks/express-payment-frontend.js	1.13 kB
build/checkout-blocks/fields-frontend.js	344 B
build/checkout-blocks/order-note-frontend.js	1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.85 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	277 B
build/checkout-blocks/order-summary-frontend.js	1.25 kB
build/checkout-blocks/order-summary-shipping-frontend.js	14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	275 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/payment-frontend.js	8.32 kB
build/checkout-blocks/pickup-options-frontend.js	2.81 kB
build/checkout-blocks/shipping-address-frontend.js	1.11 kB
build/checkout-blocks/shipping-method-frontend.js	2.27 kB
build/checkout-blocks/shipping-methods-frontend.js	4.83 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	324 B
build/checkout-frontend.js	30.1 kB
build/checkout.js	43.3 kB
build/customer-account.js	3.08 kB
build/featured-category.js	13.1 kB
build/featured-product.js	13.4 kB
build/filter-wrapper-frontend.js	14.1 kB
build/filter-wrapper.js	2.4 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/handpicked-products.js	7.24 kB
build/legacy-template.js	2.87 kB
build/mini-cart-component-frontend.js	27.7 kB
build/mini-cart-contents-block/empty-cart-frontend.js	366 B
build/mini-cart-contents-block/filled-cart-frontend.js	268 B
build/mini-cart-contents-block/footer-frontend.js	2.82 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	590 B
build/mini-cart-contents-block/shopping-button-frontend.js	313 B
build/mini-cart-contents-block/title-frontend.js	367 B
build/mini-cart-contents.js	16.9 kB
build/mini-cart-frontend.js	1.88 kB
build/mini-cart.js	4.29 kB
build/price-filter-frontend.js	13.9 kB
build/price-filter-wrapper-frontend.js	7.01 kB
build/price-filter.js	8.4 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js	226 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.71 kB
build/product-add-to-cart.js	8.47 kB
build/product-best-sellers.js	7.61 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js	439 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js	257 B
build/product-button-frontend.js	2.14 kB
build/product-button.js	3.84 kB
build/product-categories.js	2.36 kB
build/product-category-list-frontend.js	1.14 kB
build/product-category-list.js	503 B
build/product-category.js	8.6 kB
build/product-image-frontend.js	2.14 kB
build/product-image.js	3.94 kB
build/product-new.js	7.6 kB
build/product-on-sale.js	7.93 kB
build/product-price-frontend.js	2.23 kB
build/product-price.js	1.58 kB
build/product-rating-frontend.js	1.57 kB
build/product-rating.js	920 B
build/product-results-count.js	1.68 kB
build/product-sale-badge-frontend.js	1.37 kB
build/product-sale-badge.js	814 B
build/product-search.js	2.61 kB
build/product-sku-frontend.js	629 B
build/product-sku.js	377 B
build/product-stock-indicator-frontend.js	1.26 kB
build/product-stock-indicator.js	645 B
build/product-summary-frontend.js	1.53 kB
build/product-summary.js	920 B
build/product-tag-list-frontend.js	1.13 kB
build/product-tag-list.js	496 B
build/product-tag.js	8.08 kB
build/product-title-frontend.js	1.57 kB
build/product-title.js	3.31 kB
build/product-top-rated.js	7.84 kB
build/products-by-attribute.js	8.52 kB
build/rating-filter-frontend.js	21.4 kB
build/rating-filter-wrapper-frontend.js	6.21 kB
build/rating-filter.js	7.44 kB
build/reviews-by-category.js	11.2 kB
build/reviews-by-product.js	12.3 kB
build/reviews-frontend.js	7.14 kB
build/single-product-frontend.js	17.7 kB
build/single-product.js	9.99 kB
build/stock-filter-frontend.js	21.1 kB
build/stock-filter-wrapper-frontend.js	5.87 kB
build/stock-filter.js	8.17 kB
build/store-notices.js	1.64 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js	6.86 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.53 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/billing-address--checkout-blocks/order--5b8feb0b-frontend.js	4.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js	9.48 kB
build/wc-blocks-data.js	21.6 kB
build/wc-blocks-editor-style-rtl.css	5.41 kB
build/wc-blocks-editor-style.css	5.41 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	933 B
build/wc-blocks-registry.js	3.16 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-vendors.js	64.2 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.7 kB

_{compressed-size-action}

[Aljullu]

LGTM 🚢

[danieldudzic]

Failing tests seem to be unrelated to the committed code. I will go ahead and merge this.