Query Title: add Search and 404 page titles

packages/block-library/src/query-title/block.json

@@ -3,10 +3,14 @@
 	"name": "core/query-title",
 	"title": "Query Title",
 	"category": "design",
-	"description": "Display the query title.",
+	"description": "Display the query title based on the queried object. Supports search, archive and 404 templates. Dynamic content is available on the search template for: %search%, %total%.",
 	"textdomain": "default",
+	"usesContext": [ "templateSlug" ],
 	"attributes": {
-		"type": {
+		"searchTitle": {
+			"type": "string"
+		},
+		"nothingFoundTitle": {
 			"type": "string"
 		},
 		"textAlign": {

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

@@ -6,49 +6,140 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-// import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	AlignmentControl,
 	BlockControls,
 	useBlockProps,
 	Warning,
+	RichText,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 
-const SUPPORTED_TYPES = [ 'archive' ];
+const SUPPORTED_TEMPLATES = [ 'archive', 'search', '404', 'index' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign },
+	attributes: { searchTitle, nothingFoundTitle, level, textAlign },
 	setAttributes,
+	context: { templateSlug },
 } ) {
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( 'wp-block-query-title__placeholder', {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-query-title__placeholder': type === 'archive',
 		} ),
 	} );
-	// The plan is to augment this block with more
-	// block variations like `Search Title`.
-	if ( ! SUPPORTED_TYPES.includes( type ) ) {
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+	let titleElement;
+
+	// translators: Title for archive template.
+	const defaultTitle = _x(
+		'Query title placeholder',
+		'query template title'
+	);
+
+	// translators: Title for archive template.
+	const archiveTitle = _x(
+		'Archive title placeholder',
+		'archive template title'
+	);
+
+	// translators: Title for 404 template.
+	const defaultNothingFoundTitle = _x(
+		'Nothing found',
+		'404 template title'
+	);
+
+	// translators: Title for search template with dynamic content placeholders.
+	const defaultSearchTitle = _x(
+		'Search results for "%search%"',
+		'search template title'
+	);
+
+	// Infer title content from template slug context
+	switch ( templateSlug ) {
+		case 'archive':
+			titleElement = (
+				<TagName { ...blockProps }>{ archiveTitle }</TagName>
+			);
+			break;
+		case 'search':
+			titleElement = (
+				<div { ...blockProps }>
+					<RichText
+						tagName={ TagName }
+						value={ searchTitle }
+						placeholder={ searchTitle }
+						allowedFormats={ [ 'core/bold', 'core/italic' ] }
+						onChange={ ( newSearchTitle ) =>
+							setAttributes( { searchTitle: newSearchTitle } )
+						}
+						disableLineBreaks={ true }
+					/>
+				</div>
+			);
+			break;
+		case '404':
+			titleElement = (
+				<div { ...blockProps }>
+					<RichText
+						tagName={ TagName }
+						value={ nothingFoundTitle }
+						placeholder={ nothingFoundTitle }
+						allowedFormats={ [ 'core/bold', 'core/italic' ] }
+						onChange={ ( newNothingFoundTitle ) =>
+							setAttributes( {
+								nothingFoundTitle: newNothingFoundTitle,
+							} )
+						}
+						disableLineBreaks={ true }
+					/>
+				</div>
+			);
+			break;
+		case 'index':
+			titleElement = (
+				<TagName { ...blockProps }>{ defaultTitle }</TagName>
+			);
+			break;
+		default:
+			break;
+	}
+
+	// Update default content based on current template
+	useEffect( () => {
+		__unstableMarkNextChangeAsNotPersistent();
+
+		if ( ! searchTitle ) {
+			setAttributes( {
+				searchTitle: defaultSearchTitle,
+			} );
+		}
+
+		if ( ! nothingFoundTitle ) {
+			setAttributes( {
+				nothingFoundTitle: defaultNothingFoundTitle,
+			} );
+		}
+	}, [] );
+
+	if ( ! SUPPORTED_TEMPLATES.includes( templateSlug ) ) {
 		return (
 			<div { ...blockProps }>
-				<Warning>{ __( 'Provided type is not supported.' ) }</Warning>
+				<Warning>{ __( 'Template is not supported.' ) }</Warning>
 			</div>
 		);
 	}
 
-	let titleElement;
-	if ( type === 'archive' ) {
-		titleElement = (
-			<TagName { ...blockProps }>{ __( 'Archive title' ) }</TagName>
-		);
-	}
 	return (
 		<>
 			<BlockControls group="block">

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

@@ -1,14 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { archiveTitle as icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import metadata from './block.json';
 import edit from './edit';
-import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
+	icon,
 	edit,
-	variations,
 };

packages/block-library/src/query-title/index.php

@@ -7,26 +7,34 @@
 
 /**
  * Renders the `core/query-title` block on the server.
- * For now it only supports Archive title,
+ * For now it supports Archive title, Search title and 404 title,
  * using queried object information
  *
  * @param array $attributes Block attributes.
  *
  * @return string Returns the query title based on the queried object.
  */
 function render_block_core_query_title( $attributes ) {
-	$type       = isset( $attributes['type'] ) ? $attributes['type'] : null;
+	$is_search  = is_search();
 	$is_archive = is_archive();
-	if ( ! $type || ( 'archive' === $type && ! $is_archive ) ) {
-		return '';
-	}
-	$title = '';
+	$is_404     = is_404();
 	if ( $is_archive ) {
 		$title = get_the_archive_title();
+	} elseif ( $is_search ) {
+		global $wp_query;
+		$title        = isset( $attributes['searchTitle'] ) ? $attributes['searchTitle'] : '';
+		$formats      = array( '%total%', '%search%' );
+		$replacements = array( $wp_query->found_posts, get_search_query() );
+		$title        = str_replace( $formats, $replacements, $title );
+	} elseif ( $is_404 ) {
+		$title = isset( $attributes['nothingFoundTitle'] ) ? $attributes['nothingFoundTitle'] : '';
 	}
 	$tag_name           = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h1';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	if ( empty( $title ) ) {
+		return;
+	}
 	return sprintf(
 		'<%1$s %2$s>%3$s</%1$s>',
 		$tag_name,