Post Comments block: Fix missing label in placeholder (#40527)

WordPress · Apr 22, 2022 · 54fd3bf · 54fd3bf
1 parent b19b895
commit 54fd3bf
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js
@@ -16,7 +16,10 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+import {
+	__experimentalUseDisabled as useDisabled,
+	useInstanceId,
+} from '@wordpress/compose';
 
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
@@ -85,6 +88,8 @@ export default function PostCommentsEdit( {
 
 	const disabledRef = useDisabled();
 
+	const textareaId = useInstanceId( PostCommentsEdit );
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -208,11 +213,14 @@ export default function PostCommentsEdit( {
 
 							<form className="comment-form" noValidate>
 								<p className="comment-form-comment">
-									<label htmlFor="comment">
+									<label
+										htmlFor={ `comment-${ textareaId }` }
+									>
 										{ __( 'Comment' ) }{ ' ' }
 										<span className="required">*</span>
 									</label>
 									<textarea
+										id={ `comment-${ textareaId }` }
 										name="comment"
 										cols="45"
 										rows="8"