feat: Makes the search title editable.

WordPress · May 8, 2024 · 0d2f288 · 0d2f288
1 parent 293537d
commit 0d2f288
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 11 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -775,7 +775,7 @@ Display the query title. ([Source](https://github.com/WordPress/gutenberg/tree/t
 -	**Name:** core/query-title
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** level, showPrefix, showSearchTerm, textAlign, type
+-	**Attributes:** level, searchResultsTerm, searchResultsTermSuffix, showPrefix, showSearchTerm, textAlign, type
 
 ## Quote
 

diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json
@@ -24,6 +24,12 @@
 		"showSearchTerm": {
 			"type": "boolean",
 			"default": true
+		},
+		"searchResultsTerm": {
+			"type": "string"
+		},
+		"searchResultsTermSuffix": {
+			"type": "string"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js
@@ -14,6 +14,7 @@ import {
 	Warning,
 	HeadingLevelDropdown,
 	store as blockEditorStore,
+	RichText,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -22,7 +23,15 @@ import { useSelect } from '@wordpress/data';
 const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign, showPrefix, showSearchTerm },
+	attributes: {
+		type,
+		level,
+		textAlign,
+		showPrefix,
+		showSearchTerm,
+		searchResultsTerm,
+		searchResultsTermSuffix,
+	},
 	setAttributes,
 } ) {
 	const { archiveTypeTitle, archiveNameLabel } = useSelect( ( select ) => {
@@ -123,11 +132,40 @@ export default function QueryTitleEdit( {
 					</PanelBody>
 				</InspectorControls>
 
-				<TagName { ...blockProps }>
-					{ showSearchTerm
-						? __( 'Search results for: “search term”' )
-						: __( 'Search results' ) }
-				</TagName>
+				{ showSearchTerm ? (
+					<div { ...blockProps }>
+						<RichText
+							tagName={ `h${ level }` }
+							value={ searchResultsTerm }
+							onChange={ ( content ) =>
+								setAttributes( { searchResultsTerm: content } )
+							}
+							placeholder={ __( 'Search Results for:' ) }
+						/>
+						<TagName>{ __( 'Search Term' ) }</TagName>
+						<RichText
+							tagName={ `h${ level }` }
+							value={ searchResultsTermSuffix }
+							onChange={ ( content ) =>
+								setAttributes( {
+									searchResultsTermSuffix: content,
+								} )
+							}
+							placeholder={ __( 'Suffix' ) }
+						/>
+					</div>
+				) : (
+					<RichText
+						{ ...blockProps }
+						tagName={ `h${ level }` }
+						value={ searchResultsTerm }
+						allowedFormats={ [] }
+						onChange={ ( content ) =>
+							setAttributes( { searchResultsTerm: content } )
+						}
+						placeholder={ __( 'Search Results' ) }
+					/>
+				) }
 			</>
 		);
 	}

diff --git a/packages/block-library/src/query-title/index.php b/packages/block-library/src/query-title/index.php
@@ -38,13 +38,23 @@ function render_block_core_query_title( $attributes ) {
 		}
 	}
 	if ( $is_search ) {
-		$title = __( 'Search results' );
+		$title = isset($attributes['searchResultsTerm']) && !empty($attributes['searchResultsTerm']) ? $attributes['searchResultsTerm'] : __( 'Search results' );
 
 		if ( isset( $attributes['showSearchTerm'] ) && $attributes['showSearchTerm'] ) {
+
+			// Get the prefix and suffix.
+			$prefix = isset($attributes['searchResultsTerm']) ? $attributes['searchResultsTerm'] : __('Search results for: ');
+			$suffix = isset($attributes['searchResultsTermSuffix']) ? $attributes['searchResultsTermSuffix'] : '';
+
+			// Get the search query.
+			$search_query = get_search_query();
+
 			$title = sprintf(
-				/* translators: %s is the search term. */
-				__( 'Search results for: "%s"' ),
-				get_search_query()
+				/* translators: 1: Search term prefix, 2: Search term, 3: Search term suffix. */
+				__('%1$s "%2$s" %3$s'),
+				$prefix,
+				$search_query,
+				$suffix
 			);
 		}
 	}

diff --git a/packages/block-library/src/query-title/style.scss b/packages/block-library/src/query-title/style.scss
@@ -2,3 +2,7 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 }
+div.wp-block-query-title__placeholder {
+	display: flex;
+	gap: 10px;
+}