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

Author: ramonjd

packages/block-editor/src/hooks/color.js

@@ -17,10 +17,12 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  * Internal dependencies
  */
 import {
+	getColorClassName,
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
 import {
+	__experimentalGetGradientClass,
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 } from '../components/gradients';
@@ -32,7 +34,6 @@ import {
 } from './utils';
 import ColorPanel from './color-panel';
 import useSetting from '../components/use-setting';
-import { getClassnames } from '@wordpress/style-engine';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
@@ -251,53 +252,52 @@ export function addSaveProps( props, blockType, attributes ) {
 		return props;
 	}
 
+	const hasGradient = hasGradientSupport( blockType );
+
 	// I'd have preferred to avoid the "style" attribute usage here
 	const { backgroundColor, textColor, gradient, style } = attributes;
 
 	const shouldSerialize = ( feature ) =>
 		! shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY, feature );
 
-	const colorStyles = {};
-
 	// Primary color classes must come before the `has-text-color`,
 	// `has-background` and `has-link-color` classes to maintain backwards
 	// compatibility and avoid block invalidations.
-	if ( shouldSerialize( 'text' ) ) {
-		colorStyles.text = textColor
-			? `var:preset|color|${ textColor }`
-			: style?.color?.text;
-	}
+	const textClass = shouldSerialize( 'text' )
+		? getColorClassName( 'color', textColor )
+		: undefined;
 
-	if ( shouldSerialize( 'gradients' ) && hasGradientSupport( blockType ) ) {
-		colorStyles.gradient = gradient
-			? `var:preset|gradient|${ gradient }`
-			: style?.color?.gradient;
-	}
+	const gradientClass = shouldSerialize( 'gradients' )
+		? __experimentalGetGradientClass( gradient )
+		: undefined;
 
-	if ( shouldSerialize( 'background' ) ) {
-		colorStyles.background = backgroundColor
-			? `var:preset|color|${ backgroundColor }`
-			: style?.color?.background;
-	}
+	const backgroundClass = shouldSerialize( 'background' )
+		? getColorClassName( 'background-color', backgroundColor )
+		: undefined;
+
+	const serializeHasBackground =
+		shouldSerialize( 'background' ) || shouldSerialize( 'gradients' );
+	const hasBackground =
+		backgroundColor ||
+		style?.color?.background ||
+		( hasGradient && ( gradient || style?.color?.gradient ) );
 
 	const newClassName = classnames(
 		props.className,
-		...getClassnames( {
-			...style,
-			color: {
-				...colorStyles,
-			},
-			elements: {
-				...style?.elements,
-				link: {
-					color: {
-						text: shouldSerialize( 'link' )
-							? style?.elements?.link?.color
-							: undefined,
-					},
-				},
-			},
-		} )
+		textClass,
+		gradientClass,
+		{
+			// Don't apply the background class if there's a custom gradient.
+			[ backgroundClass ]:
+				( ! hasGradient || ! style?.color?.gradient ) &&
+				!! backgroundClass,
+			'has-text-color':
+				shouldSerialize( 'text' ) &&
+				( textColor || style?.color?.text ),
+			'has-background': serializeHasBackground && hasBackground,
+			'has-link-color':
+				shouldSerialize( 'link' ) && style?.elements?.link?.color,
+		}
 	);
 	props.className = newClassName ? newClassName : undefined;
 

packages/style-engine/README.md

@@ -44,18 +44,6 @@ _Returns_
 
 -   `string`: generated stylesheet.
 
-### getClassnames
-
-Returns an array of classnames.
-
-_Parameters_
-
--   _style_ `Style`: Style object.
-
-_Returns_
-
--   `string[]`: An array of classnames.
-
 ### getCSSRules
 
 Returns a JSON representation of the generated CSS rules.

packages/style-engine/src/index.ts

@@ -74,21 +74,3 @@ export function getCSSRules(
 
 	return rules;
 }
-
-/**
- * Returns an array of classnames.
- *
- * @param  style Style object.
- *
- * @return An array of classnames.
- */
-export function getClassnames( style: Style ): string[] {
-	const classNames: string[] = [];
-	styleDefinitions.forEach( ( definition: StyleDefinition ) => {
-		if ( typeof definition.getClassNames === 'function' ) {
-			classNames.push( ...definition.getClassNames( style ) );
-		}
-	} );
-
-	return [ ...new Set( classNames ) ];
-}

packages/style-engine/src/styles/color/background.ts

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import type { Style, StyleOptions } from '../../types';
-import { generateRule, getSlugFromPreset } from '../utils';
+import { generateRule } from '../utils';
 
 const background = {
 	name: 'background',
@@ -14,23 +14,6 @@ const background = {
 			'backgroundColor'
 		);
 	},
-	getClassNames: ( style: Style ) => {
-		const classNames = [];
-		const styleValue: string | undefined = style?.color?.background;
-
-		if ( styleValue ) {
-			const slug = getSlugFromPreset( styleValue, 'color' );
-			if ( slug ) {
-				classNames.push( `has-${ slug }-background-color` );
-			}
-			// Primary color classes must come before the `has-text-color`,
-			// `has-background` and `has-link-color` classes to maintain backwards
-			// compatibility and avoid block invalidations.
-			classNames.push( 'has-background' );
-		}
-
-		return classNames;
-	},
 };
 
 export default background;

packages/style-engine/src/styles/color/gradient.ts

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import type { Style, StyleOptions } from '../../types';
-import { generateRule, getSlugFromPreset } from '../utils';
+import { generateRule } from '../utils';
 
 const gradient = {
 	name: 'gradient',
@@ -14,23 +14,6 @@ const gradient = {
 			'background'
 		);
 	},
-	getClassNames: ( style: Style ) => {
-		const classNames = [];
-		const styleValue: string | number | undefined = style?.color?.gradient;
-
-		if ( styleValue ) {
-			const slug = getSlugFromPreset( styleValue, 'gradient' );
-			if ( slug ) {
-				classNames.push( `has-${ slug }-gradient-background` );
-			}
-			// Primary color classes must come before the `has-text-color`,
-			// `has-background` and `has-link-color` classes to maintain backwards
-			// compatibility and avoid block invalidations.
-			classNames.push( 'has-background' );
-		}
-
-		return classNames;
-	},
 };
 
 export default gradient;

packages/style-engine/src/styles/color/text.ts

@@ -2,29 +2,13 @@
  * Internal dependencies
  */
 import type { Style, StyleOptions } from '../../types';
-import { generateRule, getSlugFromPreset } from '../utils';
+import { generateRule } from '../utils';
 
 const text = {
 	name: 'text',
 	generate: ( style: Style, options: StyleOptions ) => {
 		return generateRule( style, options, [ 'color', 'text' ], 'color' );
 	},
-	getClassNames: ( style: Style ) => {
-		const classNames = [];
-		const styleValue: string | undefined = style?.color?.text;
-		if ( styleValue ) {
-			const slug = getSlugFromPreset( styleValue, 'color' );
-			if ( slug ) {
-				classNames.push( `has-${ slug }-color` );
-			}
-			// Primary color classes must come before the `has-text-color`,
-			// `has-background` and `has-link-color` classes to maintain backwards
-			// compatibility and avoid block invalidations.
-			classNames.push( 'has-text-color' );
-		}
-
-		return classNames;
-	},
 };
 
 export default text;

packages/style-engine/src/styles/elements/index.ts

@@ -2,13 +2,7 @@
  * Internal dependencies
  */
 import color from './color';
-import elements from './elements';
 import spacing from './spacing';
 import typography from './typography';
 
-export const styleDefinitions = [
-	...color,
-	...elements,
-	...spacing,
-	...typography,
-];
+export const styleDefinitions = [ ...color, ...spacing, ...typography ];

packages/style-engine/src/styles/index.ts

@@ -4,6 +4,17 @@
 import type { Style, StyleOptions } from '../../types';
 import { generateRule } from '../utils';
 
+const fontFamily = {
+	name: 'fontFamily',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontFamily' ],
+			'fontFamily'
+		);
+	},
+};
 const fontSize = {
 	name: 'fontSize',
 	generate: ( style: Style, options: StyleOptions ) => {
@@ -16,8 +27,20 @@ const fontSize = {
 	},
 };
 
+const fontStyle = {
+	name: 'fontStyle',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontStyle' ],
+			'fontStyle'
+		);
+	},
+};
+
 const fontWeight = {
-	name: 'fontSize',
+	name: 'fontWeight',
 	generate: ( style: Style, options: StyleOptions ) => {
 		return generateRule(
 			style,
@@ -77,7 +100,9 @@ const textTransform = {
 };
 
 export default [
+	fontFamily,
 	fontSize,
+	fontStyle,
 	fontWeight,
 	letterSpacing,
 	lineHeight,