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

Add single product block template #5054

Merged
merged 2 commits into from Nov 3, 2021
Merged

Conversation

tjcafferkey
Copy link
Contributor

@tjcafferkey tjcafferkey commented Nov 2, 2021

For WooCommerce merchants to be able to fully utilize block themes, we need the most important WooCommerce core PHP templates to be available as block templates.

This PR adds a block template version of the single-product.php template.

Fixes #5032

Manual Testing

How to test the changes in this Pull Request:

Prerequisite: Please ensure you have a Block Template Theme activated such as TT1 and also the Gutenberg Plugin installed.

  1. Load the Site Editor (Appearance > Editor) and select the Single Product Page template from the General templates section.
  2. Confirm you can load the template. It will have a temporary placeholder block. This SVG will be replaced in a future PR.
  3. Confirm the behavior on the frontend product page is identical to the behavior on the product page without this PR applied.

Once you have followed the above steps, add the same template files to your theme-dir/block-templates and change the file contents so you can differentiate between the Woo Block template and the Theme template. Repeat the above steps starting from Step 2 and confirm the Theme template is preferred over the Woo Blocks template

Changelog

FSE: Add single product block template.

@tjcafferkey tjcafferkey added focus: FSE Work related to prepare WooCommerce for FSE. focus: template Related to API powering block template functionality in the Site Editor labels Nov 2, 2021
@tjcafferkey tjcafferkey self-assigned this Nov 2, 2021
@rubikuserbot rubikuserbot requested review from a team and frontdevde and removed request for a team November 2, 2021 15:38
@github-actions
Copy link
Contributor

github-actions bot commented Nov 2, 2021

Size Change: +9 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/wc-blocks-editor-style-rtl.css 15.7 kB +5 B (0%)
build/wc-blocks-editor-style.css 15.7 kB +4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.33 kB
build/active-filters.js 8.01 kB
build/all-products-frontend.js 23.3 kB
build/all-products.js 38 kB
build/all-reviews.js 9.57 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 3.19 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.82 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 334 B
build/atomic-block-components/add-to-cart-frontend.js 8.51 kB
build/atomic-block-components/add-to-cart.js 7.84 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 465 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.14 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 561 B
build/atomic-block-components/rating.js 565 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 391 B
build/atomic-block-components/sku.js 392 B
build/atomic-block-components/stock-indicator-frontend.js 612 B
build/atomic-block-components/stock-indicator.js 611 B
build/atomic-block-components/summary-frontend.js 906 B
build/atomic-block-components/summary.js 912 B
build/atomic-block-components/tag-list-frontend.js 466 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.64 kB
build/atomic-block-components/title.js 1.46 kB
build/attribute-filter-frontend.js 18.3 kB
build/attribute-filter.js 12.1 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.23 kB
build/cart-blocks/empty-cart-frontend.js 349 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 806 B
build/cart-blocks/items-frontend.js 303 B
build/cart-blocks/line-items-frontend.js 5.86 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.42 kB
build/cart-blocks/totals-frontend.js 323 B
build/cart-frontend.js 52.9 kB
build/cart.js 50.5 kB
build/checkout-blocks/actions-frontend.js 1.51 kB
build/checkout-blocks/billing-address-frontend.js 2.67 kB
build/checkout-blocks/contact-information-frontend.js 3.89 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 346 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.55 kB
build/checkout-blocks/terms-frontend.js 1.65 kB
build/checkout-blocks/totals-frontend.js 329 B
build/checkout-frontend.js 55.1 kB
build/checkout.js 54 kB
build/featured-category.js 7.74 kB
build/featured-product.js 9.42 kB
build/handpicked-products.js 6.27 kB
build/legacy-template.js 2.03 kB
build/mini-cart-component-frontend.js 45 kB
build/mini-cart-frontend.js 2.33 kB
build/mini-cart.js 5.72 kB
build/price-filter-frontend.js 14.4 kB
build/price-filter.js 9.65 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.62 kB
build/product-categories.js 3.37 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.11 kB
build/product-search.js 2.68 kB
build/product-tag.js 6.6 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.7 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.96 kB
build/single-product-frontend.js 26.6 kB
build/single-product.js 9.77 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.1 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.14 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-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 21.1 kB
build/wc-blocks-style.css 21 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

Copy link
Contributor

@frontdevde frontdevde left a comment

Choose a reason for hiding this comment

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

Tested as per testing instructions and it tests well for me.

Left a couple of comments, but neither blocking this from merging.

LGTM 👍

@@ -14,7 +14,7 @@
}
}

.wp-block-woocommerce-legacy-template__placeholder-image {
.editor-styles-wrapper .wp-block-woocommerce-legacy-template__placeholder-image {
Copy link
Contributor

Choose a reason for hiding this comment

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

If we're adding this class just for increased specificity, can we use wp-block-woocommerce-legacy-template__placeholder instead of .editor-styles-wrapper here? This way we're using only classes we control within the scope of our plugin.

@@ -0,0 +1 @@
<svg width="893" height="451" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="451" height="451" rx="2" fill="#E5E5E5"/><rect x="470" width="423" height="71" rx="2" fill="#E5E5E5"/><rect x="470" y="147" width="423" height="17" rx="2" fill="#E5E5E5"/><rect x="470" y="172" width="423" height="17" rx="2" fill="#E5E5E5"/><rect x="470" y="305" width="140" height="53" rx="2" fill="#E5E5E5"/><rect x="470" y="217" width="83" height="18" rx="2" fill="#E5E5E5"/><path d="M481.599 96.876a1 1 0 0 1 1.802 0l2.48 5.162a.998.998 0 0 0 .768.558l5.676.764a1 1 0 0 1 .557 1.714l-4.143 3.954a1 1 0 0 0-.293.903l1.028 5.634a1 1 0 0 1-1.459 1.06l-5.04-2.719a1 1 0 0 0-.95 0l-5.04 2.719a1 1 0 0 1-1.459-1.06l1.028-5.634a1 1 0 0 0-.293-.903l-4.143-3.954a1 1 0 0 1 .557-1.714l5.676-.764a.998.998 0 0 0 .768-.558l2.48-5.162ZM506.599 96.876a1 1 0 0 1 1.802 0l2.48 5.162a.998.998 0 0 0 .768.558l5.676.764a1 1 0 0 1 .557 1.714l-4.143 3.954a1 1 0 0 0-.293.903l1.028 5.634a1 1 0 0 1-1.459 1.06l-5.04-2.719a1 1 0 0 0-.95 0l-5.04 2.719a1 1 0 0 1-1.459-1.06l1.028-5.634a1 1 0 0 0-.293-.903l-4.143-3.954a1 1 0 0 1 .557-1.714l5.676-.764a.998.998 0 0 0 .768-.558l2.48-5.162ZM531.599 96.876a1 1 0 0 1 1.802 0l2.48 5.162a.998.998 0 0 0 .768.558l5.676.764a1 1 0 0 1 .557 1.714l-4.143 3.954a1 1 0 0 0-.293.903l1.028 5.634a1 1 0 0 1-1.459 1.06l-5.04-2.719a1 1 0 0 0-.95 0l-5.04 2.719a1 1 0 0 1-1.459-1.06l1.028-5.634a1 1 0 0 0-.293-.903l-4.143-3.954a1 1 0 0 1 .557-1.714l5.676-.764a.998.998 0 0 0 .768-.558l2.48-5.162ZM556.599 96.876a1 1 0 0 1 1.802 0l2.48 5.162a.998.998 0 0 0 .768.558l5.676.764a1 1 0 0 1 .557 1.714l-4.143 3.954a1 1 0 0 0-.293.903l1.028 5.634a1 1 0 0 1-1.459 1.06l-5.04-2.719a1 1 0 0 0-.95 0l-5.04 2.719a1 1 0 0 1-1.459-1.06l1.028-5.634a1 1 0 0 0-.293-.903l-4.143-3.954a1 1 0 0 1 .557-1.714l5.676-.764a.998.998 0 0 0 .768-.558l2.48-5.162ZM581.599 96.876a1 1 0 0 1 1.802 0l2.48 5.162a.998.998 0 0 0 .768.558l5.676.764a1 1 0 0 1 .557 1.714l-4.143 3.954a1 1 0 0 0-.293.903l1.028 5.634a1 1 0 0 1-1.459 1.06l-5.04-2.719a1 1 0 0 0-.95 0l-5.04 2.719a1 1 0 0 1-1.459-1.06l1.028-5.634a1 1 0 0 0-.293-.903l-4.143-3.954a1 1 0 0 1 .557-1.714l5.676-.764a.998.998 0 0 0 .768-.558l2.48-5.162Z" fill="#E5E5E5"/></svg>
Copy link
Contributor

Choose a reason for hiding this comment

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

We'll need to replace this with the latest SVG provided by design. OK to leave it as is for now though and update it together with the Archive one in #5053.

@github-actions github-actions bot added this to the 6.3.0 milestone Nov 3, 2021
@tjcafferkey tjcafferkey merged commit 24ef4b0 into trunk Nov 3, 2021
@tjcafferkey tjcafferkey deleted the add/single-product-template branch November 3, 2021 09:31
@nielslange nielslange changed the title Add Single Product Block Template Add Single Product block template Nov 15, 2021
@nielslange nielslange added the type: enhancement The issue is a request for an enhancement. label Nov 15, 2021
@nielslange nielslange changed the title Add Single Product block template Add single product block template Nov 15, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
* Add single-product.html template to render core PHP template

* Update placeholder SVG
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
* Add single-product.html template to render core PHP template

* Update placeholder SVG
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.

Convert single-product template into a basic block template
3 participants