Reuse addGeneratedClassName

WordPress · Jul 8, 2024 · 7011264 · 7011264
1 parent 1f182ec
commit 7011264
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 47 deletions.
diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js
@@ -7,21 +7,14 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { withFilters } from '@wordpress/components';
-import {
-	getBlockDefaultClassName,
-	getBlockType,
-	getActiveBlockVariation,
-} from '@wordpress/blocks';
+import { getBlockType } from '@wordpress/blocks';
 import { useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockContext from '../block-context';
-import {
-	hasBlockClassNameSupport,
-	hasVariationClassNameSupport,
-} from '../../hooks/supports';
+import { addGeneratedClassName } from '../../hooks/generated-class-name';
 
 /**
  * Default value used for blocks which do not define their own context needs,
@@ -75,24 +68,14 @@ const EditWithGeneratedProps = ( props ) => {
 		return <EditWithFilters { ...props } context={ context } />;
 	}
 
-	const generatedClassNames = [];
-
-	if ( hasBlockClassNameSupport( blockType ) ) {
-		generatedClassNames.push( getBlockDefaultClassName( name ) );
-	}
-	if ( hasVariationClassNameSupport( blockType ) ) {
-		const activeVariation = getActiveBlockVariation( name, attributes );
-		if ( activeVariation && activeVariation?.name ) {
-			generatedClassNames.push(
-				getBlockDefaultClassName(
-					`${ name }/${ activeVariation.name }`
-				)
-			);
-		}
-	}
+	const generatedClassName = addGeneratedClassName(
+		{},
+		blockType,
+		attributes
+	)?.className;
 
 	const className = clsx(
-		generatedClassNames,
+		generatedClassName,
 		attributes.className,
 		props.className
 	);

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -22,7 +22,6 @@ import {
 	getDefaultBlockName,
 	isUnmodifiedBlock,
 	isReusableBlock,
-	getBlockDefaultClassName,
 	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
@@ -43,7 +42,7 @@ import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import { PrivateBlockContext } from './private-block-context';
-import { hasVariationClassNameSupport } from '../../hooks/supports';
+import { addGeneratedClassName } from '../../hooks/generated-class-name';
 
 import { unlock } from '../../lock-unlock';
 
@@ -593,28 +592,12 @@ function BlockListBlockProvider( props ) {
 				hasBlockSupport: _hasBlockSupport,
 				getActiveBlockVariation,
 			} = select( blocksStore );
-
 			const attributes = getBlockAttributes( clientId );
 			const { name: blockName, isValid } = blockWithoutAttributes;
-			const match = getActiveBlockVariation( blockName, attributes );
 			const blockType = getBlockType( blockName );
 			const { supportsLayout, __unstableIsPreviewMode: isPreviewMode } =
 				getSettings();
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
-			const defaultClassNames = [];
-			if ( hasLightBlockWrapper && blockName ) {
-				defaultClassNames.push( getBlockDefaultClassName( blockName ) );
-
-				if ( hasVariationClassNameSupport( blockType ) ) {
-					if ( match && match?.name ) {
-						defaultClassNames.push(
-							getBlockDefaultClassName(
-								`${ blockName }/${ match.name }`
-							)
-						);
-					}
-				}
-			}
 			const previewContext = {
 				isPreviewMode,
 				blockWithoutAttributes,
@@ -627,10 +610,10 @@ function BlockListBlockProvider( props ) {
 				className: hasLightBlockWrapper
 					? attributes.className
 					: undefined,
-				defaultClassName:
-					defaultClassNames.length > 0
-						? clsx( defaultClassNames )
-						: undefined,
+				defaultClassName: hasLightBlockWrapper
+					? addGeneratedClassName( {}, blockType, attributes )
+							?.className
+					: undefined,
 				blockTitle: blockType?.title,
 			};
 
@@ -643,6 +626,7 @@ function BlockListBlockProvider( props ) {
 			const _isSelected = isBlockSelected( clientId );
 			const canRemove = canRemoveBlock( clientId );
 			const canMove = canMoveBlock( clientId );
+			const match = getActiveBlockVariation( blockName, attributes );
 			const isMultiSelected = isBlockMultiSelected( clientId );
 			const checkDeep = true;
 			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(