Update Search block label in ListView when it's an Instant Search

- Updated `getBlockLabel` to include `clientId` for improved label context.
- Modified `useBlockDisplayTitle` to utilize the updated `getBlockLabel` function.
- Introduced `__experimentalLabel` in the search settings to handle block labels based on query loop context and instant search status.

Author: michalczaplinski

packages/block-editor/src/components/block-title/use-block-display-title.js

@@ -51,7 +51,12 @@ export default function useBlockDisplayTitle( {
 			}
 
 			const attributes = getBlockAttributes( clientId );
-			const label = getBlockLabel( blockType, attributes, context );
+			const label = getBlockLabel(
+				blockType,
+				attributes,
+				context,
+				clientId
+			);
 			// If the label is defined we prioritize it over a possible block variation title match.
 			if ( label !== blockType.title ) {
 				return label;

packages/block-library/src/search/index.js

@@ -1,8 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { search as icon } from '@wordpress/icons';
+import { select } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -18,6 +20,41 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	__experimentalLabel( attributes, { clientId } ) {
+		const { label } = attributes;
+		const customName = attributes?.metadata?.name;
+
+		// Check if the block is inside a Query Loop block.
+		const queryLoopBlockIds = select(
+			blockEditorStore
+		).getBlockParentsByBlockName( clientId, 'core/query' );
+
+		// If the block is not inside a Query Loop block, return the block label.
+		if ( ! queryLoopBlockIds.length ) {
+			return customName || label;
+		}
+
+		const queryLoopBlock = select( blockEditorStore ).getBlock(
+			queryLoopBlockIds[ 0 ]
+		);
+
+		// Check if the Query Loop block has enhanced pagination enabled and
+		// if the `__experimentalEnableSearchQueryBlock` flag is enabled.
+		const hasInstantSearch = !! (
+			queryLoopBlock?.attributes?.enhancedPagination &&
+			window?.__experimentalEnableSearchQueryBlock
+		);
+
+		if ( ! hasInstantSearch ) {
+			return customName || label;
+		}
+
+		return sprintf(
+			/* translators: %s: The block label */
+			__( '%s (Instant search enabled)' ),
+			customName || label
+		);
+	},
 	example: {
 		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
 		viewportWidth: 400,

packages/blocks/src/api/utils.js

@@ -153,13 +153,19 @@ export function normalizeBlockType( blockTypeOrName ) {
  * @param {Object} blockType  The block type.
  * @param {Object} attributes The values of the block's attributes.
  * @param {Object} context    The intended use for the label.
+ * @param {string} clientId   The block's client ID.
  *
  * @return {string} The block label.
  */
-export function getBlockLabel( blockType, attributes, context = 'visual' ) {
+export function getBlockLabel(
+	blockType,
+	attributes,
+	context = 'visual',
+	clientId
+) {
 	const { __experimentalLabel: getLabel, title } = blockType;
 
-	const label = getLabel && getLabel( attributes, { context } );
+	const label = getLabel && getLabel( attributes, { context, clientId } );
 
 	if ( ! label ) {
 		return title;