Store Customization MVP > Identify preexisting wireframed patterns

[nefeline]

As part of the Personalize Your Store (PYS) project, we need to identify which of our pre-existing patterns are wireframed.

Wireframe: patterns that can adapt colors and fonts.
Opinionated: patterns that stick to a specific default style.

As @verofasulo highlighted:

In the assembler, we'd like to introduce wireframe patterns only. Opinionated ones are perceived as a bug in flows like Change your colors or Change your fonts and don't allow users further customization.

ref. p1687417788974599/1686911054.511929-slack-C053716F2H2

At a minimum, we need:

Page Section	Number of expected Wireframe Patterns
Header	3
Hero	2
Featured products/categories	3-4
About	1
Testimonials/review	2
Footer	3

[nefeline]

Listed below are pre-existing patterns, grouped based on the page sections provided in the description of this issue. Each pattern was evaluated and classified as "wireframed" or "opinionated."

Important Notes

• Fonts were considered "opinionated" in any patterns with hardcoded references of font-size (e.g. style="font-size:13px") or color (e.g. style="color:#ffffff;").
• If the criteria used for determining if a pattern is opinionated or not should change, please flag it in this issue so it can be updated accordingly.
• Not all patterns are listed below: for example, patterns that are just a list of blocks, such as the "Product Filters", and all "Product Query" patterns, are not part of the list.
• By the end, there's a list with the remaining patterns that, IMO, didn't fit the criteria for any of the Page Sections in this project; we can move them to the different sections if folks have different opinions and we want them to be included.

cc: @Aljullu @jarekmorawski @verofasulo

Overview

Title	Wireframed Patterns Needed	Wireframed Patterns Available	Opinionated Patterns Available	Total Patterns Available
Header	3	1	5	6
Hero	2	0	6	6
Featured products/categories	3-4	2	6	8
About	1	0	1	1
Testimonials	2	0	2	2
Footer	3	0	8	8

Page Sections

Header

Header wireframed patterns needed: 3
Header patterns available: 6 (2 of those are in dark mode)
Wireframed patterns: 1
Opinionated patterns: 5

Title	Slug	Screenshot (as implemented)	Type
Centered Header Menu with Search	woocommerce-blocks/header-centered-menu-with-search		Opinionated: custom font size and background color
Essential Header	woocommerce-blocks/header-essential		Opinionated: custom font size
Essential Header Dark	woocommerce-blocks/header-essential-dark		Opinionated: custom font size and background color
Large Header	woocommerce-blocks/header-large		Wireframed
Large Header Dark	woocommerce-blocks/header-large-dark		Opinionated: custom background color
Minimal Header	woocommerce-blocks/header-minimal		Opinionated: custom font size

Hero

Hero wireframed patterns needed: 2
Hero patterns available: 6
Wireframed patterns: 0
Opinionated patterns: 6

Title	Slug	Screenshot (as implemented)	Type
Hero Product 3 Split	woocommerce-blocks/hero-product-3-split		Opinionated: custom font size button color and background color
Hero Product Chessboard	woocommerce-blocks/hero-product-chessboard		Opinionated: custom font size
Hero Product Split	woocommerce-blocks/hero-product-split		Opinionated: custom font color, background and button color
Just Arrived Full Hero	woocommerce-blocks/just-arrived-full-hero		Opinionated: button color
Product Hero	woocommerce-blocks/product-hero		Opinionated: custom font color, background and button color
Product Hero 2 Column 2 Row	woocommerce-blocks/product-hero-2-col-2-row		Opinionated: custom font size

Featured products/categories

Featured products/categories wireframed patterns needed: 3-4
Featured products/categories patterns available: 8
Wireframed patterns: 2
Opinionated patterns: 6

Title	Slug	Screenshot (as implemented)	Type
Featured Category Cover Image	woocommerce-blocks/featured-category-cover-image		Opinionated: custom font size and font color, custom button color
Featured Category Focus	woocommerce-blocks/featured-category-focus		Opinionated: custom font color and background, and button color
Featured Category Triple	woocommerce-blocks/featured-category-triple		Opinionated: font color
Featured Products 5-Item Grid	woocommerce-blocks/featured-products-5-item-grid		Wireframed
Product Collections Featured Collection	woocommerce-blocks/product-collections-featured-collection		Opinionated: font, border and background color
Product Collections Featured Collections	woocommerce-blocks/product-collections-featured-collections		Opinionated: font size and color, background color and button color
Product Collections Newest Arrivals	woocommerce-blocks/product-collections-newest-arrivals		Opinionated: font size and border colors
Featured Products 2 Columns	woocommerce-blocks/featured-products-2-cols		Wireframed

About

'About' wireframed patterns needed: 1
'About' patterns available: 1
Wireframed patterns: 0
Opinionated patterns: 1

Based on the initial investigation, the only pattern that has an "About us" section is:

Title	Slug	Screenshot (as implemented)	Type
Alternating Image and Text	woocommerce-blocks/alt-image-and-text		Opinionated: custom font size

Testimonials

Testimonials wireframe patterns needed: 2
Testimonials patterns available: 2
Wireframed patterns: 0
Opinionated patterns: 2

Title	Slug	Screenshot (as implemented)	Type
Testimonials 3 Columns	woocommerce-blocks/testimonials-3-columns		Custom font color and size
Testimonials Single	woocommerce-blocks/testimonials-single		Custom font color and size

Footer

Footer wireframed patterns needed: 3
Footer patterns available: 8 (3 of those are in dark mode).
Wireframed patterns: 0
Opinionated patterns: 8

Title	Slug	Screenshot (as implemented)	Type
Large Footer	woocommerce-blocks/footer-large		Opinionated: custom font size
Large Footer Dark	woocommerce-blocks/footer-large-dark		Opinionated: custom font size and background color
Simple Footer	woocommerce-blocks/footer-simple		Opinionated: custom font size
Simple Footer Dark	woocommerce-blocks/footer-simple-dark		Opinionated: custom font size and background color
Footer with Simple Menu and Cart	woocommerce-blocks/footer-simple-menu-and-cart		Opinionated: custom font size
Footer with 2 Menus	woocommerce-blocks/footer-with-2-menus		Opinionated: custom font size
Footer with 2 Menus Dark	woocommerce-blocks/footer-with-2-menus-dark		Opinionated: custom font size and background color
Footer with 3 Menus	woocommerce-blocks/footer-with-3-menus		Opinionated: custom font size

Other Patterns

In this section, all remaining patterns are listed (except for patterns that are just a list of blocks, such as the Product Filters, and all Product Query patterns). The blocks listed below were not classified by type just yet ("wireframed" versus "opinionated."), but they can be if we decide we wanna have them as part of the Store Customization project.

Single Product

Title	Slug	Screenshot (as implemented)	Type
Product Details Product Listing	woocommerce-blocks/product-details-listing
Product Details Pattern	woocommerce-blocks/product-details-pattern
Product Listing with Gallery and Description	woocommerce-blocks/product-listing-with-gallery-and-description

Others

Title	Slug	Screenshot (as implemented)	Type
Banner	woocommerce-blocks/banner
Discount Banner	woocommerce-blocks/discount-banner
Discount Banner with Image	woocommerce-blocks/discount-banner-with-image
Shop by Price	woocommerce-blocks/shop-by-price
Small Discount Banner with Image	woocommerce-blocks/small-discount-banner-with-image
Product Collection Banner	woocommerce-blocks/product-collection-banner

[chrisdesrochers]

This is awesome! Should we consider "converting" all of the opinionated wireframes to wireframe patterns.

[nefeline]

Hi there @chrisdesrochers !

This is awesome! Should we consider "converting" all of the opinionated wireframes to wireframe patterns.

We have discussed this topic a couple of times already, but, AFAIK, no final decision has been made yet: we know that for the Store Customization MVP project, wireframed patterns are required, but at the same time, for WooCommerce Blocks, the design decision was to stick with opinionated styles. It would be great to get a confirmation from @jarekmorawski and @shaunandrews on this.

[jarekmorawski]

I think we've decided to strip the patterns we plan to use in the assembler of all embedded styles (context and confirmation from the core team: pdnLyh-3Xp#comment-2756.

Here's the list of patterns we plan to use. It's okay to start working on them, and while the list may change a bit in the coming days, it won't be anything drastic. All patterns not included in this list will remain opinionated for now.

Headers

• Essential Header
• Centered Header Menu with Search
• Minimal Header

Hero

• Cover Image with CTA (Dotcom)
• Hero Product Split
• Heading And Video (Dotcom)

Featured category

• Featured Category Triple
• Featured Category Cover Image

**Featured products•

• Featured Products 5-Item Grid
• New pattern: F5AAbRJOGbTeEweXPFtHgf-fi-2283-33335&mode=design&t=ad8pj45oCZOaRji4-4
• Product Collections Newest Arrivals

Single product

• Product Hero
• Hero Product 3 Split
• Product Feature with Buy Button (Dotcom)

Testimonials

• Testimonials 3 Columns
• Quotes (Dotcom)
• Testimonials Single

About

• 3 Column Testimonials (Dotcom)
• Alternating Image and Text
• Three Columns with Images and Text (Dotcom)
• About me (Dotcom)
• Call to Action (Dotcom)
• Simple Two Column Layout (Dotcom)

Social

• New pattern: F5AAbRJOGbTeEweXPFtHgf-fi-2245-36108&mode=design&t=GJPFLlTD5wu1RbC2-4

Contact

• Contact (Dotcom)
• Contact with map on the left (Dotcom)

Footer

• Footer with 3 Menus
• Large Footer
• Footer with Simple Menu and Cart
• Footer with Newsletter Subscription Form (Dotcom)

Let me know if you have any questions!

[nefeline]

Alright, thanks for clarifying and providing the list @jarekmorawski! cc: @Aljullu @danielwrobert @tjcafferkey

[nefeline]

@jarekmorawski do you mind updating the links shared in your previous comment over here? Both @Aljullu and I are unable to access them. Thanks!

[jarekmorawski]

I just did, and the links are correct. Figma has recently changed the link structure to include the viewing mode (design/dev), so the shorthand may not work properly. Here's a simpler link to the page with all designs. New patterns are marked in green.

F5AAbRJOGbTeEweXPFtHgf-fi-2229-32566

[nefeline]

I just did, and the links are correct. Figma has recently changed the link structure to include the viewing mode (design/dev), so the shorthand may not work properly. Here's a simpler link to the page with all designs. New patterns are marked in green.

🤔 Tampermonkey is still not picking up any of these links for some reason: both for Figma and the link to the conversation with the core team. I'll ping you on Slack to get them :)

[nefeline]

Sharing here for our reference:

• Design - whole page: F5AAbRJOGbTeEweXPFtHgf-fi-2229_32566
• Design - new pattern (products): F5AAbRJOGbTeEweXPFtHgf-fi-2283_33335
• Design - new pattern (social): F5AAbRJOGbTeEweXPFtHgf-fi-2245_36108
• link to the core team discussion: pdnLyh-3Xp-p2#comment-2756

[nefeline]

@chrisdesrochers @jarekmorawski FYI: We have finished wireframing all patterns and implementing the new ones according to the request made here: #10086 (comment): the only exception is the Featured Products 5-Item Grid pattern that is still in code review, but should be merged by EOD today or early next week.

All set for a round of design review :)

[chrisdesrochers]

Great work @nefeline & @jarekmorawski. Super fast turnaround. Thanks for the update.

[chrisdesrochers]

@shaunandrews When you were out I brought up the following comment:

This is awesome! Should we consider "converting" all of the opinionated wireframes to wireframe patterns.

Thoughts? Seems like the direction we'd want to head right?

[nefeline]

Hi folks! I'm marking this issue as complete since the goal here was to identify preexisting wireframed patterns and this task is complete. For any additional design feedback, feel free to add them on: #10458