From c5bce50c36cbc99f477c6f4393a4f4b4cff0acda Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 12 Jan 2021 09:38:10 +0200 Subject: [PATCH 1/5] Add query pagination blocks --- lib/blocks.php | 75 +++++++++--------- lib/load.php | 1 + lib/query-utils.php | 67 ++++++++++++++++ packages/block-library/src/editor.scss | 2 + packages/block-library/src/index.js | 6 ++ .../block-library/src/query-loop/index.php | 53 +------------ .../src/query-pagination-next/block.json | 24 ++++++ .../src/query-pagination-next/edit.js | 30 ++++++++ .../src/query-pagination-next/index.js | 21 +++++ .../src/query-pagination-next/index.php | 67 ++++++++++++++++ .../src/query-pagination-numbers/block.json | 14 ++++ .../src/query-pagination-numbers/edit.js | 25 ++++++ .../src/query-pagination-numbers/editor.scss | 12 +++ .../src/query-pagination-numbers/index.js | 21 +++++ .../src/query-pagination-numbers/index.php | 76 +++++++++++++++++++ .../src/query-pagination-previous/block.json | 24 ++++++ .../src/query-pagination-previous/edit.js | 30 ++++++++ .../src/query-pagination-previous/index.js | 21 +++++ .../src/query-pagination-previous/index.php | 56 ++++++++++++++ .../src/query-pagination/block.json | 4 +- .../src/query-pagination/edit.js | 71 ++++++----------- .../src/query-pagination/editor.scss | 40 ++++++++++ .../src/query-pagination/index.js | 9 ++- .../src/query-pagination/index.php | 36 +-------- .../src/query-pagination/save.js | 12 +++ .../src/query-pagination/style.scss | 21 +++++ packages/block-library/src/query/block.json | 2 +- .../src/query/edit/query-toolbar.js | 29 +++++-- packages/block-library/src/style.scss | 1 + 29 files changed, 670 insertions(+), 180 deletions(-) create mode 100644 lib/query-utils.php create mode 100644 packages/block-library/src/query-pagination-next/block.json create mode 100644 packages/block-library/src/query-pagination-next/edit.js create mode 100644 packages/block-library/src/query-pagination-next/index.js create mode 100644 packages/block-library/src/query-pagination-next/index.php create mode 100644 packages/block-library/src/query-pagination-numbers/block.json create mode 100644 packages/block-library/src/query-pagination-numbers/edit.js create mode 100644 packages/block-library/src/query-pagination-numbers/editor.scss create mode 100644 packages/block-library/src/query-pagination-numbers/index.js create mode 100644 packages/block-library/src/query-pagination-numbers/index.php create mode 100644 packages/block-library/src/query-pagination-previous/block.json create mode 100644 packages/block-library/src/query-pagination-previous/edit.js create mode 100644 packages/block-library/src/query-pagination-previous/index.js create mode 100644 packages/block-library/src/query-pagination-previous/index.php create mode 100644 packages/block-library/src/query-pagination/editor.scss create mode 100644 packages/block-library/src/query-pagination/save.js create mode 100644 packages/block-library/src/query-pagination/style.scss diff --git a/lib/blocks.php b/lib/blocks.php index 4012e9784ca16..d1428770e3540 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -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', ) ), ), diff --git a/lib/load.php b/lib/load.php index cff4bb2f49734..1d53a8122b43d 100644 --- a/lib/load.php +++ b/lib/load.php @@ -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'; diff --git a/lib/query-utils.php b/lib/query-utils.php new file mode 100644 index 0000000000000..477772728ab6a --- /dev/null +++ b/lib/query-utils.php @@ -0,0 +1,67 @@ + '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; +} diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index c9aee9f8c1be7..45449c927bac0 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -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 { diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 7cfcb0e0c74a9..376757f2bfb87 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -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'; @@ -215,6 +218,9 @@ export const __experimentalRegisterExperimentalCoreBlocks = query, queryLoop, queryPagination, + queryPaginationNext, + queryPaginationNumbers, + queryPaginationPrevious, postTitle, postContent, postAuthor, diff --git a/packages/block-library/src/query-loop/index.php b/packages/block-library/src/query-loop/index.php index f611e4fbd81d7..2326898bea28f 100644 --- a/packages/block-library/src/query-loop/index.php +++ b/packages/block-library/src/query-loop/index.php @@ -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'] ) { diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json new file mode 100644 index 0000000000000..bb701a95f69c0 --- /dev/null +++ b/packages/block-library/src/query-pagination-next/block.json @@ -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 + } +} diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js new file mode 100644 index 0000000000000..480f2ad3fb6e9 --- /dev/null +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -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 ( + <> +
+ { + + setAttributes( { label: newLabel } ) + } + /> + } +
+ + ); +} diff --git a/packages/block-library/src/query-pagination-next/index.js b/packages/block-library/src/query-pagination-next/index.js new file mode 100644 index 0000000000000..ef12c13b444ea --- /dev/null +++ b/packages/block-library/src/query-pagination-next/index.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { _x, __ } from '@wordpress/i18n'; + +/** + * 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.' ), + // TODO create icon + edit, + parent: [ 'core/query-pagination' ], +}; diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php new file mode 100644 index 0000000000000..0f9cf6544af50 --- /dev/null +++ b/packages/block-library/src/query-pagination-next/index.php @@ -0,0 +1,67 @@ +context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; + $page = empty( $_GET[ $page_key ] ) ? 1 : filter_var( $_GET[ $page_key ], FILTER_VALIDATE_INT ); + $max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0; + + $wrapper_attributes = get_block_wrapper_attributes(); + $default_label = __( 'Next Page »', 'gutenberg' ); + $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; + $content = ''; + + // Check if the pagination is for Query that inherits the global context. + if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) { + $filter_link_attributes = function() use ( $wrapper_attributes ) { + return $wrapper_attributes; + }; + add_filter( 'next_posts_link_attributes', $filter_link_attributes ); + // Take into account if we have set a bigger `max page` + // than what the query has. + global $wp_query; + if ( $max_page > $wp_query->max_num_pages ) { + $max_page = $wp_query->max_num_pages; + } + $content = get_next_posts_link( $label, $max_page ); + remove_filter( 'next_posts_link_attributes', $filter_link_attributes ); + } elseif ( ! $max_page || $max_page > $page ) { + $custom_query = new WP_Query( construct_wp_query_args( $block, $page ) ); + if ( (int) $custom_query->max_num_pages !== $page ) { + $content = sprintf( + '%3$s', + esc_url( add_query_arg( $page_key, $page + 1 ) ), + $wrapper_attributes, + $label + ); + } + wp_reset_postdata(); // Restore original Post Data. + } + return $content; +} + +/** + * Registers the `core/query-pagination-next` block on the server. + */ +function register_block_core_query_pagination_next() { + register_block_type_from_metadata( + __DIR__ . '/query-pagination-next', + array( + 'render_callback' => 'render_block_core_query_pagination_next', + ) + ); +} +add_action( 'init', 'register_block_core_query_pagination_next' ); diff --git a/packages/block-library/src/query-pagination-numbers/block.json b/packages/block-library/src/query-pagination-numbers/block.json new file mode 100644 index 0000000000000..49970983fb28f --- /dev/null +++ b/packages/block-library/src/query-pagination-numbers/block.json @@ -0,0 +1,14 @@ +{ + "apiVersion": 2, + "name": "core/query-pagination-numbers", + "category": "design", + "usesContext": [ + "queryId", + "query" + ], + "supports": { + "reusable": false, + "html": false + }, + "editorStyle": "query-pagination-numbers-editor" +} diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js new file mode 100644 index 0000000000000..3832f673ea124 --- /dev/null +++ b/packages/block-library/src/query-pagination-numbers/edit.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +const createPaginationItem = ( content, Tag = 'a', extraClass = '' ) => ( + { content } +); + +const previewPaginationNumbers = () => ( + <> + { createPaginationItem( 1 ) } + { createPaginationItem( 2 ) } + { createPaginationItem( 3, 'span', 'current' ) } + { createPaginationItem( 4 ) } + { createPaginationItem( 5 ) } + { createPaginationItem( '...', 'span', 'dots' ) } + { createPaginationItem( 8 ) } + +); + +export default function QueryPaginationNumbersEdit() { + const paginationNumbers = previewPaginationNumbers(); + return
{ paginationNumbers }
; +} diff --git a/packages/block-library/src/query-pagination-numbers/editor.scss b/packages/block-library/src/query-pagination-numbers/editor.scss new file mode 100644 index 0000000000000..a10729463ccc9 --- /dev/null +++ b/packages/block-library/src/query-pagination-numbers/editor.scss @@ -0,0 +1,12 @@ +.wp-block-query-pagination-numbers { + a { + text-decoration: underline; + } + .page-numbers { + margin-right: 2px; + &:last-child { + /*rtl:ignore*/ + margin-right: 0; + } + } +} diff --git a/packages/block-library/src/query-pagination-numbers/index.js b/packages/block-library/src/query-pagination-numbers/index.js new file mode 100644 index 0000000000000..85a2c8b24fec8 --- /dev/null +++ b/packages/block-library/src/query-pagination-numbers/index.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { _x, __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + title: _x( 'Query Pagination Numbers', 'block title' ), + description: __( 'Displays a list of page numbers for pagination' ), + // TODO create icon + edit, + parent: [ 'core/query-pagination' ], +}; diff --git a/packages/block-library/src/query-pagination-numbers/index.php b/packages/block-library/src/query-pagination-numbers/index.php new file mode 100644 index 0000000000000..14be314b32282 --- /dev/null +++ b/packages/block-library/src/query-pagination-numbers/index.php @@ -0,0 +1,76 @@ +context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; + $page = empty( $_GET[ $page_key ] ) ? 1 : filter_var( $_GET[ $page_key ], FILTER_VALIDATE_INT ); + $max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0; + + $wrapper_attributes = get_block_wrapper_attributes(); + $content = ''; + global $wp_query; + if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) { + // Take into account if we have set a bigger `max page` + // than what the query has. + $total = ! $max_page || $max_page > $wp_query->max_num_pages ? $wp_query->max_num_pages : $max_page; + $paginate_args = array( + 'prev_next' => false, + 'total' => $total, + ); + $content = paginate_links( $paginate_args ); + } else { + $block_query = new WP_Query( construct_wp_query_args( $block, $page ) ); + // `paginate_links` works with the global $wp_query, so we have to + // temporarily switch it with our custom query. + $prev_wp_query = $wp_query; + $wp_query = $block_query; + $total = ! $max_page || $max_page > $wp_query->max_num_pages ? $wp_query->max_num_pages : $max_page; + $paginate_args = array( + 'base' => '%_%', + 'format' => "?$page_key=%#%", + 'current' => max( 1, $page ), + 'total' => $total, + 'prev_next' => false, + ); + // We still need to preserve `paged` query param if exists, as is used + // for Queries that inherit from global context. + $paged = empty( $_GET['paged'] ) ? null : (int) $_GET['paged']; + if ( $paged ) { + $paginate_args['add_args'] = array( 'paged' => $paged ); + } + $content = paginate_links( $paginate_args ); + wp_reset_postdata(); // Restore original Post Data. + $wp_query = $prev_wp_query; + } + return sprintf( + '
%2$s
', + $wrapper_attributes, + $content + ); +} + +/** + * Registers the `core/query-pagination-numbers` block on the server. + */ +function register_block_core_query_pagination_numbers() { + register_block_type_from_metadata( + __DIR__ . '/query-pagination-numbers', + array( + 'render_callback' => 'render_block_core_query_pagination_numbers', + ) + ); +} +add_action( 'init', 'register_block_core_query_pagination_numbers' ); diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json new file mode 100644 index 0000000000000..15bb8d7be399e --- /dev/null +++ b/packages/block-library/src/query-pagination-previous/block.json @@ -0,0 +1,24 @@ +{ + "apiVersion": 2, + "name": "core/query-pagination-previous", + "category": "design", + "attributes": { + "label": { + "type": "string" + } + }, + "usesContext": [ + "queryId", + "query" + ], + "supports": { + "reusable": false, + "html": false, + "color": { + "gradients": true, + "link": true + }, + "fontSize": true, + "lineHeight": true + } +} diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js new file mode 100644 index 0000000000000..31a94480394b3 --- /dev/null +++ b/packages/block-library/src/query-pagination-previous/edit.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps, RichText } from '@wordpress/block-editor'; + +export default function QueryPaginationPreviousEdit( { + attributes: { label }, + setAttributes, +} ) { + const placeholder = __( 'Previous Page' ); + return ( + <> +
+ { + + setAttributes( { label: newLabel } ) + } + /> + } +
+ + ); +} diff --git a/packages/block-library/src/query-pagination-previous/index.js b/packages/block-library/src/query-pagination-previous/index.js new file mode 100644 index 0000000000000..0589a2f1d7cff --- /dev/null +++ b/packages/block-library/src/query-pagination-previous/index.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { _x, __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + title: _x( 'Query Pagination Previous', 'block title' ), + description: __( 'Displays the previous posts page link.' ), + // TODO create icon + edit, + parent: [ 'core/query-pagination' ], +}; diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php new file mode 100644 index 0000000000000..735efea618152 --- /dev/null +++ b/packages/block-library/src/query-pagination-previous/index.php @@ -0,0 +1,56 @@ +context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page'; + $page = empty( $_GET[ $page_key ] ) ? 1 : filter_var( $_GET[ $page_key ], FILTER_VALIDATE_INT ); + + $wrapper_attributes = get_block_wrapper_attributes(); + $default_label = __( '« Previous Page', 'gutenberg' ); + $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; + $content = ''; + // Check if the pagination is for Query that inherits the global context + // and handle appropriately. + if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) { + $filter_link_attributes = function() use ( $wrapper_attributes ) { + return $wrapper_attributes; + }; + add_filter( 'previous_posts_link_attributes', $filter_link_attributes ); + $content = get_previous_posts_link( $label ); + remove_filter( 'previous_posts_link_attributes', $filter_link_attributes ); + } elseif ( 1 !== $page ) { + $content = sprintf( + '%3$s', + esc_url( add_query_arg( $page_key, $page - 1 ) ), + $wrapper_attributes, + $label + ); + } + return $content; +} + +/** + * Registers the `core/query-pagination-previous` block on the server. + */ +function register_block_core_query_pagination_previous() { + register_block_type_from_metadata( + __DIR__ . '/query-pagination-previous', + array( + 'render_callback' => 'render_block_core_query_pagination_previous', + ) + ); +} +add_action( 'init', 'register_block_core_query_pagination_previous' ); diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json index bc68f40f714bf..765e4c1f0bcce 100644 --- a/packages/block-library/src/query-pagination/block.json +++ b/packages/block-library/src/query-pagination/block.json @@ -10,5 +10,7 @@ "supports": { "reusable": false, "html": false - } + }, + "editorStyle": "wp-block-query-pagination-editor", + "style": "wp-block-query-pagination" } diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js index 60e38bbafb2f4..80fae98797880 100644 --- a/packages/block-library/src/query-pagination/edit.js +++ b/packages/block-library/src/query-pagination/edit.js @@ -1,58 +1,31 @@ /** * WordPress dependencies */ -import { Button, ButtonGroup } from '@wordpress/components'; -import { chevronLeft, chevronRight } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; -import { useBlockProps } from '@wordpress/block-editor'; +import { + useBlockProps, + __experimentalUseInnerBlocksProps as useInnerBlocksProps, +} from '@wordpress/block-editor'; -/** - * Internal dependencies - */ -import { useQueryContext } from '../query'; - -export default function QueryPaginationEdit( { - context: { - query: { pages = 1 }, - queryContext, - }, -} ) { - const [ { page }, setQueryContext ] = useQueryContext() || queryContext; +const TEMPLATE = [ + [ 'core/query-pagination-previous' ], + [ 'core/query-pagination-numbers' ], + [ 'core/query-pagination-next' ], +]; - let previous; - if ( page > 1 ) { - previous = ( - - ); - } - let next; - if ( page < pages ) { - next = ( - - ); - } +export default function QueryPaginationEdit() { + const blockProps = useBlockProps(); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + template: TEMPLATE, + allowedBlocks: [ + 'core/query-pagination-previous', + 'core/query-pagination-numbers', + 'core/query-pagination-next', + ], + orientation: 'horizontal', + } ); return ( -
- { previous || next ? ( - - { previous } - { next } - - ) : ( - __( 'No pages to paginate.' ) - ) } +
+
); } diff --git a/packages/block-library/src/query-pagination/editor.scss b/packages/block-library/src/query-pagination/editor.scss new file mode 100644 index 0000000000000..f1e6440bf1743 --- /dev/null +++ b/packages/block-library/src/query-pagination/editor.scss @@ -0,0 +1,40 @@ +$pagination-margin: 0.5em; + +.wp-block > .wp-block-query-pagination { + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.editor-styles-wrapper { + .wp-block-query-pagination { + max-width: 100%; + &.block-editor-block-list__layout { + margin: 0; + } + } +} + +.block-library-query-pagination-toolbar__popover .components-popover__content { + min-width: 230px; +} +.wp-block-query-pagination { + > .wp-block-query-pagination-next, + > .wp-block-query-pagination-previous, + > .wp-block-query-pagination-numbers { + display: inline-block; + + // Override editor auto block margins. + margin-left: 0; + margin-top: $button-margin; + + /*rtl:ignore*/ + margin-right: $pagination-margin; + margin-bottom: $pagination-margin; + + &:last-child { + /*rtl:ignore*/ + margin-right: 0; + } + } +} diff --git a/packages/block-library/src/query-pagination/index.js b/packages/block-library/src/query-pagination/index.js index 235ec5a02d17d..c4f29cb1f4e66 100644 --- a/packages/block-library/src/query-pagination/index.js +++ b/packages/block-library/src/query-pagination/index.js @@ -1,18 +1,25 @@ /** * WordPress dependencies */ -import { _x } from '@wordpress/i18n'; +import { _x, __ } from '@wordpress/i18n'; /** * Internal dependencies */ import metadata from './block.json'; import edit from './edit'; +import save from './save'; const { name } = metadata; export { metadata, name }; export const settings = { title: _x( 'Query Pagination', 'block title' ), + description: __( + 'Displays a paginated navigation to next/previous set of posts, when applicable.' + ), + // TODO create icon edit, + save, + parent: [ 'core/query' ], }; diff --git a/packages/block-library/src/query-pagination/index.php b/packages/block-library/src/query-pagination/index.php index 9fba76cad4384..a9f31bf78fc4f 100644 --- a/packages/block-library/src/query-pagination/index.php +++ b/packages/block-library/src/query-pagination/index.php @@ -5,46 +5,12 @@ * @package WordPress */ -/** - * Renders the `core/query-pagination` 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 pagination for the query. - */ -function render_block_core_query_pagination( $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 ); - - $content = ''; - if ( 1 !== $page ) { - $content .= sprintf( - '
%s
', - esc_url( add_query_arg( $page_key, '2' === $page ? false : $page - 1 ) ), - __( 'Previous', 'gutenberg' ) - ); - } - if ( $page < ( isset( $block->context['query']['pages'] ) ? $block->context['query']['pages'] : 1 ) ) { - $content .= sprintf( - '
%s
', - esc_url( add_query_arg( $page_key, $page + 1 ) ), - __( 'Next', 'gutenberg' ) - ); - } - return $content; -} - /** * Registers the `core/query-pagination` block on the server. */ function register_block_core_query_pagination() { register_block_type_from_metadata( - __DIR__ . '/query-pagination', - array( - 'render_callback' => 'render_block_core_query_pagination', - ) + __DIR__ . '/query-pagination' ); } add_action( 'init', 'register_block_core_query_pagination' ); diff --git a/packages/block-library/src/query-pagination/save.js b/packages/block-library/src/query-pagination/save.js new file mode 100644 index 0000000000000..000acdcd4a605 --- /dev/null +++ b/packages/block-library/src/query-pagination/save.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +export default function save() { + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss new file mode 100644 index 0000000000000..e140863a7d981 --- /dev/null +++ b/packages/block-library/src/query-pagination/style.scss @@ -0,0 +1,21 @@ +$pagination-margin: 0.5em; +.wp-block-query-pagination { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + // Increased specificity to override blocks default margin. + > .wp-block-query-pagination-next, + > .wp-block-query-pagination-previous, + > .wp-block-query-pagination-numbers { + display: inline-block; + /*rtl:ignore*/ + margin-right: $pagination-margin; + margin-bottom: $pagination-margin; + + &:last-child { + /*rtl:ignore*/ + margin-right: 0; + } + } +} diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index 302ea1a8e8085..1de605c652b02 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -10,7 +10,7 @@ "type": "object", "default": { "perPage": null, - "pages": 1, + "pages": 0, "offset": 0, "postType": "post", "categoryIds": [], diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index 3420ecb0e8d88..467036842f2d5 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/packages/block-library/src/query/edit/query-toolbar.js @@ -5,10 +5,10 @@ import { ToolbarGroup, Dropdown, ToolbarButton, - RangeControl, BaseControl, __experimentalNumberControl as NumberControl, } from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { settings, list, grid } from '@wordpress/icons'; @@ -17,6 +17,10 @@ export default function QueryToolbar( { setQuery, setLayout, } ) { + const maxPageInputId = useInstanceId( + QueryToolbar, + 'blocks-query-pagination-max-page-input' + ); const layoutControls = [ { icon: list, @@ -79,15 +83,24 @@ export default function QueryToolbar( { isDragEnabled={ false } /> - - + - setQuery( { pages: value ?? -1 } ) + setQuery( { pages: +value } ) } + step="1" + value={ query.pages } + isDragEnabled={ false } /> diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 3a44e690c5e82..a8d23e1563793 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -29,6 +29,7 @@ @import "./preformatted/style.scss"; @import "./pullquote/style.scss"; @import "./query-loop/style.scss"; +@import "./query-pagination/style.scss"; @import "./quote/style.scss"; @import "./rss/style.scss"; @import "./search/style.scss"; From 07551473cb8c25336fb8a01fdee8f11f67af19ae Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 12 Jan 2021 09:55:42 +0200 Subject: [PATCH 2/5] create fixtures --- .../blocks/core__query-pagination-next.html | 1 + .../blocks/core__query-pagination-next.json | 10 ++++++++++ .../core__query-pagination-next.parsed.json | 18 ++++++++++++++++++ ...core__query-pagination-next.serialized.html | 1 + .../blocks/core__query-pagination-numbers.html | 1 + .../blocks/core__query-pagination-numbers.json | 10 ++++++++++ .../core__query-pagination-numbers.parsed.json | 18 ++++++++++++++++++ ...e__query-pagination-numbers.serialized.html | 1 + .../core__query-pagination-previous.html | 1 + .../core__query-pagination-previous.json | 10 ++++++++++ ...core__query-pagination-previous.parsed.json | 18 ++++++++++++++++++ ...__query-pagination-previous.serialized.html | 1 + .../blocks/core__query-pagination.html | 4 +++- .../blocks/core__query-pagination.json | 2 +- .../blocks/core__query-pagination.parsed.json | 6 ++++-- .../core__query-pagination.serialized.html | 4 +++- .../e2e-tests/fixtures/blocks/core__query.json | 2 +- 17 files changed, 102 insertions(+), 6 deletions(-) create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-next.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-next.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-next.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-next.serialized.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.serialized.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.serialized.html diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.html b/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.html new file mode 100644 index 0000000000000..6be83e191f5a3 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.json b/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.json new file mode 100644 index 0000000000000..b86a84f59bffa --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.json @@ -0,0 +1,10 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/query-pagination-next", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.parsed.json b/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.parsed.json new file mode 100644 index 0000000000000..47f7a175bad5b --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.parsed.json @@ -0,0 +1,18 @@ +[ + { + "blockName": "core/query-pagination-next", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.serialized.html b/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.serialized.html new file mode 100644 index 0000000000000..6be83e191f5a3 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-next.serialized.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.html b/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.html new file mode 100644 index 0000000000000..905d3c1d964c9 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.json b/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.json new file mode 100644 index 0000000000000..9735dfa643f43 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.json @@ -0,0 +1,10 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/query-pagination-numbers", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.parsed.json b/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.parsed.json new file mode 100644 index 0000000000000..4ff12cad3b7f5 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.parsed.json @@ -0,0 +1,18 @@ +[ + { + "blockName": "core/query-pagination-numbers", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.serialized.html b/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.serialized.html new file mode 100644 index 0000000000000..905d3c1d964c9 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-numbers.serialized.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.html b/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.html new file mode 100644 index 0000000000000..83dd3e66e25aa --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.json b/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.json new file mode 100644 index 0000000000000..b92dac9509b64 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.json @@ -0,0 +1,10 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/query-pagination-previous", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.parsed.json b/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.parsed.json new file mode 100644 index 0000000000000..4a27e5ce4270e --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.parsed.json @@ -0,0 +1,18 @@ +[ + { + "blockName": "core/query-pagination-previous", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.serialized.html b/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.serialized.html new file mode 100644 index 0000000000000..83dd3e66e25aa --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination-previous.serialized.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination.html b/packages/e2e-tests/fixtures/blocks/core__query-pagination.html index 912a9515fee7f..c962c0346e666 100644 --- a/packages/e2e-tests/fixtures/blocks/core__query-pagination.html +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination.html @@ -1 +1,3 @@ - + +
+ diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination.json b/packages/e2e-tests/fixtures/blocks/core__query-pagination.json index 079862a6cd1af..91a969ea6cc09 100644 --- a/packages/e2e-tests/fixtures/blocks/core__query-pagination.json +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination.json @@ -5,6 +5,6 @@ "isValid": true, "attributes": {}, "innerBlocks": [], - "originalContent": "" + "originalContent": "
" } ] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination.parsed.json b/packages/e2e-tests/fixtures/blocks/core__query-pagination.parsed.json index 580f3b5ef78a7..2f4be2406a774 100644 --- a/packages/e2e-tests/fixtures/blocks/core__query-pagination.parsed.json +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination.parsed.json @@ -3,8 +3,10 @@ "blockName": "core/query-pagination", "attrs": {}, "innerBlocks": [], - "innerHTML": "", - "innerContent": [] + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] }, { "blockName": null, diff --git a/packages/e2e-tests/fixtures/blocks/core__query-pagination.serialized.html b/packages/e2e-tests/fixtures/blocks/core__query-pagination.serialized.html index 912a9515fee7f..c962c0346e666 100644 --- a/packages/e2e-tests/fixtures/blocks/core__query-pagination.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__query-pagination.serialized.html @@ -1 +1,3 @@ - + +
+ diff --git a/packages/e2e-tests/fixtures/blocks/core__query.json b/packages/e2e-tests/fixtures/blocks/core__query.json index 6dd991c4ba284..de5273ce8f64c 100644 --- a/packages/e2e-tests/fixtures/blocks/core__query.json +++ b/packages/e2e-tests/fixtures/blocks/core__query.json @@ -6,7 +6,7 @@ "attributes": { "query": { "perPage": null, - "pages": 1, + "pages": 0, "offset": 0, "postType": "post", "categoryIds": [], From be7a14928487b5412c99c0d09ebb727ec3493716 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 12 Jan 2021 11:03:57 +0200 Subject: [PATCH 3/5] fix css var name --- packages/block-library/src/query-pagination/editor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/query-pagination/editor.scss b/packages/block-library/src/query-pagination/editor.scss index f1e6440bf1743..04b40e77c8db9 100644 --- a/packages/block-library/src/query-pagination/editor.scss +++ b/packages/block-library/src/query-pagination/editor.scss @@ -18,6 +18,7 @@ $pagination-margin: 0.5em; .block-library-query-pagination-toolbar__popover .components-popover__content { min-width: 230px; } + .wp-block-query-pagination { > .wp-block-query-pagination-next, > .wp-block-query-pagination-previous, @@ -26,7 +27,7 @@ $pagination-margin: 0.5em; // Override editor auto block margins. margin-left: 0; - margin-top: $button-margin; + margin-top: $pagination-margin; /*rtl:ignore*/ margin-right: $pagination-margin; From aec0e943772da6d02d7d73d38858395e350442fd Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 12 Jan 2021 12:00:22 +0200 Subject: [PATCH 4/5] add new icons --- .../src/query-pagination-next/index.js | 3 +- .../src/query-pagination-numbers/index.js | 3 +- .../src/query-pagination-previous/index.js | 3 +- .../src/query-pagination/index.js | 3 +- packages/icons/src/index.js | 4 +++ .../src/library/query-pagination-next.js | 14 +++++++++ .../src/library/query-pagination-numbers.js | 17 +++++++++++ .../src/library/query-pagination-previous.js | 30 +++++++++++++++++++ .../icons/src/library/query-pagination.js | 14 +++++++++ 9 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 packages/icons/src/library/query-pagination-next.js create mode 100644 packages/icons/src/library/query-pagination-numbers.js create mode 100644 packages/icons/src/library/query-pagination-previous.js create mode 100644 packages/icons/src/library/query-pagination.js diff --git a/packages/block-library/src/query-pagination-next/index.js b/packages/block-library/src/query-pagination-next/index.js index ef12c13b444ea..63236db84aa90 100644 --- a/packages/block-library/src/query-pagination-next/index.js +++ b/packages/block-library/src/query-pagination-next/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { _x, __ } from '@wordpress/i18n'; +import { queryPaginationNext as icon } from '@wordpress/icons'; /** * Internal dependencies @@ -15,7 +16,7 @@ export { metadata, name }; export const settings = { title: _x( 'Query Pagination Next', 'block title' ), description: __( 'Displays the next posts page link.' ), - // TODO create icon + icon, edit, parent: [ 'core/query-pagination' ], }; diff --git a/packages/block-library/src/query-pagination-numbers/index.js b/packages/block-library/src/query-pagination-numbers/index.js index 85a2c8b24fec8..41ab95578ee25 100644 --- a/packages/block-library/src/query-pagination-numbers/index.js +++ b/packages/block-library/src/query-pagination-numbers/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { _x, __ } from '@wordpress/i18n'; +import { queryPaginationNumbers as icon } from '@wordpress/icons'; /** * Internal dependencies @@ -15,7 +16,7 @@ export { metadata, name }; export const settings = { title: _x( 'Query Pagination Numbers', 'block title' ), description: __( 'Displays a list of page numbers for pagination' ), - // TODO create icon + icon, edit, parent: [ 'core/query-pagination' ], }; diff --git a/packages/block-library/src/query-pagination-previous/index.js b/packages/block-library/src/query-pagination-previous/index.js index 0589a2f1d7cff..cc6ba94a0a091 100644 --- a/packages/block-library/src/query-pagination-previous/index.js +++ b/packages/block-library/src/query-pagination-previous/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { _x, __ } from '@wordpress/i18n'; +import { queryPaginationPrevious as icon } from '@wordpress/icons'; /** * Internal dependencies @@ -15,7 +16,7 @@ export { metadata, name }; export const settings = { title: _x( 'Query Pagination Previous', 'block title' ), description: __( 'Displays the previous posts page link.' ), - // TODO create icon + icon, edit, parent: [ 'core/query-pagination' ], }; diff --git a/packages/block-library/src/query-pagination/index.js b/packages/block-library/src/query-pagination/index.js index c4f29cb1f4e66..0bb7b98a54c0d 100644 --- a/packages/block-library/src/query-pagination/index.js +++ b/packages/block-library/src/query-pagination/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { _x, __ } from '@wordpress/i18n'; +import { queryPagination as icon } from '@wordpress/icons'; /** * Internal dependencies @@ -18,7 +19,7 @@ export const settings = { description: __( 'Displays a paginated navigation to next/previous set of posts, when applicable.' ), - // TODO create icon + icon, edit, save, parent: [ 'core/query' ], diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 8a7f6dba0502a..1ef81d686dd22 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -143,6 +143,10 @@ export { default as preformatted } from './library/preformatted'; export { default as pullLeft } from './library/pull-left'; export { default as pullRight } from './library/pull-right'; export { default as pullquote } from './library/pullquote'; +export { default as queryPagination } from './library/query-pagination'; +export { default as queryPaginationNext } from './library/query-pagination-next'; +export { default as queryPaginationNumbers } from './library/query-pagination-numbers'; +export { default as queryPaginationPrevious } from './library/query-pagination-previous'; export { default as quote } from './library/quote'; export { default as receipt } from './library/receipt'; export { default as redo } from './library/redo'; diff --git a/packages/icons/src/library/query-pagination-next.js b/packages/icons/src/library/query-pagination-next.js new file mode 100644 index 0000000000000..2adc48f676d53 --- /dev/null +++ b/packages/icons/src/library/query-pagination-next.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies + */ +import { SVG, Path, Rect } from '@wordpress/primitives'; + +const queryPaginationNext = ( + + + + + +); + +export default queryPaginationNext; diff --git a/packages/icons/src/library/query-pagination-numbers.js b/packages/icons/src/library/query-pagination-numbers.js new file mode 100644 index 0000000000000..88103544b1e7f --- /dev/null +++ b/packages/icons/src/library/query-pagination-numbers.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +import { SVG, Path, Rect } from '@wordpress/primitives'; + +const queryPaginationNumbers = ( + + + + + +); + +export default queryPaginationNumbers; diff --git a/packages/icons/src/library/query-pagination-previous.js b/packages/icons/src/library/query-pagination-previous.js new file mode 100644 index 0000000000000..160b7f2edcfbc --- /dev/null +++ b/packages/icons/src/library/query-pagination-previous.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { SVG, Path, Rect } from '@wordpress/primitives'; + +const queryPaginationPrevious = ( + + + + + +); + +export default queryPaginationPrevious; diff --git a/packages/icons/src/library/query-pagination.js b/packages/icons/src/library/query-pagination.js new file mode 100644 index 0000000000000..e2369fb0f8ef7 --- /dev/null +++ b/packages/icons/src/library/query-pagination.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies + */ +import { SVG, Rect } from '@wordpress/primitives'; + +const queryPagination = ( + + + + + +); + +export default queryPagination; From 26db3c0675c874ca29d545df1a49b26493908107 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 18 Jan 2021 14:27:00 +0200 Subject: [PATCH 5/5] use allowedFormats instead of formattingControls --- packages/block-library/src/query-pagination-next/edit.js | 2 +- packages/block-library/src/query-pagination-previous/edit.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js index 480f2ad3fb6e9..ef7a5df725ceb 100644 --- a/packages/block-library/src/query-pagination-next/edit.js +++ b/packages/block-library/src/query-pagination-next/edit.js @@ -18,7 +18,7 @@ export default function QueryPaginationNextEdit( { aria-label={ __( 'Next page link' ) } placeholder={ placeholder } value={ label } - formattingControls={ [ 'bold', 'italic' ] } + allowedFormats={ [ 'core/bold', 'core/italic' ] } onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) } diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js index 31a94480394b3..c30067602bc4d 100644 --- a/packages/block-library/src/query-pagination-previous/edit.js +++ b/packages/block-library/src/query-pagination-previous/edit.js @@ -18,7 +18,7 @@ export default function QueryPaginationPreviousEdit( { aria-label={ __( 'Previous page link' ) } placeholder={ placeholder } value={ label } - formattingControls={ [ 'bold', 'italic' ] } + allowedFormats={ [ 'core/bold', 'core/italic' ] } onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }