Product SKU - Design Tools

[kmanijak]

Steps to reproduce

1. Go to Editor
2. Add Products block
3. Add Product SKU block as an inner block if not included already
4. Change Global Styles -> [CATEGORY] -> [PROPERTY] (whatever is listed below, so you can check if Product Template styles overwrite the Global Styles, e.g. Global Styles -> Typography -> Text -> Decoration)
5. Change Product Template styles -> [CATEGORY] -> [PROPERTY] (whatever is listed below, so you can check if Product Element styles overwrite the Global Styles and Product Template styles, e.g. Product Template -> Color -> Text -> Decoration)
6. Focus on Product SKU block and change following styles

Typography

• Font
• Size
• Appearance
• Line height
• Letter Spacing
• Decoration
• Letter Case
  Expected: Design controls are available and overwrite Global Styles AND Product Template styles
  Actual: Design controls are not available

Color

• Text
• Background
  Expected: Design controls are available and overwrite Global Styles AND Product Template styles
  Actual: Design controls are not available

⚠️ Remember

• Check all of the above in Editor and Frontend!
• Styles composition may be fragile and the issue may evolve. Please check if block reacts to all the other Global Styles
• For items we are inheriting from Gutenberg that seem inconsistent and/or have room for improvement, we should raise an upstream Issue or PR and avoid making localized changes that bring inconsistency with Gutenberg.
• Reflect the newest state of styles support in the Spreadsheet after finishing this task

---

Note: Product SKU reacts to global styles and Product Template styles (parent block). There's no reason it should not have the design controls on its own.

[kmanijak]

Addressed in #8913