@wordpress/block-library 6.0.2 → 6.0.6

package/src/comment-author-avatar/index.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Server-side rendering of the `core/comment-author-avatar` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comment-author-avatar` 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 avatar.
+ */
+function render_block_core_comment_author_avatar( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	$comment = get_comment( $block->context['commentId'] );
+	if ( ! $comment ) {
+		return '';
+	}
+
+	// This is the only way to retreive style and classes on different instances.
+	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
+	$width              = isset( $attributes['width'] ) ? $attributes['width'] : 96;
+	$height             = isset( $attributes['height'] ) ? $attributes['height'] : 96;
+	$styles             = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
+	$classes            = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
+
+	/* translators: %s is the Comment Author name */
+	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
+
+	$avatar_string = get_avatar(
+		$comment,
+		null,
+		'',
+		$alt,
+		array(
+			'height'     => $height,
+			'width'      => $width,
+			'extra_attr' => sprintf( 'style="%1s"', $styles ),
+			'class'      => $classes,
+		)
+	);
+	return $avatar_string;
+}
+
+/**
+ * Registers the `core/comment-author-avatar` block on the server.
+ */
+function register_block_core_comment_author_avatar() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comment-author-avatar',
+		array(
+			'render_callback' => 'render_block_core_comment_author_avatar',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comment_author_avatar' );

package/src/{post-comment-author → comment-author-name}/block.json

@@ -1,10 +1,10 @@
 {
 	"apiVersion": 2,
-	"name": "core/post-comment-author",
-	"title": "Post Comment Author",
-	"category": "design",
-	"parent": [ "core/post-comment" ],
-	"description": "Post comment author.",
+	"name": "core/comment-author-name",
+	"title": "Comment Author Name",
+	"category": "theme",
+	"parent": [ "core/comment-template" ],
+	"description": "Add the author name of this comment.",
 	"textdomain": "default",
 	"attributes": {
 		"isLink": {
@@ -14,11 +14,18 @@
 		"linkTarget": {
 			"type": "string",
 			"default": "_self"
+		},
+		"textAlign": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
 		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true

package/src/comment-author-name/edit.js

@@ -0,0 +1,124 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	AlignmentControl,
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+
+/**
+ * Renders the `core/comment-author-name` 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.isLink     Whether the author name should be linked.
+ * @param {string} props.attributes.linkTarget Target of the link.
+ * @param {string} props.attributes.textAlign  Text alignment.
+ * @param {Object} props.context               Inherited context.
+ * @param {string} props.context.commentId     The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
+export default function Edit( {
+	attributes: { isLink, linkTarget, textAlign },
+	context: { commentId },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+	const displayName = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+
+			const comment = getEntityRecord( 'root', 'comment', commentId );
+			const authorName = comment?.author_name; // eslint-disable-line camelcase
+
+			if ( comment && ! authorName ) {
+				const user = getEntityRecord( 'root', 'user', comment.author );
+				return user?.name ?? __( 'Anonymous' );
+			}
+			return authorName ?? '';
+		},
+		[ commentId ]
+	);
+
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+		</BlockControls>
+	);
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Link settings' ) }>
+				<ToggleControl
+					label={ __( 'Link to authors URL' ) }
+					onChange={ () => setAttributes( { isLink: ! isLink } ) }
+					checked={ isLink }
+				/>
+				{ isLink && (
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								linkTarget: value ? '_blank' : '_self',
+							} )
+						}
+						checked={ linkTarget === '_blank' }
+					/>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	if ( ! commentId || ! displayName ) {
+		return (
+			<>
+				{ inspectorControls }
+				{ blockControls }
+				<div { ...blockProps }>
+					<p>{ _x( 'Comment Author', 'block title' ) }</p>
+				</div>
+			</>
+		);
+	}
+
+	const displayAuthor = isLink ? (
+		<a
+			href="#comment-author-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			{ displayName }
+		</a>
+	) : (
+		<p>{ displayName }</p>
+	);
+
+	return (
+		<>
+			{ inspectorControls }
+			{ blockControls }
+			<div { ...blockProps }>{ displayAuthor }</div>
+		</>
+	);
+}

package/src/{post-comment-author → comment-author-name}/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { commentAuthorName as icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -5,11 +10,6 @@ import metadata from './block.json';
 import edit from './edit';
 import deprecated from './deprecated';
 
-/**
- * WordPress dependencies
- */
-import { commentAuthor as icon } from '@wordpress/icons';
-
 const { name } = metadata;
 export { metadata, name };
 

package/src/comment-author-name/index.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Server-side rendering of the `core/comment-author-name` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comment-author-name` 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 author.
+ */
+function render_block_core_comment_author_name( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	$comment = get_comment( $block->context['commentId'] );
+	if ( empty( $comment ) ) {
+		return '';
+	}
+
+	$classes = '';
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$comment_author     = get_comment_author( $comment );
+	$link               = get_comment_author_url( $comment );
+
+	if ( ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
+		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
+	}
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$comment_author
+	);
+}
+
+/**
+ * Registers the `core/comment-author-name` block on the server.
+ */
+function register_block_core_comment_author_name() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comment-author-name',
+		array(
+			'render_callback' => 'render_block_core_comment_author_name',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comment_author_name' );

package/src/{post-comment-content → comment-content}/block.json

@@ -1,10 +1,10 @@
 {
 	"apiVersion": 2,
-	"name": "core/post-comment-content",
-	"title": "Post Comment Content",
-	"category": "design",
-	"parent": [ "core/post-comment" ],
-	"description": "Post comment content",
+	"name": "core/comment-content",
+	"title": "Comment Content",
+	"category": "theme",
+	"parent": [ "core/comment-template" ],
+	"description": "Displays the contents of a comment.",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],
 	"attributes": {

package/src/{post-comment-content → comment-content}/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { RawHTML } from '@wordpress/element';
 import { Disabled } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
@@ -17,7 +17,7 @@ import {
 } from '@wordpress/block-editor';
 
 /**
- * Renders the `core/post-comment-content` block on the editor.
+ * Renders the `core/comment-content` block on the editor.
  *
  * @param {Object} props                      React props.
  * @param {Object} props.setAttributes        Callback for updating block attributes.
@@ -38,7 +38,6 @@ export default function Edit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
-
 	const [ content ] = useEntityProp(
 		'root',
 		'comment',
@@ -46,24 +45,35 @@ export default function Edit( {
 		commentId
 	);
 
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+		</BlockControls>
+	);
+
+	if ( ! commentId || ! content ) {
+		return (
+			<>
+				{ blockControls }
+				<div { ...blockProps }>
+					<p>{ _x( 'Comment Content', 'block title' ) }</p>
+				</div>
+			</>
+		);
+	}
+
 	return (
 		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( newAlign ) =>
-						setAttributes( { textAlign: newAlign } )
-					}
-				/>
-			</BlockControls>
+			{ blockControls }
 			<div { ...blockProps }>
-				{ ! commentId || ! content ? (
-					<p>{ __( 'Post Comment Content' ) }</p>
-				) : (
-					<Disabled>
-						<RawHTML key="html">{ content.rendered }</RawHTML>
-					</Disabled>
-				) }
+				<Disabled>
+					<RawHTML key="html">{ content.rendered }</RawHTML>
+				</Disabled>
 			</div>
 		</>
 	);

package/src/{post-comment-content → comment-content}/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { postCommentContent as icon } from '@wordpress/icons';
+import { commentContent as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

package/src/{post-comment-content → comment-content}/index.php

@@ -1,24 +1,29 @@
 <?php
 /**
- * Server-side rendering of the `core/post-comment-content` block.
+ * Server-side rendering of the `core/comment-content` block.
  *
  * @package WordPress
  */
 
 /**
- * Renders the `core/post-comment-content` block on the server.
+ * Renders the `core/comment-content` 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 content.
  */
-function render_block_core_post_comment_content( $attributes, $content, $block ) {
+function render_block_core_comment_content( $attributes, $content, $block ) {
 	if ( ! isset( $block->context['commentId'] ) ) {
 		return '';
 	}
 
-	$comment_text = get_comment_text( $block->context['commentId'] );
+	$comment = get_comment( $block->context['commentId'] );
+	if ( empty( $comment ) ) {
+		return '';
+	}
+
+	$comment_text = get_comment_text( $comment );
 	if ( ! $comment_text ) {
 		return '';
 	}
@@ -38,14 +43,14 @@ function render_block_core_post_comment_content( $attributes, $content, $block )
 }
 
 /**
- * Registers the `core/post-comment-content` block on the server.
+ * Registers the `core/comment-content` block on the server.
  */
-function register_block_core_post_comment_content() {
+function register_block_core_comment_content() {
 	register_block_type_from_metadata(
-		__DIR__ . '/post-comment-content',
+		__DIR__ . '/comment-content',
 		array(
-			'render_callback' => 'render_block_core_post_comment_content',
+			'render_callback' => 'render_block_core_comment_content',
 		)
 	);
 }
-add_action( 'init', 'register_block_core_post_comment_content' );
+add_action( 'init', 'register_block_core_comment_content' );

package/src/{post-comment-date → comment-date}/block.json

@@ -1,10 +1,10 @@
 {
 	"apiVersion": 2,
-	"name": "core/post-comment-date",
-	"title": "Post Comment Date",
-	"category": "design",
-	"parent": [ "core/post-comment" ],
-	"description": "Post comment date.",
+	"name": "core/comment-date",
+	"title": "Comment Date",
+	"category": "theme",
+	"parent": [ "core/comment-template" ],
+	"description": "Add the date of this comment.",
 	"textdomain": "default",
 	"attributes": {
 		"format": {
@@ -29,7 +29,10 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/comment-date/edit.js

@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	CustomSelectControl,
+	ToggleControl,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Renders the `core/comment-date` 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.format Format of the date.
+ * @param {string} props.attributes.isLink Whether the author name should be linked.
+ * @param {Object} props.context           Inherited context.
+ * @param {string} props.context.commentId The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
+export default function Edit( {
+	attributes: { format, isLink },
+	context: { commentId },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps();
+	const [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
+	const [ siteDateFormat ] = useEntityProp( 'root', 'site', 'date_format' );
+
+	const settings = __experimentalGetSettings();
+	const formatOptions = Object.values( settings.formats ).map(
+		( formatOption ) => ( {
+			key: formatOption,
+			name: dateI18n( formatOption, date || new Date() ),
+		} )
+	);
+	const resolvedFormat = format || siteDateFormat || settings.formats.date;
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Format settings' ) }>
+				<CustomSelectControl
+					hideLabelFromVision
+					label={ __( 'Date Format' ) }
+					options={ formatOptions }
+					onChange={ ( { selectedItem } ) =>
+						setAttributes( {
+							format: selectedItem.key,
+						} )
+					}
+					value={ formatOptions.find(
+						( option ) => option.key === resolvedFormat
+					) }
+				/>
+			</PanelBody>
+			<PanelBody title={ __( 'Link settings' ) }>
+				<ToggleControl
+					label={ __( 'Link to comment' ) }
+					onChange={ () => setAttributes( { isLink: ! isLink } ) }
+					checked={ isLink }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	if ( ! commentId || ! date ) {
+		return (
+			<>
+				{ inspectorControls }
+				<div { ...blockProps }>
+					<p>{ _x( 'Comment Date', 'block title' ) }</p>
+				</div>
+			</>
+		);
+	}
+
+	let commentDate = (
+		<time dateTime={ dateI18n( 'c', date ) }>
+			{ dateI18n( resolvedFormat, date ) }
+		</time>
+	);
+
+	if ( isLink ) {
+		commentDate = (
+			<a
+				href="#comment-date-pseudo-link"
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				{ commentDate }
+			</a>
+		);
+	}
+
+	return (
+		<>
+			{ inspectorControls }
+			<div { ...blockProps }>{ commentDate }</div>
+		</>
+	);
+}

package/src/{post-comment-date → comment-date}/index.php

@@ -1,29 +1,34 @@
 <?php
 /**
- * Server-side rendering of the `core/post-comment-date` block.
+ * Server-side rendering of the `core/comment-date` block.
  *
  * @package WordPress
  */
 
 /**
- * Renders the `core/post-comment-date` block on the server.
+ * Renders the `core/comment-date` 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_post_comment_date( $attributes, $content, $block ) {
+function render_block_core_comment_date( $attributes, $content, $block ) {
 	if ( ! isset( $block->context['commentId'] ) ) {
 		return '';
 	}
 
+	$comment = get_comment( $block->context['commentId'] );
+	if ( empty( $comment ) ) {
+		return '';
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$formatted_date     = get_comment_date(
 		isset( $attributes['format'] ) ? $attributes['format'] : '',
-		$block->context['commentId']
+		$comment
 	);
-	$link               = get_comment_link( $block->context['commentId'] );
+	$link               = get_comment_link( $comment );
 
 	if ( ! empty( $attributes['isLink'] ) ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', $link, $formatted_date );
@@ -32,20 +37,20 @@ function render_block_core_post_comment_date( $attributes, $content, $block ) {
 	return sprintf(
 		'<div %1$s><time datetime="%2$s">%3$s</time></div>',
 		$wrapper_attributes,
-		get_comment_date( 'c', $block->context['commentId'] ),
+		get_comment_date( 'c', $comment ),
 		$formatted_date
 	);
 }
 
 /**
- * Registers the `core/post-comment-date` block on the server.
+ * Registers the `core/comment-date` block on the server.
  */
-function register_block_core_post_comment_date() {
+function register_block_core_comment_date() {
 	register_block_type_from_metadata(
-		__DIR__ . '/post-comment-date',
+		__DIR__ . '/comment-date',
 		array(
-			'render_callback' => 'render_block_core_post_comment_date',
+			'render_callback' => 'render_block_core_comment_date',
 		)
 	);
 }
-add_action( 'init', 'register_block_core_post_comment_date' );
+add_action( 'init', 'register_block_core_comment_date' );