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

All Products block: Migrate to block.json #6754

Merged
merged 9 commits into from
Jul 28, 2022

Conversation

ockham
Copy link
Collaborator

@ockham ockham commented Jul 26, 2022

By-product of this experiment.

This shouldn't have any user-facing changes; it's merely a refactor to use block.json (and rely on server-side registration via register_block_type_from_metadata here) thanks to the existing AllProducts.php file and class).

Testing

Verify that the "All Products" block still works as before, both in the editor and on the frontend.
Make sure that both existing instances of the block continue to work (and respect their attributes), and that newly inserting an "All Products" block also works.

Changelog

All Products block: Migrate to block.json

@ockham ockham added status: needs review type: refactor The issue/PR is related to refactoring. focus: blocks Specific work involving or impacting how blocks behave. block: all products Issues related to the all products block. labels Jul 26, 2022
@ockham ockham requested a review from Aljullu July 26, 2022 15:03
@ockham ockham self-assigned this Jul 26, 2022
@rubikuserbot
Copy link

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-6754.zip

Comment on lines 77 to 109

/**
* Register and run the "All Products" block.
*/
registerBlockType( 'woocommerce/all-products', {
...blockSettings,
/**
* Deprecation rule to handle the previous default rows which was 1 instead of 3.
*/
deprecated: [
{
attributes: Object.assign( {}, blockSettings.attributes, {
rows: { type: 'number', default: 1 },
} ),
save( { attributes } ) {
const data = {
'data-attributes': JSON.stringify( attributes ),
};
return (
<div
className={ getBlockClassName(
'wc-block-all-products',
attributes
) }
{ ...data }
>
<InnerBlocks.Content />
</div>
);
},
},
],
} );
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I believe that this is no longer needed -- see PR description:

( [...] rely on server-side registration via register_block_type_from_metadata here) thanks to the existing AllProducts.php file and class

Copy link

Choose a reason for hiding this comment

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

You still need to register client-specific settings with registerBlockType. I don't think you need to export anything from this file. Depending on the lowest supported WP version you only need to call:

import metadata from './block.json';
registerBlockType( metadata.name, settings );

or

import metadata from './block.json';
registerBlockType( metadata, settings );

In case some settings aren't handled in older versions of WP.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Thanks @gziolo! Addressed in 399e3b0.

@rubikuserbot
Copy link

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-6754.zip

@github-actions
Copy link
Contributor

github-actions bot commented Jul 26, 2022

Size Change: +179 B (0%)

Total Size: 878 kB

Filename Size Change
build/active-filters.js 7.99 kB -6 B (0%)
build/all-products.js 33.7 kB +192 B (+1%)
build/attribute-filter.js 14.4 kB +4 B (0%)
build/cart.js 44.3 kB +1 B (0%)
build/checkout.js 45.5 kB +6 B (0%)
build/featured-category.js 13.2 kB -2 B (0%)
build/featured-product.js 13.5 kB -1 B (0%)
build/handpicked-products.js 7.38 kB -2 B (0%)
build/mini-cart-contents.js 22.9 kB -1 B (0%)
build/mini-cart.js 6.62 kB -2 B (0%)
build/price-filter.js 9.04 kB -2 B (0%)
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB +1 B (0%)
build/product-add-to-cart.js 6.64 kB +2 B (0%)
build/product-best-sellers.js 7.71 kB -1 B (0%)
build/product-button.js 1.09 kB -1 B (0%)
build/product-categories.js 2.78 kB -2 B (0%)
build/product-category-list.js 501 B -1 B (0%)
build/product-category.js 8.69 kB +4 B (0%)
build/product-image.js 1.07 kB -1 B (0%)
build/product-new.js 7.72 kB +1 B (0%)
build/product-on-sale.js 8.04 kB -3 B (0%)
build/product-rating.js 731 B +1 B (0%)
build/product-sale-badge.js 678 B -2 B (0%)
build/product-search.js 2.18 kB -2 B (0%)
build/product-tag-list.js 495 B -1 B (0%)
build/product-tag.js 8.09 kB -1 B (0%)
build/product-title.js 912 B +1 B (0%)
build/product-top-rated.js 7.96 kB +2 B (0%)
build/products-by-attribute.js 8.64 kB +1 B (0%)
build/reviews-by-category.js 11.2 kB -4 B (0%)
build/reviews-by-product.js 12.3 kB -4 B (0%)
build/single-product.js 10.1 kB +1 B (0%)
build/stock-filter.js 7.3 kB +3 B (0%)
build/wc-blocks-vendors.js 58.8 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.35 kB
build/all-products-frontend.js 18.1 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 25.1 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.07 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 430 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 780 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.16 kB
build/cart-frontend.js 47 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 890 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 276 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 602 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.67 kB
build/checkout-blocks/shipping-address-frontend.js 993 B
build/checkout-blocks/shipping-methods-frontend.js 4.76 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout-frontend.js 49.2 kB
build/legacy-template.js 2.8 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.68 kB
build/mini-cart-contents-block/footer-frontend.js 6.99 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 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-frontend.js 1.71 kB
build/price-filter-frontend.js 13.1 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 223 B
build/product-add-to-cart--product-button.js 564 B
build/product-add-to-cart-frontend.js 6.96 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.85 kB
build/product-category-list-frontend.js 921 B
build/product-image-frontend.js 1.84 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-sale-badge-frontend.js 1.09 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 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 917 B
build/product-tag-list-frontend.js 915 B
build/product-title-frontend.js 1.29 kB
build/reviews-frontend.js 7.01 kB
build/single-product-frontend.js 21.4 kB
build/stock-filter-frontend.js 7.39 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 19.1 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.04 kB
build/wc-blocks-editor-style.css 5.04 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.26 kB
build/wc-blocks-vendors-style.css 1.26 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.6 kB

compressed-size-action

@ockham ockham requested a review from a team July 26, 2022 15:39
@Aljullu Aljullu requested review from a team, danielwrobert and albarin and removed request for a team, Aljullu and danielwrobert July 26, 2022 15:42
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-6754.zip

Copy link
Contributor

@albarin albarin left a comment

Choose a reason for hiding this comment

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

I left a comment about the block.json file, the rest looks good to me 👌

@ockham ockham requested a review from albarin July 27, 2022 13:06
@github-actions github-actions bot added this to the 8.2.0 milestone Jul 27, 2022
@ockham ockham force-pushed the update/all-products-block-json branch from 28561d3 to ae38915 Compare July 27, 2022 15:47
@ockham
Copy link
Collaborator Author

ockham commented Jul 27, 2022

Ah, please don't merge yet, I just noticed that I'm getting a block validation error if I have a pre-existing All Products block (added on trunk):

image

@ockham
Copy link
Collaborator Author

ockham commented Jul 27, 2022

Looking at the difference between "Content generated by save function" and "Content retrieved from post body", I think that the latter is missing "className":"wp-block-woocommerce-all-products".

@ockham
Copy link
Collaborator Author

ockham commented Jul 27, 2022

I think the solution is to set apiVersion to 1. This post provides some background: An apiVersion of 2 means that the block uses its own block wrapper element (via useBlockProps).

Since we're not doing that (yet), the block parser mis-interprets this wrapping div as that block wrapper and tries to infer block attributes from it -- most notably, the className. Since it sees the wp-block-woocommerce-all-products className there that isn't generated by a mechanism that the parser is familiar with (such as block-supports), it interprets it as a user-set, custom CSS class name -- and as a consequence, creates a className block attribute for it.

By setting the apiVersion back to 1, we don't claim to be using a useBlockProps-generated block wrapper. (We could consider setting apiVersion to 2 and refactoring the save() code accordingly, but that would inflate this PR further in size, so it's best done in a follow-up PR.)

@ockham
Copy link
Collaborator Author

ockham commented Jul 27, 2022

It seems that JS unit tests are still failing, but that seems unrelated: #6780.

@ockham ockham force-pushed the update/all-products-block-json branch from 630deee to 9c5c24c Compare July 28, 2022 09:23
@ockham
Copy link
Collaborator Author

ockham commented Jul 28, 2022

I can't seem to merge this. Could someone else (with sufficient privileges) please do that on my behalf? 🙌

@albarin albarin merged commit f11f11c into trunk Jul 28, 2022
@albarin albarin deleted the update/all-products-block-json branch July 28, 2022 10:26
@Aljullu Aljullu added type: technical debt This issue/PR represents/solves the technical debt of the project. skip-changelog PRs that you don't want to appear in the changelog. labels Aug 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: all products Issues related to the all products block. focus: blocks Specific work involving or impacting how blocks behave. skip-changelog PRs that you don't want to appear in the changelog. type: refactor The issue/PR is related to refactoring. type: technical debt This issue/PR represents/solves the technical debt of the project.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants