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.

Sign up for GitHub

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

Jump to bottom

Block Library: Add the Comments Pagination Next block #36562

Merged
merged 14 commits into from
Dec 20, 2021
Merged

Block Library: Add the Comments Pagination Next block #36562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d21fb9f
Add pagination next block
Nov 15, 2021
8f56293
Remove not needed attribute color, added arrow as context
Nov 15, 2021
8b659ab
Update fixtures
Nov 15, 2021
59bfce9
Update PHP code
Nov 16, 2021
969fe74
Update block to have arrow from comments pagination block
Dec 1, 2021
c57ad77
Add pagination arrow class on edit
Dec 1, 2021
265e8d8
Change the category for comments pagination blocks
gziolo Dec 2, 2021
fd078b9
Add function to style arrows on comment pagination in php
Dec 2, 2021
6ea4a87
Implement same styles than in query pagination
Dec 3, 2021
ce731b8
Refactor code to keep it cleaner
Dec 3, 2021
3e310f3
Add filter to be able to add attributes without a wrapper
Dec 9, 2021
5ef8519
Fix styles for comment pagination next
Dec 17, 2021
60a2e71
Update to work with comment/perPage
Dec 17, 2021
db2e960
Fix small blank space
Dec 17, 2021
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
1 change: 1 addition & 0 deletions lib/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ function gutenberg_reregister_core_block_types() {
'comment-template.php' => 'core/comment-template',
'comments-pagination.php' => 'core/comments-pagination',
gziolo marked this conversation as resolved.
Show resolved Hide resolved
'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',
Expand Down
35 changes: 35 additions & 0 deletions packages/block-library/src/comments-pagination-next/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}
}
}
44 changes: 44 additions & 0 deletions packages/block-library/src/comments-pagination-next/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<a
href="#comments-pagination-next-pseudo-link"
onClick={ ( event ) => event.preventDefault() }
{ ...useBlockProps() }
>
<PlainText
__experimentalVersion={ 2 }
tagName="span"
aria-label={ __( 'Next comments page link' ) }
placeholder={ __( 'Next Comments' ) }
value={ label }
onChange={ ( newLabel ) =>
setAttributes( { label: newLabel } )
}
/>
{ displayArrow && (
<span
className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
>
{ displayArrow }
</span>
) }
</a>
);
}
18 changes: 18 additions & 0 deletions packages/block-library/src/comments-pagination-next/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
};
62 changes: 62 additions & 0 deletions packages/block-library/src/comments-pagination-next/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 );
Copy link
Contributor

Choose a reason for hiding this comment

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

I couldn't make the pagination work as expected. I'm not sure the implementation here is correct as we have a custom Comments query and get_next_comments_link internally uses the global query $page = get_query_var( 'cpage' );

I guess we should take into account get_approved_comments that is used in the parent block to fetch the comments and we might probably need to make a new custom query ourselves, similar to QueryPagination blocks.

Copy link
Contributor

Choose a reason for hiding this comment

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

Just noting that there were some recent changes in query pagination blocks that I'll have to check first, but the fact that I couldn't make this work as expected, still stands.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm updating the code with a lot of changes that were requested if you prefer to wait for them.

How is your discussion settings configured? Maybe we have a different configuration there.

Maybe we need the comment query loop working with pagination at first, although we have already the page numbers working, so I will keep taking a look at it to have it working as expected.

Regarding

I guess we should take into account get_approved_comments that is used in the parent block to fetch the comments and we might probably need to make a new custom query ourselves, similar to QueryPagination blocks.

We started a discussion about that right here! I think now is starting to get more relevant the requirement of having a multi-query loop for comments.

Screenshot 2021-12-03 at 16 53 19

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the review! It's helping quite a lot to move the comments pagination forward.

I couldn't make the pagination work as expected. I'm not sure the implementation here is correct as we have a custom Comments query and get_next_comments_link internally uses the global query $page = get_query_var( 'cpage' );

You are adding the block outside a post or page? If this help you, I have these Discussion settings:

Screenshot 2021-12-03 at 16 53 19

If you are not and it is not working, we should also have to take a look at the Comment Pagination, as I think we are using there also the cpage query var.

I guess we should take into account get_approved_comments that is used in the parent block to fetch the comments and we might probably need to make a new custom query ourselves, similar to QueryPagination blocks.

We started a discussion about that here! Maybe this issue will help us understand the requirement of having multi-query comments like in the Query. I will add it to the conversation.


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' );
7 changes: 3 additions & 4 deletions packages/block-library/src/comments-pagination-numbers/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@
"$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",
"usesContext": [ "comments/perPage", "postId" ],
"supports": {
"reusable": false,
"html": false
},
"editorStyle": "comments-pagination-numbers-editor"
}
}
2 changes: 1 addition & 1 deletion packages/block-library/src/comments-pagination/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
19 changes: 11 additions & 8 deletions packages/block-library/src/comments-pagination/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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,
} );
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/comments-pagination/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -257,6 +258,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
commentTemplate,
commentsQueryLoop,
commentsPagination,
commentsPaginationNext,
commentsPaginationNumbers,
navigationArea,
postComment,
Expand Down
1 change: 1 addition & 0 deletions test/integration/fixtures/blocks/core__comments-pagination-next.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- wp:comments-pagination-next {"label":"Next Comments","style":{"typography":{"textTransform":"lowercase"}},"fontSize":"medium"} /-->
18 changes: 18 additions & 0 deletions test/integration/fixtures/blocks/core__comments-pagination-next.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": ""
}
]
17 changes: 17 additions & 0 deletions test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
[
{
"blockName": "core/comments-pagination-next",
"attrs": {
"label": "Next Comments",
"style": {
"typography": {
"textTransform": "lowercase"
}
},
"fontSize": "medium"
},
"innerBlocks": [],
"innerHTML": "",
"innerContent": []
}
]
1 change: 1 addition & 0 deletions test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- wp:comments-pagination-next {"label":"Next Comments","fontSize":"medium","style":{"typography":{"textTransform":"lowercase"}}} /-->