From 3d577f4f6506789ba26a5c645e3b8c9e8360fa0c Mon Sep 17 00:00:00 2001 From: sarthaknagoshe2002 Date: Sat, 14 Dec 2024 20:33:29 +0530 Subject: [PATCH 1/3] Feat: make the text editable & add toggle option for the total count --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/query-total/block.json | 16 ++++ .../block-library/src/query-total/edit.js | 83 +++++++++++++++++-- .../block-library/src/query-total/index.php | 35 ++++---- 4 files changed, 114 insertions(+), 22 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7e031fa525e1f..caad590e894a7 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/packages/block-library/src/query-total/block.json b/packages/block-library/src/query-total/block.json index 02dbbbbb00f74..19e66f6b4f6ce 100644 --- a/packages/block-library/src/query-total/block.json +++ b/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" ], diff --git a/packages/block-library/src/query-total/edit.js b/packages/block-library/src/query-total/edit.js index 4824021ae99b0..f4434ef40b692 100644 --- a/packages/block-library/src/query-total/edit.js +++ b/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' && ( + + setAttributes( { showTotal: ! showTotal } ) + } + > + { __( 'Toggle Total visibility' ) } + + ) } @@ -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
{ __( '12 results found' ) }
; + return ( +
+ + 12{ ' ' } + + + setAttributes( { totalResultsText: value } ) + } + /> +
+ ); } if ( displayType === 'range-display' ) { - return
{ __( 'Displaying 1 – 10 of 12' ) }
; + return ( +
+ + setAttributes( { rangeDisplayTextPrimary: value } ) + } + /> + + { ' ' } + 1 – 10{ ' ' } + + { showTotal && ( + <> + + setAttributes( { + rangeDisplayTextSecondary: value, + } ) + } + /> + + { ' ' } + 12 + + + ) } +
+ ); } return null; diff --git a/packages/block-library/src/query-total/index.php b/packages/block-library/src/query-total/index.php index 5a8ab76b5d1ef..c922a160eccc7 100644 --- a/packages/block-library/src/query-total/index.php +++ b/packages/block-library/src/query-total/index.php @@ -39,21 +39,20 @@ 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' ), - '' . $start . '', - '' . $max_rows . '' - ); - } 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' ), - '' . $start . '', - '' . $end . '', - '' . $max_rows . '' - ); + $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 . ' ' . + '' . $start . '' . ' – ' . '' . $end . ''; + + // Append "of {total}" only if `showTotal` is true. + if ( ! isset( $attributes['showTotal'] ) || $attributes['showTotal'] ) { + $range_text .= ' ' . $range_text_secondary . ' ' . '' . $max_rows . ''; } $output = sprintf( '

%s

', $range_text ); @@ -61,10 +60,14 @@ function render_block_core_query_total( $attributes, $content, $block ) { case 'total-results': default: + $total_results_text = isset( $attributes['totalResultsText'] ) && ! empty( $attributes['totalResultsText'] ) + ? $attributes['totalResultsText'] + : _n( 'result found', 'results found', $max_rows ); + $output = sprintf( '

%d %s

', $max_rows, - _n( 'result found', 'results found', $max_rows ) + $total_results_text ); break; } From f0fbc526696ba3d5961a2b6824f6825ac452ed62 Mon Sep 17 00:00:00 2001 From: sarthaknagoshe2002 Date: Sat, 14 Dec 2024 21:01:02 +0530 Subject: [PATCH 2/3] Fix: Update e2e test --- test/integration/fixtures/blocks/core__query-total.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/test/integration/fixtures/blocks/core__query-total.json b/test/integration/fixtures/blocks/core__query-total.json index cf342c6a35f14..bf33bcac87f23 100644 --- a/test/integration/fixtures/blocks/core__query-total.json +++ b/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": [] } From 26951aa092809a41e95bd089252597dc08872316 Mon Sep 17 00:00:00 2001 From: sarthaknagoshe2002 Date: Sat, 14 Dec 2024 21:10:26 +0530 Subject: [PATCH 3/3] Fix: added conditional rendering of the end of range --- packages/block-library/src/query-total/index.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/query-total/index.php b/packages/block-library/src/query-total/index.php index c922a160eccc7..7d7ed65261ae8 100644 --- a/packages/block-library/src/query-total/index.php +++ b/packages/block-library/src/query-total/index.php @@ -48,7 +48,11 @@ function render_block_core_query_total( $attributes, $content, $block ) { : __( 'of' ); $range_text = $range_text_primary . ' ' . - '' . $start . '' . ' – ' . '' . $end . ''; + '' . $start . ''; + + if ( $start !== $end ) { + $range_text .= ' – ' . '' . $end . ''; + } // Append "of {total}" only if `showTotal` is true. if ( ! isset( $attributes['showTotal'] ) || $attributes['showTotal'] ) {