Absorb variation logic into addGeneratedClassName

packages/block-editor/src/hooks/generated-class-name.js

@@ -2,12 +2,18 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { getBlockDefaultClassName } from '@wordpress/blocks';
+import {
+	getBlockDefaultClassName,
+	getActiveBlockVariation,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { hasBlockClassNameSupport } from '../hooks/supports';
+import {
+	hasBlockClassNameSupport,
+	hasVariationClassNameSupport,
+} from '../hooks/supports';
 
 /**
  * Override props assigned to save component to inject generated className if
@@ -16,30 +22,45 @@ import { hasBlockClassNameSupport } from '../hooks/supports';
  *
  * @param {Object} extraProps Additional props applied to save element.
  * @param {Object} blockType  Block type.
+ * @param {Object} attributes Block attributes.
  *
  * @return {Object} Filtered props applied to save element.
  */
-export function addGeneratedClassName( extraProps, blockType ) {
-	// Adding the generated className.
+export function addGeneratedClassName( extraProps, blockType, attributes ) {
+	const generatedClassNames = [];
 	if ( hasBlockClassNameSupport( blockType ) ) {
-		if ( typeof extraProps.className === 'string' ) {
-			// We have some extra classes and want to add the default classname
-			// We use a Set to prevent duplicate classnames.
-
-			extraProps.className = [
-				...new Set( [
-					getBlockDefaultClassName( blockType.name ),
-					...extraProps.className.split( ' ' ),
-				] ),
-			]
-				.join( ' ' )
-				.trim();
-		} else {
-			// There is no string in the className variable,
-			// so we just dump the default name in there.
-			extraProps.className = getBlockDefaultClassName( blockType.name );
+		generatedClassNames.push( getBlockDefaultClassName( blockType.name ) );
+	}
+	if ( hasVariationClassNameSupport( blockType ) ) {
+		const activeVariation = getActiveBlockVariation(
+			blockType.name,
+			attributes
+		);
+		if ( activeVariation ) {
+			generatedClassNames.push(
+				getBlockDefaultClassName( blockType.name ) +
+					'-' +
+					activeVariation.name
+			);
 		}
 	}
+	if ( typeof extraProps.className === 'string' ) {
+		// We have some extra classes and want to add the default classname
+		// We use a Set to prevent duplicate classnames.
+		extraProps.className = [
+			...new Set( [
+				...generatedClassNames,
+				...extraProps.className.split( ' ' ),
+			] ),
+		]
+			.join( ' ' )
+			.trim();
+	} else if ( generatedClassNames.length ) {
+		// There is no string in the className variable,
+		// so we just dump the default name(s) in there.
+		extraProps.className = generatedClassNames.join( ' ' );
+	}
+
 	return extraProps;
 }
 

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

@@ -14,7 +14,6 @@ import anchor from './anchor';
 import ariaLabel from './aria-label';
 import customClassName from './custom-class-name';
 import './generated-class-name';
-import './generated-variation-class-name';
 import style from './style';
 import './settings';
 import color from './color';

packages/block-editor/src/hooks/index.native.js

@@ -11,7 +11,6 @@ import align from './align';
 import anchor from './anchor';
 import customClassName from './custom-class-name';
 import './generated-class-name';
-import './generated-variation-class-name';
 import style from './style';
 import color from './color';
 import fontSize from './font-size';

packages/block-editor/src/hooks/test/generated-class-name.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { applyFilters } from '@wordpress/hooks';
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,8 +17,43 @@ describe( 'generated className', () => {
 		save: noop,
 		category: 'text',
 		title: 'block title',
+		attributes: {
+			fruit: {
+				type: 'string',
+				default: 'apple',
+			},
+		},
 	};
 
+	const variations = [
+		{
+			name: 'apple',
+			attributes: {
+				fruit: 'apple',
+			},
+			isActive: [ 'fruit' ],
+			isDefault: true,
+		},
+		{
+			name: 'banana',
+			attributes: {
+				fruit: 'banana',
+			},
+			isActive: [ 'fruit' ],
+		},
+	];
+
+	beforeAll( () => {
+		registerBlockType( 'produce/fruit', {
+			...blockSettings,
+			variations,
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( 'produce/fruit' );
+	} );
+
 	describe( 'addSaveProps', () => {
 		const addSaveProps = applyFilters.bind(
 			null,
@@ -61,5 +97,65 @@ describe( 'generated className', () => {
 
 			expect( extraProps.className ).toBe( 'wp-block-produce-fruit foo' );
 		} );
+
+		it( "should not inject the generated variation className if support isn't enabled", () => {
+			const attributes = { className: 'foo', fruit: 'banana' };
+			const extraProps = addSaveProps(
+				{},
+				{
+					...blockSettings,
+					variations,
+					supports: {
+						className: false,
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps ).not.toHaveProperty( 'className' );
+		} );
+
+		it( 'should inject the generated variation className', () => {
+			const attributes = { className: 'bar', fruit: 'banana' };
+			const extraProps = addSaveProps(
+				{ className: 'foo' },
+				{
+					...blockSettings,
+					variations,
+					supports: {
+						className: {
+							variation: true,
+						},
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps.className ).toBe(
+				'wp-block-produce-fruit-banana foo'
+			);
+		} );
+
+		it( 'should inject generated classNames for both block and variation', () => {
+			const attributes = { className: 'bar', fruit: 'banana' };
+			const extraProps = addSaveProps(
+				{ className: 'foo' },
+				{
+					...blockSettings,
+					variations,
+					supports: {
+						className: {
+							block: true,
+							variation: true,
+						},
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps.className ).toBe(
+				'wp-block-produce-fruit wp-block-produce-fruit-banana foo'
+			);
+		} );
 	} );
 } );