Product Elements: Make sure design tools and global styles work well with element blocks

[sunyatasattva]

This issue represents a research spike to make sure that all design tools available in the inspector controls and global styles work correctly for Product Elements blocks within the context of the “Products (Beta)” block.

If an issue is small enough, please do fix it in the context of this issue, otherwise, feel free to create another issue and add it to the Epic (#6793).

[kmanijak]

Approach

I approach the research by checking the styles application on a three levels:

• design controls on a Product Elements
• design controls of Product Template (should be inherited by Product Elements)
• global styles.

Design controls on a Product Elements level

I didn't find any problems with style applications here if the element allows changing some styles.

However, there's a quite big inconsistency in what particular elements allow to change, e.g.

Sale badge

• Product Image - there's a Typography section that affects the "Sale" badge. It only allows changing the Size
• On Sale badge - looks exactly the same as a badge in Product Image, but at the same time allows changing Size, Font, Appearance, Line Height, Letter Spacing, Decoration, and Letter Case
• At the same time, both of the above can be influenced by the whole set of Typography settings from the Product Template level

Suggestion: even though design controls are working correctly, seems like such inconsistency can be an improvement point.

Appearance vs Font weight

• the majority of the Product Elements have Appearance option which allows choosing the font variants: font weight and/or italic
• Add to Cart button has the similar option under the Font weight name with the only difference that it doesn't offer the italic variants.

Suggestion: once again, there's no bug per se, but the options could be aligned.

Product SKU

• Product SKU doesn't expose any of the design controls
• at the same time it can be styled from the Product Template level (it reacts to nearly every option changed there)

Suggestion: expose design controls on the element level for consistency.

There are more examples like that, which I believe are important to address for a better UX, however, before proceeding and addressing or creating issues for them, I'd like to consult the general guidelines:

• are these types of inconsistencies a subject of this issue
• maybe there were design decisions behind them and they should not be touched
  cc: @imanish003, @tjcafferkey ☝️

Design controls of Product Template (should be inherited by Product Elements)

There are a number of bugs in this area, which will be assessed case by case (either addressed or issue created). They are gathered in the table below (x means there's some bug in the application of the styles).

	Typography							Color
Product Element	Size	Font	Appearance	Line Height	Letter Spacing	Decoration	Letter Case	Text	Background	Link
Product Image	x					x	x
Product Title	x	x	x	x
Product Price
Product SKU							x
Product Summary
Product Rating							x
Product Stock Indicator
On sale badge			x			x	x	x
Add to Cart Button	x				x		x	x

Global styles

TBC - the same exercise as above will be performed

[imanish003]

Hey, @kmanijak, I appreciate the thorough research you conducted on design controls. It is very well-written and organized. 🙌🏻

Suggestion: even though design controls are working correctly, seems like such inconsistency can be an improvement point.

Just to confirm, are you proposing that Product Image & On Sale badge should have the same Typography settings for consistency?

At the same time, both of the above can be influenced by the whole set of Typography settings from the Product Template level

To me, it's kind of feature because user can change Typography settings for both from Product Template level. Also, User can change Typography settings individually on Product Image & On Sale badge which will override the settings from Product Template level. What do you think?

Suggestion: once again, there's no bug per se, but the options could be aligned.

It makes sense to me 🤝

Suggestion: expose design controls on the element level for consistency.

Agreed that we should also have controls on the element level.

are these types of inconsistencies a subject of this issue

As per my discussion with @sunyatasattva, the aim of this issue is to make sure all product elements have the correct design tools, fix small things, and report the rest. AFAIK These inconsistencies fall into the scope of this task but I am not 100% sure if we should prioritize these over other tasks. Maybe we can fix inconsistencies that are quick to fix & report the rest.

maybe there were design decisions behind them, and they should not be touched

I am not sure about this. Maybe @sunyatasattva can comment on this?

[tjcafferkey]

Firstly I think you've done a great job at highlighting the inconsistencies between all the blocks/product elements and asked some pretty important questions @kmanijak! On top of that, the format you've communicated them in is so easy to digest!

I personally think this deserves some input from UX/design to help guide us in how to address these inconsistencies.

As for my two cents:

Sale Badge

Suggestion: even though design controls are working correctly, seems like such inconsistency can be an improvement point.

Regarding sale badges you've highlighted some good points around some elements such as the Sale Badge. Ideally anything that can be styled on the Sale Badge block should be available on the sale badge within the Product Image because from a users perspective they are the same thing and serve the same purpose, so should be able to be customised in the same way.

Appearance vs Font weight

Suggestion: once again, there's no bug per se, but the options could be aligned.

Regarding typography settings, these should be consistent across all blocks with typography available to allow the user that granular control over how their typography looks, whether thats on the product element block, product template block or both.

I don't see a use case for where we would only make some typography settings available in some product element blocks, and not others? Open to being wrong here.

Product SKU

Suggestion: expose design controls on the element level for consistency.

Again, I think my above point covers this in terms of typography settings. Especially if it's reactive to the Product Template settings.

Product Template

I think another point worth raising is why does the Product Template offer only font size settings and not style/weight/color etc? To us working within the detail of the block we might easily be able to explain this away but from a users point of view it is quite confusing.

Again, this is valuable information you've highlighted as this kind of flexibility and customisation is what we want to offer our merchants/users and will make the difference in terms of user experience! Thanks again @kmanijak and @imanish003!

As per my discussion with @sunyatasattva, the aim of this issue is to make sure all product elements have the correct design tools, fix small things, and report the rest. AFAIK These inconsistencies fall into the scope of this task but I am not 100% sure if we should prioritize these over other tasks. Maybe we can fix inconsistencies that are quick to fix & report the rest.

I agree with this, lets work out what is the most important to fix based on the time and resource we have.

[kmanijak]

Thank you both for the responses! 🙌 I see we all agree that consistency and flexibility for merchants are important, so I'll keep that in mind when working further on this task.

Product Template
think another point worth raising is why does the Product Template offer only font size settings and not style/weight/color etc?

Apologies if some areas of my post were misleading. To clarify this one, Product Template allows changing the whole set of Typography and Color settings (as per screenshot below), but many Product Elements don't react to these changes. Also, I realized that change applied in the Editor doesn't mean it works in the frontend 😅 so that extends the research a bit. But I believe it will bring a lot of value to recognize the gaps and untangle these settings!

[tjcafferkey]

To clarify this one, Product Template allows changing the whole set of Typography and Color settings (as per screenshot below), but many Product Elements don't react to these changes.

My bad, by default the product block only exposes font size unless I enable the others hidden behind the Typography menu of the block, probably another issue to address maybe.

[kmanijak]

My bad, by default the product block only exposes font size unless I enable the others hidden behind the Typography menu of the block, probably another issue to address maybe.

Oh, I assumed the options are hidden by design 🤔 but I cannot find a good reason for that. I didn't consider it an issue until you pointed it out, I'll raise an issue for that as well! 🙌

[kmanijak]

Testing approach

The approach was the following. Each block was checked:

• if they support Global Styles on a theme level
• with Global Styles applied if Product Template styles overwrite the above
• with Product Template styles applied if Product Elements styles overwrite the above
  It can be summed up as: Global Styles > Block styles > Inner Block styles. Blocks have been assessed visually in Editor and on the Frontend.

Outcomes - spreadsheet

The outcome of the research has been gathered in a Google Spreadsheet

Outcomes - epic and issues

As a result, I created a bunch of issues. To avoid polluting the main Products epic, I decided to create a new one that would gather all of them: woocommerce/woocommerce#42443

There are 23 issues, divided into three “categories”. Each issue is per single Product Elements

• Global Styles (5 issues) – these issues cover the lack of support for Global Styles on a theme level or incorrect behavior of such.
• Product Template styles (9 issues) – these issues cover lack of support for Product Template styles or incorrect behavior of such (that includes the inability to overwrite Global Styles).
• Design Tools (9 issues) – these issues cover incorrect behavior of Product Elements’ Design Tools (that includes the inability to overwrite Global Styles) AND lack of Design Tools, especially if the block can be styled by Global Styles.
  Here’s the example for the Product Title block. You can see the issues follow the hierarchy and list all of the problems at the specific level. All the other issues can be browsed on the epic level.

Issues cover Colors and Typography options. They don’t cover Dimensions (Margin, Padding) and Border (Width, Radius), which can be improved as a next step.

Ref: pdnLyh-3kh-p2