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

Move Woo Blocks template directories to latest Gutenberg convention #5464

Merged
merged 7 commits into from
Jan 5, 2022

Conversation

sunyatasattva
Copy link
Contributor

@sunyatasattva sunyatasattva commented Dec 27, 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 our repo to that convention.

Fixes #5343

Note

Tagging also @tjcafferkey as a reviewer, just to page him (as he had requested this PR to be split in two); however, he's going to be AFK for the next week, so it's really just a CC.

Testing

Manual Testing

How to test the changes in this Pull Request:

  1. Open Appearance → Editor → Templates
  2. Make sure all the templates and parts appear correctly in line with what's available within our directories
  3. Make sure the Mini Cart renders correctly (as it is a template part). Try with and without Gutenberg enabled.

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 block theme folders to latest Gutenberg convention (i.e. templates and parts).

@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 27, 2021
@sunyatasattva sunyatasattva self-assigned this Dec 27, 2021
@rubikuserbot rubikuserbot requested a review from a team December 27, 2021 17:45
@github-actions
Copy link
Contributor

github-actions bot commented Dec 27, 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

@sunyatasattva sunyatasattva force-pushed the fix/5343-change-block-templates-directories branch 2 times, most recently from 0916a21 to 4abced5 Compare December 27, 2021 23:07
Base automatically changed from fix/5450-change-templates-directories to trunk December 28, 2021 22:32
@sunyatasattva sunyatasattva force-pushed the fix/5343-change-block-templates-directories branch from 4abced5 to e0e4443 Compare December 28, 2021 22:41
@sunyatasattva sunyatasattva changed the base branch from trunk to release/6.5.0 December 28, 2021 22:45
@sunyatasattva sunyatasattva changed the base branch from release/6.5.0 to trunk December 28, 2021 22:45
@sunyatasattva sunyatasattva force-pushed the fix/5343-change-block-templates-directories branch from e0e4443 to 8db7484 Compare December 28, 2021 22:50
@sunyatasattva
Copy link
Contributor Author

@Aljullu As #5455 was merged, I rebased this onto trunk and removed the warning on the top.

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

This is testing well and code looks good, thanks for working on this @sunyatasattva!

Heads-up that we will need to update the path in this line:

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c2444b68dfc658d49dfd5ac41df50a70dc66b523/src/BlockTypes/MiniCart.php#L390

Is that something we can do as part of this PR?

Besides that, everything looks good to me, so pre-approving.

Comment on lines +259 to +262
public static function generate_template_slug_from_path( $path ) {
$template_extension = '.html';

return basename( $path, $template_extension );
Copy link
Contributor

Choose a reason for hiding this comment

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

Much better. 👏

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks! It was also necessary, by the way. I didn't simplify it just for the sake of it. But because our dir structure became templates/templates, the original substr code would not work anymore.

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

Is that something we can do as part of this PR?

@Aljullu I updated that code, but I'm not 100% sure how to test it. Would you mind testing the mini cart part and perhaps add testing instructions to the OP for when the release is made?

I also snuck in the change of order between child and parent theme priority.

Lastly, I did a search on block-template and I found this function: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/2635445c5d303eba4dfef12efbde0f29667f2673/src/BlockTemplatesController.php#L62-L120

It mentions that it looks for the block-templates directory, but I'm not sure where it does that. Perhaps one of the functions: gutenberg_get_block_template or get_block_template which I'm not sure where they come from.

Would this mean we might have to change those somewhere?

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

@Aljullu I updated that code, but I'm not 100% sure how to test it. Would you mind testing the mini cart part and perhaps add testing instructions to the OP for when the release is made?

Done! 🙂 Right now, it could be reproduced with Gutenberg disabled, but once #5448 is merged, I think it will require testing with WP 5.8 and Gutenberg disabled.

I also snuck in the change of order between child and parent theme priority.

Thanks! That still loads the "Parent theme templates folder" before "Child theme block-templates folder", if I'm reading it correctly. I don't have a strong opinion on this one, but I feel it should be the other way around (child theme wins even if it's using the old directory name). In any case, not blocking this PR.

Lastly, I did a search on block-template and I found this function:

Good catch! I think that comment is outdated and needs to be updated.

It mentions that it looks for the block-templates directory, but I'm not sure where it does that. Perhaps one of the functions: gutenberg_get_block_template or get_block_template which I'm not sure where they come from.

I think that happens when get_single_block_template is hooked into get_block_file_template. If you keep looking, get_single_block_template() calls get_block_templates() which, in its turn, calls get_block_templates_from_woocommerce(), where templates are loaded from files, if I'm not wrong.

gutenberg_get_block_template() calls get_block_template() are Gutenberg and WordPress globals, but I don't think we need to modify them here.

@sunyatasattva
Copy link
Contributor Author

I also snuck in the change of order between child and parent theme priority.

Thanks! That still loads the "Parent theme templates folder" before "Child theme block-templates folder", if I'm reading it correctly. I don't have a strong opinion on this one, but I feel it should be the other way around (child theme wins even if it's using the old directory name). In any case, not blocking this PR.

🤔 I see what you mean. You are probably right, that should likely be the order… though possibly unlikely that a parent theme has the new convention and the child the old one. I mean, that's possible, but I get the feeling that this is a relatively edge case. Should I create a follow-up issue so we don't forget?

Lastly, I did a search on block-template and I found this function:

Good catch! I think that comment is outdated and needs to be updated.

Updated the comment!

It mentions that it looks for the block-templates directory, but I'm not sure where it does that. Perhaps one of the functions: gutenberg_get_block_template or get_block_template which I'm not sure where they come from.

I think that happens when get_single_block_template is hooked into get_block_file_template. If you keep looking, get_single_block_template() calls get_block_templates() which, in its turn, calls get_block_templates_from_woocommerce(), where templates are loaded from files, if I'm not wrong.

gutenberg_get_block_template() calls get_block_template() are Gutenberg and WordPress globals, but I don't think we need to modify them here.

Thanks a lot for taking the time to clarify!

@Aljullu
Copy link
Contributor

Aljullu commented Dec 29, 2021

🤔 I see what you mean. You are probably right, that should likely be the order… though possibly unlikely that a parent theme has the new convention and the child the old one. I mean, that's possible, but I get the feeling that this is a relatively edge case. Should I create a follow-up issue so we don't forget?

I wonder if we could do here the same we did in WC core. This way, we can easily change the order templates are loaded.

@ralucaStan ralucaStan modified the milestones: 6.7.0, 6.8.0 Jan 3, 2022

/**
* Constructor.
*/
public function __construct() {
// This feature is gated for WooCommerce versions 6.0.0 and above.
if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '6.0.0', '>=' ) ) {
$this->templates_directory = plugin_dir_path( __DIR__ ) . 'templates/' . self::TEMPLATES_DIR_NAME;
$this->template_parts_directory = plugin_dir_path( __DIR__ ) . 'templates/' . self::TEMPLATE_PARTS_DIR_NAME;
$root_path = plugin_dir_path( __DIR__ ) . self::TEMPLATES_ROOT_DIR . DIRECTORY_SEPARATOR;
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 replace self::TEMPLATES_ROOT_DIR with BlockTemplateUtils::DIRECTORY_NAMES['TEMPLATES'] ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Technically, we can because they have the same value. However, the reason why I added TEMPLATES_ROOT_DIR in the first place is because they represent two different things:

  1. BlockTemplateUtils::DIRECTORY_NAMES['TEMPLATES'] represents the block-templates directory name in themes.
  2. BlockTemplatesController::TEMPLATES_ROOT_DIR represents the root directory of all templates in our own repo. For example, we have email templates.

The just happen to be both named templates now, so we have the awkward path templates/templates (which makes me sad :'(). But technically they are separate entities that could also be changed independently at any point.

Does that make any sense?

@sunyatasattva sunyatasattva merged commit 512cc04 into trunk Jan 5, 2022
@sunyatasattva sunyatasattva deleted the fix/5343-change-block-templates-directories branch January 5, 2022 18:28
@tjcafferkey
Copy link
Contributor

Does that make any sense?

Thought that would be the case, makes sense. Thanks!

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update the path of WooCommerce templates to match the new Gutenberg folders
4 participants