Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: Reuse code of the editor placeholder across Post Comments and Post Comments Form #40560

Merged
merged 3 commits into from
Apr 25, 2022
Merged

Refactor: Reuse code of the editor placeholder across Post Comments and Post Comments Form #40560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
83e62a9
Create a separate template for the Comments Form
michalczaplinski Apr 22, 2022
ed9f0a9
Use the form in the Post Comments block
michalczaplinski Apr 22, 2022
10fd07b
Add the missing "return" in the CommentForm
michalczaplinski Apr 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 6 additions & 37 deletions packages/block-library/src/post-comments-form/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,11 @@ import {
} from '@wordpress/block-editor';
import { useEntityProp } from '@wordpress/core-data';
import { __, sprintf } from '@wordpress/i18n';
import {
__experimentalUseDisabled as useDisabled,
useInstanceId,
} from '@wordpress/compose';

/**
* Internal dependencies
*/
import CommentsForm from './form';

export default function PostCommentsFormEdit( {
attributes,
Expand All @@ -40,10 +41,6 @@ export default function PostCommentsFormEdit( {

const isInSiteEditor = postType === undefined || postId === undefined;

const disabledFormRef = useDisabled();

const instanceId = useInstanceId( PostCommentsFormEdit );

return (
<>
<BlockControls group="block">
Expand Down Expand Up @@ -76,35 +73,7 @@ export default function PostCommentsFormEdit( {
) }

{ ( 'open' === commentStatus || isInSiteEditor ) && (
<div>
<h3>{ __( 'Leave a Reply' ) }</h3>
<form
noValidate
className="comment-form"
ref={ disabledFormRef }
>
<p>
<label htmlFor={ `comment-${ instanceId }` }>
{ __( 'Comment' ) }
</label>
<textarea
id={ `comment-${ instanceId }` }
name="comment"
cols="45"
rows="8"
/>
</p>
<p>
<input
name="submit"
className="submit wp-block-button__link"
label={ __( 'Post Comment' ) }
value={ __( 'Post Comment' ) }
readOnly
/>
</p>
</form>
</div>
<CommentsForm />
) }
</div>
</>
Expand Down
43 changes: 43 additions & 0 deletions packages/block-library/src/post-comments-form/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalUseDisabled as useDisabled,
useInstanceId,
} from '@wordpress/compose';

const CommentsForm = () => {
const disabledFormRef = useDisabled();
const instanceId = useInstanceId( CommentsForm );

return (
<div className="comment-respond">
<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
<form noValidate className="comment-form" ref={ disabledFormRef }>
<p>
<label htmlFor={ `comment-${ instanceId }` }>
{ __( 'Comment' ) }
</label>
<textarea
id={ `comment-${ instanceId }` }
name="comment"
cols="45"
rows="8"
/>
</p>
<p className="form-submit wp-block-button">
<input
name="submit"
type="submit"
className="submit wp-block-button__link"
label={ __( 'Post Comment' ) }
value={ __( 'Post Comment' ) }
/>
</p>
</form>
</div>
);
};

export default CommentsForm;
44 changes: 7 additions & 37 deletions packages/block-library/src/post-comments/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ import {
import { __, sprintf } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useEntityProp, store as coreStore } from '@wordpress/core-data';
import {
__experimentalUseDisabled as useDisabled,
useInstanceId,
} from '@wordpress/compose';
import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';

/**
* Internal dependencies
*/
import CommentsForm from '../post-comments-form/form';

export default function PostCommentsEdit( {
attributes: { textAlign },
Expand Down Expand Up @@ -88,8 +90,6 @@ export default function PostCommentsEdit( {

const disabledRef = useDisabled();

const textareaId = useInstanceId( PostCommentsEdit );

return (
<>
<BlockControls group="block">
Expand Down Expand Up @@ -206,37 +206,7 @@ export default function PostCommentsEdit( {
</div>
</div>

<div className="comment-respond">
<h3 className="comment-reply-title">
{ __( 'Leave a Reply' ) }
</h3>

<form className="comment-form" noValidate>
<p className="comment-form-comment">
<label
htmlFor={ `comment-${ textareaId }` }
>
{ __( 'Comment' ) }{ ' ' }
<span className="required">*</span>
</label>
<textarea
id={ `comment-${ textareaId }` }
name="comment"
cols="45"
rows="8"
required
/>
</p>
<p className="form-submit wp-block-button">
<input
name="submit"
type="submit"
className="submit wp-block-button__link"
value={ __( 'Post Comment' ) }
/>
</p>
</form>
</div>
<CommentsForm />
</div>
) }
</div>
Expand Down