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

Show classic template in the inserter only for specific templates #6539

Merged
merged 9 commits into from
Jun 29, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Jun 8, 2022

Fixes #5193
Fixes #6110

With this PR the Classic Template Block will be visible in the inserter. But, the block will be visible in the inserter only for the templates:

  • Product Search Results
  • Products by Category
  • Product Catalog
  • Products by Tag
  • Products by Tag

Testing

User Facing Testing

Check out this branch

  1. Open the FSE editor.
  2. Be sure that the Classic Template Block is visible in the inserter only for the templates specificated above.
  3. During the tests, be sure that the name in the title and the name in the description correspond to the template that you are editing.
  4. During the tests, edit/save templates too, to be sure that this PR doesn't break the current experience.

image

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

N/A

@github-actions
Copy link
Contributor

github-actions bot commented Jun 8, 2022

Size Change: +351 B (0%)

Total Size: 875 kB

Filename Size Change
build/legacy-template.js 2.8 kB +351 B (+14%) ⚠️
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.26 kB
build/active-filters.js 7.92 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.5 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 25 kB
build/attribute-filter.js 14.2 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.06 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 432 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.35 kB
build/cart-blocks/order-summary-shipping-frontend.js 427 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 432 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 45.6 kB
build/cart.js 44.2 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 888 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.36 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 7.67 kB
build/checkout-blocks/shipping-address-frontend.js 991 B
build/checkout-blocks/shipping-methods-frontend.js 4.73 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout-frontend.js 47.9 kB
build/checkout.js 45.5 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/handpicked-products.js 7.4 kB
build/mini-cart-component-frontend.js 16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 5.75 kB
build/mini-cart-contents-block/items-frontend.js 226 B
build/mini-cart-contents-block/products-table-frontend.js 290 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.62 kB
build/price-filter-frontend.js 13 kB
build/price-filter.js 9 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 222 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart--product-button.js 564 B
build/product-add-to-cart-frontend.js 6.95 kB
build/product-add-to-cart.js 6.63 kB
build/product-best-sellers.js 7.49 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button-frontend.js 1.84 kB
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 920 B
build/product-category-list.js 502 B
build/product-category.js 8.59 kB
build/product-image-frontend.js 1.83 kB
build/product-image.js 1.07 kB
build/product-new.js 7.77 kB
build/product-on-sale.js 8.09 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 731 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 679 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 381 B
build/product-sku.js 381 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 916 B
build/product-tag-list-frontend.js 914 B
build/product-tag-list.js 497 B
build/product-tag.js 8.13 kB
build/product-title-frontend.js 1.29 kB
build/product-title.js 909 B
build/product-top-rated.js 8.01 kB
build/products-by-attribute.js 8.7 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.35 kB
build/stock-filter.js 7.26 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.74 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.08 kB
build/wc-blocks-editor-style.css 5.08 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.1 kB
build/wc-blocks-style.css 22.1 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 59 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

@gigitux gigitux self-assigned this Jun 23, 2022
@gigitux gigitux added 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. labels Jun 23, 2022
@gigitux gigitux marked this pull request as ready for review June 23, 2022 15:30
@rubikuserbot rubikuserbot requested review from a team and dinhtungdu and removed request for a team June 23, 2022 15:31
@gigitux gigitux force-pushed the fix/5193-classic-template-only-for-specific-template branch from cdb943b to c4953d4 Compare June 23, 2022 15:33
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.

@gigitux This is working as expected for built-in templates from the plugin but not for templates from the theme. I tested overriding the Product Catalog template in theme and got this issue:

image

@gigitux
Copy link
Contributor Author

gigitux commented Jun 27, 2022

@gigitux This is working as expected for built-in templates from the plugin but not for templates from the theme. I tested overriding the Product Catalog template in theme and got this issue:

image

Thanks for the review and for testing! Great catch! 💪

I addressed the bug, the problem was the hardcoded slug. Now, it should be okay!

@gigitux gigitux requested a review from dinhtungdu June 27, 2022 11:08
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.

@gigitux thanks for the update! I can confirm this PR is working with overridden templates from themes. I left some minor comments, can you please check?


if ( isExperimentalBuild() ) {
subscribe( () => {
const previousValue = currentTemplateId;
Copy link
Member

Choose a reason for hiding this comment

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

Should we change this to previousTemplateId for consistency?

html: false,
multiple: false,
reusable: false,
inserter: true,
Copy link
Member

Choose a reason for hiding this comment

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

This should be feature gated, otherwise, the block will be always available in the inserter when the block phase is less than 3.

}

if (
getBlockType( BLOCK_SLUG ) === undefined &&
Copy link
Member

Choose a reason for hiding this comment

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

should we use the block variable here?

@gigitux
Copy link
Contributor Author

gigitux commented Jun 28, 2022

Thanks for the review, @dinhtungdu. With 1ac90a3 I addressed feedback. I reply to you about your question. Maybe are you thinking about a PHP approach?

* See https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/5861 for more context
*/
registerClassicTemplateBlock( {
template: parsedTemplate ?? 'WooCommerce Classic Template',
Copy link
Member

@dinhtungdu dinhtungdu Jun 28, 2022

Choose a reason for hiding this comment

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

Because of the condition in line 219, Isn't the parsedTemplate variable always truly at this point?

By the way, 'WooCommerce Classic Template' isn't the correct value for the template variable, it should be the template ID.

@gigitux gigitux requested a review from dinhtungdu June 28, 2022 12:25
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.

Thanks so much for the multiple rounds updates! This is LGTM! :shipit:

@github-actions github-actions bot added this to the 8.0.0 milestone Jun 29, 2022
Comment on lines 27 to 38
import { BLOCK_SLUG, TEMPLATES } from './constants';

interface Props {
attributes: {
template: string;
align: string;
};
setAttributes: ( attributes: Record< string, string > ) => void;
clientId: string;
}

const Edit = ( { clientId, attributes }: Props ) => {
const Edit = ( { clientId, attributes, setAttributes }: Props ) => {
Copy link
Member

Choose a reason for hiding this comment

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

This is optional but we can use the BlockEditProp type here, for example:

export default function ( {
attributes,
setAttributes,
}: BlockEditProps< Attributes > ) {

Comment on lines 174 to 176
edit: ( { attributes, clientId, setAttributes } ) => {
const newTemplate = template ?? ( attributes.template as string );

Copy link
Member

Choose a reason for hiding this comment

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

Specifying the type here can save a type casting call.

Suggested change
edit: ( { attributes, clientId, setAttributes } ) => {
const newTemplate = template ?? ( attributes.template as string );
edit: ( { attributes, clientId, setAttributes }: Props ) => {
const newTemplate = template ?? attributes.template;

@gigitux
Copy link
Contributor Author

gigitux commented Jun 29, 2022

Thanks so much for the multiple rounds updates! This is LGTM! :shipit:

Thanks for the multiple reviews! 💪

@gigitux gigitux merged commit 031141e into trunk Jun 29, 2022
@gigitux gigitux deleted the fix/5193-classic-template-only-for-specific-template branch June 29, 2022 07:42
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
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
2 participants