Block Library: Add the Comments Pagination block (#36872)

* Block Library: Add new Comments Pagination block * Block Library: Fix Comments Pagination's index.php * Block Library: Add $schema to Comments Pagination * Block Library: Add Comments Pagination fixture * Hide the component until we have the templates ready * Block Library: Fix Comments Pagination block's title Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl> * Block Library: Remove unnecessary CSS classes Co-authored-by: Carlos Bravo <hey@carlosbravo.me> Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl> Co-authored-by: David Arenas <david.arenas@automattic.com>
WordPress · Nov 30, 2021 · 604561d · 604561d
1 parent 2655693
commit 604561d
Show file tree

Hide file tree

Showing 14 changed files with 354 additions and 4 deletions.
diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json
@@ -0,0 +1,38 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/comments-pagination",
+	"title": "Comments Pagination",
+	"category": "design",
+	"parent": [ "core/comments-query-loop" ],
+	"description": "Displays a paginated navigation to next/previous set of comments, when applicable.",
+	"textdomain": "default",
+	"attributes": {
+		"paginationArrow": {
+			"type": "string",
+			"default": "none"
+		}
+	},
+	"providesContext": {
+		"paginationArrow": "paginationArrow"
+	},
+	"supports": {
+		"align": true,
+		"reusable": false,
+		"html": false,
+		"inserter": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
+		}
+	},
+	"editorStyle": "wp-block-comments-pagination-editor",
+	"style": "wp-block-comments-pagination"
+}
diff --git a/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js b/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+export function CommentsPaginationArrowControls( { value, onChange } ) {
+	return (
+		<ToggleGroupControl
+			label={ __( 'Arrow' ) }
+			value={ value }
+			onChange={ onChange }
+			help={ __(
+				'A decorative arrow appended to the next and previous comments link.'
+			) }
+			isBlock
+		>
+			<ToggleGroupControlOption
+				value="none"
+				label={ _x(
+					'None',
+					'Arrow option for Comments Pagination Next/Previous blocks'
+				) }
+			/>
+			<ToggleGroupControlOption
+				value="arrow"
+				label={ _x(
+					'Arrow',
+					'Arrow option for Comments Pagination Next/Previous blocks'
+				) }
+			/>
+			<ToggleGroupControlOption
+				value="chevron"
+				label={ _x(
+					'Chevron',
+					'Arrow option for Comments Pagination Next/Previous blocks'
+				) }
+			/>
+		</ToggleGroupControl>
+	);
+}
diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getBlockSupport } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls';
+
+const getDefaultBlockLayout = ( blockTypeOrName ) => {
+	const layoutBlockSupportConfig = getBlockSupport(
+		blockTypeOrName,
+		'__experimentalLayout'
+	);
+	return layoutBlockSupportConfig?.default;
+};
+
+export default function QueryPaginationEdit( {
+	attributes: { paginationArrow, layout },
+	setAttributes,
+	clientId,
+	name,
+} ) {
+	const usedLayout = layout || getDefaultBlockLayout( name );
+	const hasNextPreviousBlocks = useSelect( ( select ) => {
+		const { getBlocks } = select( blockEditorStore );
+		const innerBlocks = getBlocks( clientId );
+		/**
+		 * Show the `paginationArrow` control only if a
+		 * `QueryPaginationNext/Previous` block exists.
+		 */
+		return innerBlocks?.find( ( innerBlock ) => {
+			return [
+				'core/query-pagination-next',
+				'core/query-pagination-previous',
+			].includes( innerBlock.name );
+		} );
+	}, [] );
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		__experimentalLayout: usedLayout,
+	} );
+	return (
+		<>
+			{ hasNextPreviousBlocks && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<CommentsPaginationArrowControls
+							value={ paginationArrow }
+							onChange={ ( value ) => {
+								setAttributes( { paginationArrow: value } );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}
diff --git a/packages/block-library/src/comments-pagination/editor.scss b/packages/block-library/src/comments-pagination/editor.scss
@@ -0,0 +1,34 @@
+$pagination-margin: 0.5em;
+
+// Center flex items. This has an equivalent in style.scss.
+.wp-block[data-align="center"] > .wp-block-comments-pagination {
+	justify-content: center;
+}
+
+.editor-styles-wrapper {
+	.wp-block-comments-pagination {
+		max-width: 100%;
+		&.block-editor-block-list__layout {
+			margin: 0;
+		}
+	}
+}
+
+.wp-block-comments-pagination {
+	> .wp-block-comments-pagination-next,
+	> .wp-block-comments-pagination-previous,
+	> .wp-block-comments-pagination-numbers {
+		// Override editor auto block margins.
+		margin-left: 0;
+		margin-top: $pagination-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/comments-pagination/index.js b/packages/block-library/src/comments-pagination/index.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { queryPagination as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};
diff --git a/packages/block-library/src/comments-pagination/index.php b/packages/block-library/src/comments-pagination/index.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination` block on the server.
+ *
+ * @param array  $attributes Block attributes.
+ * @param string $content    Block default content.
+ *
+ * @return string Returns the wrapper for the Comments pagination.
+ */
+function render_block_core_comments_pagination( $attributes, $content ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
+/**
+ * Registers the `core/comments-pagination` block on the server.
+ */
+function register_block_core_comments_pagination() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination' );
diff --git a/packages/block-library/src/comments-pagination/save.js b/packages/block-library/src/comments-pagination/save.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	return <InnerBlocks.Content />;
+}
diff --git a/packages/block-library/src/comments-pagination/style.scss b/packages/block-library/src/comments-pagination/style.scss
@@ -0,0 +1,38 @@
+$pagination-margin: 0.5em;
+.wp-block-comments-pagination {
+	// Increased specificity to override blocks default margin.
+	> .wp-block-comments-pagination-next,
+	> .wp-block-comments-pagination-previous,
+	> .wp-block-comments-pagination-numbers {
+		/*rtl:ignore*/
+		margin-right: $pagination-margin;
+		margin-bottom: $pagination-margin;
+
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+	.wp-block-comments-pagination-previous-arrow {
+		margin-right: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+	.wp-block-comments-pagination-next-arrow {
+		margin-left: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+
+	&.aligncenter {
+		justify-content: center;
+	}
+}
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
@@ -30,6 +30,7 @@ import * as commentEditLink from './comment-edit-link';
 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 cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
@@ -254,6 +255,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								commentReplyLink,
 								commentTemplate,
 								commentsQueryLoop,
+								commentsPagination,
 								navigationArea,
 								postComment,
 								postCommentsCount,

diff --git a/packages/block-library/src/query-pagination/editor.scss b/packages/block-library/src/query-pagination/editor.scss
@@ -14,10 +14,6 @@ $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,

diff --git a/test/integration/fixtures/blocks/core__comments-pagination.html b/test/integration/fixtures/blocks/core__comments-pagination.html
@@ -0,0 +1 @@
+<!-- wp:comments-pagination {"paginationArrow":"chevron","textColor":"black","style":{"color":{"gradient":"linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"},"elements":{"link":{"color":{"text":"#ffffff"}}}},"layout":{"type":"flex","orientation":"horizontal","justifyContent":"center"}} -->
diff --git a/test/integration/fixtures/blocks/core__comments-pagination.json b/test/integration/fixtures/blocks/core__comments-pagination.json
@@ -0,0 +1,30 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/comments-pagination",
+		"isValid": true,
+		"attributes": {
+			"paginationArrow": "chevron",
+			"textColor": "black",
+			"style": {
+				"color": {
+					"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "#ffffff"
+						}
+					}
+				}
+			},
+			"layout": {
+				"type": "flex",
+				"orientation": "horizontal",
+				"justifyContent": "center"
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__comments-pagination.parsed.json b/test/integration/fixtures/blocks/core__comments-pagination.parsed.json
@@ -0,0 +1,29 @@
+[
+	{
+		"blockName": "core/comments-pagination",
+		"attrs": {
+			"paginationArrow": "chevron",
+			"textColor": "black",
+			"style": {
+				"color": {
+					"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "#ffffff"
+						}
+					}
+				}
+			},
+			"layout": {
+				"type": "flex",
+				"orientation": "horizontal",
+				"justifyContent": "center"
+			}
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__comments-pagination.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination.serialized.html
@@ -0,0 +1 @@
+<!-- wp:comments-pagination {"paginationArrow":"chevron","textColor":"black","style":{"color":{"gradient":"linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"},"elements":{"link":{"color":{"text":"#ffffff"}}}},"layout":{"type":"flex","orientation":"horizontal","justifyContent":"center"}} /-->