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

Query pagination with InnerBlocks #28125

Merged
merged 5 commits into from
Jan 20, 2021
Merged
Show file tree
Hide file tree
Changes from all 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
75 changes: 39 additions & 36 deletions lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -49,42 +49,45 @@ function gutenberg_reregister_core_block_types() {
),
'block_names' => array_merge(
array(
'archives.php' => 'core/archives',
'block.php' => 'core/block',
'calendar.php' => 'core/calendar',
'categories.php' => 'core/categories',
'cover.php' => 'core/cover',
'latest-comments.php' => 'core/latest-comments',
'latest-posts.php' => 'core/latest-posts',
'navigation.php' => 'core/navigation',
'navigation-link.php' => 'core/navigation-link',
'rss.php' => 'core/rss',
'search.php' => 'core/search',
'shortcode.php' => 'core/shortcode',
'social-link.php' => 'core/social-link',
'tag-cloud.php' => 'core/tag-cloud',
'post-author.php' => 'core/post-author',
'post-comment.php' => 'core/post-comment',
'post-comment-author.php' => 'core/post-comment-author',
'post-comment-content.php' => 'core/post-comment-content',
'post-comment-date.php' => 'core/post-comment-date',
'post-comments.php' => 'core/post-comments',
'post-comments-count.php' => 'core/post-comments-count',
'post-comments-form.php' => 'core/post-comments-form',
'post-content.php' => 'core/post-content',
'post-date.php' => 'core/post-date',
'post-excerpt.php' => 'core/post-excerpt',
'post-featured-image.php' => 'core/post-featured-image',
'post-hierarchical-terms.php' => 'core/post-hierarchical-terms',
'post-tags.php' => 'core/post-tags',
'post-title.php' => 'core/post-title',
'query.php' => 'core/query',
'query-loop.php' => 'core/query-loop',
'query-pagination.php' => 'core/query-pagination',
'site-logo.php' => 'core/site-logo',
'site-tagline.php' => 'core/site-tagline',
'site-title.php' => 'core/site-title',
'template-part.php' => 'core/template-part',
'archives.php' => 'core/archives',
'block.php' => 'core/block',
'calendar.php' => 'core/calendar',
'categories.php' => 'core/categories',
'cover.php' => 'core/cover',
'latest-comments.php' => 'core/latest-comments',
'latest-posts.php' => 'core/latest-posts',
'navigation.php' => 'core/navigation',
'navigation-link.php' => 'core/navigation-link',
'rss.php' => 'core/rss',
'search.php' => 'core/search',
'shortcode.php' => 'core/shortcode',
'social-link.php' => 'core/social-link',
'tag-cloud.php' => 'core/tag-cloud',
'post-author.php' => 'core/post-author',
'post-comment.php' => 'core/post-comment',
'post-comment-author.php' => 'core/post-comment-author',
'post-comment-content.php' => 'core/post-comment-content',
'post-comment-date.php' => 'core/post-comment-date',
'post-comments.php' => 'core/post-comments',
'post-comments-count.php' => 'core/post-comments-count',
'post-comments-form.php' => 'core/post-comments-form',
'post-content.php' => 'core/post-content',
'post-date.php' => 'core/post-date',
'post-excerpt.php' => 'core/post-excerpt',
'post-featured-image.php' => 'core/post-featured-image',
'post-hierarchical-terms.php' => 'core/post-hierarchical-terms',
'post-tags.php' => 'core/post-tags',
'post-title.php' => 'core/post-title',
'query.php' => 'core/query',
'query-loop.php' => 'core/query-loop',
'query-pagination.php' => 'core/query-pagination',
'query-pagination-next.php' => 'core/query-pagination-next',
'query-pagination-numbers.php' => 'core/query-pagination-numbers',
'query-pagination-previous.php' => 'core/query-pagination-previous',
'site-logo.php' => 'core/site-logo',
'site-tagline.php' => 'core/site-tagline',
'site-title.php' => 'core/site-title',
'template-part.php' => 'core/template-part',
)
),
),
Expand Down
1 change: 1 addition & 0 deletions lib/load.php
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ function gutenberg_is_experiment_enabled( $name ) {
require __DIR__ . '/class-wp-theme-json.php';
require __DIR__ . '/class-wp-theme-json-resolver.php';
require __DIR__ . '/global-styles.php';
require __DIR__ . '/query-utils.php';

if ( ! class_exists( 'WP_Block_Supports' ) ) {
require_once __DIR__ . '/class-wp-block-supports.php';
Expand Down
67 changes: 67 additions & 0 deletions lib/query-utils.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<?php
/**
* Utility functions used for handling Query block and blocks
* that
*
* @package gutenberg
*/

/**
* Helper function that constructs a WP_Query args object from
* a `Query` block properties.
*
* It's used in QueryLoop, QueryPaginationNumbers and QueryPaginationNext blocks.
*
* @param WP_Block $block Block instance.
* @param int $page Curren query's page.
*
* @return object Returns the constructed WP_Query object.
*/
function construct_wp_query_args( $block, $page ) {
$query = array(
'post_type' => 'post',
'order' => 'DESC',
'orderby' => 'date',
'post__not_in' => array(),
);

if ( isset( $block->context['query'] ) ) {
if ( isset( $block->context['query']['postType'] ) ) {
$query['post_type'] = $block->context['query']['postType'];
}
if ( isset( $block->context['query']['sticky'] ) && ! empty( $block->context['query']['sticky'] ) ) {
$sticky = get_option( 'sticky_posts' );
if ( 'only' === $block->context['query']['sticky'] ) {
$query['post__in'] = $sticky;
} else {
$query['post__not_in'] = array_merge( $query['post__not_in'], $sticky );
}
}
if ( isset( $block->context['query']['exclude'] ) ) {
$query['post__not_in'] = array_merge( $query['post__not_in'], $block->context['query']['exclude'] );
}
if ( isset( $block->context['query']['perPage'] ) ) {
$query['offset'] = ( $block->context['query']['perPage'] * ( $page - 1 ) ) + $block->context['query']['offset'];
$query['posts_per_page'] = $block->context['query']['perPage'];
}
if ( isset( $block->context['query']['categoryIds'] ) ) {
$query['category__in'] = $block->context['query']['categoryIds'];
}
if ( isset( $block->context['query']['tagIds'] ) ) {
$query['tag__in'] = $block->context['query']['tagIds'];
}
if ( isset( $block->context['query']['order'] ) ) {
$query['order'] = strtoupper( $block->context['query']['order'] );
}
if ( isset( $block->context['query']['orderBy'] ) ) {
$query['orderby'] = $block->context['query']['orderBy'];
}
if ( isset( $block->context['query']['author'] ) ) {
$query['author'] = $block->context['query']['author'];
}
if ( isset( $block->context['query']['search'] ) ) {
$query['s'] = $block->context['query']['search'];
}
}
return $query;
}
2 changes: 2 additions & 0 deletions packages/block-library/src/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@
@import "./video/editor.scss";
@import "./query-loop/editor.scss";
@import "./query/editor.scss";
@import "./query-pagination/editor.scss";
@import "./query-pagination-numbers/editor.scss";
@import "./post-featured-image/editor.scss";

:root .editor-styles-wrapper {
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ import * as templatePart from './template-part';
import * as query from './query';
import * as queryLoop from './query-loop';
import * as queryPagination from './query-pagination';
import * as queryPaginationNext from './query-pagination-next';
import * as queryPaginationNumbers from './query-pagination-numbers';
import * as queryPaginationPrevious from './query-pagination-previous';
import * as postTitle from './post-title';
import * as postContent from './post-content';
import * as postAuthor from './post-author';
Expand Down Expand Up @@ -215,6 +218,9 @@ export const __experimentalRegisterExperimentalCoreBlocks =
query,
queryLoop,
queryPagination,
queryPaginationNext,
queryPaginationNumbers,
queryPaginationPrevious,
postTitle,
postContent,
postAuthor,
Expand Down
53 changes: 4 additions & 49 deletions packages/block-library/src/query-loop/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -18,64 +18,19 @@ 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 : filter_var( $_GET[ $page_key ], FILTER_VALIDATE_INT );

$query = array(
'post_type' => 'post',
'offset' => 0,
'order' => 'DESC',
'orderby' => 'date',
'post__not_in' => array(),
);

if ( isset( $block->context['query'] ) ) {
if ( isset( $block->context['query']['postType'] ) ) {
$query['post_type'] = $block->context['query']['postType'];
}
if ( isset( $block->context['query']['sticky'] ) && ! empty( $block->context['query']['sticky'] ) ) {
$sticky = get_option( 'sticky_posts' );
if ( 'only' === $block->context['query']['sticky'] ) {
$query['post__in'] = $sticky;
} else {
$query['post__not_in'] = array_merge( $query['post__not_in'], $sticky );
}
}
if ( isset( $block->context['query']['exclude'] ) ) {
$query['post__not_in'] = array_merge( $query['post__not_in'], $block->context['query']['exclude'] );
}
if ( isset( $block->context['query']['perPage'] ) ) {
$query['offset'] = ( $block->context['query']['perPage'] * ( $page - 1 ) ) + $block->context['query']['offset'];
$query['posts_per_page'] = $block->context['query']['perPage'];
}
if ( isset( $block->context['query']['categoryIds'] ) ) {
$query['category__in'] = $block->context['query']['categoryIds'];
}
if ( isset( $block->context['query']['tagIds'] ) ) {
$query['tag__in'] = $block->context['query']['tagIds'];
}
if ( isset( $block->context['query']['order'] ) ) {
$query['order'] = strtoupper( $block->context['query']['order'] );
}
if ( isset( $block->context['query']['orderBy'] ) ) {
$query['orderby'] = $block->context['query']['orderBy'];
}
if ( isset( $block->context['query']['author'] ) ) {
$query['author'] = $block->context['query']['author'];
}
if ( isset( $block->context['query']['search'] ) ) {
$query['s'] = $block->context['query']['search'];
}
}

$query = construct_wp_query_args( $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['offset'] );
$query = wp_parse_args( $wp_query->query_vars, $query );
}
}

$posts = get_posts( $query );

$posts = get_posts( $query );
$classnames = '';
if ( isset( $block->context['layout'] ) && isset( $block->context['query'] ) ) {
if ( isset( $block->context['layout']['type'] ) && 'flex' === $block->context['layout']['type'] ) {
Expand Down
24 changes: 24 additions & 0 deletions packages/block-library/src/query-pagination-next/block.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"apiVersion": 2,
"name": "core/query-pagination-next",
"category": "design",
"attributes": {
"label": {
"type": "string"
}
},
"usesContext": [
"queryId",
"query"
],
"supports": {
"reusable": false,
"html": false,
"color": {
"gradients": true,
"link": true
},
"fontSize": true,
"lineHeight": true
}
}
30 changes: 30 additions & 0 deletions packages/block-library/src/query-pagination-next/edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function QueryPaginationNextEdit( {
attributes: { label },
setAttributes,
} ) {
const placeholder = __( 'Next Page' );
return (
<>
<div { ...useBlockProps() }>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this div also output in the frontend? if not, we should remove it and use the RichText as the wrapper (see Paragraph for instance)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Maybe it's not possible because "a" is inline by default though). @ellatrix do you know?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this div also output in the frontend?

It's not. I'm not sure about this though:

Maybe it's not possible because "a" is inline by default though

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is possible, we just need to update the display property to inline-block for example.

{
<RichText
tagName="a"
aria-label={ __( 'Next page link' ) }
placeholder={ placeholder }
value={ label }
allowedFormats={ [ 'core/bold', 'core/italic' ] }
onChange={ ( newLabel ) =>
setAttributes( { label: newLabel } )
}
/>
}
</div>
</>
);
}
22 changes: 22 additions & 0 deletions packages/block-library/src/query-pagination-next/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* WordPress dependencies
*/
import { _x, __ } from '@wordpress/i18n';
import { queryPaginationNext as icon } from '@wordpress/icons';

/**
* Internal dependencies
*/
import metadata from './block.json';
import edit from './edit';

const { name } = metadata;
export { metadata, name };

export const settings = {
title: _x( 'Query Pagination Next', 'block title' ),
description: __( 'Displays the next posts page link.' ),
icon,
edit,
parent: [ 'core/query-pagination' ],
};
Loading