diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 452da6e7f32386..dac397becc8cb5 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -12,6 +12,7 @@ import { } from '@wordpress/block-editor'; import { SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { View } from '@wordpress/primitives'; /** * Internal dependencies @@ -108,16 +109,28 @@ function GroupEdit( { usedLayoutType: usedLayout?.type, hasInnerBlocks, } ); + + // Default to the regular appender being rendered. + let renderAppender; + if ( showPlaceholder ) { + // In the placeholder state, ensure the appender is not rendered. + // This is needed because `...innerBlocksProps` is used in the placeholder + // state so that blocks can dragged onto the placeholder area + // from both the list view and in the editor canvas. + renderAppender = false; + } else if ( ! hasInnerBlocks ) { + // When there is no placeholder, but the block is also empty, + // use the larger button appender. + renderAppender = InnerBlocks.ButtonBlockAppender; + } + const innerBlocksProps = useInnerBlocksProps( layoutSupportEnabled ? blockProps : { className: 'wp-block-group__inner-container' }, { templateLock, - renderAppender: hasInnerBlocks - ? undefined - : InnerBlocks.ButtonBlockAppender, - __unstableDisableLayoutClassNames: ! layoutSupportEnabled, + renderAppender, } ); @@ -138,11 +151,14 @@ function GroupEdit( { } /> { showPlaceholder && ( - + + { innerBlocksProps.children } + + ) } { layoutSupportEnabled && ! showPlaceholder && (