@wordpress/block-library 6.0.20 → 6.1.0

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,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", "comments/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
+			}
+		}
+	}
+}

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,35 @@
+{
+	"$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
+		},
+		"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,
+};

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

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination-previous` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination-previous` 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 previous posts link for the comments pagination.
+ */
+function render_block_core_comments_pagination_previous( $attributes, $content, $block ) {
+	$default_label    = __( 'Older Comments' );
+	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$pagination_arrow = get_comments_pagination_arrow( $block, 'previous' );
+	if ( $pagination_arrow ) {
+		$label = $pagination_arrow . $label;
+	}
+
+	$filter_link_attributes = function() {
+		return get_block_wrapper_attributes();
+	};
+	add_filter( 'previous_comments_link_attributes', $filter_link_attributes );
+
+	$previous_comments_link = get_previous_comments_link( $label );
+
+	remove_filter( 'previous_comments_link_attributes', $filter_link_attributes );
+
+	if ( ! isset( $previous_comments_link ) ) {
+		return '';
+	}
+
+	return $previous_comments_link;
+}
+
+/**
+ * Registers the `core/comments-pagination-previous` block on the server.
+ */
+function register_block_core_comments_pagination_previous() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination-previous',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination_previous',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination_previous' );

package/src/comments-query-loop/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-query-loop",
 	"title": "Comments Query Loop",
@@ -6,12 +7,17 @@
 	"description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
 	"textdomain": "default",
 	"attributes": {
-		"queryId": {
-			"type": "number"
+		"inherit": {
+			"type": "boolean",
+			"default": true
 		},
-		"queryPerPage": {
+		"order": {
+			"type": "string",
+			"default": null
+		},
+		"perPage": {
 			"type": "number",
-			"default": 4
+			"default": null
 		},
 		"tagName": {
 			"type": "string",
@@ -19,8 +25,9 @@
 		}
 	},
 	"providesContext": {
-		"queryId": "queryId",
-		"queryPerPage": "queryPerPage"
+		"comments/perPage": "perPage",
+		"comments/order": "order",
+		"comments/inherit": "inherit"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
@@ -29,5 +36,6 @@
 			"gradients": true,
 			"link": true
 		}
-	}
+	},
+	"editorStyle": "wp-block-comments-editor"
 }

package/src/comments-query-loop/edit/comments-inspector-controls.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	SelectControl,
+	ToggleControl,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+
+const orderOptions = [
+	{
+		label: __( 'Newest to oldest' ),
+		value: 'desc',
+	},
+	{
+		label: __( 'Oldest to newest' ),
+		value: 'asc',
+	},
+];
+
+export default function CommentsInspectorControls( {
+	attributes: { TagName, perPage, order, inherit },
+	setAttributes,
+	defaultSettings: { defaultPerPage, defaultOrder },
+} ) {
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings' ) }>
+				<ToggleControl
+					label={ __( 'Inherit from Discussion Settings' ) }
+					checked={ inherit }
+					onChange={ () => {
+						setAttributes( {
+							inherit: ! inherit,
+							order: inherit ? defaultOrder : null,
+							perPage: inherit ? defaultPerPage : null,
+						} );
+					} }
+				/>
+				{ ! inherit && (
+					<>
+						<SelectControl
+							label={ __( 'Order by' ) }
+							value={ order }
+							options={ orderOptions }
+							onChange={ ( value ) => {
+								setAttributes( {
+									order: value,
+								} );
+							} }
+						/>
+						<NumberControl
+							__unstableInputWidth="60px"
+							label={ __( 'Items per Page' ) }
+							labelPosition="edge"
+							min={ 1 }
+							max={ 100 }
+							onChange={ ( value ) => {
+								const num = parseInt( value, 10 );
+								if ( isNaN( num ) || num < 1 || num > 100 ) {
+									return;
+								}
+								setAttributes( {
+									perPage: num,
+								} );
+							} }
+							step="1"
+							value={ perPage }
+							isDragEnabled={ false }
+						/>
+					</>
+				) }
+			</PanelBody>
+			<InspectorControls __experimentalGroup="advanced">
+				<SelectControl
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<aside>', value: 'aside' },
+					] }
+					value={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+				/>
+			</InspectorControls>
+		</InspectorControls>
+	);
+}