{"id":16365647,"date":"2025-04-29T07:33:32","date_gmt":"2025-04-29T07:33:32","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&#038;p=16365647"},"modified":"2025-12-01T21:38:59","modified_gmt":"2025-12-01T21:38:59","slug":"query-total-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/query-total-block\/","title":{"rendered":"Query Total block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go to the list of Blocks<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress 6.8 is set to introduce a new block called Query Total, enhancing the flexibility of the Query Loop block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This new block displays the total number of results within a query, making it easier for users to showcase the number of posts retrieved by a query loop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Query Total block is designed to be used inside a Query Loop block. It automatically counts the total number of posts retrieved by the query and displays the result in a user-friendly manner. For example, if a Query Loop retrieves 12 posts, the Query Total block will display:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-intro-1024x681.png\" alt=\"The Query total block on the site editor\" class=\"wp-image-16365648\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-intro-1024x681.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-intro-300x199.png 300w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-intro-768x510.png 768w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-intro.png 1446w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The Query total block on the site editor<\/figcaption><\/figure>\n\n\n\n<div class=\"callout callout-info\" style=\"background: #e5f5fa;border-left: 5px solid #00a0d2;padding: 1.5em 3em 1.6em 3.7em;margin-bottom: 1.5em\"><p><em><strong>Note:<\/strong> <\/em>You can only insert the Query Total Block inside a Query Loop block.<\/p><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">To add a <em>Query Total block<\/em>, click the <strong>Block Inserter<\/strong> icon when editing in the Query Loop.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click on it to add the block to your page template.You can also use the keyboard shortcut <code>\/query-total<\/code> to quickly insert the <em>Query Total block<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"984\" style=\"aspect-ratio: 1726 \/ 984;\" width=\"1726\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/quety-total-block-6.8.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To view the block toolbar, click on the block, and the toolbar will be displayed.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"62\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-toolbar.png\" alt=\"Query total block toolbar\" class=\"wp-image-16365650\" \/><figcaption class=\"wp-element-caption\">Query total block toolbar<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>Query Total block<\/em> shows seven buttons in the block toolbar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select parent block<\/li>\n\n\n\n<li>Transform to<\/li>\n\n\n\n<li>Drag icon<\/li>\n\n\n\n<li>Move arrows<\/li>\n\n\n\n<li>Change display type<\/li>\n\n\n\n<li>More options<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Select parent<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the <strong>Select parent<\/strong> button to move to the <em>Query Loop block<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"273\" height=\"65\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-select-parent.png\" alt=\"Select parent for Query Total block\" class=\"wp-image-16365651\" \/><figcaption class=\"wp-element-caption\">Select parent for Query Total block<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">Transform to<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"62\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-transform.png\" alt=\"Transform button for the Query Total block\" class=\"wp-image-16365652\" \/><figcaption class=\"wp-element-caption\">Transform button for the Query Total block<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the <strong>Transform<\/strong> button to convert the <em>Query Total block<\/em> into a <em>Columns, Details, or Group<\/em> block:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"409\" height=\"266\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-transform-to.png\" alt=\"Transform options for Query Total block\" class=\"wp-image-16365653\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-transform-to.png 409w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-transform-to-300x195.png 300w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><figcaption class=\"wp-element-caption\">Transform options for Query Total block<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">Drag icon<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"62\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-drag.png\" alt=\"Drag and drop tool on the toolbar\" class=\"wp-image-16365654\" \/><figcaption class=\"wp-element-caption\">Drag and drop tool on the toolbar<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag it to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">Move arrows<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"60\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-move.png\" alt=\"\" class=\"wp-image-16365655\" \/><figcaption class=\"wp-element-caption\">Block moving tools on the block toolbar<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The up and down arrow icons can be used to move the block up and down on the page.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\" target=\"_blank\">Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">Change display type<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The next button over will allow you to choose two types of displays:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The \u201cTotal results\u201d option displays the number of results found, for example: \u201c12 results found\u201d:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"363\" height=\"193\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-display-type.jpg\" alt=\"Display type toolbar tool\" class=\"wp-image-16365656\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-display-type.jpg 363w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-display-type-300x160.jpg 300w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><figcaption class=\"wp-element-caption\">Display type toolbar tool<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The \u201cRange display\u201d option displays the range total, for example, \u201cDisplaying 1 \u2013 10 of 12\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"426\" height=\"141\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-display-type-range.png\" alt=\"Range display type for Query Total block\" class=\"wp-image-16365657\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-display-type-range.png 426w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-display-type-range-300x99.png 300w\" sizes=\"auto, (max-width: 426px) 100vw, 426px\" \/><figcaption class=\"wp-element-caption\">Range display type for Query Total block<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"more-options\">More options<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\">More Options menu<\/a> represented by <strong>three vertical dots on the far right of the toolbar<\/strong> gives you more features such as the ability to duplicate, remove, or edit your block as HTML.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"273\" height=\"62\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-more-options.png\" alt=\"Examples of the location of the &quot;More Options&quot; menu in a Query Total block. \" class=\"wp-image-16365658\" \/><figcaption class=\"wp-element-caption\">Examples of the location of the &#8220;More Options&#8221; menu in a Query Total block.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The block settings panel contains customization options specific to the block. To get to the settings, select the block and click to open the Inspector sidebar. You should see the block settings displayed below with the title \u201cQuery total\u201d at the top:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"685\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-access-settings-1024x685.png\" alt=\"Illustrates how to open settings for Query Total block\" class=\"wp-image-16365659\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-access-settings-1024x685.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-access-settings-300x201.png 300w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-access-settings-768x514.png 768w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/query-total-access-settings.png 1446w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Illustrates how to open settings for Query Total block<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"color\">Color <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Text and background colors can be set on a per-block basis, allowing you to call attention to important content. Using the Color settings, you can customize the block by adding text, background, and link colors.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"469\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/image8.png\" alt=\"Color settings\" class=\"wp-image-16365660\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/image8.png 568w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/image8-300x248.png 300w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><figcaption class=\"wp-element-caption\">Color settings<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"typography\">Typography <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Typography settings enable you to customize the font and text appearance of the content within the <em><em>Query Total<\/em><\/em> block. The settings have various options, such as font family, size, appearance, line height, letter case, letter spacing, and decoration.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Get more details about changing typography settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dimensions\">Dimensions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <em><em>Query Total<\/em><\/em> block provides various options to adjust its dimensions, such as width and height, allowing you to customize the text layout to ensure visual consistency.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"304\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/image5.png\" alt=\"Dimension settings\" class=\"wp-image-16365661\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/image5.png 277w, https:\/\/wordpress.org\/documentation\/files\/2025\/04\/image5-273x300.png 273w\" sizes=\"auto, (max-width: 277px) 100vw, 277px\" \/><figcaption class=\"wp-element-caption\">Dimension settings<\/figcaption><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Dimension settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <em><em>Query Total<\/em><\/em> block provides border settings options to add border color, width, and radius.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"190\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/image13.png\" alt=\"Border settings\" class=\"wp-image-16365662\" \/><figcaption class=\"wp-element-caption\">Border settings<\/figcaption><\/figure>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\">For details refer to this support article: <a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Border settings overview<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"advanced\">Advanced<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab lets you add CSS class(es) to your block. This will allow you to write custom CSS and styles to the block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"154\" src=\"https:\/\/wordpress.org\/documentation\/files\/2025\/04\/image15.png\" alt=\"Advanced tab\" class=\"wp-image-16365663\" \/><figcaption class=\"wp-element-caption\">Advanced tab<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Additional CSS class(es) enables you to write custom CSS class(es) to the block, so you can style it as you see fit.<\/p>\n\n\n\n<div id=\"changelog\" class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#dce5ec;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<h2 class=\"wp-block-heading has-heading-6-font-size\">Changelog<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2025-06-28 (props to <a href=\"https:\/\/profiles.wordpress.org\/benazeer\/\">@benazeer<\/a>)\n<ul class=\"wp-block-list\">\n<li>Added overview and video<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2025-04-29 (props to <a href=\"https:\/\/profiles.wordpress.org\/n8finch\/\">@n8finch<\/a>)<\/li>\n<\/ul>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress 6.8 is set to introduce a new block called Query Total, enhancing the flexibility of the Query Loop block. This new block displays the total number of results within a query, making it easier for users to showcase the number of posts retrieved by a query loop. The Query Total block is designed to [&hellip;]<\/p>\n","protected":false},"author":7923389,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,91],"class_list":["post-16365647","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-theme-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16365647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/users\/7923389"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=16365647"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16365647\/revisions"}],"predecessor-version":[{"id":16365801,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/16365647\/revisions\/16365801"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=16365647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=16365647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}