Post Comment: Handle the case where a comment does not exist

WordPress · Oct 21, 2021 · 5fecab9 · 5fecab9
1 parent a0c59f2
commit 5fecab9
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 89 deletions.
diff --git a/packages/block-library/src/post-comment-author/edit.js b/packages/block-library/src/post-comment-author/edit.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -10,18 +10,23 @@ import { PanelBody, ToggleControl } from '@wordpress/components';
 /**
  * Renders the `core/post-comment-author` 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 {Object} props.context       Inherited context.
+ * @param {Object} props                       React props.
+ * @param {Object} props.setAttributes         Callback for updating block attributes.
+ * @param {Object} props.attributes            Block attributes.
+ * @param {string} props.attributes.className  Block class name.
+ * @param {string} props.attributes.isLink     Whether the author name should be linked.
+ * @param {string} props.attributes.linkTarget Target of the link.
+ * @param {Object} props.context               Inherited context.
+ * @param {string} props.context.commentId     The comment ID.
  *
  * @return {JSX.Element} React element.
  */
-export default function Edit( { attributes, context, setAttributes } ) {
-	const { className, isLink, linkTarget } = attributes;
-	const { commentId } = context;
+export default function Edit( {
+	attributes: { className, isLink, linkTarget },
+	context: { commentId },
+	setAttributes,
+} ) {
 	const blockProps = useBlockProps( { className } );
-
 	const displayName = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );
@@ -38,6 +43,40 @@ export default function Edit( { attributes, context, setAttributes } ) {
 		[ commentId ]
 	);
 
+	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 }
+				<div { ...blockProps }>
+					<p>{ _x( 'Post Comment Author', 'block title' ) }</p>
+				</div>
+			</>
+		);
+	}
+
 	const displayAuthor = isLink ? (
 		<a
 			href="#comment-author-pseudo-link"
@@ -51,26 +90,7 @@ export default function Edit( { attributes, context, setAttributes } ) {
 
 	return (
 		<>
-			<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>
+			{ inspectorControls }
 			<div { ...blockProps }>{ displayAuthor }</div>
 		</>
 	);

diff --git a/packages/block-library/src/post-comment-author/index.php b/packages/block-library/src/post-comment-author/index.php
@@ -18,9 +18,14 @@ function render_block_core_post_comment_author( $attributes, $content, $block )
 		return '';
 	}
 
+	$comment = get_comment( $block->context['commentId'] );
+	if ( empty( $comment ) ) {
+		return '';
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes();
-	$comment_author     = get_comment_author( $block->context['commentId'] );
-	$link               = get_comment_author_url( $block->context['commentId'] );
+	$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>', $link, $attributes['linkTarget'], $comment_author );

diff --git a/packages/block-library/src/post-comment-content/edit.js b/packages/block-library/src/post-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';
@@ -38,32 +38,42 @@ export default function Edit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
-
 	const [ content ] = useEntityProp(
 		'root',
 		'comment',
 		'content',
 		commentId
 	);
 
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+		</BlockControls>
+	);
+
+	if ( ! commentId || ! content ) {
+		return (
+			<>
+				{ blockControls }
+				<div { ...blockProps }>
+					<p>{ _x( 'Post 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>
 		</>
 	);

diff --git a/packages/block-library/src/post-comment-content/index.php b/packages/block-library/src/post-comment-content/index.php
@@ -18,7 +18,12 @@ function render_block_core_post_comment_content( $attributes, $content, $block )
 		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 '';
 	}

diff --git a/packages/block-library/src/post-comment-date/edit.js b/packages/block-library/src/post-comment-date/edit.js
@@ -9,24 +9,77 @@ import {
 	CustomSelectControl,
 	ToggleControl,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
-export default function Edit( { attributes, context, setAttributes } ) {
-	const { className, format, isLink } = attributes;
-	const { commentId } = context;
-
-	const settings = __experimentalGetSettings();
-	const [ siteDateFormat ] = useEntityProp( 'root', 'site', 'date_format' );
+/**
+ * Renders the `core/post-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.className Block class name.
+ * @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: { className, format, isLink },
+	context: { commentId },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps( { className } );
 	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 ),
+			name: dateI18n( formatOption, date || new Date() ),
 		} )
 	);
 	const resolvedFormat = format || siteDateFormat || settings.formats.date;
-	const blockProps = useBlockProps( { className } );
+
+	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( 'Post Comment Date', 'block title' ) }</p>
+				</div>
+			</>
+		);
+	}
 
 	let commentDate = (
 		<time dateTime={ dateI18n( 'c', date ) }>
@@ -47,30 +100,7 @@ export default function Edit( { attributes, context, setAttributes } ) {
 
 	return (
 		<>
-			<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>
+			{ inspectorControls }
 			<div { ...blockProps }>{ commentDate }</div>
 		</>
 	);

diff --git a/packages/block-library/src/post-comment-date/index.php b/packages/block-library/src/post-comment-date/index.php
@@ -18,12 +18,17 @@ function render_block_core_post_comment_date( $attributes, $content, $block ) {
 		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,7 +37,7 @@ 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
 	);
 }

diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Placeholder, TextControl, Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { blockDefault } from '@wordpress/icons';
@@ -20,8 +20,7 @@ const TEMPLATE = [
 	[ 'core/post-comment-author' ],
 ];
 
-export default function Edit( { attributes, setAttributes } ) {
-	const { commentId } = attributes;
+export default function Edit( { attributes: { commentId }, setAttributes } ) {
 	const [ commentIdInput, setCommentIdInput ] = useState( commentId );
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -34,7 +33,7 @@ export default function Edit( { attributes, setAttributes } ) {
 			<div { ...blockProps }>
 				<Placeholder
 					icon={ blockDefault }
-					label={ __( 'Post Comment' ) }
+					label={ _x( 'Post Comment', 'block title' ) }
 					instructions={ __(
 						'To show a comment, input the comment ID.'
 					) }