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

Related Products: Move Notice block to the Inspector Control section #8843

Merged

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented Mar 23, 2023

This PR moves the Notice block that existed inside the Related Products to the Inspector Control section (on the sidebar).

Fixes #8817

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before After
image image

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Go to Appearance > Themes and activate a Blockfied theme, such as: Twenty-twenty Three;
  2. After the theme is activated, go to Appearance > Editor (Beta);
  3. Inside the Design section, click on Templates;
  4. Select the Single Product template;
  5. On the top left of the page, click on the Edit button;
  6. Using the Block Inserter, type: Related Products, and add the block to the Editor;
  7. Click on the Save button;
  8. Check that the Skeleton component appears above the Add To Cart button
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Move Related Products's notice component to the Inspector Control section

@thealexandrelara thealexandrelara self-assigned this Mar 23, 2023
@woocommercebot woocommercebot requested review from a team and Aljullu and removed request for a team March 23, 2023 20:57
@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 479
  • Total errors: 2303

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2023

Size Change: +22 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/all-products.js 37.1 kB +2 B (0%)
build/wc-blocks-editor-style-rtl.css 5.79 kB +10 B (0%)
build/wc-blocks-editor-style.css 5.79 kB +10 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/active-filters.js 7.49 kB
build/all-products-frontend.js 11.8 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.1 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 44 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 kB
build/cart-blocks/cart-express-payment-frontend.js 718 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.32 kB
build/cart-frontend.js 29.3 kB
build/cart.js 48.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 4.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 8.39 kB
build/checkout-blocks/pickup-options-frontend.js 4.11 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 309 B
build/checkout-frontend.js 30.9 kB
build/checkout.js 45.8 kB
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.4 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.92 kB
build/legacy-template.js 5.56 kB
build/mini-cart-component-frontend.js 28.2 kB
build/mini-cart-contents-block/cart-button-frontend.js 816 B
build/mini-cart-contents-block/checkout-button-frontend.js 818 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.18 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 705 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.2 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.96 kB
build/price-filter.js 8.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.43 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.26 kB
build/product-button-frontend.js 1.91 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.25 kB
build/product-image-frontend.js 1.77 kB
build/product-image.js 178 B
build/product-new.js 8.26 kB
build/product-on-sale.js 8.59 kB
build/product-price-frontend.js 2.08 kB
build/product-query.js 11 kB
build/product-rating-frontend.js 1.34 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 977 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 453 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-summary-frontend.js 1.29 kB
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 178 B
build/product-top-rated.js 8.5 kB
build/products-by-attribute.js 9.58 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/rating-filter.js 6.99 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.11 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 5.82 kB
build/stock-filter.js 7.7 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 27 kB
build/wc-blocks-style.css 27 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.2 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
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

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, we should add some labels to the PR. Also, from the testing steps:

  1. On the top right of the page, click on the three dots icon and open the Code Editor (or just hit Shift + Option + Command + M on the Mac);
  2. Replace the default wp-group section with the wp-group section inside the templates/templates/blockified/single-product.html file of this PR.

Could these steps be replaced with "Add the Related Products block"? Or is there any reason to manually copy and paste the template?

@github-actions github-actions bot added this to the 9.9.0 milestone Mar 24, 2023
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
@thealexandrelara
Copy link
Contributor Author

Could these steps be replaced with "Add the Related Products block"? Or is there any reason to manually copy and paste the template?

I was following the testing steps from the issue, but you're correct, I just modified the test steps to what you suggested 🙌

@thealexandrelara thealexandrelara merged commit d488d35 into trunk Mar 24, 2023
@thealexandrelara thealexandrelara deleted the feat/move-related-products-block-notice-to-sidebar branch March 24, 2023 17:03
@tarunvijwani tarunvijwani added the type: enhancement The issue is a request for an enhancement. label Mar 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Related Products: improve preview on the editor side
3 participants