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

Remove duplicate data attributes #4941

Merged
merged 2 commits into from Oct 14, 2021
Merged

Conversation

mikejolley
Copy link
Member

We seem to have duplicate data attributes in the saved HTML markup. This is due to inject_html_data_attributes() code, as well as the new render filter which applies to all blocks in our namespace:

add_filter( 'render_block', array( $this, 'add_data_attributes' ), 10, 2 );

Since add_data_attributes applies to all woocommerce blocks, we can remove inject_html_data_attributes.

Fixes #4867

Testing

  1. Smoke test that the core set of WooCommerce Blocks render on the frontend. I tested product, reviews, checkout, cart.
  2. Save the checkout block. View page source. Confirm there are no data-class-name and data-align attributes on the main div.

Changelog

Remove duplicate attributes in saved block HTML

@mikejolley mikejolley self-assigned this Oct 14, 2021
@rubikuserbot rubikuserbot requested review from a team and senadir and removed request for a team October 14, 2021 10:37
@github-actions
Copy link
Contributor

Size Change: 0 B

Total Size: 1.23 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.35 kB
build/active-filters.js 8.01 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.67 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 332 B
build/atomic-block-components/add-to-cart-frontend.js 8.52 kB
build/atomic-block-components/add-to-cart.js 7.84 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 471 B
build/atomic-block-components/image-frontend.js 1.88 kB
build/atomic-block-components/image.js 1.35 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 563 B
build/atomic-block-components/rating.js 567 B
build/atomic-block-components/sale-badge-frontend.js 861 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-frontend.js 612 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 912 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-frontend.js 18.6 kB
build/attribute-filter.js 12.2 kB
build/blocks-checkout.js 21.1 kB
build/cart-blocks/checkout-button-frontend.js 2.38 kB
build/cart-blocks/empty-cart-frontend.js 327 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB
build/cart-blocks/express-payment-frontend.js 1.58 kB
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/items-frontend.js 254 B
build/cart-blocks/line-items-frontend.js 5.52 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.31 kB
build/cart-blocks/totals-frontend.js 269 B
build/cart-frontend.js 91.5 kB
build/cart-i2-frontend.js 52.5 kB
build/cart-i2.js 47.8 kB
build/cart.js 46.5 kB
build/checkout-blocks/actions-frontend.js 1.47 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.88 kB
build/checkout-blocks/express-payment-frontend.js 1.92 kB
build/checkout-blocks/fields-frontend.js 290 B
build/checkout-blocks/order-note-frontend.js 1.56 kB
build/checkout-blocks/order-summary-frontend.js 12.7 kB
build/checkout-blocks/payment-frontend.js 4.58 kB
build/checkout-blocks/shipping-address-frontend.js 3.04 kB
build/checkout-blocks/shipping-methods-frontend.js 5.55 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 271 B
build/checkout-frontend.js 54.4 kB
build/checkout.js 52.7 kB
build/featured-category.js 7.73 kB
build/featured-product.js 9.42 kB
build/handpicked-products.js 6.26 kB
build/mini-cart-component-frontend.js 36.7 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.66 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.62 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.74 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/reviews-frontend.js 8.96 kB
build/single-product-frontend.js 26.2 kB
build/single-product.js 9.76 kB
build/stock-filter-frontend.js 8.76 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-rtl.css 15.6 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-style-rtl.css 20.5 kB
build/wc-blocks-style.css 20.5 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.5 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

@@ -101,11 +101,15 @@ public function add_data_attributes( $content, $block ) {
}

$attributes = (array) $block['attrs'];
$exclude_attributes = [ 'className', 'align' ];
Copy link
Member

Choose a reason for hiding this comment

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

Works as expected, although a bit limiting as a start. $exclude_attributes can't be extended.

Is it possible for blocks to implement this themselves? as in:

  • Ignore the block using a filter.
  • Reimplement this function.

Copy link
Member Author

Choose a reason for hiding this comment

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

tbh I think under our namespace we want all attributes present. These core attributes are outliers.

Other blocks are not forced to use this handling. render_block filter is available to all.

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.

Works as expected.

@github-actions github-actions bot added this to the 6.2.0 milestone Oct 14, 2021
@mikejolley mikejolley merged commit 3ec6473 into trunk Oct 14, 2021
@mikejolley mikejolley deleted the fix/4867-duplicate-data-attributes branch October 14, 2021 12:36
@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
* Remove inject_html_data_attributes

* Exclude class/align attributes from injection
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkout i2: Alignment and Custom Classnames appended as data attributes
3 participants