Query Loop Block: Fix broken placeholder

packages/block-library/src/query/edit/index.js

@@ -22,6 +22,7 @@ const QueryEdit = ( props ) => {
 		[ clientId ]
 	);
 	const Component = hasInnerBlocks ? QueryContent : QueryPlaceholder;
+
 	return (
 		<>
 			<Component

packages/block-library/src/query/edit/query-content.js

@@ -5,12 +5,12 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useCallback } from '@wordpress/element';
 import {
-	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	store as blockEditorStore,
 	useInnerBlocksProps,
 	privateApis as blockEditorPrivateApis,
+	BlockControls,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -130,6 +130,13 @@ export default function QueryContent( {
 
 	return (
 		<>
+			<BlockControls>
+				<QueryToolbar
+					clientId={ clientId }
+					attributes={ attributes }
+					hasInnerBlocks
+				/>
+			</BlockControls>
 			<EnhancedPaginationModal
 				attributes={ attributes }
 				setAttributes={ setAttributes }
@@ -145,9 +152,6 @@ export default function QueryContent( {
 					isSingular={ isSingular }
 				/>
 			</InspectorControls>
-			<BlockControls>
-				<QueryToolbar attributes={ attributes } clientId={ clientId } />
-			</BlockControls>
 			<InspectorControls group="advanced">
 				<HTMLElementControl
 					tagName={ TagName }

packages/block-library/src/query/edit/query-placeholder.js

@@ -8,18 +8,21 @@ import {
 } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import {
-	useBlockProps,
 	store as blockEditorStore,
 	__experimentalBlockVariationPicker,
+	BlockControls,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { useScopedBlockVariations } from '../utils';
 import { useBlockPatterns } from './pattern-selection';
+import QueryToolbar from './query-toolbar';
 
 export default function QueryPlaceholder( {
 	attributes,
@@ -28,7 +31,18 @@ export default function QueryPlaceholder( {
 	openPatternSelectionModal,
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
-	const blockProps = useBlockProps();
+	const [ containerWidth, setContainerWidth ] = useState( 0 );
+
+	// Use ResizeObserver to monitor container width.
+	const resizeObserverRef = useResizeObserver( ( [ entry ] ) => {
+		setContainerWidth( entry.contentRect.width );
+	} );
+
+	const SMALL_CONTAINER_BREAKPOINT = 160;
+
+	const isSmallContainer =
+		containerWidth > 0 && containerWidth < SMALL_CONTAINER_BREAKPOINT;
+
 	const { blockType, activeBlockVariation } = useSelect(
 		( select ) => {
 			const { getActiveBlockVariation, getBlockType } =
@@ -49,6 +63,10 @@ export default function QueryPlaceholder( {
 		activeBlockVariation?.icon ||
 		blockType?.icon?.src;
 	const label = activeBlockVariation?.title || blockType?.title;
+	const blockProps = useBlockProps( {
+		ref: resizeObserverRef,
+	} );
+
 	if ( isStartingBlank ) {
 		return (
 			<QueryVariationPicker
@@ -61,14 +79,24 @@ export default function QueryPlaceholder( {
 	}
 	return (
 		<div { ...blockProps }>
+			<BlockControls>
+				<QueryToolbar
+					clientId={ clientId }
+					attributes={ attributes }
+					hasInnerBlocks={ false }
+				/>
+			</BlockControls>
 			<Placeholder
-				icon={ icon }
-				label={ label }
-				instructions={ __(
-					'Choose a pattern for the query loop or start blank.'
-				) }
+				className="block-editor-media-placeholder"
+				icon={ ! isSmallContainer && icon }
+				label={ ! isSmallContainer && label }
+				instructions={
+					! isSmallContainer &&
+					__( 'Choose a pattern for the query loop or start blank.' )
+				}
+				withIllustration={ isSmallContainer }
 			>
-				{ !! hasPatterns && (
+				{ !! hasPatterns && ! isSmallContainer && (
 					<Button
 						__next40pxDefaultSize
 						variant="primary"
@@ -78,15 +106,17 @@ export default function QueryPlaceholder( {
 					</Button>
 				) }
 
-				<Button
-					__next40pxDefaultSize
-					variant="secondary"
-					onClick={ () => {
-						setIsStartingBlank( true );
-					} }
-				>
-					{ __( 'Start blank' ) }
-				</Button>
+				{ ! isSmallContainer && (
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						onClick={ () => {
+							setIsStartingBlank( true );
+						} }
+					>
+						{ __( 'Start blank' ) }
+					</Button>
+				) }
 			</Placeholder>
 		</div>
 	);
@@ -95,9 +125,8 @@ export default function QueryPlaceholder( {
 function QueryVariationPicker( { clientId, attributes, icon, label } ) {
 	const scopeVariations = useScopedBlockVariations( attributes );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-	const blockProps = useBlockProps();
 	return (
-		<div { ...blockProps }>
+		<div>
 			<__experimentalBlockVariationPicker
 				icon={ icon }
 				label={ label }

packages/block-library/src/query/edit/query-toolbar.js

@@ -14,12 +14,20 @@ import { __ } from '@wordpress/i18n';
  */
 import PatternSelection, { useBlockPatterns } from './pattern-selection';
 
-export default function QueryToolbar( { clientId, attributes } ) {
+export default function QueryToolbar( {
+	clientId,
+	attributes,
+	hasInnerBlocks,
+} ) {
 	const hasPatterns = useBlockPatterns( clientId, attributes ).length;
 	if ( ! hasPatterns ) {
 		return null;
 	}
 
+	const buttonLabel = hasInnerBlocks
+		? __( 'Change design' )
+		: __( 'Choose pattern' );
+
 	return (
 		<ToolbarGroup className="wp-block-template-part__block-control-group">
 			<DropdownContentWrapper>
@@ -33,7 +41,7 @@ export default function QueryToolbar( { clientId, attributes } ) {
 							aria-expanded={ isOpen }
 							onClick={ onToggle }
 						>
-							{ __( 'Change design' ) }
+							{ buttonLabel }
 						</ToolbarButton>
 					) }
 					renderContent={ () => (

packages/block-library/src/query/editor.scss

@@ -1,5 +1,4 @@
 .block-library-query-pattern__selection-modal {
-
 	.block-editor-block-patterns-list {
 		column-count: 2;
 		column-gap: $grid-unit-30;
@@ -53,3 +52,9 @@
 		margin-bottom: 0;
 	}
 }
+
+// Provide special styling for the placeholder.
+// @todo this particular minimal style of placeholder could be componentized further.
+.wp-block-query > .block-editor-media-placeholder.is-small {
+	min-height: 60px;
+}