Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try: "No results" block container for the query block #38806

Merged
merged 6 commits into from
Mar 22, 2022
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Displays when no content is 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))
Expand Down
1 change: 1 addition & 0 deletions lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -250,6 +251,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
// Experimental blocks.
homeLink,
postAuthorName,
queryNoResults,

// Full Site Editing blocks.
...( enableFSEBlocks
Expand Down
20 changes: 20 additions & 0 deletions packages/block-library/src/query-no-results/block.json
Original file line number Diff line number Diff line change
@@ -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": "Displays when no content is found.",
aristath marked this conversation as resolved.
Show resolved Hide resolved
"parent": [ "core/query" ],
"textdomain": "default",
"usesContext": [ "queryId", "query" ],
"supports": {
"align": true,
"reusable": false,
"html": false,
"color": {
"gradients": true,
"link": true
}
}
}
21 changes: 21 additions & 0 deletions packages/block-library/src/query-no-results/edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* WordPress dependencies
*/
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

const TEMPLATE = [
[ 'core/paragraph', { content: __( 'No results found' ) } ],
];

export default function QueryNoResultsEdit() {
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps, {
template: TEMPLATE,
} );
return (
<>
<div { ...innerBlocksProps } />
</>
);
}
20 changes: 20 additions & 0 deletions packages/block-library/src/query-no-results/index.js
Original file line number Diff line number Diff line change
@@ -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,
};
59 changes: 59 additions & 0 deletions packages/block-library/src/query-no-results/index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<?php
/**
* Server-side rendering of the `core/query-no-results` block.
*
* @package WordPress
*/

/**
* Renders the `core/query-no-results` block on the server.
*
* @param array $attributes Block attributes.
* @param string $content Block default content.
* @param WP_Block $block Block instance.
*
* @return string Returns the wrapper for the no results block.
*/
function render_block_core_query_no_results( $attributes, $content, $block ) {
if ( empty( trim( $content ) ) ) {
return '';
}

$page_key = isset( $block->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(
'<div %1$s>%2$s</div>',
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' );
8 changes: 8 additions & 0 deletions packages/block-library/src/query-no-results/save.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* WordPress dependencies
*/
import { InnerBlocks } from '@wordpress/block-editor';

export default function QueryNoResultsSave() {
return <InnerBlocks.Content />;
}
5 changes: 5 additions & 0 deletions test/integration/fixtures/blocks/core__query-no-results.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->
18 changes: 18 additions & 0 deletions test/integration/fixtures/blocks/core__query-no-results.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
[
{
"name": "core/query-no-results",
"isValid": true,
"attributes": {},
"innerBlocks": [
{
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": "",
"dropCap": false
},
"innerBlocks": []
}
]
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
[
{
"blockName": "core/query-no-results",
"attrs": {},
"innerBlocks": [
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n<p></p>\n",
"innerContent": [ "\n<p></p>\n" ]
}
],
"innerHTML": "\n\n",
"innerContent": [ "\n", null, "\n" ]
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->