refactor: QueryEdit and QueryPlaceholder components to integrate bloc…

…k-controls.
WordPress · t-hamano · Aug 27, 2025 · Jul 22, 2025 · Jul 22, 2025 · Jul 22, 2025
commit 8b846847af1f7a407e439c5239d85c6ab9523233
@@ -3,19 +3,14 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import {
-	store as blockEditorStore,
-	BlockControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } 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;
@@ -28,17 +23,8 @@ const QueryEdit = ( props ) => {
 	);
 	const Component = hasInnerBlocks ? QueryContent : QueryPlaceholder;
 
-	const blockProps = useBlockProps();
-
 	return (
-		<div { ...blockProps }>
-			<BlockControls>
-				<QueryToolbar
-					clientId={ clientId }
-					attributes={ attributes }
-					hasInnerBlocks={ hasInnerBlocks }
-				/>
-			</BlockControls>
+		<>
 			<Component
 				{ ...props }
 				openPatternSelectionModal={ () =>
@@ -54,7 +40,7 @@ const QueryEdit = ( props ) => {
 					}
 				/>
 			) }
-		</div>
+		</>
 	);
 };
 

@@ -10,6 +10,7 @@ import {
 	store as blockEditorStore,
 	useInnerBlocksProps,
 	privateApis as blockEditorPrivateApis,
+	BlockControls,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -22,6 +23,7 @@ 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 );
 
@@ -128,6 +130,13 @@ export default function QueryContent( {
 
 	return (
 		<>
+			<BlockControls>
+				<QueryToolbar
+					clientId={ clientId }
+					attributes={ attributes }
+					hasInnerBlocks
+				/>
+			</BlockControls>
 			<EnhancedPaginationModal
 				attributes={ attributes }
 				setAttributes={ setAttributes }

@@ -10,6 +10,8 @@ import { useState } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockVariationPicker,
+	BlockControls,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -20,6 +22,7 @@ import { useResizeObserver } from '@wordpress/compose';
  */
 import { useScopedBlockVariations } from '../utils';
 import { useBlockPatterns } from './pattern-selection';
+import QueryToolbar from './query-toolbar';
 
 export default function QueryPlaceholder( {
 	attributes,
@@ -60,6 +63,9 @@ export default function QueryPlaceholder( {
 		activeBlockVariation?.icon ||
 		blockType?.icon?.src;
 	const label = activeBlockVariation?.title || blockType?.title;
+	const blockProps = useBlockProps( {
+		ref: resizeObserverRef,
+	} );
 
 	if ( isStartingBlank ) {
 		return (
@@ -72,8 +78,16 @@ export default function QueryPlaceholder( {
 		);
 	}
 	return (
-		<div ref={ resizeObserverRef }>
+		<div { ...blockProps }>
+			<BlockControls>
+				<QueryToolbar
+					clientId={ clientId }
+					attributes={ attributes }
+					hasInnerBlocks={ false }
+				/>
+			</BlockControls>
 			<Placeholder
+				className="block-editor-media-placeholder"
 				icon={ ! isSmallContainer && icon }
 				label={ ! isSmallContainer && label }
 				instructions={

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