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

Fix reverting customisations by refactoring pre_get_block_file_template #5746

Merged
merged 4 commits into from
Feb 10, 2022

Conversation

tjcafferkey
Copy link
Contributor

@tjcafferkey tjcafferkey commented Feb 8, 2022

Fixes #5704

Description

  • Refactor and rename the callback for pre_get_block_file_template in BlockTemplateController.
  • Drop the gutenberg_ prefix from gutenberg_create_new_block_template_object as it's confusing and unncessary.
  • Remove get_single_block_template as it's no longer being used.
  • Moved deprecated plugin slug woocommerce into a const value alongside the correct one.
  • I have discovered this issue (Store Editing Templates: Product Category doesn't load Product Archive as a fallback edgecase. #5799) when testing this PR myself which already exists in trunk and the latest version of WooCommerce (6.2 at the time of writing)

Context

There are two methods used to get block templates in Gutenberg, they are get_block_template and get_block_file_template.

  • get_block_template - Will query the database for a customised post, and if one does not exist it will then call get_block_file_template
  • get_block_file_template - Will load the template from the themes file system and return a WP_Template object.

When we revert a template, we pass specific query params with the request which lands us here calling the get_block_file_template. This will ultimately fail because of this check as $theme for our template is woocommerce/woocommerce which does not equal wp_get_theme()->get_stylesheet() which would be the active themes id (e.g. twentytwentytwo). This was happening because we were using cores method recursively on itself (but removing hooks so we didn't end up with an infinite loop), and core does not currently account for templates being loaded from plugins like WooCommerce, only themes. So we needed to refactor this.

With all of the above in mind we can conclude that pre_get_block_file_template filter only runs when its retrieving the original block template file WP_Template object from the filesystem (within get_block_file_template). Knowing this I have refactored the callback to only do this for our block templates, but to also consider the edge case of a theme having a product-archive.html template file only, which would also be used for Product Category and Tag templates.

Testing

Automated Tests

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

Manual Testing

How to test the changes in this Pull Request:

  1. Ensure you have the latest WooCommerce, WordPress 5.9 and a block theme so that the FSE feature is enabled.
  2. Go to Appearance > Editor and load Single Product template, customize the content and save the template.
  3. In a separate tab ensure these changes are represented on the frontend, be careful not to reload the current tab.
  4. Back in your Site Editor tab, using the navigation please navigate back to All Templates view. In the list of templates your customized Single Product template should indicate it has been customized.
  5. Click the three dots on the right of this template and click "Clear Customizations" and wait until the action has been complete.
  6. Click "Single Product" again to go back into this template, check that all customizations have been cleared.
  7. In a separate tab ensure these changes are represented on the frontend, be careful not to reload the current tab.
  8. Now in your Site Editor tab make another customization in this template and save it. Then using the navigation please navigate back to All Templates view. In the list of templates your customized Single Product template should indicate it has been customized.
  9. Now click "Single Product" again to go back into the Site Editor, check that these customizations are showing still in the Site Editor.
  10. Click the downward chevron in the top bar next to the block template title. It should show a "Clear Customizations" option here, click this and check that all customizations are reverted.
  11. Now add a WooCommerce template (e.g. single-product.html) into your theme or download and install this version of TwentyTwentyTwo and test steps 1-10 again.

Please also do some regression testing of your own around the feature with and without WooCommerce templates within the theme as this is a significant refactor to fix this bug and we don't have the luxury of a test suite as of yet.

Video of testing steps

revert-customizations-fix.mp4

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above, or
  • See steps below.

Changelog

Fixed an issue where clear customizations functionality was not working for WooCommerce templates.

@tjcafferkey tjcafferkey self-assigned this Feb 8, 2022
@tjcafferkey tjcafferkey added focus: FSE Work related to prepare WooCommerce for FSE. type: bug The issue/PR concerns a confirmed bug. focus: template Related to API powering block template functionality in the Site Editor labels Feb 8, 2022
@rubikuserbot rubikuserbot requested review from a team and gigitux and removed request for a team February 8, 2022 20:39
@tjcafferkey tjcafferkey requested review from tomasztunik, opr and Aljullu and removed request for gigitux February 8, 2022 20:42
@tjcafferkey tjcafferkey marked this pull request as ready for review February 8, 2022 20:42
@github-actions
Copy link
Contributor

github-actions bot commented Feb 8, 2022

Size Change: +364 B (0%)

Total Size: 813 kB

Filename Size Change
build/all-products-frontend.js 18.7 kB -3 B (0%)
build/all-products.js 33.9 kB +67 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 6.91 kB +17 B (0%)
build/atomic-block-components/add-to-cart.js 6.48 kB +17 B (0%)
build/atomic-block-components/button-frontend.js 1.54 kB +59 B (+4%)
build/atomic-block-components/button.js 914 B +61 B (+7%) 🔍
build/blocks-checkout.js 17.6 kB +11 B (0%)
build/cart-blocks/checkout-button-frontend.js 1.15 kB +14 B (+1%)
build/cart-blocks/order-summary-frontend.js 8.95 kB +14 B (0%)
build/cart.js 43.7 kB +13 B (0%)
build/checkout-blocks/actions-frontend.js 1.41 kB +16 B (+1%)
build/checkout-blocks/order-summary-frontend.js 11.4 kB +12 B (0%)
build/checkout-frontend.js 47.6 kB -4 B (0%)
build/checkout.js 45.3 kB +14 B (0%)
build/single-product-frontend.js 22.1 kB -4 B (0%)
build/single-product.js 10 kB +1 B (0%)
build/wc-blocks-style-rtl.css 22 kB +30 B (0%)
build/wc-blocks-style.css 22 kB +29 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.37 kB
build/active-filters.js 7.05 kB
build/all-reviews.js 8.06 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 255 B
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.48 kB
build/atomic-block-components/category-list-frontend.js 457 B
build/atomic-block-components/category-list.js 459 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.7 kB
build/atomic-block-components/rating-frontend.js 703 B
build/atomic-block-components/rating.js 700 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 624 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 468 B
build/atomic-block-components/stock-indicator-frontend.js 939 B
build/atomic-block-components/stock-indicator.js 623 B
build/atomic-block-components/summary-frontend.js 1.24 kB
build/atomic-block-components/summary.js 926 B
build/atomic-block-components/tag-list-frontend.js 460 B
build/atomic-block-components/tag-list.js 459 B
build/atomic-block-components/title-frontend.js 1.21 kB
build/atomic-block-components/title.js 935 B
build/attribute-filter-frontend.js 16.8 kB
build/attribute-filter.js 13.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 5.18 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.49 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.5 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.23 kB
build/checkout-blocks/billing-address-frontend.js 887 B
build/checkout-blocks/contact-information-frontend.js 2.95 kB
build/checkout-blocks/express-payment-frontend.js 5.46 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/payment-frontend.js 7.71 kB
build/checkout-blocks/shipping-address-frontend.js 975 B
build/checkout-blocks/shipping-methods-frontend.js 4.92 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-category.js 8.61 kB
build/featured-product.js 9.62 kB
build/handpicked-products.js 7.09 kB
build/legacy-template.js 2.18 kB
build/mini-cart-component-frontend.js 14.3 kB
build/mini-cart-contents.js 3.82 kB
build/mini-cart-frontend.js 1.78 kB
build/mini-cart.js 6.39 kB
build/price-filter-frontend.js 12.6 kB
build/price-filter.js 8.51 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.37 kB
build/product-categories.js 3.17 kB
build/product-category.js 8.49 kB
build/product-new.js 7.66 kB
build/product-on-sale.js 7.99 kB
build/product-search.js 2.18 kB
build/product-tag.js 7.8 kB
build/product-top-rated.js 7.9 kB
build/products-by-attribute.js 8.39 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 12.6 kB
build/reviews-frontend.js 7.35 kB
build/stock-filter-frontend.js 6.61 kB
build/stock-filter.js 6.68 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 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.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.79 kB
build/wc-blocks-editor-style.css 4.79 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 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-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 69.7 kB
build/wc-blocks.js 2.62 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.61 kB

compressed-size-action

@tjcafferkey tjcafferkey changed the title Fix reverting customisations by refactoring maybe_return_blocks_template Fix reverting customisations by refactoring pre_get_block_file_template Feb 9, 2022
@tomasztunik
Copy link
Contributor

tomasztunik commented Feb 10, 2022

Noticed one little glitch, but not related to the changes here. If we revert multiple templates from the templates list we'll get multiple notifications/flash messages without any context when entering one of the pages creating more noise than providing information - esp. with toast notifications in bottom left.

Screenshot 2022-02-10 at 14 09 23

@tomasztunik
Copy link
Contributor

tomasztunik commented Feb 10, 2022

There is another glitch where the "Clear Customizations" is not present in the dropdown. But also not related to this change - looks like a Gutenberg editor issue it seems this affects WooCommerce templates only. On regular templates (Home etc.) it seems to behave normally.

It can happen when:

  • accessing template edit page directly
  • reloading on a template edit page
  • hitting "Save" on the template edit view even if the button was present before

Going to templates lists and back fixes it and button is available again. Clear customisations on the templates list from the menu works in all these cases when if one navigates to the templates list to clear despite the button not being there so it's non blocking.

Copy link
Contributor

@tomasztunik tomasztunik left a comment

Choose a reason for hiding this comment

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

Looks and works great.

The refactor was a great call and the BlockTemplatesController is much easier to follow now, highlights edge cases much better and is better aligned with how Gutenberg handles the get_block_file_template flow.

With handling for deprecated slugs and template fallbacks don't think there is anything else there to add 🎉

Confirmed the "Clear customisations" to be on our templates only apparently as per updated comment above - so there is something extra there. Could you evaluate the glitches we've seen and create follow up issues where it makes sense? 🙇

@github-actions github-actions bot added this to the 7.0.0 milestone Feb 10, 2022
@tjcafferkey
Copy link
Contributor Author

Thank you for the thorough testing and feedback on this PR @tomasztunik and @frontdevde !

Could you evaluate the glitches we've seen and create follow up issues where it makes sense?

Yep, having looked at the issues you've raised I believe these should be logged in the Gutenberg repo as issues, I'll add it to be to do list to do this. Thanks for the detailed descriptions and highlighting these.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: FSE Work related to prepare WooCommerce for FSE. 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.

Store Editing Templates: Clearing customizations requires a refresh.
2 participants