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

Replace placeholder blockified templates with the right one #9579

Merged
merged 6 commits into from
May 30, 2023

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented May 24, 2023

This PR replaces the placeholder blockified templates with the right one. This is necessary since we are working on enabling blockified template for the new stores.

  1. Open the Site Editor.
  2. Edit the Products by Attribute template.
  3. Convert to the blockified template.
  4. Open the code editor.
  5. Be sure that there isn't any difference with the taxonomy-product_attribute.html template except for the <!-- wp:template-part -->
  6. Do the same for the Products By Category (file: taxonomy-product_cat.html) and Products By Tag (file: taxonomy-product_tag.html)
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

@gigitux gigitux added skip-changelog PRs that you don't want to appear in the changelog. focus: template Related to API powering block template functionality in the Site Editor labels May 24, 2023
@gigitux gigitux self-assigned this May 24, 2023
@woocommercebot woocommercebot requested review from a team and nefeline and removed request for a team May 24, 2023 09:40
@github-actions
Copy link
Contributor

github-actions bot commented May 24, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 24, 2023

Size Change: 0 B

Total Size: 1.09 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.57 kB
build/active-filters-wrapper-frontend.js 7.62 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 11.9 kB
build/all-products.js 40 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.05 kB
build/attribute-filter-wrapper-frontend.js 4.29 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 35.2 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.94 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.5 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.8 kB
build/cart.js 45.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 332 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 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 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 8.29 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 31.9 kB
build/checkout.js 46.4 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15 kB
build/featured-product.js 15.2 kB
build/filter-wrapper-frontend.js 14.2 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.99 kB
build/legacy-template.js 6.37 kB
build/mini-cart-component-frontend.js 28.4 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.74 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.74 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 4.1 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 594 B
build/mini-cart-contents-block/shopping-button-frontend.js 528 B
build/mini-cart-contents-block/title-frontend.js 1.91 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.61 kB
build/mini-cart-contents-block/title-label-frontend.js 1.54 kB
build/mini-cart-contents.js 18 kB
build/mini-cart-frontend.js 2.66 kB
build/mini-cart.js 4.35 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 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.51 kB
build/product-add-to-cart.js 8.87 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 964 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 4.01 kB
build/product-categories.js 2.37 kB
build/product-category.js 9.35 kB
build/product-collection.js 4.23 kB
build/product-image-frontend.js 2.63 kB
build/product-image.js 4.18 kB
build/product-new.js 8.64 kB
build/product-on-sale.js 8.67 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.68 kB
build/product-query.js 11.7 kB
build/product-rating-frontend.js 2.28 kB
build/product-rating.js 971 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku.js 536 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator.js 730 B
build/product-summary-frontend.js 2.19 kB
build/product-summary.js 905 B
build/product-tag.js 8.97 kB
build/product-template.js 3.26 kB
build/product-title-frontend.js 2.22 kB
build/product-title.js 3.69 kB
build/product-top-rated.js 8.89 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.21 kB
build/rating-filter.js 6.89 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.11 kB
build/single-product.js 11.1 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/stock-filter.js 7.6 kB
build/store-notices.js 1.68 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 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-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.1 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.96 kB
build/wc-blocks-editor-style.css 5.96 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 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.75 kB
build/wc-blocks-style-rtl.css 27.9 kB
build/wc-blocks-style.css 27.8 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 65 kB
build/wc-blocks.js 3.7 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 30.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@gigitux gigitux mentioned this pull request May 25, 2023
4 tasks
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.

Hey @gigitux ! I have a few questions here:

  • All of these templates are identical for the Products by Category, Products by Tag, and Products by attribute: the only difference is in the code level and is the queryId, why is that?
  • Shouldn't we display those as filtered out products, as mentioned on those templates description? In this shape and form, those templates don't differ much from the main Product Catalog (the only difference is really the additional "Term Description" text block).
Screen.Recording.2023-05-25.at.22.01.34.mov
  • I'm consistently getting the following error whenever I customize a template and restore it to its original state:
Screen.Recording.2023-05-25.at.22.14.01.mov

Is it a known issue?

@gigitux
Copy link
Contributor Author

gigitux commented May 26, 2023

  • All of these templates are identical for the Products by Category, Products by Tag, and Products by attribute: the only difference is in the code level and is the queryId, why is that?

Good catch! The queryId isn't necessary. with 22a432c I removed them. The queryId will be generated by the block at runtime https://github.com/WordPress/gutenberg/blob/e312f9c47dafc817a40a76f155ecce253bcb1675/packages/block-library/src/query/edit/query-content.js/#L72-L79

Shouldn't we display those as filtered out products, as mentioned on those templates description? In this shape and form, those templates don't differ much from the main Product Catalog (the only difference is really the additional "Term Description" text block).

This is one of the limitations of extending the Query Loop block. We can't control the editor side if the block has the "Inherit query from template" enabled. I think that the new Products Collection block will fix this (cc @imanish003 @kmanijak )

I'm consistently getting the following error whenever I customize a template and restore it to its original state:

It seems that you are using a development version of GB. Can you try without GB? In any case, it isn't related to this PR. Could you open an issue, please? 🙇

@gigitux gigitux requested a review from nefeline May 26, 2023 09:09
@nefeline
Copy link
Contributor

nefeline commented May 29, 2023

Good catch! The queryId isn't necessary. with 22a432c I removed them. The queryId will be generated by the block at runtime https://github.com/WordPress/gutenberg/blob/e312f9c47dafc817a40a76f155ecce253bcb1675/packages/block-library/src/query/edit/query-content.js/#L72-L79

👍

This is one of the limitations of extending the Query Loop block. We can't control the editor side if the block has the "Inherit query from template" enabled. I think that the new Products Collection block will fix this

Gotcha, thanks for clarifying! Out of curiosity, do we have this documented somewhere? Maybe this was already discussed with @shaunandrews, but tagging here just in case (TL;DR: the Products by Attribute, Products By Category, and Products By Tag templates all display the same content and are almost identical to the Product Catalog) (cc @imanish003 @kmanijak )

It seems that you are using a development version of GB. Can you try without GB? In any case, it isn't related to this PR.

Is this a known limitation with the latest version of GB, then? I'm glad to open the issue, just wanted to double-check if you were aware of it and/or if we already had an issue opened to get us covered.

@gigitux
Copy link
Contributor Author

gigitux commented May 29, 2023

Is this a known limitation with the latest version of GB, then? I'm glad to open the issue, just wanted to double-check if you were aware of it and/or if we already had an issue opened to get us covered.

Not sure, I didn't have time to investigate. It could be depended by this code.
We register/de-register the block based on the template. There could be something wrong with that logic.

@nefeline
Copy link
Contributor

Not sure, I didn't have time to investigate. It could be depended by this code.
We register/de-register the block based on the template. There could be something wrong with that logic.

Gotcha, thanks! I did a few tests here, and as it turns out, this error occurs with and without having the GB plugin enabled. Opened #9637

@gigitux
Copy link
Contributor Author

gigitux commented May 29, 2023

Not sure, I didn't have time to investigate. It could be depended by this code.
We register/de-register the block based on the template. There could be something wrong with that logic.

Gotcha, thanks! I did a few tests here, and as it turns out, this error occurs with and without having the GB plugin enabled. Opened #9637

Thanks! Let me know if I can merge this PR 🙇

@nefeline
Copy link
Contributor

Thanks! Let me know if I can merge this PR 🙇

I re-ran all tests, and things in general are working as expected, although I'm noticing some differences between the template and the auto-generated code. For example, within the taxonomy-product_tag.html file, we have:

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:template-part {"slug":"footer"} /-->

And for the auto-generated code in the editor for the Products by Tag template we have:

<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->

<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->

Are we a-ok with those differences?

@gigitux
Copy link
Contributor Author

gigitux commented May 29, 2023

Thanks! Let me know if I can merge this PR 🙇

I re-ran all tests, and things in general are working as expected, although I'm noticing some differences between the template and the auto-generated code. For example, within the taxonomy-product_tag.html file, we have:

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:template-part {"slug":"footer"} /-->

And for the auto-generated code in the editor for the Products by Tag template we have:

<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->

<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->

Are we a-ok with those differences?

Yeah, it is fine. This happens for all the templates that we have.

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.

Yeah, it is fine. This happens for all the templates that we have.

Thanks for confirming! I'm approving, but I would also recommend updating the testing instructions for whoever is going to test this for the release, as right now, it states:

Open the code editor.
Be sure that there isn't any difference with the taxonomy-product_attribute.html template.

And none of the templates are identical (theme content is injected in different areas, making them differ).

@github-actions github-actions bot added this to the 10.4.0 milestone May 30, 2023
@gigitux gigitux merged commit 96dd9d7 into trunk May 30, 2023
@gigitux gigitux deleted the add/update_blockified_template branch May 30, 2023 12:10
@kmanijak
Copy link
Contributor

kmanijak commented Jun 2, 2023

Shouldn't we display those as filtered out products, as mentioned on those templates description? In this shape and form, those templates don't differ much from the main Product Catalog (the only difference is really the additional "Term Description" text block).

@nefeline

  1. So the default look of those templates is the same (they are even handled by the same piece of code). However, the key point is that each of them can be customized separately.
  2. In terms of filtering out products - that's interesting, however, what behavior would you expect in the editor? For example, do you think Products by Attribute should display products filtered by single attribue? If so, which one to choose while it's a generic template and only on the frontend the attribute (and respectively category/tag) is determined. I think displaying randomly chosen attribute/category/tag in the editor side may be confusing for the users.

This is one of the limitations of extending the Query Loop block. We can't control the editor side if the block has the "Inherit query from template" enabled. I think that the new Products Collection block will fix this

Yes, "Inherit query from template" determines the query and we cannot control it. In terms of Product Collection it follows the same concept at the moment and I think that's expected - if the query is inherited, that's the setting we should respect, unless I'm misunderstanding this 🤔

Gotcha, thanks for clarifying! Out of curiosity, do we have this documented somewhere? Maybe this was already discussed with shaunandrews, but tagging here just in case (TL;DR: the Products by Attribute, Products By Category, and Products By Tag templates all display the same content and are almost identical to the Product Catalog) (cc imanish003 kmanijak )

I'm not aware of documentation - at the moment of blockifying the templates we recreated the structure of the classic template and Products by Attribute/Tag/Category had the same structure with the little differences to Product Catalog (like Term Description block).

Some of the limitations were gathered in pdnLyh-3rD-p2 (example: generic "Archive Title" rather than customized title, which is due to the fact of using a generic block from WC Core).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: template Related to API powering block template functionality in the Site Editor skip-changelog PRs that you don't want to appear in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants