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

Add render logic to BlockTemplateController #4984

Merged
merged 6 commits into from
Oct 29, 2021

Conversation

tjcafferkey
Copy link
Contributor

@tjcafferkey tjcafferkey commented Oct 25, 2021

Fixes #4971

Testing

Manual Testing

How to test the changes in this Pull Request:

  1. Amend WooCommerce Core or checkout this PR Update has_block_template function to use apply_filters woocommerce#30997
  2. Add the following snippets below to template files in the correct directories specified.
  3. Go to your Product Page and confirm the themes template is being rendered.
  4. Delete the themes single-product.html template and refresh your Product Page. Confirm the Woo Blocks template is being rendered.
  5. Delete Woo Blocks template file and refresh your Product Page. Confirm the Core WooCommerce PHP template is being rendered.

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

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:paragraph --> <p>You are using the Themes block template now</p> <!-- /wp:paragraph -->
<!-- wp:template-part {"slug":"footer"} /-->

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

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:paragraph --> <p>You are using the Woo Blocks block template now</p> <!-- /wp:paragraph -->
<!-- wp:template-part {"slug":"footer"} /-->

Changelog

FSE: Add render logic to BlockTemplateController.

@tjcafferkey tjcafferkey added status: needs review focus: FSE Work related to prepare WooCommerce for FSE. focus: template Related to API powering block template functionality in the Site Editor labels Oct 25, 2021
@tjcafferkey tjcafferkey self-assigned this Oct 25, 2021
@rubikuserbot rubikuserbot requested review from a team and dinhtungdu and removed request for a team October 25, 2021 10:20
@github-actions
Copy link
Contributor

github-actions bot commented Oct 25, 2021

Size Change: +11.3 kB (+1%)

Total Size: 1.12 MB

Filename Size Change
build/active-filters-frontend.js 8.33 kB +8 B (0%)
build/active-filters.js 8.01 kB -2 B (0%)
build/all-products-frontend.js 23.3 kB -1 B (0%)
build/all-products.js 38 kB +167 B (0%)
build/all-reviews.js 9.57 kB -2 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 3.19 kB -2 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.82 kB +1 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 334 B +2 B (+1%)
build/atomic-block-components/add-to-cart-frontend.js 8.51 kB -2 B (0%)
build/atomic-block-components/button-frontend.js 1.74 kB -3 B (0%)
build/atomic-block-components/button.js 875 B +1 B (0%)
build/atomic-block-components/category-list-frontend.js 465 B +1 B (0%)
build/atomic-block-components/image-frontend.js 1.88 kB +1 B (0%)
build/atomic-block-components/price-frontend.js 2.14 kB -1 B (0%)
build/atomic-block-components/rating.js 565 B -1 B (0%)
build/atomic-block-components/sale-badge.js 869 B +1 B (0%)
build/atomic-block-components/sku-frontend.js 391 B -1 B (0%)
build/atomic-block-components/sku.js 392 B -1 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 612 B +1 B (0%)
build/atomic-block-components/summary-frontend.js 906 B -2 B (0%)
build/atomic-block-components/summary.js 912 B +1 B (0%)
build/atomic-block-components/title-frontend.js 1.64 kB +86 B (+6%) 🔍
build/atomic-block-components/title.js 1.46 kB +84 B (+6%) 🔍
build/attribute-filter-frontend.js 18.3 kB +4 B (0%)
build/attribute-filter.js 12.1 kB -5 B (0%)
build/cart-blocks/accepted-payment-methods-frontend.js 1.38 kB -5 B (0%)
build/cart-blocks/checkout-button-frontend.js 1.23 kB -3 B (0%)
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB +6 B (0%)
build/cart-blocks/express-payment-frontend.js 1.58 kB -2 B (0%)
build/cart-blocks/filled-cart-frontend.js 806 B -2 B (0%)
build/cart-blocks/line-items-frontend.js 5.86 kB +52 B (+1%)
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB -2 B (0%)
build/cart-blocks/order-summary-frontend.js 7.42 kB +9 B (0%)
build/cart-blocks/totals-frontend.js 323 B +1 B (0%)
build/cart-frontend.js 52.9 kB +36 B (0%)
build/cart.js 50.6 kB +33 B (0%)
build/checkout-blocks/actions-frontend.js 1.51 kB -3 B (0%)
build/checkout-blocks/billing-address-frontend.js 2.67 kB +5 B (0%)
build/checkout-blocks/contact-information-frontend.js 3.89 kB -4 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.93 kB +3 B (0%)
build/checkout-blocks/fields-frontend.js 346 B -1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.56 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 12.8 kB +41 B (0%)
build/checkout-blocks/payment-frontend.js 4.58 kB -2 B (0%)
build/checkout-blocks/shipping-address-frontend.js 3.06 kB +6 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.55 kB -6 B (0%)
build/checkout-blocks/terms-frontend.js 1.65 kB -2 B (0%)
build/checkout-blocks/totals-frontend.js 329 B -1 B (0%)
build/checkout-frontend.js 55.1 kB +2 B (0%)
build/checkout.js 54 kB +13 B (0%)
build/featured-category.js 7.73 kB -1 B (0%)
build/featured-product.js 9.42 kB -5 B (0%)
build/handpicked-products.js 6.27 kB +7 B (0%)
build/mini-cart-component-frontend.js 45 kB +8.07 kB (+22%) 🚨
build/mini-cart-frontend.js 2.33 kB +6 B (0%)
build/mini-cart.js 5.72 kB +433 B (+8%) 🔍
build/price-filter-frontend.js 14.4 kB -12 B (0%)
build/price-filter.js 9.65 kB -4 B (0%)
build/product-best-sellers.js 6.62 kB -8 B (0%)
build/product-categories.js 3.38 kB +1 B (0%)
build/product-category.js 7.49 kB -3 B (0%)
build/product-new.js 6.77 kB -8 B (0%)
build/product-on-sale.js 7.11 kB -17 B (0%)
build/product-search.js 2.68 kB +2 B (0%)
build/product-tag.js 6.6 kB +8 B (0%)
build/product-top-rated.js 6.74 kB -6 B (0%)
build/products-by-attribute.js 7.7 kB -3 B (0%)
build/reviews-by-category.js 11.4 kB -10 B (0%)
build/reviews-by-product.js 13 kB -10 B (0%)
build/reviews-frontend.js 8.96 kB +6 B (0%)
build/single-product-frontend.js 26.6 kB +20 B (0%)
build/single-product.js 9.77 kB -4 B (0%)
build/stock-filter-frontend.js 8.77 kB +11 B (0%)
build/stock-filter.js 7.81 kB -2 B (0%)
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.1 kB +1 B (0%)
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 kB -8 B (0%)
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB -1 B (0%)
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.02 kB -1 B (0%)
build/wc-blocks-style-rtl.css 21.1 kB +438 B (+2%)
build/wc-blocks-style.css 21 kB +439 B (+2%)
build/wc-blocks-vendors.js 254 kB +25 B (0%)
build/wc-blocks.js 3.49 kB -1 B (0%)
build/legacy-template.js 1.45 kB +1.45 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/atomic-block-components/add-to-cart.js 7.84 kB
build/atomic-block-components/category-list.js 470 B
build/atomic-block-components/image.js 1.35 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 561 B
build/atomic-block-components/sale-badge-frontend.js 859 B
build/atomic-block-components/stock-indicator.js 611 B
build/atomic-block-components/tag-list-frontend.js 466 B
build/atomic-block-components/tag-list.js 471 B
build/blocks-checkout.js 21.1 kB
build/cart-blocks/empty-cart-frontend.js 349 B
build/cart-blocks/items-frontend.js 303 B
build/price-format.js 1.37 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.1 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-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 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 force-pushed the update/block-template-controller-render-template branch from 84b718e to be458b7 Compare October 26, 2021 09:02
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, good job @tjcafferkey!

@github-actions github-actions bot added this to the 6.2.0 milestone Oct 26, 2021
@Aljullu Aljullu modified the milestones: 6.2.0, 6.3.0 Oct 26, 2021
@tjcafferkey
Copy link
Contributor Author

Failing tests are related to these changes. Need to investigate.

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

@tjcafferkey LGTM! Just one minor issue then we can merge this PR. Pre-approving! Tested and it worked great on my end.

Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

This works well! The testing instructions should be updated to correctly reflect the precedence of Theme > Blocks > Core though, seems they're swapped in this PR description.

Approving, but not merging due to an outstanding suggestion that you should consider.

@dinhtungdu
Copy link
Member

dinhtungdu commented Oct 29, 2021

@tjcafferkey Testing this PR again, I notice the header and footer didn't load on my test site using the TT1 Block theme. When I edit the single product template in the Site Editor for the first time, I need to choose the template part for the header and footer.

Screenshots

image

image

image

image

@dinhtungdu
Copy link
Member

Using this template I can load the header and footer out of the box

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:paragraph --> <p>You are using the Themes block template now</p> <!-- /wp:paragraph -->
<!-- wp:template-part {"slug":"footer"} /-->

@tjcafferkey
Copy link
Contributor Author

Thanks @dinhtungdu, you are right about my template markup. I just never updated it (have it on a clipboard) seeing as I was focusing more on the mechanism of loading the templates rather than the template itself. Thanks for the new markup I'll update so I can use this from now on 😄

@tjcafferkey tjcafferkey merged commit 0d940de into trunk Oct 29, 2021
@tjcafferkey tjcafferkey deleted the update/block-template-controller-render-template branch October 29, 2021 11:44
@nielslange nielslange changed the title Add Render Logic to BlockTemplateController Add render logic to BlockTemplateController Nov 15, 2021
@nielslange nielslange added the type: enhancement The issue is a request for an enhancement. label Nov 16, 2021
@frontdevde frontdevde added the skip-changelog PRs that you don't want to appear in the changelog. label Nov 16, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
* Add render logic to BlockTemplatesController

* Comment out action to test e2e tests

* Add add_action back into initialise render method

* Check function exists before using it

* Change hook from wp to template_redirect

* Update src/BlockTemplatesController.php

Co-authored-by: Tung Du <[email protected]>

Co-authored-by: Tung Du <[email protected]>
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
* Add render logic to BlockTemplatesController

* Comment out action to test e2e tests

* Add add_action back into initialise render method

* Check function exists before using it

* Change hook from wp to template_redirect

* Update src/BlockTemplatesController.php

Co-authored-by: Tung Du <[email protected]>

Co-authored-by: Tung Du <[email protected]>
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 skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Modify BlockTemplateController to server Block Templates
6 participants