@wordpress/block-library 6.0.23 → 7.0.0

package/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>
+	);
+}

package/src/comments-pagination/edit.js

@@ -0,0 +1,83 @@
+/**
+ * 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 TEMPLATE = [
+	[ 'core/comments-pagination-previous' ],
+	[ 'core/comments-pagination-numbers' ],
+	[ 'core/comments-pagination-next' ],
+];
+
+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
+		 * Comments Pagination Next or Comments Pagination Previous
+		 * block exists.
+		 */
+		return innerBlocks?.find( ( innerBlock ) => {
+			return [
+				'core/comments-pagination-previous',
+				'core/comments-pagination-next',
+			].includes( innerBlock.name );
+		} );
+	}, [] );
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		allowedBlocks: [
+			'core/comments-pagination-previous',
+			'core/comments-pagination-numbers',
+			'core/comments-pagination-next',
+		],
+		__experimentalLayout: usedLayout,
+	} );
+	return (
+		<>
+			{ hasNextPreviousBlocks && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<CommentsPaginationArrowControls
+							value={ paginationArrow }
+							onChange={ ( value ) => {
+								setAttributes( { paginationArrow: value } );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/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;
+		}
+	}
+}

package/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,
+};

package/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' );

package/src/comments-pagination/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	return <InnerBlocks.Content />;
+}

package/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;
+	}
+}

package/src/comments-pagination-next/block.json

@@ -0,0 +1,38 @@
+{
+	"$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", "comments/paginationArrow" ],
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	}
+}

package/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: { 'comments/paginationArrow': 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={ __( 'Newer comments page link' ) }
+				placeholder={ __( 'Newer Comments' ) }
+				value={ label }
+				onChange={ ( newLabel ) =>
+					setAttributes( { label: newLabel } )
+				}
+			/>
+			{ displayArrow && (
+				<span
+					className={ `wp-block-comments-pagination-next-arrow is-arrow-${ paginationArrow }` }
+				>
+					{ displayArrow }
+				</span>
+			) }
+		</a>
+	);
+}

package/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,
+};

package/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         = 0 !== $per_page ? (int) floor( $comments_number / $per_page ) : 0;
+	$default_label    = __( 'Newer Comments' );
+	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$pagination_arrow = get_comments_pagination_arrow( $block, 'next' );
+
+	$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' );

package/src/comments-pagination-numbers/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/comments-pagination-numbers",
+	"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", "comments/order" ],
+	"supports": {
+		"reusable": false,
+		"html": false
+	}
+}

package/src/comments-pagination-numbers/edit.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+const PaginationItem = ( { content, tag: Tag = 'a', extraClass = '' } ) => (
+	<Tag className={ `page-numbers ${ extraClass }` }>{ content }</Tag>
+);
+
+export default function CommentsPaginationNumbersEdit() {
+	return (
+		<div { ...useBlockProps() }>
+			<PaginationItem content="1" />
+			<PaginationItem content="2" />
+			<PaginationItem content="3" tag="span" extraClass="current" />
+			<PaginationItem content="4" />
+			<PaginationItem content="5" />
+			<PaginationItem content="..." tag="span" extraClass="dots" />
+			<PaginationItem content="8" />
+		</div>
+	);
+}

package/src/comments-pagination-numbers/editor.scss

@@ -0,0 +1,12 @@
+.wp-block-comments-pagination-numbers {
+	a {
+		text-decoration: underline;
+	}
+	.page-numbers {
+		margin-right: 2px;
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+}

package/src/comments-pagination-numbers/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { queryPaginationNumbers 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,
+};

package/src/comments-pagination-numbers/index.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination-numbers` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination-numbers` 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 numbers for the comments.
+ */
+function render_block_core_comments_pagination_numbers( $attributes, $content, $block ) {
+	// Bail out early if the post ID is not set for some reason.
+	if ( empty( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$comments_query = new WP_Comment_Query(
+		build_comment_query_vars_from_block( $block )
+	);
+	$total          = $comments_query->max_num_pages;
+
+	// Get the current comment page from the URL.
+	$current = get_query_var( 'cpage' );
+	if ( ! $current ) {
+		// Get the number of the default page.
+		$current = 'newest' === get_option( 'default_comments_page' ) ? $total : 1;
+	}
+
+	// Render links.
+	$content = paginate_comments_links(
+		array(
+			'total'     => $total,
+			'current'   => $current,
+			'prev_next' => false,
+			'echo'      => false,
+		)
+	);
+
+	if ( empty( $content ) ) {
+		return '';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$content
+	);
+}
+
+/**
+ * Registers the `core/comments-pagination-numbers` block on the server.
+ */
+function register_block_core_comments_pagination_numbers() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination-numbers',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination_numbers',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination_numbers' );

package/src/comments-pagination-previous/block.json

@@ -0,0 +1,38 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/comments-pagination-previous",
+	"title": "Previous Page",
+	"category": "theme",
+	"parent": [ "core/comments-pagination" ],
+	"description": "Displays the previous comments page link.",
+	"textdomain": "default",
+	"attributes": {
+		"label": {
+			"type": "string"
+		}
+	},
+	"usesContext": [ "postId", "comments/paginationArrow" ],
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	}
+}

package/src/comments-pagination-previous/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 CommentsPaginationPreviousEdit( {
+	attributes: { label },
+	setAttributes,
+	context: { 'comments/paginationArrow': paginationArrow },
+} ) {
+	const displayArrow = arrowMap[ paginationArrow ];
+	return (
+		<a
+			href="#comments-pagination-previous-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
+			{ ...useBlockProps() }
+		>
+			{ displayArrow && (
+				<span
+					className={ `wp-block-comments-pagination-previous-arrow is-arrow-${ paginationArrow }` }
+				>
+					{ displayArrow }
+				</span>
+			) }
+			<PlainText
+				__experimentalVersion={ 2 }
+				tagName="span"
+				aria-label={ __( 'Older comments page link' ) }
+				placeholder={ __( 'Older Comments' ) }
+				value={ label }
+				onChange={ ( newLabel ) =>
+					setAttributes( { label: newLabel } )
+				}
+			/>
+		</a>
+	);
+}

package/src/comments-pagination-previous/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { queryPaginationPrevious 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,
+};