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

inject hooks on the first block after the main div wrapper #8702

Merged
merged 5 commits into from
Mar 15, 2023

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Mar 9, 2023

During some tests, I noticed that the hooks on the first block are added before the <div> wrapper that we added to keep the compatibility with WC Core CSS.

image

This PR fixes this wrong behavior.

Fixes #8701

Screenshots

Before After
image image

Testing

User Facing Testing

  1. Go to the Single Product Template.
  2. Edit the template via code and insert this markup via the code editor
  3. Save.
  4. Be sure that the Single Product Template is visible correctly.
  5. Install the Code Snippets plugin.
  6. Create a new snippet and copy-paste this gist.
  7. Check that those hooks are put AFTER the div wrapper:
  • woocommerce_before_single_product
  • woocommerce_before_single_product_summary
  • woocommerce_single_product_summary
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@gigitux gigitux added type: bug The issue/PR concerns a confirmed bug. skip-changelog PRs that you don't want to appear in the changelog. labels Mar 9, 2023
@gigitux gigitux self-assigned this Mar 9, 2023
@woocommercebot woocommercebot requested review from a team and imanish003 and removed request for a team March 9, 2023 14:23
@gigitux
Copy link
Contributor Author

gigitux commented Mar 9, 2023

Added as reviewer @Aljullu and @nefeline that reviewed the Compatibility Layer for the Single Product Template.

@gigitux gigitux requested review from Aljullu and nefeline March 9, 2023 14:24
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@gigitux gigitux force-pushed the fix/compatibility-layer-first-block branch from 0c5b614 to fc2dd50 Compare March 9, 2023 14:25
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

Size Change: 0 B

Total Size: 1.12 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 11.7 kB
build/all-products.js 37.7 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.35 kB
build/attribute-filter-wrapper-frontend.js 4.5 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 43.9 kB
build/breadcrumbs.js 2.04 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.75 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 654 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 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 455 B
build/cart-blocks/order-summary-shipping-frontend.js 11.2 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29 kB
build/cart.js 47.7 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.84 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.13 kB
build/checkout-blocks/fields-frontend.js 330 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.79 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.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 11.2 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.43 kB
build/checkout-blocks/pickup-options-frontend.js 4.04 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.47 kB
build/checkout-blocks/shipping-methods-frontend.js 5.26 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.5 kB
build/checkout.js 45.3 kB
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.2 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.91 kB
build/legacy-template.js 5.32 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.86 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 572 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.6 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.8 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.39 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 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.69 kB
build/product-add-to-cart.js 8.62 kB
build/product-best-sellers.js 8.25 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-button.js 4.01 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 501 B
build/product-category.js 9.24 kB
build/product-image-frontend.js 2.22 kB
build/product-image.js 4.12 kB
build/product-new.js 8.25 kB
build/product-on-sale.js 8.58 kB
build/product-price-frontend.js 2.39 kB
build/product-price.js 1.64 kB
build/product-query.js 10.9 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 919 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 819 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 707 B
build/product-sku.js 453 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 498 B
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.65 kB
build/product-title.js 3.48 kB
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.58 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.42 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.13 kB
build/single-product-frontend.js 17.9 kB
build/single-product.js 10.6 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/stock-filter.js 8.13 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.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.26 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.24 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-editor-style-rtl.css 5.82 kB
build/wc-blocks-editor-style.css 5.82 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 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-style-rtl.css 26.9 kB
build/wc-blocks-style.css 26.9 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.4 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

@nefeline
Copy link
Contributor

hey @gigitux ! ref.:

Edit the template via code and insert this markup via the code editor

Do you mind clarifying which markup is supposed to be inserted? The link is currently pointing to a local install. Thanks!

@gigitux
Copy link
Contributor Author

gigitux commented Mar 13, 2023

hey @gigitux ! ref.:

Edit the template via code and insert this markup via the code editor

Do you mind clarifying which markup is supposed to be inserted? The link is currently pointing to a local install. Thanks!

Ops. I fixed the link! I created a GIF that shows how do this:

Screen.Capture.on.2023-03-13.at.14-38-53.mov

Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

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

I tested the PR & it's working as expected 🚀

@github-actions github-actions bot added this to the 9.9.0 milestone Mar 14, 2023
Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

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

Thanks for updating the instructions: nice work!

Test results:

Go to the Single Product Template.
Edit the template via code and insert this markup via the code editor
Save.
Be sure that the Single Product Template is visible correctly.

✅ Confirmed the template is visible in the editor:

Screenshot 2023-03-14 at 10 27 33

✅ Confirmed the template is also properly displayed on the FE:

Screenshot 2023-03-14 at 10 29 01

Create a new snippet and copy-paste this gist.
Check that those hooks are put AFTER the div wrapper:

✅ Confirmed they are displayed after the wrapper div:

Screenshot 2023-03-14 at 10 26 27

@gigitux
Copy link
Contributor Author

gigitux commented Mar 14, 2023

Thanks for the review, folks!

@imanish003 I will merge this PR, if you have some doubts feel free to continue the discussion in this PR!

@gigitux gigitux enabled auto-merge (squash) March 14, 2023 16:42
@gigitux gigitux merged commit 363f904 into trunk Mar 15, 2023
@gigitux gigitux deleted the fix/compatibility-layer-first-block branch March 15, 2023 14:12
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
skip-changelog PRs that you don't want to appear in the changelog. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Single Product Template Compatibility Layer: On the first block, the hooks are injected before the div wrapper
3 participants