WordPress · t-hamano · Aug 27, 2025 · Jul 22, 2025 · Jul 22, 2025 · Jul 22, 2025
@@ -3,14 +3,19 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import QueryContent from './query-content';
 import QueryPlaceholder from './query-placeholder';
 import { PatternSelectionModal } from './pattern-selection';
+import QueryToolbar from './query-toolbar';
 
 const QueryEdit = ( props ) => {
 	const { clientId, attributes } = props;
@@ -22,8 +27,18 @@ const QueryEdit = ( props ) => {
 		[ clientId ]
 	);
 	const Component = hasInnerBlocks ? QueryContent : QueryPlaceholder;
+
+	const blockProps = useBlockProps();
+
 	return (
-		<>
+		<div { ...blockProps }>
+			<BlockControls>
+				<QueryToolbar
+					clientId={ clientId }
+					attributes={ attributes }
+					hasInnerBlocks={ hasInnerBlocks }
+				/>
+			</BlockControls>
 			<Component
 				{ ...props }
 				openPatternSelectionModal={ () =>
@@ -39,7 +54,7 @@ const QueryEdit = ( props ) => {
 					}
 				/>
 			) }
-		</>
+		</div>
 	);
 };
 

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useCallback } from '@wordpress/element';
 import {
-	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	store as blockEditorStore,
@@ -23,7 +22,6 @@ import { unlock } from '../../lock-unlock';
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
-import QueryToolbar from './query-toolbar';
 
 const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
@@ -145,9 +143,6 @@ export default function QueryContent( {
 					isSingular={ isSingular }
 				/>
 			</InspectorControls>
-			<BlockControls>
-				<QueryToolbar attributes={ attributes } clientId={ clientId } />
-			</BlockControls>
 			<InspectorControls group="advanced">
 				<HTMLElementControl
 					tagName={ TagName }

@@ -8,12 +8,12 @@ import {
 } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import {
-	useBlockProps,
 	store as blockEditorStore,
 	__experimentalBlockVariationPicker,
 } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -28,7 +28,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 +60,7 @@ export default function QueryPlaceholder( {
 		activeBlockVariation?.icon ||
 		blockType?.icon?.src;
 	const label = activeBlockVariation?.title || blockType?.title;
+
 	if ( isStartingBlank ) {
 		return (
 			<QueryVariationPicker
@@ -60,15 +72,17 @@ export default function QueryPlaceholder( {
 		);
 	}
 	return (
-		<div { ...blockProps }>
+		<div ref={ resizeObserverRef }>
 			<Placeholder
-				icon={ icon }
-				label={ label }
-				instructions={ __(
-					'Choose a pattern for the query loop or start blank.'
-				) }
+				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 +92,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 +111,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 }

@@ -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={ () => (

@@ -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;
 	}
 }
+
+.wp-block-query {
+	.components-placeholder.is-small {
+		min-height: 60px;
+	}
+}