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

Add basic product archive block template #5049

Merged
merged 4 commits into from Nov 2, 2021

Conversation

frontdevde
Copy link
Contributor

@frontdevde frontdevde 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 archive-product.php template.

Closes #5033

Large viewports Small viewports
Screenshot 2021-11-02 at 12 57 01 Screenshot 2021-11-02 at 12 57 20

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 Product Archive Page template from the General templates section.
  2. Confirm you can load the template and it looks as expected in large/small viewports as per the screenshots above.
  3. Confirm the behavior on the Frontend on /shop is identical to the behavior on /shop 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 basic product archive block template.

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

github-actions bot commented Nov 2, 2021

Size Change: +870 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/active-filters.js 8.01 kB -1 B (0%)
build/all-products.js 38 kB -4 B (0%)
build/all-reviews.js 9.57 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.js 7.84 kB +1 B (0%)
build/atomic-block-components/image.js 1.35 kB +1 B (0%)
build/atomic-block-components/price.js 2.11 kB +2 B (0%)
build/attribute-filter.js 12.1 kB +2 B (0%)
build/cart.js 50.5 kB -6 B (0%)
build/checkout.js 54 kB +2 B (0%)
build/featured-category.js 7.74 kB +2 B (0%)
build/featured-product.js 9.42 kB -1 B (0%)
build/handpicked-products.js 6.27 kB -3 B (0%)
build/legacy-template.js 2.03 kB +587 B (+41%) 🚨
build/mini-cart.js 5.72 kB +1 B (0%)
build/price-filter.js 9.65 kB -1 B (0%)
build/product-categories.js 3.37 kB -1 B (0%)
build/product-category.js 7.49 kB +1 B (0%)
build/product-on-sale.js 7.11 kB +1 B (0%)
build/product-search.js 2.68 kB +1 B (0%)
build/product-tag.js 6.6 kB +1 B (0%)
build/product-top-rated.js 6.74 kB +1 B (0%)
build/single-product.js 9.77 kB +3 B (0%)
build/stock-filter.js 7.81 kB -6 B (0%)
build/wc-blocks-editor-style-rtl.css 15.7 kB +94 B (+1%)
build/wc-blocks-editor-style.css 15.7 kB +98 B (+1%)
build/wc-blocks-vendors.js 254 kB +94 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.33 kB
build/all-products-frontend.js 23.3 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/image--atomic-block-components/title.js 334 B
build/atomic-block-components/add-to-cart-frontend.js 8.51 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/price-frontend.js 2.14 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/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/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/mini-cart-component-frontend.js 45 kB
build/mini-cart-frontend.js 2.33 kB
build/price-filter-frontend.js 14.4 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.62 kB
build/product-new.js 6.77 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/stock-filter-frontend.js 8.77 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.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

@frontdevde frontdevde force-pushed the add/archive-product-block-template branch from 7dcbe17 to ae090e9 Compare November 2, 2021 12:20
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.

Nice! Works as expected and code LGTM.

@github-actions github-actions bot added this to the 6.3.0 milestone Nov 2, 2021
@frontdevde frontdevde merged commit e4bd517 into trunk Nov 2, 2021
@frontdevde frontdevde deleted the add/archive-product-block-template branch November 2, 2021 14:42
@nielslange nielslange changed the title Store Editing Templates v1: add a basic Product Archive block template Add basic product archive 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
woocommerce#5049)

* Add the Archive Product block template

* Use template slug if no template title is set

* Add page icon as per design

* Add the basic archive product block template
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
woocommerce#5049)

* Add the Archive Product block template

* Use template slug if no template title is set

* Add page icon as per design

* Add the basic archive product block 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.

Convert archive-product template into a basic block template
2 participants