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

Check block templates and parts directories to the Gutenberg 12.1.0 convention #5455

Merged
merged 10 commits into from
Dec 28, 2021

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Dec 24, 2021

With WordPress/gutenberg#36647, Gutenberg 12.1.0 has changed the convention for the directory paths from block-templates and block-template-parts to templates and parts respectively.

We are also moving to that convention but making sure that we remain backwards-compatible.

Fixes #5450

Testing

Manual Testing

How to test the changes in this Pull Request:

⚠️ Prerequisite: you'll need to have these changes applied to WooCommerce Core for this PR to work as intended

  1. Make sure your existing theme with the old convention (e.g. TT1 Blocks, using block-templates) still shows the templates correctly.
  2. Change the directory names to templates and parts respectively, or download a theme which uses this new convention (e.g. Tove), and make sure the templates still show correctly.
  3. Have both the old convention and the new convention living in the same theme and make sure that the templates under the newer names get prioritized instead of the deprecated ones.

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

Changelog

Update the template retrieving logic to allow for older Gutenberg convention and newer one (block-templates/block-template-parts vs. templates/parts)

…nvention

Gutenberg 12.1.0 has changed the convention for the directory paths from
`block-templates` and `block-template-parts` to `templates` and `parts` respectively.

We are also moving to that convention but making sure that we remain
backwards-compatible.

Fixes #5450, #5343
@sunyatasattva sunyatasattva self-assigned this Dec 24, 2021
@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team December 24, 2021 18:39
@sunyatasattva sunyatasattva added focus: FSE Work related to prepare WooCommerce for FSE. focus: template Related to API powering block template functionality in the Site Editor labels Dec 24, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Dec 24, 2021

Size Change: 0 B

Total Size: 819 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.22 kB
build/active-filters.js 7.05 kB
build/all-products-frontend.js 18.6 kB
build/all-products.js 34.4 kB
build/all-reviews.js 8.35 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 6.87 kB
build/atomic-block-components/add-to-cart.js 6.42 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 851 B
build/atomic-block-components/category-list-frontend.js 457 B
build/atomic-block-components/category-list.js 458 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 552 B
build/atomic-block-components/rating.js 554 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 385 B
build/atomic-block-components/stock-indicator-frontend.js 584 B
build/atomic-block-components/stock-indicator.js 585 B
build/atomic-block-components/summary-frontend.js 872 B
build/atomic-block-components/summary.js 871 B
build/atomic-block-components/tag-list-frontend.js 458 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.11 kB
build/atomic-block-components/title.js 1.1 kB
build/attribute-filter-frontend.js 16.3 kB
build/attribute-filter.js 12.7 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.86 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/line-items-frontend.js 5.13 kB
build/cart-blocks/order-summary-frontend.js 8.98 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.5 kB
build/cart.js 44.3 kB
build/checkout-blocks/actions-frontend.js 1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 884 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.15 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/payment-frontend.js 7.41 kB
build/checkout-blocks/shipping-address-frontend.js 971 B
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB
build/checkout-blocks/terms-frontend.js 1.21 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 47.6 kB
build/checkout.js 47.1 kB
build/featured-category.js 8.55 kB
build/featured-product.js 9.9 kB
build/handpicked-products.js 7.32 kB
build/legacy-template.js 2.08 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.59 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.46 kB
build/price-filter-frontend.js 12.4 kB
build/price-filter.js 8.62 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.51 kB
build/product-categories.js 3.47 kB
build/product-category.js 8.36 kB
build/product-new.js 7.66 kB
build/product-on-sale.js 8.05 kB
build/product-search.js 2.47 kB
build/product-tag.js 7.76 kB
build/product-top-rated.js 7.63 kB
build/products-by-attribute.js 8.48 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.25 kB
build/single-product-frontend.js 22.1 kB
build/single-product.js 10.4 kB
build/stock-filter-frontend.js 6.81 kB
build/stock-filter.js 6.82 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 6.82 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.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.46 kB
build/wc-blocks-editor-style.css 4.46 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.51 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.6 kB
build/wc-blocks-style.css 21.6 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 65.5 kB
build/wc-blocks.js 2.96 kB
build/wc-payment-method-bacs.js 820 B
build/wc-payment-method-cheque.js 816 B
build/wc-payment-method-cod.js 912 B
build/wc-payment-method-paypal.js 838 B
build/wc-payment-method-stripe.js 11.1 kB
build/wc-settings.js 2.61 kB

compressed-size-action

Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

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

I have a few thoughts on this:

  • We shouldn't be importing the BlockTemplatesController into the BlockTemplatesUtils.
  • The consts defined at the top of the BlockTemplatesController are for the Woo Blocks templates/parts, not the themes. If we are going to update the Woo Block template locations (Update the path of WooCommerce templates to match the new Gutenberg folders #5343) we should do this in a separate PR
  • All we need to do is to add templates and parts to the checks we do when looking for themes template files whilst leaving the block-templates and block-template-parts directories already in place

I feel like we are doing too much in this PR. Let's limit the scope to just consider the new theme directories. We can move our templates in a separate PR. Let me know what you think.

Edit: The reason for me suggesting we should be limiting scope in this PR is because this is quite an important issue we need to solve. Limiting scope will make it easier to test it works, avoid any negative side effects and easily trace back to this PR if there are. Given that we don't have much test coverage for this feature I am just trying to be a bit more cautious.

@sunyatasattva
Copy link
Contributor Author

Understood, I'll separate the two things!

sunyatasattva added a commit that referenced this pull request Dec 27, 2021
While we now support both the old and new conventions for the templates
paths, our own repo should be aligned with the latest convention.

See: #5455
Fixes: #5343
Removing as it's part of the Woo Blocks-specific migration
sunyatasattva added a commit that referenced this pull request Dec 27, 2021
While we now support both the old and new conventions for the templates
paths, our own repo should be aligned with the latest convention.

See: #5455
Fixes: #5343
@sunyatasattva
Copy link
Contributor Author

Alright, as requested, I have split the original changes from this PR within here and #5464. I've also updated the OP to reflect just these changes in the changelog, references and testing notes.

@Aljullu I took the liberty to tag you as a reviewer as @tjcafferkey is AFK for the next week and you have context on what's this about since you had originally opened #5343.

*
* @var string
*/
const TEMPLATE_PARTS_DIR_NAME = 'parts';
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we not put these values in an associative array?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We 100% can. I was just following the pre-existing convention. Also, in the spirit of trying to avoid as many side-effects as possible, not changing that convention makes the PR slightly safer.

But I can convert those values in an associative array, if you so prefer.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it might make sense to put these in an associative array, I don't think it'll be too risky given the convention hasn't been set in this file.

@tjcafferkey
Copy link
Contributor

If I put archive-product.html in tove/templates it does not render on the frontend for me? Does the same happen for you?

@sunyatasattva
Copy link
Contributor Author

If I put archive-product.html in tove/templates it does not render on the frontend for me? Does the same happen for you?

Oh! Thanks for spotting it! I see why: I moved everything I had changed in the Controller to the other PR, to separate the changes as requested. But they are somewhat tightly coupled so, this change was moved as well, going to revert that at once.

sunyatasattva added a commit that referenced this pull request Dec 27, 2021
While we now support both the old and new conventions for the templates
paths, our own repo should be aligned with the latest convention.

See: #5455
Fixes: #5343
@sunyatasattva
Copy link
Contributor Author

sunyatasattva commented Dec 27, 2021

@tjcafferkey I've addressed the issues:

  1. Directory names are now in an associative array
  2. Fallback templates should appear correctly

Did not change the reduce logic, yet. As I mentioned, I can do it if you feel strongly about it no problem: I feel it causes no harm and reduces cognitive load on the reader of the code.

@tjcafferkey
Copy link
Contributor

tjcafferkey commented Dec 27, 2021

@tjcafferkey I've addressed the issues:

Thanks!

Oh! Thanks for spotting it! I see why

The themes product-archive.html template loads for the product category page on the frontend (e.g. /product-category/clothing/) if there isn't a taxonomy template (which is correct) but does not load for the main shop archive page (e.g. /shop).

sunyatasattva added a commit that referenced this pull request Dec 27, 2021
While we now support both the old and new conventions for the templates
paths, our own repo should be aligned with the latest convention.

See: #5455
Fixes: #5343
@sunyatasattva
Copy link
Contributor Author

sunyatasattva commented Dec 27, 2021

The themes product-archive.html template loads for the product category page on the frontend (e.g. /product-category/clothing/) if there isn't a taxonomy template (which is correct) but does not load for the main shop archive page (e.g. /shop).

It took me a long time, but I found the culprit. Turns out that this is a WooCommerce problem, as they don't support this convention yet. I have opened a bug on their repo here: woocommerce/woocommerce#31518 (also a Slack thread)

I could also open a PR to fix that.

In the meantime, I added a fix on our side by hooking into the woocommerce_has_block_template filter and adding our own checking logic with all the possible directories.

@tjcafferkey
Copy link
Contributor

tjcafferkey commented Dec 28, 2021

Nice catch @sunyatasattva!

I added a fix on our side by hooking into the woocommerce_has_block_template filter and adding our own checking logic with all the possible directories.

I think we should revert the temporary fix on our side which you just added, and open a PR to amend the following code directly in the WC Core codebase. Then in the testing instructions for this PR just detail that the tester should have the other WC PR checked out locally too, to test this. Feel free to add me as a reviewer too.

$has_template = is_readable( get_stylesheet_directory() . '/block-templates/' . $template_name . '.html' ) ||  is_readable( get_stylesheet_directory() . '/templates/' . $template_name . '.html' );

As a side note we should also add to the testing instructions anyway for the reviewer to check the frontend templating is working as expected.

Let me know what you think.

@sunyatasattva
Copy link
Contributor Author

Hey @tjcafferkey !

First of all, thanks a lot for keeping an eye on this despite being AFK.

To the subject matter: I did submit a PR to Woo Core with the permission of @vedanshujain on Slack. I also did remove the temporary patch and also added the caveat in the testing note on the OP.

However, I have a few remarks I'd like to bounce to you:

  1. Perhaps the temporary patch was ok to keep for a while, as now we'll need to make sure both the repos are aligned in various installations from our users and also developers. This might complicate stuff. Maybe we could have left the filter as a safety net and removed that on the next release or other milestone like that.
  2. There are these lines which use a similar patchy trick, which we might want to address in Core as well, maybe 🤔 : https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/9a8f27fcd72ddfce7c75eaa681ac271732da5e94/src/BlockTemplatesController.php#L414-L439

I'm mostly worried about (1.), I don't think it's much harm to leave the patch in as long as we remember to remove it when everything is aligned and stable.

As for now, I have reverted as requested. Let me know your thoughts.

@tjcafferkey
Copy link
Contributor

tjcafferkey commented Dec 28, 2021

First of all, thanks a lot for keeping an eye on this despite being AFK.

No problem, thank you for doing such a thorough job on this issue I really appreciate it!

Perhaps the temporary patch was ok to keep for a while, as now we'll need to make sure both the repos are aligned in various installations from our users and also developers. This might complicate stuff. Maybe we could have left the filter as a safety net and removed that on the next release or other milestone like that.

It depends on the issue I think. In this case we don't need the temp fix for themes using block-templates/ so it's not really too critical, and we can specify (until the Woo Core PR is merged) in the Epic (like we did in V1 here) that if reviewers are going to use the new directories they need said PR to be checked out locally for it to work.

If this was a time sensitive issue that was needed for an imminent release I would totally be onboard with the fix, however I don't think that it's the case here (unless I am wrong?). Also by putting in a temp fix this means we need to review and test:

  • The temporary fix
  • The actual fix (Woo Core)
  • The removal of the temporary fix

This I think would be unnecessary unless it was absolutely needed.

There are these lines which use a similar patchy trick, which we might want to address in Core as well

Could you please elaborate on this I am not sure what you mean? Sorry.

Let me know your thoughts.

Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

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

Great job @sunyatasattva thanks for addressing all the feedback. I've tested this and it seems to be working as expected. Thank you for fixing.

@github-actions github-actions bot added this to the 6.7.0 milestone Dec 28, 2021
@sunyatasattva
Copy link
Contributor Author

@tjcafferkey Alright, everything you said sounds good to me.

I thought it was a bit more time sensitive because there already are themes (like Tove) which use the new convention. Just that.

There are these lines which use a similar patchy trick, which we might want to address in Core as well

Could you please elaborate on this I am not sure what you mean? Sorry.

I see that in that piece of code I linked, we are basically forcing Woo to know that, in specific circumstances, there are indeed block templates. So I thought that perhaps that logic should be made available to Woo Core itself, if possible.

Not sure if that made any sense.

In any case, nothing that should take more of your AFK attention :) Thanks again for sticking with it and approving!

@sunyatasattva sunyatasattva merged commit 8d16ff2 into trunk Dec 28, 2021
@sunyatasattva sunyatasattva deleted the fix/5450-change-templates-directories branch December 28, 2021 22:32
sunyatasattva added a commit that referenced this pull request Dec 28, 2021
While we now support both the old and new conventions for the templates
paths, our own repo should be aligned with the latest convention.

See: #5455
Fixes: #5343
sunyatasattva added a commit that referenced this pull request Dec 28, 2021
While we now support both the old and new conventions for the templates
paths, our own repo should be aligned with the latest convention.

See: #5455
Fixes: #5343
Comment on lines +301 to +302
$carry[] = get_template_directory() . $filepath;
$carry[] = get_stylesheet_directory() . $filepath;
Copy link
Contributor

Choose a reason for hiding this comment

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

Sorry for being late on this one, but if I'm not wrong this is searching templates in this order:

  1. Parent theme templates folder.
  2. Child theme templates folder.
  3. Parent theme block-templates folder.
  4. Child theme block-templates folder.

But I think the child theme should always have priority. Something like this:

  1. Child theme templates folder.
  2. Child theme block-templates folder.
  3. Parent theme templates folder.
  4. Parent theme block-templates folder.

What do you think @sunyatasattva?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Aljullu Indeed this is correct! I'll open a PR to amend this! Thanks for spotting that.

@tjcafferkey
Copy link
Contributor

I see that in that piece of code I linked, we are basically forcing Woo to know that, in specific circumstances, there are indeed block templates. So I thought that perhaps that logic should be made available to Woo Core itself, if possible.

Yeah you are correct that is how that code works, it gives us the ability to override Core and load templates from the plugin.

I'm not so sure how this would fit in Core currently? Core checks the active theme for block templates, this is our way of loading them from our plugin Woo Blocks (which Core would have no concept of, although we do include the Woo Blocks package in Core every month). Maybe I'm missing something or misunderstanding but I'm open to discussing/seeing if what you mean could work 🙂

@sunyatasattva
Copy link
Contributor Author

Ok I see now! I think you got my meaning, it was I who did not fully understand the relationship between Core and Blocks and themes and plugins. Thanks for taking the time to clarify.

@ralucaStan ralucaStan added the type: bug The issue/PR concerns a confirmed bug. label Jan 3, 2022
@tjcafferkey tjcafferkey changed the title Move block templates and parts directories to the Gutenberg 12.1.0 convention Check block templates and parts directories to the Gutenberg 12.1.0 convention Jan 3, 2022
@ralucaStan ralucaStan added skip-changelog PRs that you don't want to appear in the changelog. and removed skip-changelog PRs that you don't want to appear in the changelog. labels Jan 3, 2022
sunyatasattva added a commit that referenced this pull request Jan 5, 2022
…5464)

* Align Woo Block template locations with the newest convention

While we now support both the old and new conventions for the templates
paths, our own repo should be aligned with the latest convention.

See: #5455
Fixes: #5343

* Simplify `generate_template_slug_from_path` function
* Change `BlockTemplatesController` constructor to get correct dir names
* Update Mini Cart template path
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: Consider new block templates & block-template-parts directories
4 participants