diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 030d08b42ce4dd..04bb534e13c5ff 100644 --- 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(