@wordpress/block-library 6.0.2 → 6.0.6

package/src/comment-edit-link/block.json

@@ -0,0 +1,36 @@
+{
+	"apiVersion": 2,
+	"name": "core/comment-edit-link",
+	"title": "Comment Edit Link",
+	"category": "theme",
+	"parent": [ "core/comment-template" ],
+	"description": "Displays a link to edit the comment in the WordPress Dashboard. This link is only visible to users with the edit comment capability.",
+	"textdomain": "default",
+	"usesContext": [ "commentId" ],
+	"attributes": {
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		},
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"color": {
+			"link": true,
+			"gradients": true,
+			"text": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		}
+	}
+}

package/src/comment-edit-link/edit.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( {
+	attributes: { linkTarget, textAlign },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+		</BlockControls>
+	);
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Link settings' ) }>
+				<ToggleControl
+					label={ __( 'Open in new tab' ) }
+					onChange={ ( value ) =>
+						setAttributes( {
+							linkTarget: value ? '_blank' : '_self',
+						} )
+					}
+					checked={ linkTarget === '_blank' }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	return (
+		<>
+			{ blockControls }
+			{ inspectorControls }
+			<div { ...blockProps }>
+				<a
+					href="#edit-comment-pseudo-link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					{ __( 'Edit' ) }
+				</a>
+			</div>
+		</>
+	);
+}

package/src/comment-edit-link/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { edit 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/comment-edit-link/index.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Server-side rendering of the `core/comment-edit-link` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comment-edit-link` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Return the post comment's date.
+ */
+function render_block_core_comment_edit_link( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) || ! current_user_can( 'edit_comment', $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	$edit_comment_link = get_edit_comment_link( $block->context['commentId'] );
+
+	$link_atts = '';
+
+	if ( ! empty( $attributes['linkTarget'] ) ) {
+		$link_atts .= sprintf( 'target="%s"', esc_attr( $attributes['linkTarget'] ) );
+	}
+
+	$classes = '';
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+
+	return sprintf(
+		'<div %1$s><a href="%2$s" %3$s>%4$s</a></div>',
+		$wrapper_attributes,
+		esc_url( $edit_comment_link ),
+		$link_atts,
+		esc_html__( 'Edit' )
+	);
+}
+
+/**
+ * Registers the `core/comment-edit-link` block on the server.
+ */
+function register_block_core_comment_edit_link() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comment-edit-link',
+		array(
+			'render_callback' => 'render_block_core_comment_edit_link',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_comment_edit_link' );

package/src/comment-reply-link/block.json

@@ -0,0 +1,32 @@
+{
+	"apiVersion": 2,
+	"name": "core/comment-reply-link",
+	"title": "Comment Reply Link",
+	"category": "theme",
+	"parent": [ "core/comment-template" ],
+	"description": "Displays a link to reply to a comment.",
+	"textdomain": "default",
+	"usesContext": [ "commentId" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"color": {
+			"gradients": true,
+			"link": true,
+			"text": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		},
+		"html": false
+	}
+}

package/src/comment-reply-link/edit.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+/**
+ * Renders the `core/comment-reply-link` block on the editor.
+ *
+ * @param {Object} props                      React props.
+ * @param {Object} props.setAttributes        Callback for updating block attributes.
+ * @param {Object} props.attributes           Block attributes.
+ * @param {string} props.attributes.textAlign The `textAlign` attribute.
+ *
+ * @return {JSX.Element} React element.
+ */
+function Edit( { setAttributes, attributes: { textAlign } } ) {
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+		</BlockControls>
+	);
+
+	return (
+		<>
+			{ blockControls }
+			<div { ...blockProps }>
+				<a
+					href="#comment-reply-pseudo-link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					{ __( 'Reply' ) }
+				</a>
+			</div>
+		</>
+	);
+}
+
+export default Edit;

package/src/comment-reply-link/index.js

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

package/src/comment-reply-link/index.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Server-side rendering of the `core/comment-reply-link` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comment-reply-link` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string Return the post comment's reply link.
+ */
+function render_block_core_comment_reply_link( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	$thread_comments = get_option( 'thread_comments' );
+	if ( ! $thread_comments ) {
+		return '';
+	}
+
+	$comment = get_comment( $block->context['commentId'] );
+	if ( empty( $comment ) ) {
+		return '';
+	}
+
+	$depth     = 1;
+	$max_depth = get_option( 'thread_comments_depth' );
+	$parent_id = $comment->comment_parent;
+
+	// Compute comment's depth iterating over its ancestors.
+	while ( ! empty( $parent_id ) ) {
+		$depth++;
+		$parent_id = get_comment( $parent_id )->comment_parent;
+	}
+
+	$comment_reply_link = get_comment_reply_link(
+		array(
+			'depth'     => $depth,
+			'max_depth' => $max_depth,
+		),
+		$comment
+	);
+
+	// Render nothing if the generated reply link is empty.
+	if ( empty( $comment_reply_link ) ) {
+		return;
+	}
+
+	$classes = '';
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes .= 'has-text-align-' . $attributes['textAlign'];
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$comment_reply_link
+	);
+}
+
+/**
+ * Registers the `core/comment-reply-link` block on the server.
+ */
+function register_block_core_comment_reply_link() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comment-reply-link',
+		array(
+			'render_callback' => 'render_block_core_comment_reply_link',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_comment_reply_link' );

package/src/comment-template/block.json

@@ -0,0 +1,15 @@
+{
+	"apiVersion": 2,
+	"name": "core/comment-template",
+	"title": "Comment Template",
+	"category": "design",
+	"parent": [ "core/comments-query-loop" ],
+	"description": "Contains the block elements used to render a comment, like the title, date, author, avatar and more.",
+	"textdomain": "default",
+	"usesContext": [ "queryId", "queryPerPage", "postId" ],
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"align": true
+	}
+}

package/src/comment-template/edit.js

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import {
+	BlockContextProvider,
+	BlockPreview,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { Spinner } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+
+const TEMPLATE = [
+	[ 'core/comment-author-avatar' ],
+	[ 'core/comment-author-name' ],
+	[ 'core/comment-date' ],
+	[ 'core/comment-content' ],
+	[ 'core/comment-reply-link' ],
+	[ 'core/comment-edit-link' ],
+];
+
+function CommentTemplateInnerBlocks() {
+	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
+	return <li { ...innerBlocksProps } />;
+}
+
+export default function CommentTemplateEdit( {
+	clientId,
+	context: { postId, queryPerPage },
+} ) {
+	const blockProps = useBlockProps();
+
+	const [ activeBlockContext, setActiveBlockContext ] = useState();
+
+	const { comments, blocks } = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const { getBlocks } = select( blockEditorStore );
+
+			return {
+				comments: getEntityRecords( 'root', 'comment', {
+					post: postId,
+					status: 'approve',
+					per_page: queryPerPage,
+					order: 'asc',
+				} ),
+				blocks: getBlocks( clientId ),
+			};
+		},
+		[ queryPerPage, postId, clientId ]
+	);
+
+	const blockContexts = useMemo(
+		() => comments?.map( ( comment ) => ( { commentId: comment.id } ) ),
+		[ comments ]
+	);
+
+	if ( ! comments ) {
+		return (
+			<p { ...blockProps }>
+				<Spinner />
+			</p>
+		);
+	}
+
+	if ( ! comments.length ) {
+		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
+	}
+
+	return (
+		<ul { ...blockProps }>
+			{ blockContexts &&
+				blockContexts.map( ( blockContext ) => (
+					<BlockContextProvider
+						key={ blockContext.commentId }
+						value={ blockContext }
+					>
+						{ blockContext ===
+						( activeBlockContext || blockContexts[ 0 ] ) ? (
+							<CommentTemplateInnerBlocks />
+						) : (
+							<li>
+								<BlockPreview
+									blocks={ blocks }
+									__experimentalLive
+									__experimentalOnClick={ () =>
+										setActiveBlockContext( blockContext )
+									}
+								/>
+							</li>
+						) }
+					</BlockContextProvider>
+				) ) }
+		</ul>
+	);
+}

package/src/comment-template/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { layout 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/comment-template/index.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * Server-side rendering of the `core/comment-template` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comment-template` 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 HTML representing the comments using the layout
+ * defined by the block's inner blocks.
+ */
+function render_block_core_comment_template( $attributes, $content, $block ) {
+
+	$post_id = $block->context['postId'];
+
+	// Bail out early if the post ID is not set for some reason.
+	if ( ! isset( $post_id ) ) {
+		return '';
+	}
+
+	$number = $block->context['queryPerPage'];
+
+	// Get an array of comments for the current post.
+	$comments = get_approved_comments( $post_id, array( 'number' => $number ) );
+
+	if ( count( $comments ) === 0 ) {
+		return '';
+	}
+
+	$content = '';
+	foreach ( $comments as $comment ) {
+		$block_content = ( new WP_Block(
+			$block->parsed_block,
+			array(
+				'commentId' => $comment->comment_ID,
+			)
+		) )->render( array( 'dynamic' => false ) );
+		$content      .= '<li>' . $block_content . '</li>';
+	}
+
+	return sprintf(
+		'<ul>%1$s</ul>',
+		$content
+	);
+}
+
+/**
+ * Registers the `core/comment-template` block on the server.
+ */
+function register_block_core_comment_template() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comment-template',
+		array(
+			'render_callback'   => 'render_block_core_comment_template',
+			'skip_inner_blocks' => true,
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comment_template' );

package/src/comment-template/save.js

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

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

@@ -0,0 +1,33 @@
+{
+	"apiVersion": 2,
+	"name": "core/comments-query-loop",
+	"title": "Comments Query Loop",
+	"category": "theme",
+	"description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
+	"textdomain": "default",
+	"attributes": {
+		"queryId": {
+			"type": "number"
+		},
+		"queryPerPage": {
+			"type": "number",
+			"default": 4
+		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
+		}
+	},
+	"providesContext": {
+		"queryId": "queryId",
+		"queryPerPage": "queryPerPage"
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		}
+	}
+}

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

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import QueryToolbar from './toolbar';
+
+const TEMPLATE = [ [ 'core/comment-template' ] ];
+
+export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
+	const { queryPerPage, tagName: TagName } = attributes;
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+
+	return (
+		<>
+			<BlockControls>
+				<QueryToolbar
+					queryPerPage={ queryPerPage }
+					setQuery={ setAttributes }
+				/>
+			</BlockControls>
+			<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>
+			<TagName { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/comments-query-loop/index.js

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