[Query-Total Block] Add editable text and visibility toggle for total count in Query Total block

docs/reference-guides/core-blocks.md

@@ -785,7 +785,7 @@ Display the total number of results in a query. ([Source](https://github.com/Wor
 -	**Category:** theme
 -	**Ancestor:** core/query
 -	**Supports:** align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** displayType
+-	**Attributes:** displayType, rangeDisplayTextPrimary, rangeDisplayTextSecondary, showTotal, totalResultsText
 
 ## Quote
 

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

@@ -11,6 +11,22 @@
 		"displayType": {
 			"type": "string",
 			"default": "total-results"
+		},
+		"totalResultsText": {
+			"type": "string",
+			"default": "results found"
+		},
+		"rangeDisplayTextPrimary": {
+			"type": "string",
+			"default": "Displaying"
+		},
+		"rangeDisplayTextSecondary": {
+			"type": "string",
+			"default": "of"
+		},
+		"showTotal": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"usesContext": [ "queryId", "query" ],

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

@@ -1,8 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps, BlockControls } from '@wordpress/block-editor';
-import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
+import {
+	useBlockProps,
+	BlockControls,
+	RichText,
+} from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarDropdownMenu,
+	ToolbarButton,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -11,7 +19,13 @@ import { __ } from '@wordpress/i18n';
 import { resultsFound, displayingResults } from './icons';
 
 export default function QueryTotalEdit( { attributes, setAttributes } ) {
-	const { displayType } = attributes;
+	const {
+		displayType,
+		totalResultsText,
+		rangeDisplayTextPrimary,
+		rangeDisplayTextSecondary,
+		showTotal,
+	} = attributes;
 
 	// Block properties and classes.
 	const blockProps = useBlockProps();
@@ -56,6 +70,18 @@ export default function QueryTotalEdit( { attributes, setAttributes } ) {
 						label={ __( 'Change display type' ) }
 						controls={ buttonPositionControls }
 					/>
+					{ /* Show toggle for "showTotal" only when range-display is selected */ }
+					{ displayType === 'range-display' && (
+						<ToolbarButton
+							icon={ showTotal ? 'visibility' : 'hidden' }
+							label={ __( 'Toggle total visibility' ) }
+							onClick={ () =>
+								setAttributes( { showTotal: ! showTotal } )
+							}
+						>
+							{ __( 'Toggle Total visibility' ) }
+						</ToolbarButton>
+					) }
 				</ToolbarGroup>
 			</BlockControls>
 		</>
@@ -64,11 +90,58 @@ export default function QueryTotalEdit( { attributes, setAttributes } ) {
 	// Render output based on the selected display type.
 	const renderDisplay = () => {
 		if ( displayType === 'total-results' ) {
-			return <div>{ __( '12 results found' ) }</div>;
+			return (
+				<div>
+					<span>
+						<strong>12</strong>{ ' ' }
+					</span>
+					<RichText
+						tagName="span"
+						value={ totalResultsText }
+						placeholder={ totalResultsText }
+						onChange={ ( value ) =>
+							setAttributes( { totalResultsText: value } )
+						}
+					/>
+				</div>
+			);
 		}
 
 		if ( displayType === 'range-display' ) {
-			return <div>{ __( 'Displaying 1 – 10 of 12' ) }</div>;
+			return (
+				<div>
+					<RichText
+						tagName="span"
+						value={ rangeDisplayTextPrimary }
+						placeholder={ rangeDisplayTextPrimary }
+						onChange={ ( value ) =>
+							setAttributes( { rangeDisplayTextPrimary: value } )
+						}
+					/>
+					<span>
+						{ ' ' }
+						<strong>1 – 10</strong>{ ' ' }
+					</span>
+					{ showTotal && (
+						<>
+							<RichText
+								tagName="span"
+								value={ rangeDisplayTextSecondary }
+								placeholder={ rangeDisplayTextSecondary }
+								onChange={ ( value ) =>
+									setAttributes( {
+										rangeDisplayTextSecondary: value,
+									} )
+								}
+							/>
+							<span>
+								{ ' ' }
+								<strong>12</strong>
+							</span>
+						</>
+					) }
+				</div>
+			);
 		}
 
 		return null;

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

@@ -39,32 +39,39 @@ function render_block_core_query_total( $attributes, $content, $block ) {
 	$output = '';
 	switch ( $attributes['displayType'] ) {
 		case 'range-display':
-			if ( $start === $end ) {
-				$range_text = sprintf(
-					/* translators: 1: Start index of posts, 2: Total number of posts */
-					__( 'Displaying %1$s of %2$s' ),
-					'<strong>' . $start . '</strong>',
-					'<strong>' . $max_rows . '</strong>'
-				);
-			} else {
-				$range_text = sprintf(
-					/* translators: 1: Start index of posts, 2: End index of posts, 3: Total number of posts */
-					__( 'Displaying %1$s – %2$s of %3$s' ),
-					'<strong>' . $start . '</strong>',
-					'<strong>' . $end . '</strong>',
-					'<strong>' . $max_rows . '</strong>'
-				);
+			$range_text_primary = isset( $attributes['rangeDisplayTextPrimary'] ) && ! empty( $attributes['rangeDisplayTextPrimary'] )
+				? $attributes['rangeDisplayTextPrimary']
+				: __( 'Displaying' );
+
+			$range_text_secondary = isset( $attributes['rangeDisplayTextSecondary'] ) && ! empty( $attributes['rangeDisplayTextSecondary'] )
+				? $attributes['rangeDisplayTextSecondary']
+				: __( 'of' );
+
+			$range_text = $range_text_primary . '&nbsp;' .
+				'<strong>' . $start . '</strong>';
+
+			if ( $start !== $end ) {
+				$range_text .= ' – ' . '<strong>' . $end . '</strong>';
+			}
+
+			// Append "of {total}" only if `showTotal` is true.
+			if ( ! isset( $attributes['showTotal'] ) || $attributes['showTotal'] ) {
+				$range_text .= '&nbsp;' . $range_text_secondary . '&nbsp;' . '<strong>' . $max_rows . '</strong>';
 			}
 
 			$output = sprintf( '<p>%s</p>', $range_text );
 			break;
 
 		case 'total-results':
 		default:
+			$total_results_text = isset( $attributes['totalResultsText'] ) && ! empty( $attributes['totalResultsText'] )
+				? $attributes['totalResultsText']
+				: _n( 'result found', 'results found', $max_rows );
+
 			$output = sprintf(
 				'<p><strong>%d</strong> %s</p>',
 				$max_rows,
-				_n( 'result found', 'results found', $max_rows )
+				$total_results_text
 			);
 			break;
 	}

test/integration/fixtures/blocks/core__query-total.json

@@ -3,7 +3,11 @@
 		"name": "core/query-total",
 		"isValid": true,
 		"attributes": {
-			"displayType": "total-results"
+			"displayType": "total-results",
+			"totalResultsText": "results found",
+			"rangeDisplayTextPrimary": "Displaying",
+			"rangeDisplayTextSecondary": "of",
+			"showTotal": true
 		},
 		"innerBlocks": []
 	}