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

Fix corrupt Classic Template placeholders for specific products. #7033

Merged
merged 3 commits into from
Sep 6, 2022

Conversation

tjcafferkey
Copy link
Contributor

@tjcafferkey tjcafferkey commented Aug 31, 2022

When using the Gutenberg plugin, you can create specific templates for products, categories and tags via the Appearance > Editor > Add New button. At the moment in the code for the Classic Template Block placeholder we don't accommodate for these specific slugs e.g. single-product-hoodie so we get an unsupported block notice in the editor as seen below.

This PR introduces a change finds the closest matching template. For example single-product-hoodie will match the template details for single-product (and the same for product categories/tags too).

CleanShot 2022-08-31 at 09 35 51@2x

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before After

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

Reproduce the original issue:

  1. Before checking out this PR, activate Gutenberg plugin
  2. Go to Appearance > Editor > Add New to add a new template
  3. Click "Single Item: Product" template and create a product specific template
  4. Observe the block compatibility error as seen in the screenshot above.

Test the fix:

  1. Checkout this PR, and activate Gutenberg plugin
  2. Go to Appearance > Editor > Add New to add a new template
  3. Click "Single Item: Product" template and create a product specific template
  4. The block should render the placeholder for the Single Product.
  5. Make changes to this template, and save them. Make sure these are represented on the frontend. Then clear the customizations and do the same.
  6. Complete steps 3-5 again but instead create Product Category and Product Tag templates.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Fix incompatible Classic Template block notice in the Editor for Woo specific templates

@tjcafferkey tjcafferkey added type: bug The issue/PR concerns a confirmed bug. focus: template Related to API powering block template functionality in the Site Editor labels Aug 31, 2022
@tjcafferkey tjcafferkey self-assigned this Aug 31, 2022
@rubikuserbot rubikuserbot requested review from a team and danielwrobert and removed request for a team August 31, 2022 15:32
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7033.zip

@github-actions
Copy link
Contributor

github-actions bot commented Aug 31, 2022

Size Change: +93 B (0%)

Total Size: 871 kB

Filename Size Change
build/featured-category.js 13.2 kB +14 B (0%)
build/featured-product.js 13.5 kB +13 B (0%)
build/legacy-template.js 2.85 kB +66 B (+2%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.34 kB
build/active-filters.js 8.01 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.7 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.1 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.25 kB
build/cart-blocks/cart-line-items-frontend.js 429 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB
build/cart-blocks/order-summary-shipping-frontend.js 426 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 47.1 kB
build/cart.js 41.8 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.38 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.64 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.26 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 604 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 7.7 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.75 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.3 kB
build/checkout.js 43.2 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.37 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 365 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 6.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 4.58 kB
build/price-filter-frontend.js 13.3 kB
build/price-filter.js 9.17 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 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart-frontend.js 6.95 kB
build/product-add-to-cart.js 6.88 kB
build/product-best-sellers.js 7.71 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 436 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 300 B
build/product-button-frontend.js 1.88 kB
build/product-button.js 1.57 kB
build/product-categories.js 2.41 kB
build/product-category-list-frontend.js 879 B
build/product-category-list.js 504 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.89 kB
build/product-image.js 1.59 kB
build/product-new.js 7.72 kB
build/product-on-sale.js 8.03 kB
build/product-price-frontend.js 1.9 kB
build/product-price.js 1.51 kB
build/product-query.js 648 B
build/product-rating-frontend.js 1.16 kB
build/product-rating.js 742 B
build/product-sale-badge-frontend.js 1.13 kB
build/product-sale-badge.js 802 B
build/product-search.js 2.65 kB
build/product-sku-frontend.js 381 B
build/product-sku.js 379 B
build/product-stock-indicator-frontend.js 993 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 918 B
build/product-tag-list-frontend.js 872 B
build/product-tag-list.js 498 B
build/product-tag.js 8.09 kB
build/product-title-frontend.js 1.31 kB
build/product-title.js 923 B
build/product-top-rated.js 7.95 kB
build/products-by-attribute.js 8.63 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 21.4 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.59 kB
build/stock-filter.js 7.53 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-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.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.1 kB
build/wc-blocks-editor-style.css 5.1 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 23 kB
build/wc-blocks-style.css 23 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 54.5 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

compressed-size-action

@tjcafferkey
Copy link
Contributor Author

@sunyatasattva do you know why these E2E tests would fail with Gutenberg enabled? The Snapshots should not have changed in theory so I'm not convinced they're related to this change but wanted to get your opinion on this to make sure.

@danielwrobert
Copy link
Contributor

@sunyatasattva do you know why these E2E tests would fail with Gutenberg enabled? The Snapshots should not have changed in theory so I'm not convinced they're related to this change but wanted to get your opinion on this to make sure.

FWIW, I'm seeing the exact same task failing in all of my currently open PRs.

@albarin albarin self-assigned this Sep 2, 2022
@sunyatasattva
Copy link
Contributor

Yea looks like snapshots have changed, possibly Gutenberg related, and we can just update. At a first glance, I don't see anything too worrisome. It looks like there is an extra container div within the group?

// Finds the most appropriate template details object for specific template keys such as single-product-hoodie.
export function getTemplateDetailsBySlug(
parsedTemplate: string,
templates: TemplateDetails
Copy link
Contributor

Choose a reason for hiding this comment

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

Do these functions really need to accept a second argument for templates? Is there a circumstance in which we won't use TEMPLATES from constants as this second argument?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@sunyatasattva I intentionally made this a pure function. I find they're easier to read, reuse and predict. Also much easier to unit test (and debug should those tests fail)

Copy link
Contributor

Choose a reason for hiding this comment

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

Alright then! Everything else looks good to me.

@github-actions github-actions bot added this to the 8.5.0 milestone Sep 6, 2022
@tjcafferkey tjcafferkey merged commit ed3abbe into trunk Sep 6, 2022
@tjcafferkey tjcafferkey deleted the fix/specific-template-placeholders branch September 6, 2022 09:52
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
…commerce#7033)

* If user has created a template for a specific product, find the closest matching template details

* Move Classic Template functions into Utils file and refactor function for specific template names

* Classic Template utils refactor and unit tests
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 type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants