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 <[email protected]>

* 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 <[email protected]>

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