From 1eee4656d5cab0951944badea704442100b0e9b8 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Wed, 18 May 2022 12:58:04 +1000
Subject: [PATCH] Style Engine: add typography and color to frontend (#40665)

* Returning inline styles by default.

* Adding some dev notes for later brain

* Adding a couple of typography styles
Updating tests
Refactor styles directory

* Adding text decoration
Fixing camel case style prop name

* Adding typography properties letterSpacing.ts and textTransform.ts

* Adding color.text and typography.fontWeight

* Refactor generic rule generator

* Experiment: adding classname generator

* Fixing bonkers typos because I copy and paste like I just don't care. It's my PR and I'll fail if I want to.
Preferencing `uniq` for new Set() spread
Updating tests.

* Enable style engine for backgroundColor

* Regenerate pullquote fixture since the style engine changes the order of the inline styles rules. Nothing major.

* Add constants
Updated inline docs
Making the generateRule signature the same as generateBoxRules

* Update packages/style-engine/src/index.ts

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>

* Refactoring generate method to split inline and selector logic
Removing styles color text support because we haven't yet come up a with a way to deal with link color styles for elements. We need to reconcile the way we generate text colors with link css var colors and the logic in hooks/style.js
Add constants
Updated inline docs
Making the generateRule signature the same as generateBoxRules

* Remove TODO comment. It's something we can do in the future, but it doesn't need to pollute the codebase.

* Reinstating color and now parsing style value for `var:`, whereby we'd return CSS vars all the time.

* A bit of defensive coding to check for a string type

* Testing out generating block color classnames using the style engine.

* Also passing the style color value to `getClassnames` so it will add the generic class name if required.
Regenerating fixtures due to the re-ordering of color classnames.

* Reverting `getClassnames`. It's a bigger change and should be looked at in another PR.

* Fix typo in fixture

* Flag fontStyle with useEngine: true so that it uses the style engine.
Remove the handler for fontFamily to reflect the current situation in the editor whereby no custom fontFamily style values are expected.
Removed unused function `getSlugFromPreset`
Added tests for elements.link.color.text preset style values.

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
---
 packages/block-editor/src/hooks/style.js      |   5 +-
 packages/blocks/src/api/constants.js          |   9 ++
 .../global-styles/use-global-styles-output.js |   5 +-
 packages/style-engine/src/index.ts            |  14 ++-
 .../src/styles/color/background.ts            |  19 ++++
 .../style-engine/src/styles/color/gradient.ts |  19 ++++
 .../style-engine/src/styles/color/index.ts    |   8 ++
 .../style-engine/src/styles/color/text.ts     |  14 +++
 packages/style-engine/src/styles/constants.ts |   3 +
 packages/style-engine/src/styles/index.ts     |   7 +-
 .../style-engine/src/styles/spacing/index.ts  |   7 ++
 .../src/styles/{ => spacing}/margin.ts        |   4 +-
 .../src/styles/{ => spacing}/padding.ts       |   4 +-
 .../src/styles/typography/index.ts            |  99 +++++++++++++++++
 packages/style-engine/src/styles/utils.ts     |  69 +++++++++++-
 packages/style-engine/src/test/index.js       | 103 +++++++++++++++++-
 packages/style-engine/src/types.ts            |  15 ++-
 .../core__button__squared.serialized.html     |   2 +-
 ...__pullquote__custom-colors.serialized.html |   2 +-
 19 files changed, 385 insertions(+), 23 deletions(-)
 create mode 100644 packages/style-engine/src/styles/color/background.ts
 create mode 100644 packages/style-engine/src/styles/color/gradient.ts
 create mode 100644 packages/style-engine/src/styles/color/index.ts
 create mode 100644 packages/style-engine/src/styles/color/text.ts
 create mode 100644 packages/style-engine/src/styles/constants.ts
 create mode 100644 packages/style-engine/src/styles/spacing/index.ts
 rename packages/style-engine/src/styles/{ => spacing}/margin.ts (71%)
 rename packages/style-engine/src/styles/{ => spacing}/padding.ts (71%)
 create mode 100644 packages/style-engine/src/styles/typography/index.ts

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index d8b8ad6771a07a..400ebd0a84263f 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -97,11 +97,8 @@ export function getInlineStyles( styles = {} ) {
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( styles, { selector: 'self' } );
+	const extraRules = getCSSRules( styles );
 	extraRules.forEach( ( rule ) => {
-		if ( rule.selector !== 'self' ) {
-			throw "This style can't be added as inline style";
-		}
 		output[ rule.key ] = rule.value;
 	} );
 
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index c583b53d96c0a5..a5ed771d72d2fa 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -28,6 +28,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'color', 'background' ],
 		support: [ 'color', 'background' ],
 		requiresOptOut: true,
+		useEngine: true,
 	},
 	borderColor: {
 		value: [ 'border', 'color' ],
@@ -103,6 +104,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'color', 'text' ],
 		support: [ 'color', 'text' ],
 		requiresOptOut: true,
+		useEngine: true,
 	},
 	filter: {
 		value: [ 'filter', 'duotone' ],
@@ -119,18 +121,22 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	fontSize: {
 		value: [ 'typography', 'fontSize' ],
 		support: [ 'typography', 'fontSize' ],
+		useEngine: true,
 	},
 	fontStyle: {
 		value: [ 'typography', 'fontStyle' ],
 		support: [ 'typography', '__experimentalFontStyle' ],
+		useEngine: true,
 	},
 	fontWeight: {
 		value: [ 'typography', 'fontWeight' ],
 		support: [ 'typography', '__experimentalFontWeight' ],
+		useEngine: true,
 	},
 	lineHeight: {
 		value: [ 'typography', 'lineHeight' ],
 		support: [ 'typography', 'lineHeight' ],
+		useEngine: true,
 	},
 	margin: {
 		value: [ 'spacing', 'margin' ],
@@ -157,14 +163,17 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	textDecoration: {
 		value: [ 'typography', 'textDecoration' ],
 		support: [ 'typography', '__experimentalTextDecoration' ],
+		useEngine: true,
 	},
 	textTransform: {
 		value: [ 'typography', 'textTransform' ],
 		support: [ 'typography', '__experimentalTextTransform' ],
+		useEngine: true,
 	},
 	letterSpacing: {
 		value: [ 'typography', 'letterSpacing' ],
 		support: [ 'typography', '__experimentalLetterSpacing' ],
+		useEngine: true,
 	},
 	'--wp--style--block-gap': {
 		value: [ 'spacing', 'blockGap' ],
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index e477faa83a024c..0be47a7000b539 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -220,11 +220,8 @@ function getStylesDeclarations( blockStyles = {} ) {
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( blockStyles, { selector: 'self' } );
+	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
-		if ( rule.selector !== 'self' ) {
-			throw "This style can't be added as inline style";
-		}
 		const cssProperty = rule.key.startsWith( '--' )
 			? rule.key
 			: kebabCase( rule.key );
diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts
index 8117e27892140e..c78dd753834b6d 100644
--- a/packages/style-engine/src/index.ts
+++ b/packages/style-engine/src/index.ts
@@ -24,6 +24,16 @@ import { styleDefinitions } from './styles';
  */
 export function generate( style: Style, options: StyleOptions ): string {
 	const rules = getCSSRules( style, options );
+
+	// If no selector is provided, treat generated rules as inline styles to be returned as a single string.
+	if ( ! options?.selector ) {
+		const inlineRules: string[] = [];
+		rules.forEach( ( rule ) => {
+			inlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );
+		} );
+		return inlineRules.join( ' ' );
+	}
+
 	const groupedRules = groupBy( rules, 'selector' );
 	const selectorRules = Object.keys( groupedRules ).reduce(
 		( acc: string[], subSelector: string ) => {
@@ -57,7 +67,9 @@ export function getCSSRules(
 ): GeneratedCSSRule[] {
 	const rules: GeneratedCSSRule[] = [];
 	styleDefinitions.forEach( ( definition: StyleDefinition ) => {
-		rules.push( ...definition.generate( style, options ) );
+		if ( typeof definition.generate === 'function' ) {
+			rules.push( ...definition.generate( style, options ) );
+		}
 	} );
 
 	return rules;
diff --git a/packages/style-engine/src/styles/color/background.ts b/packages/style-engine/src/styles/color/background.ts
new file mode 100644
index 00000000000000..0df422bae7d58a
--- /dev/null
+++ b/packages/style-engine/src/styles/color/background.ts
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const background = {
+	name: 'background',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'color', 'background' ],
+			'backgroundColor'
+		);
+	},
+};
+
+export default background;
diff --git a/packages/style-engine/src/styles/color/gradient.ts b/packages/style-engine/src/styles/color/gradient.ts
new file mode 100644
index 00000000000000..4cc0aecffbe632
--- /dev/null
+++ b/packages/style-engine/src/styles/color/gradient.ts
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const gradient = {
+	name: 'gradient',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'color', 'gradient' ],
+			'background'
+		);
+	},
+};
+
+export default gradient;
diff --git a/packages/style-engine/src/styles/color/index.ts b/packages/style-engine/src/styles/color/index.ts
new file mode 100644
index 00000000000000..15db28d726a806
--- /dev/null
+++ b/packages/style-engine/src/styles/color/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import background from './background';
+import gradient from './gradient';
+import text from './text';
+
+export default [ text, gradient, background ];
diff --git a/packages/style-engine/src/styles/color/text.ts b/packages/style-engine/src/styles/color/text.ts
new file mode 100644
index 00000000000000..e1a6bb3d99b5eb
--- /dev/null
+++ b/packages/style-engine/src/styles/color/text.ts
@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const text = {
+	name: 'text',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule( style, options, [ 'color', 'text' ], 'color' );
+	},
+};
+
+export default text;
diff --git a/packages/style-engine/src/styles/constants.ts b/packages/style-engine/src/styles/constants.ts
new file mode 100644
index 00000000000000..9df0cf255568e8
--- /dev/null
+++ b/packages/style-engine/src/styles/constants.ts
@@ -0,0 +1,3 @@
+export const VARIABLE_REFERENCE_PREFIX = 'var:';
+export const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+export const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts
index f7c87a8c7a29b3..79f1c43d8d33f7 100644
--- a/packages/style-engine/src/styles/index.ts
+++ b/packages/style-engine/src/styles/index.ts
@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import padding from './padding';
-import margin from './margin';
+import color from './color';
+import spacing from './spacing';
+import typography from './typography';
 
-export const styleDefinitions = [ margin, padding ];
+export const styleDefinitions = [ ...color, ...spacing, ...typography ];
diff --git a/packages/style-engine/src/styles/spacing/index.ts b/packages/style-engine/src/styles/spacing/index.ts
new file mode 100644
index 00000000000000..4f6121951b0bf2
--- /dev/null
+++ b/packages/style-engine/src/styles/spacing/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import padding from './padding';
+import margin from './margin';
+
+export default [ margin, padding ];
diff --git a/packages/style-engine/src/styles/margin.ts b/packages/style-engine/src/styles/spacing/margin.ts
similarity index 71%
rename from packages/style-engine/src/styles/margin.ts
rename to packages/style-engine/src/styles/spacing/margin.ts
index 2ead5da23f1e7b..c8492c378954fd 100644
--- a/packages/style-engine/src/styles/margin.ts
+++ b/packages/style-engine/src/styles/spacing/margin.ts
@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { Style, StyleOptions } from '../types';
-import { generateBoxRules } from './utils';
+import type { Style, StyleOptions } from '../../types';
+import { generateBoxRules } from '../utils';
 
 const margin = {
 	name: 'margin',
diff --git a/packages/style-engine/src/styles/padding.ts b/packages/style-engine/src/styles/spacing/padding.ts
similarity index 71%
rename from packages/style-engine/src/styles/padding.ts
rename to packages/style-engine/src/styles/spacing/padding.ts
index 94b268de35604a..a5a3227030e073 100644
--- a/packages/style-engine/src/styles/padding.ts
+++ b/packages/style-engine/src/styles/spacing/padding.ts
@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { Style, StyleOptions } from '../types';
-import { generateBoxRules } from './utils';
+import type { Style, StyleOptions } from '../../types';
+import { generateBoxRules } from '../utils';
 
 const padding = {
 	name: 'padding',
diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts
new file mode 100644
index 00000000000000..70e32b23cafe73
--- /dev/null
+++ b/packages/style-engine/src/styles/typography/index.ts
@@ -0,0 +1,99 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const fontSize = {
+	name: 'fontSize',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontSize' ],
+			'fontSize'
+		);
+	},
+};
+
+const fontStyle = {
+	name: 'fontStyle',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontStyle' ],
+			'fontStyle'
+		);
+	},
+};
+
+const fontWeight = {
+	name: 'fontWeight',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontWeight' ],
+			'fontWeight'
+		);
+	},
+};
+
+const letterSpacing = {
+	name: 'letterSpacing',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'letterSpacing' ],
+			'letterSpacing'
+		);
+	},
+};
+
+const lineHeight = {
+	name: 'letterSpacing',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'lineHeight' ],
+			'lineHeight'
+		);
+	},
+};
+
+const textDecoration = {
+	name: 'textDecoration',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'textDecoration' ],
+			'textDecoration'
+		);
+	},
+};
+
+const textTransform = {
+	name: 'textTransform',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'textTransform' ],
+			'textTransform'
+		);
+	},
+};
+
+export default [
+	fontSize,
+	fontStyle,
+	fontWeight,
+	letterSpacing,
+	lineHeight,
+	textDecoration,
+	textTransform,
+];
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 5455901e49d1a6..928d923c86821f 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -7,7 +7,51 @@ import { get, upperFirst } from 'lodash';
  * Internal dependencies
  */
 import type { GeneratedCSSRule, Style, Box, StyleOptions } from '../types';
+import {
+	VARIABLE_REFERENCE_PREFIX,
+	VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
+	VARIABLE_PATH_SEPARATOR_TOKEN_STYLE,
+} from './constants';
 
+/**
+ * Returns a JSON representation of the generated CSS rules.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ * @param  path    An array of strings representing the path to the style value in the style object.
+ * @param  ruleKey A CSS property key.
+ *
+ * @return GeneratedCSSRule[] CSS rules.
+ */
+export function generateRule(
+	style: Style,
+	options: StyleOptions,
+	path: string[],
+	ruleKey: string
+) {
+	const styleValue: string | undefined = get( style, path );
+
+	return styleValue
+		? [
+				{
+					selector: options?.selector,
+					key: ruleKey,
+					value: getCSSVarFromStyleValue( styleValue ),
+				},
+		  ]
+		: [];
+}
+
+/**
+ * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
+ *
+ * @param  style   Style object.
+ * @param  options Options object with settings to adjust how the styles are generated.
+ * @param  path    An array of strings representing the path to the style value in the style object.
+ * @param  ruleKey A CSS property key.
+ *
+ * @return GeneratedCSSRule[] CSS rules.
+ */
 export function generateBoxRules(
 	style: Style,
 	options: StyleOptions,
@@ -22,7 +66,7 @@ export function generateBoxRules(
 	const rules: GeneratedCSSRule[] = [];
 	if ( typeof boxStyle === 'string' ) {
 		rules.push( {
-			selector: options.selector,
+			selector: options?.selector,
 			key: ruleKey,
 			value: boxStyle,
 		} );
@@ -32,7 +76,7 @@ export function generateBoxRules(
 				const value: string | undefined = get( boxStyle, [ side ] );
 				if ( value ) {
 					acc.push( {
-						selector: options.selector,
+						selector: options?.selector,
 						key: `${ ruleKey }${ upperFirst( side ) }`,
 						value,
 					} );
@@ -46,3 +90,24 @@ export function generateBoxRules(
 
 	return rules;
 }
+
+/**
+ * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
+ *
+ * @param  styleValue A raw style value.
+ *
+ * @return string A CSS var value.
+ */
+export function getCSSVarFromStyleValue( styleValue: string ): string {
+	if (
+		typeof styleValue === 'string' &&
+		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
+	) {
+		const variable = styleValue
+			.slice( VARIABLE_REFERENCE_PREFIX.length )
+			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
+			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
+		return `var(--wp--${ variable })`;
+	}
+	return styleValue;
+}
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index bf1ab73566f52d..ad2acd401056b0 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -8,7 +8,23 @@ describe( 'generate', () => {
 		expect( generate( {}, '.some-selector' ) ).toEqual( '' );
 	} );
 
-	it( 'should generate spacing styles', () => {
+	it( 'should generate inline styles where there is no selector', () => {
+		expect(
+			generate( {
+				spacing: { padding: '10px', margin: '12px' },
+				color: {
+					text: '#f1f1f1',
+					background: '#222222',
+					gradient:
+						'linear-gradient(135deg,rgb(6,147,227) 0%,rgb(143,47,47) 49%,rgb(155,81,224) 100%)',
+				},
+			} )
+		).toEqual(
+			'color: #f1f1f1; background: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(143,47,47) 49%,rgb(155,81,224) 100%); background-color: #222222; margin: 12px; padding: 10px;'
+		);
+	} );
+
+	it( 'should generate styles with an optional selector', () => {
 		expect(
 			generate(
 				{
@@ -23,6 +39,10 @@ describe( 'generate', () => {
 		expect(
 			generate(
 				{
+					color: {
+						text: '#cccccc',
+						background: '#111111',
+					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
 						margin: {
@@ -32,15 +52,35 @@ describe( 'generate', () => {
 							left: '14px',
 						},
 					},
+					typography: {
+						fontSize: '2.2rem',
+						fontStyle: 'italic',
+						fontWeight: '800',
+						fontFamily: "'Helvetica Neue',sans-serif",
+						lineHeight: '3.3',
+						textDecoration: 'line-through',
+						letterSpacing: '12px',
+						textTransform: 'uppercase',
+					},
 				},
 				{
 					selector: '.some-selector',
 				}
 			)
 		).toEqual(
-			'.some-selector { margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; }'
+			'.some-selector { color: #cccccc; background-color: #111111; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }'
 		);
 	} );
+
+	it( 'should parse preset values (use for elements.link.color.text)', () => {
+		expect(
+			generate( {
+				color: {
+					text: 'var:preset|color|ham-sandwich',
+				},
+			} )
+		).toEqual( 'color: var(--wp--preset--color--ham-sandwich);' );
+	} );
 } );
 
 describe( 'getCSSRules', () => {
@@ -96,16 +136,40 @@ describe( 'getCSSRules', () => {
 		expect(
 			getCSSRules(
 				{
+					color: {
+						text: '#dddddd',
+						background: '#555555',
+					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
 						margin: { right: '2em', left: '1vw' },
 					},
+					typography: {
+						fontSize: '2.2rem',
+						fontStyle: 'italic',
+						fontWeight: '800',
+						fontFamily: "'Helvetica Neue',sans-serif",
+						lineHeight: '3.3',
+						textDecoration: 'line-through',
+						letterSpacing: '12px',
+						textTransform: 'uppercase',
+					},
 				},
 				{
 					selector: '.some-selector',
 				}
 			)
 		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'color',
+				value: '#dddddd',
+			},
+			{
+				selector: '.some-selector',
+				key: 'backgroundColor',
+				value: '#555555',
+			},
 			{
 				selector: '.some-selector',
 				key: 'marginRight',
@@ -126,6 +190,41 @@ describe( 'getCSSRules', () => {
 				key: 'paddingBottom',
 				value: '5px',
 			},
+			{
+				key: 'fontSize',
+				selector: '.some-selector',
+				value: '2.2rem',
+			},
+			{
+				key: 'fontStyle',
+				selector: '.some-selector',
+				value: 'italic',
+			},
+			{
+				key: 'fontWeight',
+				selector: '.some-selector',
+				value: '800',
+			},
+			{
+				key: 'letterSpacing',
+				selector: '.some-selector',
+				value: '12px',
+			},
+			{
+				key: 'lineHeight',
+				selector: '.some-selector',
+				value: '3.3',
+			},
+			{
+				key: 'textDecoration',
+				selector: '.some-selector',
+				value: 'line-through',
+			},
+			{
+				key: 'textTransform',
+				selector: '.some-selector',
+				value: 'uppercase',
+			},
 		] );
 	} );
 } );
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 48bd9a0d8e5c6e..9f60b1b0f6fc03 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -26,6 +26,18 @@ export interface Style {
 		textDecoration?: CSSProperties[ 'textDecoration' ];
 		textTransform?: CSSProperties[ 'textTransform' ];
 	};
+	color?: {
+		text?: CSSProperties[ 'color' ];
+		background?: CSSProperties[ 'backgroundColor' ];
+		gradient?: CSSProperties[ 'background' ];
+	};
+	elements?: {
+		link?: {
+			color?: {
+				text?: CSSProperties[ 'color' ];
+			};
+		};
+	};
 }
 
 export type StyleOptions = {
@@ -47,5 +59,6 @@ export type GeneratedCSSRule = {
 
 export interface StyleDefinition {
 	name: string;
-	generate: ( style: Style, options: StyleOptions ) => GeneratedCSSRule[];
+	generate?: ( style: Style, options: StyleOptions ) => GeneratedCSSRule[];
+	getClassNames?: ( style: Style ) => string[];
 }
diff --git a/test/integration/fixtures/blocks/core__button__squared.serialized.html b/test/integration/fixtures/blocks/core__button__squared.serialized.html
index 29e7fed15a510c..ec83bb66b4971b 100644
--- a/test/integration/fixtures/blocks/core__button__squared.serialized.html
+++ b/test/integration/fixtures/blocks/core__button__squared.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"style":{"border":{"radius":0},"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="color:#1b9b6c;background-color:#aa5a20">My button</a></div>
 <!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__pullquote__custom-colors.serialized.html b/test/integration/fixtures/blocks/core__pullquote__custom-colors.serialized.html
index 3427b0ff08798b..d6b9f285fdecb3 100644
--- a/test/integration/fixtures/blocks/core__pullquote__custom-colors.serialized.html
+++ b/test/integration/fixtures/blocks/core__pullquote__custom-colors.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:pullquote {"textAlign":"right","className":"is-style-default","style":{"color":{"background":"#3486aa","text":"#ffefef"},"border":{"color":"#045679"}}} -->
-<figure class="wp-block-pullquote has-text-align-right is-style-default has-border-color has-text-color has-background" style="background-color:#3486aa;border-color:#045679;color:#ffefef"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>
+<figure class="wp-block-pullquote has-text-align-right is-style-default has-border-color has-text-color has-background" style="border-color:#045679;color:#ffefef;background-color:#3486aa"><blockquote><p>pullquote</p><cite>citation</cite></blockquote></figure>
 <!-- /wp:pullquote -->