[Block Library - Post Comment Content]: Fix block's edit function (#3…

…5190) * [Block Library - Post Comment Content]: Fix block's edit function * Update packages/block-library/src/post-comment-content/index.php Co-authored-by: George Mamadashvili <[email protected]> * address feedback Co-authored-by: George Mamadashvili <[email protected]>
WordPress · Sep 28, 2021 · 68b99e8 · 68b99e8
1 parent 6fc7ce7
commit 68b99e8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 19 deletions.
diff --git a/packages/block-library/src/post-comment-content/edit.js b/packages/block-library/src/post-comment-content/edit.js
@@ -1,24 +1,32 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { RawHTML } from '@wordpress/element';
 import { useEntityProp } from '@wordpress/core-data';
-import { useBlockProps } from '@wordpress/block-editor';
-
-// TODO: JSDOC types
-export default function Edit( { attributes, context } ) {
-	const { className } = attributes;
-	const { commentId } = context;
+import { useBlockProps, Warning } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
 
+export default function Edit( { context: { commentId } } ) {
+	const blockProps = useBlockProps();
 	const [ content ] = useEntityProp(
 		'root',
 		'comment',
 		'content',
 		commentId
 	);
-
+	if ( ! content?.rendered ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>{ __( 'Comment has no content.' ) }</Warning>
+			</div>
+		);
+	}
 	return (
-		<div { ...useBlockProps() }>
-			<p className={ className }>{ content }</p>
+		<div { ...blockProps }>
+			<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
@@ -17,11 +17,14 @@ function render_block_core_post_comment_content( $attributes, $content, $block )
 	if ( ! isset( $block->context['commentId'] ) ) {
 		return '';
 	}
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$comment_text = get_comment_text( $block->context['commentId'] );
+	if ( ! $comment_text ) {
+		return '';
+	}
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		$wrapper_attributes,
-		get_comment_text( $block->context['commentId'] )
+		get_block_wrapper_attributes(),
+		$comment_text
 	);
 }
 

diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
@@ -5,18 +5,29 @@ import { __ } from '@wordpress/i18n';
 import { Placeholder, TextControl, Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { blockDefault } from '@wordpress/icons';
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 const ALLOWED_BLOCKS = [
 	'core/post-comment-content',
 	'core/post-comment-author',
+	'core/post-comment-date',
+];
+const TEMPLATE = [
+	[ 'core/post-comment-content' ],
+	[ 'core/post-comment-author' ],
 ];
 
-// TODO: JSDOC types
 export default function Edit( { attributes, setAttributes } ) {
 	const { commentId } = attributes;
 	const [ commentIdInput, setCommentIdInput ] = useState( commentId );
 	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		allowedBlocks: ALLOWED_BLOCKS,
+	} );
 
 	if ( ! commentId ) {
 		return (
@@ -48,9 +59,5 @@ export default function Edit( { attributes, setAttributes } ) {
 		);
 	}
 
-	return (
-		<div { ...blockProps }>
-			<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
-		</div>
-	);
+	return <div { ...innerBlocksProps } />;
 }