Block Editor: Package updates for WordPress 5.8 beta 1 (batch2).

This includes the following fixes:

 - Fix inspector opening when clicking outside the widget areas
 - Assume light theme when a transparent background is used
 - Make Post blocks non editable inside Query block
 - Rename QueryLoop to PostTemplate block

Props ntsekouras.
See #52991.


git-svn-id: https://develop.svn.wordpress.org/trunk@51101 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Riad Benguella
2021-06-08 17:31:14 +00:00
parent 12af1ca279
commit 9ae2587b76
16 changed files with 312 additions and 251 deletions

File diff suppressed because one or more lines are too long

View File

@@ -11,13 +11,13 @@ return array(
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
<div class="wp-block-query">
<!-- wp:query-loop -->
<!-- wp:post-template -->
<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt {"wordCount":20} /-->
<!-- wp:post-date /--></div>
<!-- /wp:group -->
<!-- /wp:query-loop -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->',
);

View File

@@ -11,7 +11,7 @@ return array(
'categories' => array( 'query' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:query-loop -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>
<!-- /wp:separator -->
@@ -25,7 +25,7 @@ return array(
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:query-loop --></div>
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->',
);

View File

@@ -11,7 +11,7 @@ return array(
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query">
<!-- wp:query-loop -->
<!-- wp:post-template -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-featured-image {"isLink":true} /--></div>
@@ -21,7 +21,7 @@ return array(
<!-- wp:post-excerpt /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:query-loop -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->',
);

View File

@@ -13,26 +13,26 @@ return array(
<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-query"><!-- wp:query-loop -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-featured-image /-->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- wp:spacer {"height":200} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- /wp:query-loop --></div>
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-query"><!-- wp:query-loop -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:spacer {"height":200} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:post-featured-image /-->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- /wp:query-loop --></div>
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></main>

View File

@@ -11,7 +11,7 @@ return array(
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query">
<!-- wp:query-loop -->
<!-- wp:post-template -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true} /--></div>
@@ -20,7 +20,7 @@ return array(
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:query-loop -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->',
);

View File

@@ -11,7 +11,7 @@ return array(
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query">
<!-- wp:query-loop -->
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
<!-- wp:post-excerpt /-->
@@ -19,7 +19,7 @@ return array(
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:post-date /-->
<!-- /wp:query-loop -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->',
);

View File

@@ -21,8 +21,8 @@ require ABSPATH . WPINC . '/blocks/post-excerpt.php';
require ABSPATH . WPINC . '/blocks/post-featured-image.php';
require ABSPATH . WPINC . '/blocks/post-terms.php';
require ABSPATH . WPINC . '/blocks/post-title.php';
require ABSPATH . WPINC . '/blocks/post-template.php';
require ABSPATH . WPINC . '/blocks/query.php';
require ABSPATH . WPINC . '/blocks/query-loop.php';
require ABSPATH . WPINC . '/blocks/query-pagination.php';
require ABSPATH . WPINC . '/blocks/query-pagination-next.php';
require ABSPATH . WPINC . '/blocks/query-pagination-numbers.php';

View File

@@ -0,0 +1,148 @@
<?php
/**
* Server-side rendering of the `core/post-template` block.
*
* @package WordPress
*/
/**
* Renders the `core/post-template` 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 output of the query, structured using the layout defined by the block's inner blocks.
*/
function render_block_core_post_template( $attributes, $content, $block ) {
$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 ) ) {
// Unset `offset` because if is set, $wp_query overrides/ignores the paged parameter and breaks pagination.
unset( $query_args['offset'] );
$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
if ( empty( $query_args['post_type'] ) && is_singular() ) {
$query_args['post_type'] = get_post_type( get_the_ID() );
}
}
}
$query = new WP_Query( $query_args );
if ( ! $query->have_posts() ) {
return '';
}
$classnames = '';
if ( isset( $block->context['displayLayout'] ) && isset( $block->context['query'] ) ) {
if ( isset( $block->context['displayLayout']['type'] ) && 'flex' === $block->context['displayLayout']['type'] ) {
$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
}
}
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
$content = '';
while ( $query->have_posts() ) {
$query->the_post();
$block_content = (
new WP_Block(
$block->parsed_block,
array(
'postType' => get_post_type(),
'postId' => get_the_ID(),
)
)
)->render( array( 'dynamic' => false ) );
$content .= "<li>{$block_content}</li>";
}
wp_reset_postdata();
return sprintf(
'<ul %1$s>%2$s</ul>',
$wrapper_attributes,
$content
);
}
/**
* Registers the `core/post-template` block on the server.
*/
function register_block_core_post_template() {
register_block_type_from_metadata(
__DIR__ . '/post-template',
array(
'render_callback' => 'render_block_core_post_template',
'skip_inner_blocks' => true,
)
);
}
add_action( 'init', 'register_block_core_post_template' );
/**
* Renders the legacy `core/query-loop` block on the server.
* It triggers a developer warning and then calls the renamed
* block's `render_callback` function output.
*
* This can be removed when WordPress 5.9 is released.
*
* @param array $attributes Block attributes.
* @param string $content Block default content.
* @param WP_Block $block Block instance.
*
* @return string Returns the output of the query, structured using the layout defined by the block's inner blocks.
*/
function render_legacy_query_loop_block( $attributes, $content, $block ) {
trigger_error(
/* translators: %1$s: Block type */
sprintf( __( 'Block %1$s has been renamed to Post Template. %1$s will be supported until WordPress version 5.9.', 'gutenberg' ), $block->name ),
headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE
);
return render_block_core_post_template( $attributes, $content, $block );
}
/**
* Complements the renaming of `Query Loop` to `Post Template`.
* This ensures backwards compatibility for any users running the Gutenberg
* plugin who have used Query Loop prior to its renaming.
*
* This can be removed when WordPress 5.9 is released.
*
* @see https://github.com/WordPress/gutenberg/pull/32514
*/
function gutenberg_register_legacy_query_loop_block() {
$registry = WP_Block_Type_Registry::get_instance();
if ( $registry->is_registered( 'core/query-loop' ) ) {
unregister_block_type( 'core/query-loop' );
}
register_block_type(
'core/query-loop',
array(
'category' => 'design',
'uses_context' => array(
'queryId',
'query',
'queryContext',
'displayLayout',
'templateSlug',
),
'supports' => array(
'reusable' => false,
'html' => false,
'align' => true,
),
'style' => 'wp-block-post-template',
'render_callback' => 'render_legacy_query_loop_block',
'skip_inner_blocks' => true,
)
);
}
add_action( 'init', 'gutenberg_register_legacy_query_loop_block' );

View File

@@ -1,10 +1,10 @@
{
"apiVersion": 2,
"name": "core/query-loop",
"title": "Query Loop",
"name": "core/post-template",
"title": "Post Template",
"category": "design",
"parent": [ "core/query" ],
"description": "Query loop.",
"description": "Post Template.",
"textdomain": "default",
"usesContext": [
"queryId",
@@ -18,6 +18,6 @@
"html": false,
"align": true
},
"style": "wp-block-query-loop",
"editorStyle": "wp-block-query-loop-editor"
"style": "wp-block-post-template",
"editorStyle": "wp-block-post-template-editor"
}

View File

@@ -1,88 +0,0 @@
<?php
/**
* Server-side rendering of the `core/query-loop` block.
*
* @package WordPress
*/
/**
* Renders the `core/query-loop` 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 output of the query, structured using the layout defined by the block's inner blocks.
*/
function render_block_core_query_loop( $attributes, $content, $block ) {
$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 ) ) {
// Unset `offset` because if is set, $wp_query overrides/ignores the paged parameter and breaks pagination.
unset( $query_args['offset'] );
$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
if ( empty( $query_args['post_type'] ) && is_singular() ) {
$query_args['post_type'] = get_post_type( get_the_ID() );
}
}
}
$query = new WP_Query( $query_args );
if ( ! $query->have_posts() ) {
return '';
}
$classnames = '';
if ( isset( $block->context['displayLayout'] ) && isset( $block->context['query'] ) ) {
if ( isset( $block->context['displayLayout']['type'] ) && 'flex' === $block->context['displayLayout']['type'] ) {
$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
}
}
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
$content = '';
while ( $query->have_posts() ) {
$query->the_post();
$block_content = (
new WP_Block(
$block->parsed_block,
array(
'postType' => get_post_type(),
'postId' => get_the_ID(),
)
)
)->render( array( 'dynamic' => false ) );
$content .= "<li>{$block_content}</li>";
}
wp_reset_postdata();
return sprintf(
'<ul %1$s>%2$s</ul>',
$wrapper_attributes,
$content
);
}
/**
* Registers the `core/query-loop` block on the server.
*/
function register_block_core_query_loop() {
register_block_type_from_metadata(
__DIR__ . '/query-loop',
array(
'render_callback' => 'render_block_core_query_loop',
'skip_inner_blocks' => true,
)
);
}
add_action( 'init', 'register_block_core_query_loop' );

View File

@@ -1,7 +1,7 @@
{
"apiVersion": 2,
"name": "core/query",
"title": "Query",
"title": "Query Loop",
"category": "design",
"description": "Displays a list of posts as a result of a query.",
"textdomain": "default",