diff --git a/lib/blocks.php b/lib/blocks.php index 844c11fa6a5d21..cd8095f5ca1fe1 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -66,6 +66,7 @@ function gutenberg_reregister_core_block_types() { 'comment-template.php' => 'core/comment-template', 'comments-pagination.php' => 'core/comments-pagination', 'comments-pagination-numbers.php' => 'core/comments-pagination-numbers', + 'comments-pagination-next.php' => 'core/comments-pagination-next', 'file.php' => 'core/file', 'home-link.php' => 'core/home-link', 'image.php' => 'core/image', diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json new file mode 100644 index 00000000000000..4354f29cad4219 --- /dev/null +++ b/packages/block-library/src/comments-pagination-next/block.json @@ -0,0 +1,35 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "core/comments-pagination-next", + "title": "Next Page", + "category": "theme", + "parent": [ "core/comments-pagination" ], + "description": "Displays the next comments page link.", + "textdomain": "default", + "attributes": { + "label": { + "type": "string" + } + }, + "usesContext": [ "postId", "comments/perPage", "paginationArrow" ], + "supports": { + "reusable": false, + "html": false, + "color": { + "gradients": true, + "text": false + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalLetterSpacing": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true + } + } + } +} diff --git a/packages/block-library/src/comments-pagination-next/edit.js b/packages/block-library/src/comments-pagination-next/edit.js new file mode 100644 index 00000000000000..7a38ea1970a060 --- /dev/null +++ b/packages/block-library/src/comments-pagination-next/edit.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps, PlainText } from '@wordpress/block-editor'; + +const arrowMap = { + none: '', + arrow: '→', + chevron: '»', +}; + +export default function CommentsPaginationNextEdit( { + attributes: { label }, + setAttributes, + context: { paginationArrow }, +} ) { + const displayArrow = arrowMap[ paginationArrow ]; + return ( + event.preventDefault() } + { ...useBlockProps() } + > + + setAttributes( { label: newLabel } ) + } + /> + { displayArrow && ( + <span + className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` } + > + { displayArrow } + </span> + ) } + </a> + ); +} diff --git a/packages/block-library/src/comments-pagination-next/index.js b/packages/block-library/src/comments-pagination-next/index.js new file mode 100644 index 00000000000000..d339ed2ca7581c --- /dev/null +++ b/packages/block-library/src/comments-pagination-next/index.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +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 = { + icon, + edit, +}; diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php new file mode 100644 index 00000000000000..95bd6181c89c78 --- /dev/null +++ b/packages/block-library/src/comments-pagination-next/index.php @@ -0,0 +1,62 @@ +<?php +/** + * Server-side rendering of the `core/comments-pagination-next` block. + * + * @package WordPress + */ + +/** + * Renders the `core/comments-pagination-next` 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 next comments link for the query pagination. + */ +function render_block_core_comments_pagination_next( $attributes, $content, $block ) { + $per_page = ! empty( $block->context['comments/perPage'] ) ? (int) $block->context['comments/perPage'] : 0; + if ( 0 === $per_page && get_option( 'page_comments' ) ) { + $per_page = (int) get_query_var( 'comments_per_page' ); + if ( 0 === $per_page ) { + $per_page = (int) get_option( 'comments_per_page' ); + } + } + $comments_number = (int) get_comments_number(); + $max_page = isset( $per_page ) ? (int) floor( $comments_number / $per_page ) : 0; + $default_label = __( 'Next Comments' ); + $label = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label; + $pagination_arrow = get_query_pagination_arrow( $block, true ); + + $filter_link_attributes = function() { + return get_block_wrapper_attributes(); + }; + add_filter( 'next_comments_link_attributes', $filter_link_attributes ); + + if ( $pagination_arrow ) { + $label .= $pagination_arrow; + } + + $next_comments_link = get_next_comments_link( $label, $max_page ); + + remove_filter( 'next_posts_link_attributes', $filter_link_attributes ); + + if ( ! isset( $next_comments_link ) ) { + return ''; + } + return $next_comments_link; +} + + +/** + * Registers the `core/comments-pagination-next` block on the server. + */ +function register_block_core_comments_pagination_next() { + register_block_type_from_metadata( + __DIR__ . '/comments-pagination-next', + array( + 'render_callback' => 'render_block_core_comments_pagination_next', + ) + ); +} +add_action( 'init', 'register_block_core_comments_pagination_next' ); diff --git a/packages/block-library/src/comments-pagination-numbers/block.json b/packages/block-library/src/comments-pagination-numbers/block.json index dbbe42dfbd191d..449d9962b274c6 100644 --- a/packages/block-library/src/comments-pagination-numbers/block.json +++ b/packages/block-library/src/comments-pagination-numbers/block.json @@ -2,8 +2,8 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, "name": "core/comments-pagination-numbers", - "title": "Comments Pagination Numbers", - "category": "theme", + "title": "Page Numbers", + "category": "theme", "parent": [ "core/comments-pagination" ], "description": "Displays a list of page numbers for comments pagination.", "textdomain": "default", @@ -11,6 +11,5 @@ "supports": { "reusable": false, "html": false - }, - "editorStyle": "comments-pagination-numbers-editor" + } } diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json index 7ddbce715c44b4..323f7c57516cbc 100644 --- a/packages/block-library/src/comments-pagination/block.json +++ b/packages/block-library/src/comments-pagination/block.json @@ -3,7 +3,7 @@ "apiVersion": 2, "name": "core/comments-pagination", "title": "Comments Pagination", - "category": "design", + "category": "theme", "parent": [ "core/comments-query-loop" ], "description": "Displays a paginated navigation to next/previous set of comments, when applicable.", "textdomain": "default", diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js index bd9051e16f05d4..302ba2036fffd3 100644 --- a/packages/block-library/src/comments-pagination/edit.js +++ b/packages/block-library/src/comments-pagination/edit.js @@ -17,8 +17,11 @@ import { PanelBody } from '@wordpress/components'; */ import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls'; -// TODO: add pagination-previous/next blocks once they are implemented. -const TEMPLATE = [ [ 'core/comments-pagination-numbers' ] ]; +// TODO: add pagination-previous blocks once they are implemented. +const TEMPLATE = [ + [ 'core/comments-pagination-numbers' ], + [ 'core/comments-pagination-next' ], +]; const getDefaultBlockLayout = ( blockTypeOrName ) => { const layoutBlockSupportConfig = getBlockSupport( @@ -40,21 +43,21 @@ export default function QueryPaginationEdit( { const innerBlocks = getBlocks( clientId ); /** * Show the `paginationArrow` control only if a - * `QueryPaginationNext/Previous` block exists. + * Comments Pagination Next block exists. */ return innerBlocks?.find( ( innerBlock ) => { - return [ - 'core/query-pagination-next', - 'core/query-pagination-previous', - ].includes( innerBlock.name ); + return [ 'core/comments-pagination-next' ].includes( + innerBlock.name + ); } ); }, [] ); const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, allowedBlocks: [ - // TODO: add pagination-previous/next blocks once they are implemented. + // TODO: add pagination-previous blocks once they are implemented. 'core/comments-pagination-numbers', + 'core/comments-pagination-next', ], __experimentalLayout: usedLayout, } ); diff --git a/packages/block-library/src/comments-pagination/style.scss b/packages/block-library/src/comments-pagination/style.scss index c6b5d9a0a29e91..c992c5a2cd7d6a 100644 --- a/packages/block-library/src/comments-pagination/style.scss +++ b/packages/block-library/src/comments-pagination/style.scss @@ -13,7 +13,8 @@ $pagination-margin: 0.5em; margin-right: 0; } } - .wp-block-comments-pagination-previous-arrow { + // wp-block-query-pagination_* is being used for both Query Loop and Comment Loop pagination arrows block. + .wp-block-query-pagination-previous-arrow { margin-right: 1ch; display: inline-block; // Needed so that the transform works. // chevron(`»`) symbol doesn't need the mirroring by us. @@ -22,7 +23,7 @@ $pagination-margin: 0.5em; transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL. } } - .wp-block-comments-pagination-next-arrow { + .wp-block-query-pagination-next-arrow { margin-left: 1ch; display: inline-block; // Needed so that the transform works. // chevron(`»`) symbol doesn't need the mirroring by us. diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 8fa9fb5eb310e5..7eb9b0da8f7901 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -31,6 +31,7 @@ import * as commentReplyLink from './comment-reply-link'; import * as commentTemplate from './comment-template'; import * as commentsQueryLoop from './comments-query-loop'; import * as commentsPagination from './comments-pagination'; +import * as commentsPaginationNext from './comments-pagination-next'; import * as commentsPaginationNumbers from './comments-pagination-numbers'; import * as cover from './cover'; import * as embed from './embed'; @@ -257,6 +258,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = commentTemplate, commentsQueryLoop, commentsPagination, + commentsPaginationNext, commentsPaginationNumbers, navigationArea, postComment, diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.html b/test/integration/fixtures/blocks/core__comments-pagination-next.html new file mode 100644 index 00000000000000..5daba1fa9ba132 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-pagination-next.html @@ -0,0 +1 @@ +<!-- wp:comments-pagination-next {"label":"Next Comments","style":{"typography":{"textTransform":"lowercase"}},"fontSize":"medium"} /--> \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.json b/test/integration/fixtures/blocks/core__comments-pagination-next.json new file mode 100644 index 00000000000000..634d741f8bf05c --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-pagination-next.json @@ -0,0 +1,18 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/comments-pagination-next", + "isValid": true, + "attributes": { + "label": "Next Comments", + "fontSize": "medium", + "style": { + "typography": { + "textTransform": "lowercase" + } + } + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json new file mode 100644 index 00000000000000..bcf62991384224 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json @@ -0,0 +1,17 @@ +[ + { + "blockName": "core/comments-pagination-next", + "attrs": { + "label": "Next Comments", + "style": { + "typography": { + "textTransform": "lowercase" + } + }, + "fontSize": "medium" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html new file mode 100644 index 00000000000000..e37502cb9c7d82 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html @@ -0,0 +1 @@ +<!-- wp:comments-pagination-next {"label":"Next Comments","fontSize":"medium","style":{"typography":{"textTransform":"lowercase"}}} /-->