diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3a0a88048e982f..063c3e7ec78b46 100644 --- 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 index 674daadee3bb69..c64dc15a00276e 100644 --- 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 index 0194f3f99f4e1b..02162349ee14bc 100644 --- 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( { - - { showSearchTerm - ? __( 'Search results for: “search term”' ) - : __( 'Search results' ) } - + { showSearchTerm ? ( +
+ + setAttributes( { searchResultsTerm: content } ) + } + placeholder={ __( 'Search Results for:' ) } + /> + { __( 'Search Term' ) } + + setAttributes( { + searchResultsTermSuffix: content, + } ) + } + placeholder={ __( 'Suffix' ) } + /> +
+ ) : ( + + 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 index 88a945535a22d9..c30517cbdbe1d4 100644 --- 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 = ! empty( $attributes['searchResultsTerm'] ) ? $attributes['searchResultsTerm'] : ''; 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 index d4a3236cdfff9a..11593175ba8670 100644 --- 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; +}