Add variation default class name to the visual editor by default

WordPress · Jun 11, 2024 · 0a12f45 · 0a12f45
1 parent c2fb616
commit 0a12f45
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -592,12 +592,26 @@ 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 ( match && match?.name ) {
+					defaultClassNames.push(
+						getBlockDefaultClassName(
+							`${ blockName }/${ match.name }`
+						)
+					);
+				}
+			}
 			const previewContext = {
 				isPreviewMode,
 				blockWithoutAttributes,
@@ -610,9 +624,10 @@ function BlockListBlockProvider( props ) {
 				className: hasLightBlockWrapper
 					? attributes.className
 					: undefined,
-				defaultClassName: hasLightBlockWrapper
-					? getBlockDefaultClassName( blockName )
-					: undefined,
+				defaultClassName:
+					defaultClassNames.length > 0
+						? clsx( defaultClassNames )
+						: undefined,
 				blockTitle: blockType?.title,
 			};
 
@@ -625,7 +640,6 @@ function BlockListBlockProvider( props ) {
 			const _isSelected = isBlockSelected( clientId );
 			const canRemove = canRemoveBlock( clientId, rootClientId );
 			const canMove = canMoveBlock( clientId, rootClientId );
-			const match = getActiveBlockVariation( blockName, attributes );
 			const isMultiSelected = isBlockMultiSelected( clientId );
 			const checkDeep = true;
 			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(