Skip to content

Commit

Permalink
Query pagination with InnerBlocks (#28125)
Browse files Browse the repository at this point in the history
* Add query pagination blocks

* create fixtures

* fix css var name

* add new icons

* use allowedFormats instead of formattingControls
  • Loading branch information
ntsekouras authored Jan 20, 2021
1 parent e40a88c commit 1c59a2c
Show file tree
Hide file tree
Showing 51 changed files with 856 additions and 186 deletions.
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() }>
{
<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

0 comments on commit 1c59a2c

Please sign in to comment.