Style Engine: add typography and color to frontend

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;
 	} );
 

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' ],

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 );

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;

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;

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;

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 ];

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;

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 = '--';

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 ];

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 ];

packages/style-engine/src/styles/margin.ts → 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',

packages/style-engine/src/styles/padding.ts → 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',

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,
+];