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

Add "Store Info Alternating Image and Text" commerce adjacent pattern #7827

Merged
merged 2 commits into from
Dec 5, 2022

Conversation

nerrad
Copy link
Contributor

@nerrad nerrad commented Dec 2, 2022

The "Store Info Alternating Image and Text" commerce adjacent pattern is a block that can be used as inspiration for merchants wanting to showcase some basic information about the store. In the example pattern some details about the types of products and the store itself.

cc @vivialice for design review

NOTE: The frontend screenshots were with images that won't ship with this pattern.

Screenshots

The following screenshots were with the Twenty Twenty Three theme and the "Whisper" style.

Editor

CleanShot 2022-12-02 at 08 46 34@2x

Pattern preview in Editor

CleanShot 2022-12-02 at 08 41 39@2x

Desktop frontend

CleanShot 2022-12-02 at 08 43 32@2x

Mobile frontend

CleanShot 2022-12-02 at 08 45 14@2x

Tablet frontend

CleanShot 2022-12-02 at 08 45 25@2x

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.

Testing

Automated Tests

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

User Facing Testing

  1. Create a new page and edit it.
  2. Browse to the WooCommerce category for Block patterns and look for the "WooCommerce Alternating Image and Text" pattern in the "Explore All Patterns" dialog. Click to insert.
    CleanShot 2022-12-02 at 08 41 39@2x
  3. Verify the pattern inserted on the page. It may look different depending on the theme being used with testing.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

The "WooCommerce Alternating Image and Text" block pattern has been added. This design can be used by adding two attention-grabbing images, customizing the text to match your needs and customizing the button block to be linked to any page.

Sorry, something went wrong.

This pattern is an alternating image and text layout that provides store info for the shopper.
@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2022

TypeScript Errors Report

Files with errors: 428
Total errors: 2059

🎉 🎉 This PR does not introduce new TS errors.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2022

Size Change: 0 B

Total Size: 972 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.74 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.32 kB
build/all-products-frontend.js 11.3 kB
build/all-products.js 33.1 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.6 kB
build/attribute-filter-wrapper-frontend.js 7.14 kB
build/attribute-filter.js 12.3 kB
build/blocks-checkout.js 27.1 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--product-add-to-cart-frontend.js 5.48 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.74 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.04 kB
build/cart-blocks/cart-express-payment-frontend.js 779 B
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.29 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 319 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.72 kB
build/cart-blocks/order-summary-discount-frontend.js 2.16 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-frontend.js 5.99 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.19 kB
build/cart-frontend.js 46.2 kB
build/cart.js 46.2 kB
build/checkout-blocks/actions-frontend.js 1.77 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.89 kB
build/checkout-blocks/billing-address-frontend.js 1.09 kB
build/checkout-blocks/contact-information-frontend.js 1.79 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.89 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.28 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 6.04 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.31 kB
build/checkout-blocks/shipping-address-frontend.js 1.07 kB
build/checkout-blocks/shipping-methods-frontend.js 5.01 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 48.3 kB
build/checkout.js 40.3 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 13.8 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.29 kB
build/legacy-template.js 2.85 kB
build/mini-cart-component-frontend.js 20 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer-frontend.js 2.95 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 289 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.1 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.28 kB
build/price-filter-frontend.js 13.6 kB
build/price-filter-wrapper-frontend.js 7.02 kB
build/price-filter.js 8.38 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 227 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 1.46 kB
build/product-add-to-cart.js 8.37 kB
build/product-best-sellers.js 7.62 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 432 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 301 B
build/product-button-frontend.js 2.13 kB
build/product-button.js 3.82 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.13 kB
build/product-category-list.js 502 B
build/product-category.js 8.62 kB
build/product-image-frontend.js 2.16 kB
build/product-image.js 3.93 kB
build/product-new.js 7.62 kB
build/product-on-sale.js 7.95 kB
build/product-price-frontend.js 2.15 kB
build/product-price.js 1.53 kB
build/product-query.js 4.44 kB
build/product-rating-frontend.js 1.44 kB
build/product-rating.js 787 B
build/product-sale-badge-frontend.js 1.38 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.52 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 1.12 kB
build/product-tag-list.js 498 B
build/product-tag.js 8 kB
build/product-title-frontend.js 1.57 kB
build/product-title.js 3.3 kB
build/product-top-rated.js 7.87 kB
build/products-by-attribute.js 8.54 kB
build/rating-filter-frontend.js 7.16 kB
build/rating-filter-wrapper-frontend.js 5.41 kB
build/rating-filter.js 5.79 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 17.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.8 kB
build/stock-filter-wrapper-frontend.js 6.04 kB
build/stock-filter.js 6.71 kB
build/vendors--attribute-filter-wrapper--mini-cart-contents-block/footer--product-add-to-cart-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper-frontend.js 8.2 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.54 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.85 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--dda5866c-frontend.js 8.85 kB
build/wc-blocks-data.js 18.7 kB
build/wc-blocks-editor-style-rtl.css 5.19 kB
build/wc-blocks-editor-style.css 5.19 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 2.92 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 24.2 kB
build/wc-blocks-style.css 24.2 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 62.4 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

@Aljullu Aljullu requested review from a team and gigitux and removed request for a team December 2, 2022 14:32
@Aljullu Aljullu added this to the 9.1.0 milestone Dec 5, 2022
@Aljullu Aljullu added the status: blocker Used on issues or pulls that block work from being released. label Dec 5, 2022
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

LGTM! 🚢

@vivialice
Copy link

LGTM 👌

@nerrad nerrad merged commit 8f594ed into trunk Dec 5, 2022
@nerrad nerrad deleted the add/store-info-alternate-image-and-text branch December 5, 2022 11:57
@nerrad
Copy link
Contributor Author

nerrad commented Dec 5, 2022

The failing E2E test was for something that is not affected by the code in this PR so I force merged.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
status: blocker Used on issues or pulls that block work from being released. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants