diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index a7bf34a80888c9..9668735e079097 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -602,6 +602,15 @@ An advanced block that allows displaying post types based on different query par - **Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~ - **Attributes:** displayLayout, query, queryId, tagName +## No results + +Contains the block elements used to render content when no query results are found. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/query-no-results)) + +- **Name:** core/query-no-results +- **Category:** theme +- **Supports:** align, color (background, gradients, link, text), ~~html~~, ~~reusable~~ +- **Attributes:** + ## Pagination Displays a paginated navigation to next/previous set of posts, when applicable. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/query-pagination)) diff --git a/lib/blocks.php b/lib/blocks.php index 8a61b1ff8a4a48..4dda3aacfa4e26 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -97,6 +97,7 @@ function gutenberg_reregister_core_block_types() { 'post-title.php' => 'core/post-title', 'query.php' => 'core/query', 'post-template.php' => 'core/post-template', + 'query-no-results.php' => 'core/query-no-results', 'query-pagination.php' => 'core/query-pagination', 'query-pagination-next.php' => 'core/query-pagination-next', 'query-pagination-numbers.php' => 'core/query-pagination-numbers', diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 52a2b4f3f50b09..6b856cf5437ace 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -77,6 +77,7 @@ import * as postTitle from './post-title'; import * as preformatted from './preformatted'; import * as pullquote from './pullquote'; import * as query from './query'; +import * as queryNoResults from './query-no-results'; import * as queryPagination from './query-pagination'; import * as queryPaginationNext from './query-pagination-next'; import * as queryPaginationNumbers from './query-pagination-numbers'; @@ -250,6 +251,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env // Experimental blocks. homeLink, postAuthorName, + queryNoResults, // Full Site Editing blocks. ...( enableFSEBlocks diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json new file mode 100644 index 00000000000000..09a03821625a9d --- /dev/null +++ b/packages/block-library/src/query-no-results/block.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "core/query-no-results", + "title": "No results", + "category": "theme", + "description": "Contains the block elements used to render content when no query results are found.", + "parent": [ "core/query" ], + "textdomain": "default", + "usesContext": [ "queryId", "query" ], + "supports": { + "align": true, + "reusable": false, + "html": false, + "color": { + "gradients": true, + "link": true + } + } +} diff --git a/packages/block-library/src/query-no-results/edit.js b/packages/block-library/src/query-no-results/edit.js new file mode 100644 index 00000000000000..e2dba1152a5140 --- /dev/null +++ b/packages/block-library/src/query-no-results/edit.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +const TEMPLATE = [ + [ + 'core/paragraph', + { + placeholder: __( + 'Add a text or blocks that will display when the query returns no results.' + ), + }, + ], +]; + +export default function QueryNoResultsEdit() { + const blockProps = useBlockProps(); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + template: TEMPLATE, + } ); + return ( + <> +
+ + ); +} diff --git a/packages/block-library/src/query-no-results/index.js b/packages/block-library/src/query-no-results/index.js new file mode 100644 index 00000000000000..cd0c3209e00a9f --- /dev/null +++ b/packages/block-library/src/query-no-results/index.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { loop as icon } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon, + edit, + save, +}; diff --git a/packages/block-library/src/query-no-results/index.php b/packages/block-library/src/query-no-results/index.php new file mode 100644 index 00000000000000..2eddab9a6cb3b4 --- /dev/null +++ b/packages/block-library/src/query-no-results/index.php @@ -0,0 +1,59 @@ +context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; + $page = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ]; + $query_args = build_query_vars_from_query_block( $block, $page ); + // Override the custom query with the global query if needed. + $use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ); + if ( $use_global_query ) { + global $wp_query; + if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) { + $query_args = wp_parse_args( $wp_query->query_vars, $query_args ); + } + } + $query = new WP_Query( $query_args ); + + if ( $query->have_posts() ) { + return ''; + } + + wp_reset_postdata(); + + return sprintf( + '
%2$s
', + get_block_wrapper_attributes(), + $content + ); +} + +/** + * Registers the `core/query-no-results` block on the server. + */ +function register_block_core_query_no_results() { + register_block_type_from_metadata( + __DIR__ . '/query-no-results', + array( + 'render_callback' => 'render_block_core_query_no_results', + ) + ); +} +add_action( 'init', 'register_block_core_query_no_results' ); diff --git a/packages/block-library/src/query-no-results/save.js b/packages/block-library/src/query-no-results/save.js new file mode 100644 index 00000000000000..70161d85c27b16 --- /dev/null +++ b/packages/block-library/src/query-no-results/save.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function QueryNoResultsSave() { + return ; +} diff --git a/packages/block-library/src/query/variations.js b/packages/block-library/src/query/variations.js index 1d60a062aa6068..fb15645760f293 100644 --- a/packages/block-library/src/query/variations.js +++ b/packages/block-library/src/query/variations.js @@ -66,6 +66,7 @@ const variations = [ [ [ 'core/post-title' ], [ 'core/post-date' ] ], ], [ 'core/query-pagination' ], + [ 'core/query-no-results' ], ], scope: [ 'block' ], }, @@ -81,6 +82,7 @@ const variations = [ [ [ 'core/post-title' ], [ 'core/post-excerpt' ] ], ], [ 'core/query-pagination' ], + [ 'core/query-no-results' ], ], scope: [ 'block' ], }, @@ -100,6 +102,7 @@ const variations = [ ], ], [ 'core/query-pagination' ], + [ 'core/query-no-results' ], ], scope: [ 'block' ], }, @@ -119,6 +122,7 @@ const variations = [ ], ], [ 'core/query-pagination' ], + [ 'core/query-no-results' ], ], scope: [ 'block' ], }, diff --git a/test/integration/fixtures/blocks/core__query-no-results.html b/test/integration/fixtures/blocks/core__query-no-results.html new file mode 100644 index 00000000000000..defa48c4b45146 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query-no-results.html @@ -0,0 +1,5 @@ + + +

+ + diff --git a/test/integration/fixtures/blocks/core__query-no-results.json b/test/integration/fixtures/blocks/core__query-no-results.json new file mode 100644 index 00000000000000..7331bcdeb58e30 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query-no-results.json @@ -0,0 +1,19 @@ +[ + { + "name": "core/query-no-results", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "", + "dropCap": false, + "placeholder": "Add a text or blocks that will display when the query returns no results." + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__query-no-results.parsed.json b/test/integration/fixtures/blocks/core__query-no-results.parsed.json new file mode 100644 index 00000000000000..f0557a42c2f54b --- /dev/null +++ b/test/integration/fixtures/blocks/core__query-no-results.parsed.json @@ -0,0 +1,19 @@ +[ + { + "blockName": "core/query-no-results", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "placeholder": "Add a text or blocks that will display when the query returns no results." + }, + "innerBlocks": [], + "innerHTML": "\n

\n", + "innerContent": [ "\n

\n" ] + } + ], + "innerHTML": "\n\n", + "innerContent": [ "\n", null, "\n" ] + } +] diff --git a/test/integration/fixtures/blocks/core__query-no-results.serialized.html b/test/integration/fixtures/blocks/core__query-no-results.serialized.html new file mode 100644 index 00000000000000..defa48c4b45146 --- /dev/null +++ b/test/integration/fixtures/blocks/core__query-no-results.serialized.html @@ -0,0 +1,5 @@ + + +

+ +