[ New Block ] Add Query Total block for displaying total query results or ranges #67629

sarthaknagoshe2002 · 2024-12-05T13:22:16Z

What?

This PR adds a core/query-total block to display query-related information, such as the total number of results or the range of results currently displayed.

Why?

Currently, there is no block that displays the total number of query results or the range of displayed results, limiting users' ability to convey query information effectively. This block enhances usability and customization options in the block editor.

How?

Block Features
- Attributes: Includes displayType to toggle between "Total Results" and "Range Display."
- Server-Side Rendering: Dynamic data fetched using query context (queryId, query).
- Customization: Supports typography, color, spacing, and alignment options.
Key Functionalities
- "Total Results" mode: Displays the total number of query results.
- "Range Display" mode: Shows the current range and total number of results.

Testing Instructions

Add a Query Loop block to a post or page.
Insert the Query Total block inside or alongside the Query Loop.
Set the displayType attribute to "Total Results" or "Range Display" via block controls.
Preview and verify the output:
Ensure total results are displayed correctly in "Total Results" mode.
Verify range calculations in "Range Display" mode.
Test with various query contexts to ensure accurate dynamic rendering.

Screenshots or screencast

query-total.block.mov

github-actions · 2024-12-05T13:22:32Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sarthaknagoshe2002 <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
Co-authored-by: gziolo <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: codersantosh <[email protected]>
Co-authored-by: bhubbard <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

sarthaknagoshe2002 · 2024-12-05T13:28:50Z

I’m relatively new to contributing, but I’ve taken a bold step with this PR. I apologize in advance if I’ve made any mistakes along the way!
I’m open to all kinds of feedback, especially since aspects like the block name, icon, and variation icon are open to discussion.
If I’ve overlooked any steps related to adding a new block, please let me know—I noticed a test case failing for a backport PR 😅.
I’m also working on the test cases and plan to include them either in this PR or, if acceptable, in a separate one.

fabiankaegy

Having this in core is going to be super helpful! :) Added some initial notes 👍

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

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

sarthaknagoshe2002 · 2024-12-05T15:06:06Z

@fabiankaegy I’ve implemented the requested changes.

Could you please help me with the failing test? I’m currently working on the fixture to address the failing unit tests, but I’m unsure about how to proceed with the other failing tests. Any guidance would be greatly appreciated!

fabiankaegy · 2024-12-05T15:18:03Z

@fabiankaegy I’ve implemented the requested changes.

Could you please help me with the failing test? I’m currently working on the fixture to address the failing unit tests, but I’m unsure about how to proceed with the other failing tests. Any guidance would be greatly appreciated!

I think all the JS ones are due to the missing fixture.

The PHP ones are because the two functions you added are missing an @since tag in their doc comments https://github.com/WordPress/gutenberg/actions/runs/12182411187/job/33981359884?pr=67629

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

gziolo · 2024-12-09T13:01:18Z

It looks like there is also an experimental block Comments Count that would be very similar. I don't know why it is still experimental, but it was raised by @carolinan recently on WordPress Slack: https://wordpress.slack.com/archives/C02QB2JS7/p1733463619396909.

In case we decide to add this Query related block, we should mirror the handling with the one related to Comments.

sarthaknagoshe2002 · 2024-12-09T13:13:45Z

In case we decide to add this Query related block, we should mirror the handling with the one related to Comments.

@gziolo here, by handling do you mean the appearance??
Cuz as far as I know the internal logic is quite consistent with other blocks like pagination numbers block as it works on similar lines.

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

Co-authored-by: Greg Ziółkowski <[email protected]>

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

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

gziolo · 2024-12-09T16:41:49Z

here, by handling do you mean the appearance??
Cuz as far as I know the internal logic is quite consistent with other blocks like pagination numbers block as it works on similar lines.

I meant that it would be great to follow up next and improve Comments Count block once these changes are done.

By the way, on the technical level this PR is close to ready. I will defer decisions to @fabiankaegy regarding how the user experience looks like.

fabiankaegy · 2024-12-10T07:38:10Z

From my perspective this also is pretty much ready to go from the editorial experience.

I would love to get @jameskoster / @jasmussen to take a look a the block icon as I think that is not an ideal fit yet 🤔

Also as a follow up I would love to have a way to customize the label / omit the label entirely :)

sarthaknagoshe2002 · 2024-12-10T07:41:55Z

Also as a follow up I would love to have a way to customize the label / omit the label entirely :)

Yes, as previously discussed, I will be addressing this in a separate pull request.

gziolo · 2024-12-10T07:52:35Z

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

+	// Render output based on the selected display type.
+	const renderDisplay = () => {
+		if ( displayType === 'total-results' ) {
+			return <div>{ __( '12 results found' ) }</div>;


My last question is where the number 12 comes from. I'm not sure how much these display elements need to represent real data, but in some cases, it would be possible to show the actual number of results and the current settings for items per page.

@gziolo We have a precedence for this in core. The query pagination also doesn't show the real pagination but has a good default value that showcases the block in action 🤔

I think it makes sense here also as 1 - 1 out of 1 doesn't really make sense

I think it makes sense here also as 1 - 1 out of 1 doesn't really make sense

Now that you shared it. What should happen for edge cases?

1 -1 out of 1 - should it simply display 1 or an empty string?

1-5 out of 5 - should it display 1-5?

Thank you for the explanation about the number 12. It's now documented and we can proceed further 😄

I see that it's mostly covered already in PHP 😄

I think the proper answer would still be:

1 - 1 out of 1

The format should be:

index of first item on this page - index of last item on this page out of total number of results

Currently this is how it is handled on the frontend

Looking at the logic, it will show Displaying 1 of 1 which is perfectly fine.

fabiankaegy · 2024-12-10T07:53:49Z

@sarthaknagoshe2002 Actually, regarding the settings sidebar. Right now you are adding an empty panel in the sidebar. We should change that to maybe move the dropdown of options from the block toolbar into the sidebar here.

jasmussen · 2024-12-10T07:56:43Z

Tricky one. In fact I think all pagination, including this smmary which is related to pagination, need a visual refresh. One instinct for making them related, is putting them in a box. For now, I drew a perhaps nicer summary icon, it's not a bad metaphor:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12Zm-7-6-4.1 5h8.8v-3h-1.5v1.5h-4.2l2.9-3.5-2.9-3.5h4.2V10h1.5V7H7.4l4.1 5Z"/></svg>

If there's a better metaphor, let's go for it, but perhaps for now this can allow the feature to ship. And as noted, if we like it, let's follow up with better designs for the other pagination icons.

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

sarthaknagoshe2002 · 2024-12-10T08:12:14Z

@sarthaknagoshe2002 Actually, regarding the settings sidebar. Right now you are adding an empty panel in the sidebar. We should change that to maybe move the dropdown of options from the block toolbar into the sidebar here.

For this I have tried to maintain consistency with the search block.

Search block's Inspector Panel	Search block's Toolbar

sarthaknagoshe2002 · 2024-12-10T08:24:41Z

Tricky one. In fact I think all pagination, including this smmary which is related to pagination, need a visual refresh. One instinct for making them related, is putting them in a box. For now, I drew a perhaps nicer summary icon, it's not a bad metaphor:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12Zm-7-6-4.1 5h8.8v-3h-1.5v1.5h-4.2l2.9-3.5-2.9-3.5h4.2V10h1.5V7H7.4l4.1 5Z"/></svg>
If there's a better metaphor, let's go for it, but perhaps for now this can allow the feature to ship. And as noted, if we like it, let's follow up with better designs for the other pagination icons.

This looks cool!

fabiankaegy · 2024-12-10T08:29:18Z

@sarthaknagoshe2002 Actually, regarding the settings sidebar. Right now you are adding an empty panel in the sidebar. We should change that to maybe move the dropdown of options from the block toolbar into the sidebar here.

For this I have tried to maintain consistency with the search block.

Search block's Inspector Panel Search block's Toolbar

The main thing here if we want to keep the control in the toolbar (which I'm fine with) is that we then should remove everything in the Inspector 🤔 Right now the inspector has some text in it but no controls

sarthaknagoshe2002 · 2024-12-10T08:34:02Z

The main thing here if we want to keep the control in the toolbar (which I'm fine with) is that we then should remove everything in the Inspector 🤔 Right now the inspector has some text in it but no controls

Yes, this makes the toolbar attract the user's attention, no distraction from the Inspector Panel.

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

gziolo

As shared earlier, I'll approve the code aspects of the new block. It's looking solid from my perspective. Excellent collaboration @sarthaknagoshe2002. That was a fast and efficient feedback loop 🙇🏻

Let's finalize the design decisions before proceeding with merging.

fabiankaegy

This works well and the experience in the editor is as expected :)

Great job here! This is ready to go :)

sarthaknagoshe2002 · 2024-12-10T12:36:08Z

@fabiankaegy @gziolo Thank you so much for your invaluable support with this PR. Honestly, this feels like a significant milestone in my journey as a contributor. I truly appreciate you guiding me and making me feel at ease as a rookie.

Thanks again for carrying me through and creating such a welcoming and supportive environment!

Feat: add new query-total block

ee5415c

sarthaknagoshe2002 requested review from spacedmonkey, ajitbohra, juanmaguitar, fabiankaegy and ndiego as code owners December 5, 2024 13:22

Fix: fixed PHP coding standards

463fdc6

fabiankaegy added [Type] Enhancement A suggestion for improvement. New Block Suggestion for a new block [Block] Query Loop Affects the Query Loop Block labels Dec 5, 2024

fabiankaegy reviewed Dec 5, 2024

View reviewed changes

sarthaknagoshe2002 added 2 commits December 5, 2024 20:31

Fix: simplify the mock results's logic & fix translation

0e622ff

Fix: use ancestor instead of parent

e044940

fabiankaegy requested review from gziolo, ryanwelcher and cbravobernal December 5, 2024 15:05

sarthaknagoshe2002 added 3 commits December 5, 2024 21:15

Feat: add test fixtures

c71a627

Fix: fixed PHP coding standards

a3903d7

Fix: removed EOL chars

2f59c85

fabiankaegy reviewed Dec 5, 2024

View reviewed changes

Fix: add correct version

088ae4d

gziolo reviewed Dec 9, 2024

View reviewed changes

packages/block-library/src/query-total/block.json Outdated Show resolved Hide resolved

Fix: update the apiVersion to 3

8240be1

Co-authored-by: Greg Ziółkowski <[email protected]>

gziolo reviewed Dec 9, 2024

View reviewed changes

packages/block-library/src/query-total/index.php Outdated Show resolved Hide resolved

Fix: make all text translatable

2f70ed3

gziolo reviewed Dec 9, 2024

View reviewed changes

packages/block-library/src/query-total/edit.js Outdated Show resolved Hide resolved

gziolo reviewed Dec 9, 2024

View reviewed changes

packages/block-library/src/query-total/edit.js Outdated Show resolved Hide resolved

sarthaknagoshe2002 added 2 commits December 10, 2024 00:02

Fix: refactor the translation

28bd5a8

Fix: optimize the presentation & usage of mock values

d5a69fb

sarthaknagoshe2002 requested review from gziolo and fabiankaegy December 9, 2024 18:48

gziolo reviewed Dec 10, 2024

View reviewed changes

packages/block-library/src/query-total/index.php Show resolved Hide resolved

sarthaknagoshe2002 added 3 commits December 10, 2024 14:08

Fix: put the block icon in a box

e284b58

Fix: remove the inspector panel

1a7d81f

Fix: combine the default & cases

a3371b0

gziolo reviewed Dec 10, 2024

View reviewed changes

packages/block-library/src/query-total/index.php Outdated Show resolved Hide resolved

Fix: optimized the switch cases to ensure code reachability

386a8c0

gziolo approved these changes Dec 10, 2024

View reviewed changes

fabiankaegy approved these changes Dec 10, 2024

View reviewed changes

fabiankaegy enabled auto-merge (squash) December 10, 2024 12:15

fabiankaegy merged commit e4124df into WordPress:trunk Dec 10, 2024
61 of 64 checks passed

github-actions bot added this to the Gutenberg 19.9 milestone Dec 10, 2024

sarthaknagoshe2002 deleted the new-block/query-total branch December 10, 2024 18:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ New Block ] Add Query Total block for displaying total query results or ranges #67629

[ New Block ] Add Query Total block for displaying total query results or ranges #67629

sarthaknagoshe2002 commented Dec 5, 2024

github-actions bot commented Dec 5, 2024 •

edited

Loading

sarthaknagoshe2002 commented Dec 5, 2024

fabiankaegy left a comment

sarthaknagoshe2002 commented Dec 5, 2024

fabiankaegy commented Dec 5, 2024

gziolo commented Dec 9, 2024

sarthaknagoshe2002 commented Dec 9, 2024 •

edited

Loading

gziolo commented Dec 9, 2024

fabiankaegy commented Dec 10, 2024

sarthaknagoshe2002 commented Dec 10, 2024

gziolo Dec 10, 2024

fabiankaegy Dec 10, 2024

gziolo Dec 10, 2024

gziolo Dec 10, 2024

fabiankaegy Dec 10, 2024

sarthaknagoshe2002 Dec 10, 2024

gziolo Dec 10, 2024

fabiankaegy commented Dec 10, 2024

jasmussen commented Dec 10, 2024

sarthaknagoshe2002 commented Dec 10, 2024

sarthaknagoshe2002 commented Dec 10, 2024

fabiankaegy commented Dec 10, 2024

sarthaknagoshe2002 commented Dec 10, 2024

gziolo left a comment •

edited

Loading

fabiankaegy left a comment

sarthaknagoshe2002 commented Dec 10, 2024

[ New Block ] Add Query Total block for displaying total query results or ranges #67629

[ New Block ] Add Query Total block for displaying total query results or ranges #67629

Conversation

sarthaknagoshe2002 commented Dec 5, 2024

What?

Why?

How?

Testing Instructions

Screenshots or screencast

github-actions bot commented Dec 5, 2024 • edited Loading

sarthaknagoshe2002 commented Dec 5, 2024

fabiankaegy left a comment

Choose a reason for hiding this comment

sarthaknagoshe2002 commented Dec 5, 2024

fabiankaegy commented Dec 5, 2024

gziolo commented Dec 9, 2024

sarthaknagoshe2002 commented Dec 9, 2024 • edited Loading

gziolo commented Dec 9, 2024

fabiankaegy commented Dec 10, 2024

sarthaknagoshe2002 commented Dec 10, 2024

gziolo Dec 10, 2024

Choose a reason for hiding this comment

fabiankaegy Dec 10, 2024

Choose a reason for hiding this comment

gziolo Dec 10, 2024

Choose a reason for hiding this comment

gziolo Dec 10, 2024

Choose a reason for hiding this comment

fabiankaegy Dec 10, 2024

Choose a reason for hiding this comment

sarthaknagoshe2002 Dec 10, 2024

Choose a reason for hiding this comment

gziolo Dec 10, 2024

Choose a reason for hiding this comment

fabiankaegy commented Dec 10, 2024

jasmussen commented Dec 10, 2024

sarthaknagoshe2002 commented Dec 10, 2024

sarthaknagoshe2002 commented Dec 10, 2024

fabiankaegy commented Dec 10, 2024

sarthaknagoshe2002 commented Dec 10, 2024

gziolo left a comment • edited Loading

Choose a reason for hiding this comment

fabiankaegy left a comment

Choose a reason for hiding this comment

sarthaknagoshe2002 commented Dec 10, 2024

github-actions bot commented Dec 5, 2024 •

edited

Loading

sarthaknagoshe2002 commented Dec 9, 2024 •

edited

Loading

gziolo left a comment •

edited

Loading