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

BlockTemplateController: adds the ability to load and manage block template files #4981

Merged
merged 10 commits into from Oct 25, 2021

Conversation

tjcafferkey
Copy link
Contributor

@tjcafferkey tjcafferkey commented Oct 21, 2021

Added BlockTemplateController which will give us the ability to load default block templates in the future. In this specific PR the class is checking if they exist in the theme before loading them from Woo Blocks templates/block-templates/ directory.

Fixes #4969

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're using a block enabled theme
  2. Add the second template below to the Woo Blocks path specified above the snippet.
  3. Confirm this loads in the Site Editor templates, it should say in the editor "You are using the Woo Blocks block template now"
  4. Add the first template below to themes directory path specified above the snippet.
  5. Confirm this loads in the Site Editor templates, it should say in the editor "You are using the Themes block template now"
  6. This code is not yet responsible for loading the templates on the frontend. This will be done as part of Create BlockTemplateController to load Block Templates #4969

/theme-dir/block-templates/single-product.html

<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true} /-->
<!-- wp:paragraph --> <p>You are using the Themes block template now</p> <!-- /wp:paragraph -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true} /-->

/woo-blocks/templates/block-templates/single-product.html

<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true} /-->
<!-- wp:paragraph --> <p>You are using the Woo Blocks block template now</p> <!-- /wp:paragraph -->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true} /-->

Changelog

BlockTemplateController: adds the ability to load and manage block template files.

@rubikuserbot rubikuserbot requested review from a team and Aljullu and removed request for a team October 21, 2021 13:50
@github-actions
Copy link
Contributor

github-actions bot commented Oct 21, 2021

Size Change: 0 B

Total Size: 1.24 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.35 kB
build/active-filters.js 8.02 kB
build/all-products-frontend.js 23.1 kB
build/all-products.js 37.3 kB
build/all-reviews.js 9.56 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.69 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 333 B
build/atomic-block-components/add-to-cart-frontend.js 8.51 kB
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list-frontend.js 468 B
build/atomic-block-components/category-list.js 470 B
build/atomic-block-components/image-frontend.js 1.88 kB
build/atomic-block-components/image.js 1.35 kB
build/atomic-block-components/price-frontend.js 2.13 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 562 B
build/atomic-block-components/rating.js 567 B
build/atomic-block-components/sale-badge-frontend.js 859 B
build/atomic-block-components/sale-badge.js 869 B
build/atomic-block-components/sku-frontend.js 392 B
build/atomic-block-components/sku.js 393 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 612 B
build/atomic-block-components/summary-frontend.js 908 B
build/atomic-block-components/summary.js 913 B
build/atomic-block-components/tag-list-frontend.js 467 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.55 kB
build/atomic-block-components/title.js 1.38 kB
build/attribute-filter-frontend.js 18.8 kB
build/attribute-filter.js 12.3 kB
build/blocks-checkout.js 21.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/checkout-button-frontend.js 1.21 kB
build/cart-blocks/empty-cart-frontend.js 327 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB
build/cart-blocks/express-payment-frontend.js 1.58 kB
build/cart-blocks/filled-cart-frontend.js 802 B
build/cart-blocks/items-frontend.js 300 B
build/cart-blocks/line-items-frontend.js 5.56 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.3 kB
build/cart-blocks/totals-frontend.js 313 B
build/cart-frontend.js 91.7 kB
build/cart-i2-frontend.js 52.4 kB
build/cart-i2.js 49.7 kB
build/cart.js 46.8 kB
build/checkout-blocks/actions-frontend.js 1.51 kB
build/checkout-blocks/billing-address-frontend.js 2.66 kB
build/checkout-blocks/contact-information-frontend.js 3.89 kB
build/checkout-blocks/express-payment-frontend.js 1.92 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.56 kB
build/checkout-blocks/order-summary-frontend.js 12.8 kB
build/checkout-blocks/payment-frontend.js 4.58 kB
build/checkout-blocks/shipping-address-frontend.js 3.06 kB
build/checkout-blocks/shipping-methods-frontend.js 5.57 kB
build/checkout-blocks/terms-frontend.js 1.65 kB
build/checkout-blocks/totals-frontend.js 328 B
build/checkout-frontend.js 54.4 kB
build/checkout.js 53.2 kB
build/featured-category.js 7.73 kB
build/featured-product.js 9.41 kB
build/handpicked-products.js 6.27 kB
build/mini-cart-component-frontend.js 36.9 kB
build/mini-cart-frontend.js 2.29 kB
build/mini-cart.js 5.3 kB
build/price-filter-frontend.js 14.3 kB
build/price-filter.js 9.67 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.61 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.13 kB
build/product-search.js 2.69 kB
build/product-tag.js 6.58 kB
build/product-top-rated.js 6.73 kB
build/products-by-attribute.js 7.7 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.96 kB
build/single-product-frontend.js 26.3 kB
build/single-product.js 9.76 kB
build/stock-filter-frontend.js 8.77 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.2 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 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.1 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.02 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style-rtl.css 15.6 kB
build/wc-blocks-editor-style.css 15.6 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.47 kB
build/wc-blocks-registry.js 3.71 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 20.6 kB
build/wc-blocks-style.css 20.6 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 254 kB
build/wc-blocks.js 3.49 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

@tjcafferkey tjcafferkey self-assigned this Oct 22, 2021
@tjcafferkey tjcafferkey added focus: FSE Work related to prepare WooCommerce for FSE. status: needs review focus: template Related to API powering block template functionality in the Site Editor labels Oct 22, 2021
@tjcafferkey tjcafferkey marked this pull request as ready for review October 22, 2021 10:40
$template_files = $this->get_block_templates();

foreach ( $template_files as $template_file ) {
$query_result[] = _gutenberg_build_template_result_from_file( $template_file, 'wp_template' );
Copy link
Contributor Author

Choose a reason for hiding this comment

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

What is the significance of the function starting with an underscore (_) here?

Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder the same. I would assume that means the function shouldn't be considered public. 🤔 Could we check with somebody from the Gutenberg project about this (via Slack or in their repo)?

Copy link

Choose a reason for hiding this comment

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

@tjcafferkey pinged me for info here but unfortunately I don't know the answer either.

I would ask in the #core-editor channel in Core slack.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just surfacing the reasoning:

The _ prefix means the function it shouldn't be used publicly and can change at any time. Because of this I've duplicated the functions into this repo and will kick off a discussion around this to understand what is needed, and if they can become available for public usage.

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 working as expected and code looks great. I left some inline comments below, but overall it's looking good.

Regarding the usage of functions prepended by an underscore, I agree we should investigate what that means and whether it's safe to use them in our repo or there are chances they will break in the future.

src/Utils/ThemeUtils.php Outdated Show resolved Hide resolved
src/BlockTemplatesController.php Outdated Show resolved Hide resolved
src/BlockTemplatesController.php Show resolved Hide resolved
$template_files = $this->get_block_templates();

foreach ( $template_files as $template_file ) {
$query_result[] = _gutenberg_build_template_result_from_file( $template_file, 'wp_template' );
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder the same. I would assume that means the function shouldn't be considered public. 🤔 Could we check with somebody from the Gutenberg project about this (via Slack or in their repo)?

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.

LGTM, I left one last comment, but besides that, this is good to go. :shipit:

src/BlockTemplatesController.php Outdated Show resolved Hide resolved
@tjcafferkey tjcafferkey merged commit c4a983c into trunk Oct 25, 2021
@tjcafferkey tjcafferkey deleted the add/block-template-controller branch October 25, 2021 09:45
@frontdevde frontdevde changed the title BlockTemplateController BlockTemplateController: adds the ability to load and manage block template files Oct 26, 2021
@frontdevde frontdevde added the type: enhancement The issue is a request for an enhancement. label Oct 26, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
* BlockTemplateController

* Check if theme already has template

* ThemeUtils file to check for FSE enabled themes

* Use Gutenberg global gutenberg_supports_block_templates

* Remove ThemeUtils reference

* Update with code review comments

* Delete ThemeUtils and move supports_block_templates check

* Duplicate functions from Gutenberg into Utils file

* Remove template file

* Check template directory and stylesheet directory for template
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
* BlockTemplateController

* Check if theme already has template

* ThemeUtils file to check for FSE enabled themes

* Use Gutenberg global gutenberg_supports_block_templates

* Remove ThemeUtils reference

* Update with code review comments

* Delete ThemeUtils and move supports_block_templates check

* Duplicate functions from Gutenberg into Utils file

* Remove template file

* Check template directory and stylesheet directory for template
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: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create BlockTemplateController to load Block Templates
4 participants