-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Comments block: Merge Comments and Post Comments blocks (#41807)
* Merge the blocks and remove the old one * Fix comments block type registration * Remove gutenberg prefix * Fix a problem with multiple styles * Update some comments * Fix php-lint errors * Move legacy part in edit to its own component * Fix typo * Replace comments_query_loop with comments * Improve the render callback's description * Fix the HTML returned for the non-legacy version * Run npm run docs:build * Regenerate fixtures * Update warning message in the editor Co-authored-by: Bernie Reiter <ockham@raz.or.at> * Fix string closing marks * Add a button to switch from legacy to default * Fix `useBlockProps` call after rebase * Add tests for Post Comments block support * Simplify before/after functions * Move Post Comments tests into its own describe * Move `createPost` to `requestUtils` * Add missing newline * Add TS to playwright post utils * Add test to switch button * Update placeholder classname * Use `setAttributes` to switch from legacy mode Co-authored-by: Bernie Reiter <ockham@raz.or.at> * Regenerate fixtures * Move Warning logic into Post Comments Form component * Deduplicate * Inline warning * Simplify * Nicer on the eye * A bit nicer still * Inlining is fun * i18n fix * Only count approved comments * Remove unnecessary warning in PHP * Add tests for the `legacy` attribute * Fix the PHP render callback * Move comment about `setOptions` inside `forEach` * Make `setOptions` util stateless * Remove `legacy: false` Co-authored-by: Bernie Reiter <ockham@raz.or.at> * Clarify "block version" Co-authored-by: Bernie Reiter <ockham@raz.or.at> * Replace unnecessary backticks with single quotes Co-authored-by: Bernie Reiter <ockham@raz.or.at> * Use `getEditedPostContent` * Slightly improve some comments Co-authored-by: Bernie Reiter <ockham@raz.or.at>
- Loading branch information
Showing
29 changed files
with
867 additions
and
596 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
packages/block-library/src/comments/edit/comments-legacy.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| AlignmentControl, | ||
| BlockControls, | ||
| Warning, | ||
| useBlockProps, | ||
| } from '@wordpress/block-editor'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Button } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Placeholder from './placeholder'; | ||
|
|
||
| export default function CommentsLegacy( { | ||
| attributes, | ||
| setAttributes, | ||
| context: { postType, postId }, | ||
| } ) { | ||
| const { textAlign } = attributes; | ||
|
|
||
| const actions = [ | ||
| <Button | ||
| key="convert" | ||
| onClick={ () => void setAttributes( { legacy: false } ) } | ||
| variant="primary" | ||
| > | ||
| { __( 'Switch to editable mode' ) } | ||
| </Button>, | ||
| ]; | ||
|
|
||
| const blockProps = useBlockProps( { | ||
| className: classnames( { | ||
| [ `has-text-align-${ textAlign }` ]: textAlign, | ||
| } ), | ||
| } ); | ||
|
|
||
| return ( | ||
| <> | ||
| <BlockControls group="block"> | ||
| <AlignmentControl | ||
| value={ textAlign } | ||
| onChange={ ( nextAlign ) => { | ||
| setAttributes( { textAlign: nextAlign } ); | ||
| } } | ||
| /> | ||
| </BlockControls> | ||
|
|
||
| <div { ...blockProps }> | ||
| <Warning actions={ actions }> | ||
| { __( | ||
| "Comments block: You're currently using this block in legacy mode. " + | ||
| 'The following is just a placeholder, not a real comment. ' + | ||
| 'The final styling may differ because it also depends on the current theme. ' + | ||
| 'For better compatibility with the Block Editor, ' + | ||
| 'please consider switching the block to its editable mode.' | ||
| ) } | ||
| </Warning> | ||
| <Placeholder postId={ postId } postType={ postType } /> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import CommentsInspectorControls from './comments-inspector-controls'; | ||
| import CommentsLegacy from './comments-legacy'; | ||
| import TEMPLATE from './template'; | ||
|
|
||
| export default function CommentsEdit( props ) { | ||
| const { attributes, setAttributes } = props; | ||
| const { tagName: TagName, legacy } = attributes; | ||
|
|
||
| const blockProps = useBlockProps(); | ||
| const innerBlocksProps = useInnerBlocksProps( blockProps, { | ||
| template: TEMPLATE, | ||
| } ); | ||
|
|
||
| if ( legacy ) { | ||
| return <CommentsLegacy { ...props } />; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <CommentsInspectorControls | ||
| attributes={ attributes } | ||
| setAttributes={ setAttributes } | ||
| /> | ||
| <TagName { ...innerBlocksProps } /> | ||
| </> | ||
| ); | ||
| } |
124 changes: 124 additions & 0 deletions
124
packages/block-library/src/comments/edit/placeholder.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { store as blockEditorStore } from '@wordpress/block-editor'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useEntityProp } from '@wordpress/core-data'; | ||
| import { useDisabled } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import CommentsForm from '../../post-comments-form/form'; | ||
|
|
||
| export default function PostCommentsPlaceholder( { postType, postId } ) { | ||
| let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId ); | ||
| postTitle = postTitle || __( 'Post Title' ); | ||
|
|
||
| const { avatarURL } = useSelect( | ||
| ( select ) => | ||
| select( blockEditorStore ).getSettings() | ||
| .__experimentalDiscussionSettings | ||
| ); | ||
|
|
||
| const disabledRef = useDisabled(); | ||
|
|
||
| return ( | ||
| <div | ||
| className="wp-block-comments__legacy-placeholder" | ||
| ref={ disabledRef } | ||
| > | ||
| <h3> | ||
| { | ||
| /* translators: %s: Post title. */ | ||
| sprintf( __( 'One response to %s' ), postTitle ) | ||
| } | ||
| </h3> | ||
|
|
||
| <div className="navigation"> | ||
| <div className="alignleft"> | ||
| <a href="#top">« { __( 'Older Comments' ) }</a> | ||
| </div> | ||
| <div className="alignright"> | ||
| <a href="#top">{ __( 'Newer Comments' ) } »</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <ol className="commentlist"> | ||
| <li className="comment even thread-even depth-1"> | ||
| <article className="comment-body"> | ||
| <footer className="comment-meta"> | ||
| <div className="comment-author vcard"> | ||
| <img | ||
| alt="Commenter Avatar" | ||
| src={ avatarURL } | ||
| className="avatar avatar-32 photo" | ||
| height="32" | ||
| width="32" | ||
| loading="lazy" | ||
| /> | ||
| <b className="fn"> | ||
| <a href="#top" className="url"> | ||
| { __( 'A WordPress Commenter' ) } | ||
| </a> | ||
| </b>{ ' ' } | ||
| <span className="says">{ __( 'says' ) }:</span> | ||
| </div> | ||
|
|
||
| <div className="comment-metadata"> | ||
| <a href="#top"> | ||
| <time dateTime="2000-01-01T00:00:00+00:00"> | ||
| { __( 'January 1, 2000 at 00:00 am' ) } | ||
| </time> | ||
| </a>{ ' ' } | ||
| <span className="edit-link"> | ||
| <a | ||
| className="comment-edit-link" | ||
| href="#top" | ||
| > | ||
| { __( 'Edit' ) } | ||
| </a> | ||
| </span> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <div className="comment-content"> | ||
| <p> | ||
| { __( 'Hi, this is a comment.' ) } | ||
| <br /> | ||
| { __( | ||
| 'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.' | ||
| ) } | ||
| <br /> | ||
| { __( 'Commenter avatars come from' ) }{ ' ' } | ||
| <a href="https://gravatar.com/">Gravatar</a>. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="reply"> | ||
| <a | ||
| className="comment-reply-link" | ||
| href="#top" | ||
| aria-label="Reply to A WordPress Commenter" | ||
| > | ||
| { __( 'Reply' ) } | ||
| </a> | ||
| </div> | ||
| </article> | ||
| </li> | ||
| </ol> | ||
|
|
||
| <div className="navigation"> | ||
| <div className="alignleft"> | ||
| <a href="#top">« { __( 'Older Comments' ) }</a> | ||
| </div> | ||
| <div className="alignright"> | ||
| <a href="#top">{ __( 'Newer Comments' ) } »</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <CommentsForm postId={ postId } postType={ postType } /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,12 @@ | ||
| @import "./style.scss"; | ||
|
|
||
| .block-library-comments-toolbar__popover .components-popover__content { | ||
| min-width: 230px; | ||
| } | ||
|
|
||
| .wp-block-comments__legacy-placeholder { | ||
| @extend .wp-block-post-comments; | ||
| * { | ||
| pointer-events: none; | ||
| } | ||
| } |
Oops, something went wrong.