From 26f6429ae4a954d998f1d8c5ff624dc3dc3d6bf7 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 15 Jul 2022 18:22:35 +0200 Subject: [PATCH 01/46] Merge the blocks and remove the old one --- docs/reference-guides/core-blocks.md | 25 +- lib/blocks.php | 1 + .../block-library/src/comments/block.json | 6 +- .../block-library/src/comments/edit/index.js | 131 ++++++++++ .../src/comments/edit/placeholder.js | 121 +++++++++ .../comments/{edit.js => edit/template.js} | 29 +- .../block-library/src/comments/editor.scss | 9 + packages/block-library/src/comments/index.php | 213 +++++++++++++++ packages/block-library/src/comments/save.js | 15 +- .../{post-comments => comments}/style.scss | 7 + packages/block-library/src/editor.scss | 1 - packages/block-library/src/index.js | 2 - .../src/post-comments/block.json | 45 ---- .../block-library/src/post-comments/edit.js | 247 ------------------ .../src/post-comments/editor.scss | 3 - .../block-library/src/post-comments/index.js | 18 -- .../block-library/src/post-comments/index.php | 87 ------ packages/block-library/src/style.scss | 2 +- .../src/api/parser/convert-legacy-block.js | 7 + 19 files changed, 512 insertions(+), 457 deletions(-) create mode 100644 packages/block-library/src/comments/edit/index.js create mode 100644 packages/block-library/src/comments/edit/placeholder.js rename packages/block-library/src/comments/{edit.js => edit/template.js} (66%) create mode 100644 packages/block-library/src/comments/index.php rename packages/block-library/src/{post-comments => comments}/style.scss (96%) delete mode 100644 packages/block-library/src/post-comments/block.json delete mode 100644 packages/block-library/src/post-comments/edit.js delete mode 100644 packages/block-library/src/post-comments/editor.scss delete mode 100644 packages/block-library/src/post-comments/index.js delete mode 100644 packages/block-library/src/post-comments/index.php diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index eb132d03c1d186..3ba0f74c68bb2a 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt - **Name:** core/buttons - **Category:** design - **Supports:** align (full, wide), anchor, spacing (blockGap, margin) -- **Attributes:** +- **Attributes:** ## Calendar @@ -168,7 +168,7 @@ Contains the block elements used to display a comment, like the title, date, aut - **Name:** core/comment-template - **Category:** design - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Comments @@ -204,7 +204,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu - **Name:** core/comments-pagination-numbers - **Category:** theme - **Supports:** ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page @@ -420,7 +420,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com - **Name:** core/nextpage - **Category:** design - **Supports:** ~~className~~, ~~customClassName~~, ~~html~~ -- **Attributes:** +- **Attributes:** ## Page List @@ -485,15 +485,6 @@ This block is deprecated. Please use the Comments block instead. ([Source](https - **Supports:** ~~html~~, ~~inserter~~ - **Attributes:** commentId -## Post Comments (deprecated) - -This block is deprecated. Please use the Comments block instead. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments)) - -- **Name:** core/post-comments -- **Category:** theme -- **Supports:** align (full, wide), color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~ -- **Attributes:** textAlign - ## Post Comments Count Display a post's comments count. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-count)) @@ -528,7 +519,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/ - **Name:** core/post-content - **Category:** theme - **Supports:** align (full, wide), ~~html~~ -- **Attributes:** +- **Attributes:** ## Post Date @@ -573,7 +564,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Post Terms @@ -627,7 +618,7 @@ Contains the block elements used to render content when no query results are fou - **Name:** core/query-no-results - **Category:** theme - **Supports:** align, color (background, gradients, link, text), ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Pagination @@ -654,7 +645,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word - **Name:** core/query-pagination-numbers - **Category:** theme - **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page diff --git a/lib/blocks.php b/lib/blocks.php index 18a9eb34ff1668..39f94ae0aacccc 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -63,6 +63,7 @@ function gutenberg_reregister_core_block_types() { 'comments-pagination-numbers.php' => 'core/comments-pagination-numbers', 'comments-pagination-previous.php' => 'core/comments-pagination-previous', 'comments-title.php' => 'core/comments-title', + 'comments.php' => 'core/comments-query-loop', 'file.php' => 'core/file', 'home-link.php' => 'core/home-link', 'image.php' => 'core/image', diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json index 582de73d8d0e93..151664b2904ff8 100644 --- a/packages/block-library/src/comments/block.json +++ b/packages/block-library/src/comments/block.json @@ -10,6 +10,9 @@ "tagName": { "type": "string", "default": "div" + }, + "legacy": { + "type": "boolean" } }, "supports": { @@ -25,5 +28,6 @@ } } }, - "editorStyle": "wp-block-comments-editor" + "editorStyle": "wp-block-comments-editor", + "usesContext": [ "postId", "postType" ] } diff --git a/packages/block-library/src/comments/edit/index.js b/packages/block-library/src/comments/edit/index.js new file mode 100644 index 00000000000000..888292d03513d6 --- /dev/null +++ b/packages/block-library/src/comments/edit/index.js @@ -0,0 +1,131 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + AlignmentControl, + BlockControls, + Warning, + useBlockProps, + useInnerBlocksProps, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { __, sprintf } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import CommentsInspectorControls from './comments-inspector-controls'; +import Placeholder from './placeholder'; +import TEMPLATE from './template'; + +export default function PostCommentsEdit( { + attributes, + setAttributes, + context: { postType, postId }, +} ) { + const { tagName: TagName, textAlign } = attributes; + + const [ commentStatus ] = useEntityProp( + 'postType', + postType, + 'comment_status', + postId + ); + + const { defaultCommentStatus } = useSelect( + ( select ) => + select( blockEditorStore ).getSettings() + .__experimentalDiscussionSettings + ); + + const isSiteEditor = postType === undefined || postId === undefined; + + const postTypeSupportsComments = useSelect( ( select ) => + postType + ? !! select( coreStore ).getPostType( postType )?.supports.comments + : false + ); + + let warning = __( + 'Post Comments block: This 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 replacing this block with the "Comments Query Loop" block.' + ); + let showPlacholder = true; + + if ( ! isSiteEditor && 'open' !== commentStatus ) { + if ( 'closed' === commentStatus ) { + warning = sprintf( + /* translators: 1: Post type (i.e. "post", "page") */ + __( + 'Post Comments block: Comments to this %s are not allowed.' + ), + postType + ); + showPlacholder = false; + } else if ( ! postTypeSupportsComments ) { + warning = sprintf( + /* translators: 1: Post type (i.e. "post", "page") */ + __( + 'Post Comments block: Comments for this post type (%s) are not enabled.' + ), + postType + ); + showPlacholder = false; + } else if ( 'open' !== defaultCommentStatus ) { + warning = __( 'Post Comments block: Comments are not enabled.' ); + showPlacholder = false; + } + } + + const blockProps = useBlockProps( { + className: classnames( + // We add the previous block name for backward compatibility. + 'wp-block-comments-query-loop', + { + [ `has-text-align-${ textAlign }` ]: textAlign, + } + ), + } ); + const innerBlocksProps = useInnerBlocksProps( blockProps, { + template: TEMPLATE, + } ); + + if ( ! attributes.legacy ) { + return ( + <> + + + + ); + } + + return ( + <> + + { + setAttributes( { textAlign: nextAlign } ); + } } + /> + + +
+ { warning } + + { showPlacholder && ( + + ) } +
+ + ); +} diff --git a/packages/block-library/src/comments/edit/placeholder.js b/packages/block-library/src/comments/edit/placeholder.js new file mode 100644 index 00000000000000..07556f6d52396a --- /dev/null +++ b/packages/block-library/src/comments/edit/placeholder.js @@ -0,0 +1,121 @@ +/** + * WordPress dependencies + */ +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { __ } 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 ( +
+

+ { __( 'One response to' ) } “{ postTitle }” +

+ +
+ + +
+ +
    +
  1. + +
    2. +
+ +
+ + +
+ + +
+ ); +} diff --git a/packages/block-library/src/comments/edit.js b/packages/block-library/src/comments/edit/template.js similarity index 66% rename from packages/block-library/src/comments/edit.js rename to packages/block-library/src/comments/edit/template.js index 7b4533e228eed8..18897325027c44 100644 --- a/packages/block-library/src/comments/edit.js +++ b/packages/block-library/src/comments/edit/template.js @@ -1,13 +1,3 @@ -/** - * WordPress dependencies - */ -import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import CommentsInspectorControls from './edit/comments-inspector-controls'; - const TEMPLATE = [ [ 'core/comments-title' ], [ @@ -88,21 +78,4 @@ const TEMPLATE = [ [ 'core/post-comments-form' ], ]; -export default function CommentsEdit( { attributes, setAttributes } ) { - const { tagName: TagName } = attributes; - - const blockProps = useBlockProps(); - const innerBlocksProps = useInnerBlocksProps( blockProps, { - template: TEMPLATE, - } ); - - return ( - <> - - - - ); -} +export default TEMPLATE; diff --git a/packages/block-library/src/comments/editor.scss b/packages/block-library/src/comments/editor.scss index 6e21a9899421e0..ad9a4c9af741e8 100644 --- a/packages/block-library/src/comments/editor.scss +++ b/packages/block-library/src/comments/editor.scss @@ -1,3 +1,12 @@ +@import "./style.scss"; + .block-library-comments-toolbar__popover .components-popover__content { min-width: 230px; } + +.wp-block-post-comments__placeholder { + @extend .wp-block-post-comments; + * { + pointer-events: none; + } +} diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php new file mode 100644 index 00000000000000..4774dbfc060420 --- /dev/null +++ b/packages/block-library/src/comments/index.php @@ -0,0 +1,213 @@ +name || isset( $attributes['legacy'] ); + if ( ! $is_legacy ) { + $inner_blocks_html = ''; + foreach ( $block->inner_blocks as $inner_block ) { + $inner_blocks_html .= $inner_block->render(); + } + return $inner_blocks_html; + } + + $post_id = $block->context['postId']; + if ( ! isset( $post_id ) ) { + return ''; + } + + $comment_args = array( + 'post_id' => $post_id, + 'count' => true, + ); + // Return early if there are no comments and comments are closed. + if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) { + return ''; + } + + $post_before = $post; + $post = get_post( $post_id ); + setup_postdata( $post ); + + ob_start(); + // There's a deprecation warning generated by WP Core. + // Ideally this deprecation is removed from Core. + // In the meantime, this removes it from the output. + add_filter( 'deprecated_file_trigger_error', '__return_false' ); + comments_template(); + remove_filter( 'deprecated_file_trigger_error', '__return_false' ); + $post = $post_before; + + $classnames = array(); + // Adds the old class name for styles' backwards compatibility. + if ( isset( $attributes['legacy'] ) ) { + $classnames[] = 'wp-block-post-comments'; + } + if ( isset( $attributes['textAlign'] ) ) { + $classnames[] = 'has-text-align-' . $attributes['textAlign']; + } + + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode(' ', $classnames ) ) ); + $output = ob_get_clean(); + + wp_enqueue_script( 'comment-reply' ); + enqueue_legacy_post_comments_block_styles( $block->name ); + + return sprintf( '
%2$s
', $wrapper_attributes, $output ); +} + +/** + * Registers the `core/comments-query-loop` block on the server. + */ +function register_block_core_comments_query_loop() { + register_block_type_from_metadata( + __DIR__ . '/comments', + array( + 'render_callback' => 'render_block_core_comments_query_loop', + 'skip_inner_blocks' => true, + ) + ); +} +add_action( 'init', 'register_block_core_comments_query_loop' ); + +/** + * Use the button block classes for the form-submit button. + * + * @param array $fields The default comment form arguments. + * + * @return array Returns the modified fields. + */ +function comments_query_loop_block_form_defaults( $fields ) { + if ( wp_is_block_theme() ) { + $fields['submit_button'] = ''; + $fields['submit_field'] = '

%1$s %2$s

'; + } + + return $fields; +} +add_filter( 'comment_form_defaults', 'comments_query_loop_block_form_defaults' ); + +/** + * Enqueues styles from the legacy `core/post-comments` block. These styles are + * required by the block's fallback. + * + * @param string $block_name Name of the new block type. + */ +function enqueue_legacy_post_comments_block_styles( $block_name ) { + static $are_styles_enqueued = false; + + if ( ! $are_styles_enqueued ) { + $handles = array( + 'wp-block-post-comments', + 'wp-block-buttons', + 'wp-block-button', + ); + foreach( $handles as $handle ) { + wp_enqueue_block_style( $block_name, array( 'handle' => $handle) ); + } + $are_styles_enqueued = true; + } +} + +/** + * Renders the legacy `core/post-comments` block on the server. + * It triggers a developer warning and then calls the renamed + * block's `render_callback` function output. + * + * This can be removed when WordPress X.X is released. + * + * @param array $attributes Block attributes. + * @param string $content Block default content. + * @param WP_Block $block Block instance. + * + * @return string Returns the output of the block. + */ +function render_legacy_post_comments_block( $attributes, $content, $block ) { + trigger_error( + /* translators: %1$s: Block type */ + sprintf( __( 'Block %1$s has been renamed to Comments Query Loop. %1$s will be supported until WordPress version X.X.', 'gutenberg' ), $block->name ), + headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE + ); + return render_block_core_comments_query_loop( $attributes, $content, $block ); +} + +/** + * Ensures backwards compatibility for any users running the Gutenberg plugin + * who have used Post Comments before it was merged into Comments Query Loop. + * + * The same approach was followed when core/query-loop was renamed to + * core/post-template. + * + * This can be removed when WordPress X.X is released. + * + * @see https://github.com/WordPress/gutenberg/pull/41807 + * @see https://github.com/WordPress/gutenberg/pull/32514 + */ +function gutenberg_register_legacy_post_comments_block() { + $registry = WP_Block_Type_Registry::get_instance(); + if ( $registry->is_registered( 'core/post-comments' ) ) { + unregister_block_type( 'core/post-comments' ); + } + register_block_type( + 'core/post-comments', + array( + 'category' => 'theme', + 'attributes' => array( + 'textAlign' => array( + 'type' => 'string', + ), + ), + 'uses_context' => array( + 'postId', + 'postType', + ), + 'supports' => array( + 'html' => false, + 'align' => array( 'wide', 'full' ), + 'typography' => array( + 'fontSize' => true, + 'lineHeight' => true, + '__experimentalFontStyle' => true, + '__experimentalFontWeight' => true, + '__experimentalLetterSpacing' => true, + '__experimentalTextTransform' => true, + '__experimentalDefaultControls' => array( + 'fontSize' => true, + ), + ), + 'color' => array( + 'gradients' => true, + 'link' => true, + '__experimentalDefaultControls' => array( + 'background' => true, + 'text' => true + ) + ), + 'inserter' => false + ), + 'style' => array( + 'wp-block-post-comments', + 'wp-block-buttons', + 'wp-block-button' + ), + 'editorStyle' => 'wp-block-post-comments-editor', + 'render_callback' => 'render_legacy_post_comments_block', + 'skip_inner_blocks' => true, + ) + ); +} +add_action( 'init', 'gutenberg_register_legacy_post_comments_block', 21); diff --git a/packages/block-library/src/comments/save.js b/packages/block-library/src/comments/save.js index 47c774fc4b9bb1..14a8309eb92c45 100644 --- a/packages/block-library/src/comments/save.js +++ b/packages/block-library/src/comments/save.js @@ -1,12 +1,13 @@ /** * WordPress dependencies */ -import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; +import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; -export default function CommentsSave( { attributes: { tagName: Tag } } ) { - return ( - - - - ); +export default function save( { attributes: { tagName: Tag, legacy } } ) { + const blockProps = useBlockProps.save(); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + + // The legacy version is dynamic (i.e. PHP rendered) and doesn't allow inner + // blocks, so nothing is saved in that case. + return legacy ? null : ; } diff --git a/packages/block-library/src/post-comments/style.scss b/packages/block-library/src/comments/style.scss similarity index 96% rename from packages/block-library/src/post-comments/style.scss rename to packages/block-library/src/comments/style.scss index ebcf192d898b11..732e42d5bcaa4d 100644 --- a/packages/block-library/src/post-comments/style.scss +++ b/packages/block-library/src/comments/style.scss @@ -1,4 +1,6 @@ +/* Styles for backwards compatibility with the legacy `post-comments` block */ .wp-block-post-comments { + /* utility classes */ .alignleft { float: left; @@ -7,6 +9,7 @@ .alignright { float: right; } + /* end utility classes */ .navigation { @@ -62,9 +65,11 @@ .comment-meta { font-size: 0.875em; line-height: 1.5; + b { font-weight: normal; } + .comment-awaiting-moderation { margin-top: 1em; margin-bottom: 1em; @@ -87,6 +92,7 @@ } .comment-form { + textarea, input:not([type="submit"]):not([type="checkbox"]) { display: block; @@ -106,6 +112,7 @@ .comment-reply-title { margin-bottom: 0; + :where(small) { font-size: var(--wp--preset--font-size--medium, smaller); margin-left: 0.5em; diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index ba031d6cbdeaa9..138e4802630212 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -49,7 +49,6 @@ @import "./query-pagination/editor.scss"; @import "./query-pagination-numbers/editor.scss"; @import "./post-featured-image/editor.scss"; -@import "./post-comments/editor.scss"; @import "./post-comments-form/editor.scss"; :root .editor-styles-wrapper { diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index ff72f0b90d1010..f0d5924d7248d8 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -73,7 +73,6 @@ import * as postAuthor from './post-author'; import * as postAuthorName from './post-author-name'; import * as postAuthorBiography from './post-author-biography'; import * as postComment from './post-comment'; -import * as postComments from './post-comments'; import * as postCommentsCount from './post-comments-count'; import * as postCommentsForm from './post-comments-form'; import * as postCommentsLink from './post-comments-link'; @@ -228,7 +227,6 @@ const getAllBlocks = () => [ commentsPaginationNext, commentsPaginationNumbers, commentsPaginationPrevious, - postComments, postCommentsForm, tableOfContents, homeLink, diff --git a/packages/block-library/src/post-comments/block.json b/packages/block-library/src/post-comments/block.json deleted file mode 100644 index dc719fff5d7081..00000000000000 --- a/packages/block-library/src/post-comments/block.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, - "name": "core/post-comments", - "title": "Post Comments (deprecated)", - "category": "theme", - "description": "This block is deprecated. Please use the Comments block instead.", - "textdomain": "default", - "attributes": { - "textAlign": { - "type": "string" - } - }, - "usesContext": [ "postId", "postType" ], - "supports": { - "html": false, - "align": [ "wide", "full" ], - "typography": { - "fontSize": true, - "lineHeight": true, - "__experimentalFontStyle": true, - "__experimentalFontWeight": true, - "__experimentalLetterSpacing": true, - "__experimentalTextTransform": true, - "__experimentalDefaultControls": { - "fontSize": true - } - }, - "color": { - "gradients": true, - "link": true, - "__experimentalDefaultControls": { - "background": true, - "text": true - } - }, - "inserter": false - }, - "style": [ - "wp-block-post-comments", - "wp-block-buttons", - "wp-block-button" - ], - "editorStyle": "wp-block-post-comments-editor" -} diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js deleted file mode 100644 index 251a290eb0a96b..00000000000000 --- a/packages/block-library/src/post-comments/edit.js +++ /dev/null @@ -1,247 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { - AlignmentControl, - BlockControls, - Warning, - useBlockProps, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { __, sprintf } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { useEntityProp, store as coreStore } from '@wordpress/core-data'; -import { useDisabled } from '@wordpress/compose'; -import { createInterpolateElement } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import CommentsForm from '../post-comments-form/form'; - -export default function PostCommentsEdit( { - attributes: { textAlign }, - setAttributes, - context: { postType, postId }, -} ) { - let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId ); - postTitle = postTitle || __( 'Post Title' ); - - const [ commentStatus ] = useEntityProp( - 'postType', - postType, - 'comment_status', - postId - ); - - const { avatarURL, defaultCommentStatus } = useSelect( - ( select ) => - select( blockEditorStore ).getSettings() - .__experimentalDiscussionSettings - ); - - const isSiteEditor = postType === undefined || postId === undefined; - - const postTypeSupportsComments = useSelect( ( select ) => - postType - ? !! select( coreStore ).getPostType( postType )?.supports.comments - : false - ); - - let warning = __( - 'Post Comments block: This 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 replacing this block with the "Comments" block.' - ); - let showPlaceholder = true; - - if ( ! isSiteEditor && 'open' !== commentStatus ) { - if ( 'closed' === commentStatus ) { - warning = sprintf( - /* translators: 1: Post type (i.e. "post", "page") */ - __( - 'Post Comments block: Comments to this %s are not allowed.' - ), - postType - ); - showPlaceholder = false; - } else if ( ! postTypeSupportsComments ) { - warning = sprintf( - /* translators: 1: Post type (i.e. "post", "page") */ - __( - 'Post Comments block: Comments for this post type (%s) are not enabled.' - ), - postType - ); - showPlaceholder = false; - } else if ( 'open' !== defaultCommentStatus ) { - warning = __( 'Post Comments block: Comments are not enabled.' ); - showPlaceholder = false; - } - } - - const blockProps = useBlockProps( { - className: classnames( { - [ `has-text-align-${ textAlign }` ]: textAlign, - } ), - } ); - - const disabledRef = useDisabled(); - - return ( - <> - - { - setAttributes( { textAlign: nextAlign } ); - } } - /> - - -
- { warning } - - { showPlaceholder && ( -
-

- { - /* translators: %s: Post title. */ - sprintf( __( 'One response to %s' ), postTitle ) - } -

- - - -
    -
  1. -
    - - -
    -

    - { __( 'Hi, this is a comment.' ) } -
    - { __( - 'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.' - ) } -
    - { createInterpolateElement( - __( - 'Commenter avatars come from Gravatar' - ), - { - a: ( - /* eslint-disable-next-line jsx-a11y/anchor-has-content */ - - ), - } - ) } -

    -
    - - -
    -
    2. -
- - - - -
- ) } -
- - ); -} diff --git a/packages/block-library/src/post-comments/editor.scss b/packages/block-library/src/post-comments/editor.scss deleted file mode 100644 index 9d7c54f020fe37..00000000000000 --- a/packages/block-library/src/post-comments/editor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.wp-block-post-comments__placeholder * { - pointer-events: none; -} diff --git a/packages/block-library/src/post-comments/index.js b/packages/block-library/src/post-comments/index.js deleted file mode 100644 index db109a576b7f93..00000000000000 --- a/packages/block-library/src/post-comments/index.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * WordPress dependencies - */ -import { postComments as icon } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import metadata from './block.json'; -import edit from './edit'; - -const { name } = metadata; -export { metadata, name }; - -export const settings = { - icon, - edit, -}; diff --git a/packages/block-library/src/post-comments/index.php b/packages/block-library/src/post-comments/index.php deleted file mode 100644 index 494bcb86746fa3..00000000000000 --- a/packages/block-library/src/post-comments/index.php +++ /dev/null @@ -1,87 +0,0 @@ -context['postId']; - if ( ! isset( $post_id ) ) { - return ''; - } - - $comment_args = array( - 'post_id' => $post_id, - 'count' => true, - ); - // Return early if there are no comments and comments are closed. - if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) { - return ''; - } - - $post_before = $post; - $post = get_post( $post_id ); - setup_postdata( $post ); - - ob_start(); - // There's a deprecation warning generated by WP Core. - // Ideally this deprecation is removed from Core. - // In the meantime, this removes it from the output. - add_filter( 'deprecated_file_trigger_error', '__return_false' ); - comments_template(); - remove_filter( 'deprecated_file_trigger_error', '__return_false' ); - $post = $post_before; - - $classes = ''; - if ( isset( $attributes['textAlign'] ) ) { - $classes .= 'has-text-align-' . $attributes['textAlign']; - } - - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); - $output = ob_get_clean(); - - wp_enqueue_script( 'comment-reply' ); - - return sprintf( '
%2$s
', $wrapper_attributes, $output ); -} - -/** - * Registers the `core/post-comments` block on the server. - */ -function register_block_core_post_comments() { - register_block_type_from_metadata( - __DIR__ . '/post-comments', - array( - 'render_callback' => 'render_block_core_post_comments', - ) - ); -} -add_action( 'init', 'register_block_core_post_comments' ); - -/** - * Use the button block classes for the form-submit button. - * - * @param array $fields The default comment form arguments. - * - * @return array Returns the modified fields. - */ -function post_comments_block_form_defaults( $fields ) { - if ( wp_is_block_theme() ) { - $fields['submit_button'] = ''; - $fields['submit_field'] = '

%1$s %2$s

'; - } - - return $fields; -} -add_filter( 'comment_form_defaults', 'post_comments_block_form_defaults' ); diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index c7013a739933a6..2c0817f698fa6b 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -7,6 +7,7 @@ @import "./categories/style.scss"; @import "./code/style.scss"; @import "./columns/style.scss"; +@import "./comments/style.scss"; @import "./comments-pagination/style.scss"; @import "./comment-template/style.scss"; @import "./cover/style.scss"; @@ -25,7 +26,6 @@ @import "./page-list/style.scss"; @import "./paragraph/style.scss"; @import "./post-author/style.scss"; -@import "./post-comments/style.scss"; @import "./post-comments-form/style.scss"; @import "./post-excerpt/style.scss"; @import "./post-featured-image/style.scss"; diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js index fd40b55e136ba2..03156e47664f68 100644 --- a/packages/blocks/src/api/parser/convert-legacy-block.js +++ b/packages/blocks/src/api/parser/convert-legacy-block.js @@ -73,5 +73,12 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) { // for the ID change to work. } + // Checks needed after merging core/comments-query-loop and core/post-comments. + + if ( name === 'core/post-comments' ) { + name = 'core/comments-query-loop'; + newAttributes.legacy = true; + } + return [ name, newAttributes ]; } From 7d13993127bf4bd3b685a1f0c247a57b42f89827 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 8 Jul 2022 13:10:51 +0200 Subject: [PATCH 02/46] Fix comments block type registration --- lib/blocks.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index 39f94ae0aacccc..aa0d82c7795d44 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -63,7 +63,7 @@ function gutenberg_reregister_core_block_types() { 'comments-pagination-numbers.php' => 'core/comments-pagination-numbers', 'comments-pagination-previous.php' => 'core/comments-pagination-previous', 'comments-title.php' => 'core/comments-title', - 'comments.php' => 'core/comments-query-loop', + 'comments.php' => 'core/comments', 'file.php' => 'core/file', 'home-link.php' => 'core/home-link', 'image.php' => 'core/image', @@ -80,7 +80,6 @@ function gutenberg_reregister_core_block_types() { 'post-author-name.php' => 'core/post-author-name', 'post-author-biography.php' => 'core/post-author-biography', 'post-comment.php' => 'core/post-comment', - 'post-comments.php' => 'core/post-comments', 'post-comments-count.php' => 'core/post-comments-count', 'post-comments-form.php' => 'core/post-comments-form', 'post-comments-link.php' => 'core/post-comments-link', From c279c95f7f17fac359f066b91e61853a146b69af Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 8 Jul 2022 20:03:21 +0200 Subject: [PATCH 03/46] Remove gutenberg prefix --- packages/block-library/src/comments/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index 4774dbfc060420..c5249c0c7fa2d5 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -157,7 +157,7 @@ function render_legacy_post_comments_block( $attributes, $content, $block ) { * @see https://github.com/WordPress/gutenberg/pull/41807 * @see https://github.com/WordPress/gutenberg/pull/32514 */ -function gutenberg_register_legacy_post_comments_block() { +function register_legacy_post_comments_block() { $registry = WP_Block_Type_Registry::get_instance(); if ( $registry->is_registered( 'core/post-comments' ) ) { unregister_block_type( 'core/post-comments' ); @@ -210,4 +210,4 @@ function gutenberg_register_legacy_post_comments_block() { ) ); } -add_action( 'init', 'gutenberg_register_legacy_post_comments_block', 21); +add_action( 'init', 'register_legacy_post_comments_block', 21); From 52162af4c5fda371f11ec6546beca72fb4f782ed Mon Sep 17 00:00:00 2001 From: David Arenas Date: Sat, 9 Jul 2022 01:35:12 +0200 Subject: [PATCH 04/46] Fix a problem with multiple styles --- packages/block-library/src/comments/index.php | 99 +++++++++++-------- 1 file changed, 57 insertions(+), 42 deletions(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index c5249c0c7fa2d5..5d51024f051f3d 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -159,55 +159,70 @@ function render_legacy_post_comments_block( $attributes, $content, $block ) { */ function register_legacy_post_comments_block() { $registry = WP_Block_Type_Registry::get_instance(); + + /* + * Remove the old `post-comments` block if it was already registered, as it + * is about to be replaced by the type defined below. + */ if ( $registry->is_registered( 'core/post-comments' ) ) { unregister_block_type( 'core/post-comments' ); } - register_block_type( - 'core/post-comments', - array( - 'category' => 'theme', - 'attributes' => array( - 'textAlign' => array( - 'type' => 'string', - ), - ), - 'uses_context' => array( - 'postId', - 'postType', + + // Recreate the legacy block metadata. + $metadata = array( + 'name' => 'core/post-comments', + 'category' => 'theme', + 'attributes' => array( + 'textAlign' => array( + 'type' => 'string', ), - 'supports' => array( - 'html' => false, - 'align' => array( 'wide', 'full' ), - 'typography' => array( - 'fontSize' => true, - 'lineHeight' => true, - '__experimentalFontStyle' => true, - '__experimentalFontWeight' => true, - '__experimentalLetterSpacing' => true, - '__experimentalTextTransform' => true, - '__experimentalDefaultControls' => array( - 'fontSize' => true, - ), - ), - 'color' => array( - 'gradients' => true, - 'link' => true, - '__experimentalDefaultControls' => array( - 'background' => true, - 'text' => true - ) + ), + 'uses_context' => array( + 'postId', + 'postType', + ), + 'supports' => array( + 'html' => false, + 'align' => array( 'wide', 'full' ), + 'typography' => array( + 'fontSize' => true, + 'lineHeight' => true, + '__experimentalFontStyle' => true, + '__experimentalFontWeight' => true, + '__experimentalLetterSpacing' => true, + '__experimentalTextTransform' => true, + '__experimentalDefaultControls' => array( + 'fontSize' => true, ), - 'inserter' => false ), - 'style' => array( - 'wp-block-post-comments', - 'wp-block-buttons', - 'wp-block-button' + 'color' => array( + 'gradients' => true, + 'link' => true, + '__experimentalDefaultControls' => array( + 'background' => true, + 'text' => true + ) ), - 'editorStyle' => 'wp-block-post-comments-editor', - 'render_callback' => 'render_legacy_post_comments_block', - 'skip_inner_blocks' => true, - ) + 'inserter' => false + ), + 'style' => array( + 'wp-block-post-comments', + "wp-block-buttons", + "wp-block-button" + ), + 'editorStyle' => 'wp-block-post-comments-editor', + 'render_callback' => 'render_legacy_post_comments_block', + 'skip_inner_blocks' => true, ); + + /* + * Filters the metadata object, the same way it's done insie + * `register_block_type_from_metadata()`. This applies some default filters, + * like `_wp_multiple_block_styles`, which is required in this case because + * the block has multiple styles. + */ + $metadata = apply_filters( 'block_type_metadata', $metadata ); + + register_block_type( 'core/post-comments', $metadata ); } add_action( 'init', 'register_legacy_post_comments_block', 21); From 5db0afff366c0670b720e43a534f34a566a0d5d7 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Sat, 9 Jul 2022 01:37:27 +0200 Subject: [PATCH 05/46] Update some comments --- packages/block-library/src/comments/index.php | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index 5d51024f051f3d..6255abfcc48c1e 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -1,12 +1,12 @@ implode(' ', $classnames ) ) ); $output = ob_get_clean(); + /* + * Enqueues scripts and styles required only for the legacy version. That is + * why they are not defined in `block.json`. + */ wp_enqueue_script( 'comment-reply' ); enqueue_legacy_post_comments_block_styles( $block->name ); @@ -71,7 +77,7 @@ function render_block_core_comments_query_loop( $attributes, $content, $block ) } /** - * Registers the `core/comments-query-loop` block on the server. + * Registers the `core/comments` block on the server. */ function register_block_core_comments_query_loop() { register_block_type_from_metadata( @@ -103,7 +109,7 @@ function comments_query_loop_block_form_defaults( $fields ) { /** * Enqueues styles from the legacy `core/post-comments` block. These styles are - * required by the block's fallback. + * required only by the block's fallback. * * @param string $block_name Name of the new block type. */ @@ -128,8 +134,6 @@ function enqueue_legacy_post_comments_block_styles( $block_name ) { * It triggers a developer warning and then calls the renamed * block's `render_callback` function output. * - * This can be removed when WordPress X.X is released. - * * @param array $attributes Block attributes. * @param string $content Block default content. * @param WP_Block $block Block instance. @@ -152,8 +156,6 @@ function render_legacy_post_comments_block( $attributes, $content, $block ) { * The same approach was followed when core/query-loop was renamed to * core/post-template. * - * This can be removed when WordPress X.X is released. - * * @see https://github.com/WordPress/gutenberg/pull/41807 * @see https://github.com/WordPress/gutenberg/pull/32514 */ From e8631adf253fc17725f44f054825073d17ecbf79 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Sat, 9 Jul 2022 02:00:31 +0200 Subject: [PATCH 06/46] Fix php-lint errors --- packages/block-library/src/comments/index.php | 28 +++++++++++-------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index 6255abfcc48c1e..84312c380247b8 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -44,6 +44,7 @@ function render_block_core_comments_query_loop( $attributes, $content, $block ) setup_postdata( $post ); ob_start(); + /* * There's a deprecation warning generated by WP Core. * Ideally this deprecation is removed from Core. @@ -52,7 +53,9 @@ function render_block_core_comments_query_loop( $attributes, $content, $block ) add_filter( 'deprecated_file_trigger_error', '__return_false' ); comments_template(); remove_filter( 'deprecated_file_trigger_error', '__return_false' ); - $post = $post_before; + + $output = ob_get_clean(); + $post = $post_before; $classnames = array(); // Adds the old class name for styles' backwards compatibility. @@ -63,8 +66,9 @@ function render_block_core_comments_query_loop( $attributes, $content, $block ) $classnames[] = 'has-text-align-' . $attributes['textAlign']; } - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode(' ', $classnames ) ) ); - $output = ob_get_clean(); + $wrapper_attributes = get_block_wrapper_attributes( + array( 'class' => implode( ' ', $classnames ) ) + ); /* * Enqueues scripts and styles required only for the legacy version. That is @@ -122,8 +126,8 @@ function enqueue_legacy_post_comments_block_styles( $block_name ) { 'wp-block-buttons', 'wp-block-button', ); - foreach( $handles as $handle ) { - wp_enqueue_block_style( $block_name, array( 'handle' => $handle) ); + foreach ( $handles as $handle ) { + wp_enqueue_block_style( $block_name, array( 'handle' => $handle ) ); } $are_styles_enqueued = true; } @@ -197,20 +201,20 @@ function register_legacy_post_comments_block() { 'fontSize' => true, ), ), - 'color' => array( + 'color' => array( 'gradients' => true, 'link' => true, '__experimentalDefaultControls' => array( 'background' => true, - 'text' => true - ) + 'text' => true, + ), ), - 'inserter' => false + 'inserter' => false, ), 'style' => array( 'wp-block-post-comments', - "wp-block-buttons", - "wp-block-button" + 'wp-block-buttons', + 'wp-block-button', ), 'editorStyle' => 'wp-block-post-comments-editor', 'render_callback' => 'render_legacy_post_comments_block', @@ -227,4 +231,4 @@ function register_legacy_post_comments_block() { register_block_type( 'core/post-comments', $metadata ); } -add_action( 'init', 'register_legacy_post_comments_block', 21); +add_action( 'init', 'register_legacy_post_comments_block', 21 ); From dd167e3def5a664b58aad21819acb3a7daa0e880 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Sat, 9 Jul 2022 02:22:55 +0200 Subject: [PATCH 07/46] Move legacy part in edit to its own component --- .../src/comments/edit/comments-legacy.js | 109 ++++++++++++++++ .../block-library/src/comments/edit/index.js | 121 ++---------------- .../src/api/parser/convert-legacy-block.js | 5 +- 3 files changed, 124 insertions(+), 111 deletions(-) create mode 100644 packages/block-library/src/comments/edit/comments-legacy.js diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js new file mode 100644 index 00000000000000..e372592040f219 --- /dev/null +++ b/packages/block-library/src/comments/edit/comments-legacy.js @@ -0,0 +1,109 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + AlignmentControl, + BlockControls, + Warning, + useBlockProps, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { __, sprintf } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import Placeholder from './placeholder'; + +export default function CommentsLegacy( { + attributes, + setAttributes, + context: { postType, postId }, +} ) { + const { textAlign } = attributes; + + const [ commentStatus ] = useEntityProp( + 'postType', + postType, + 'comment_status', + postId + ); + + const { defaultCommentStatus } = useSelect( + ( select ) => + select( blockEditorStore ).getSettings() + .__experimentalDiscussionSettings + ); + + const isSiteEditor = postType === undefined || postId === undefined; + + const postTypeSupportsComments = useSelect( ( select ) => + postType + ? !! select( coreStore ).getPostType( postType )?.supports.comments + : false + ); + + let warning = __( + 'Post Comments block: This 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 replacing this block with the "Comments Query Loop" block.' + ); + let showPlacholder = true; + + if ( ! isSiteEditor && 'open' !== commentStatus ) { + if ( 'closed' === commentStatus ) { + warning = sprintf( + /* translators: 1: Post type (i.e. "post", "page") */ + __( + 'Post Comments block: Comments to this %s are not allowed.' + ), + postType + ); + showPlacholder = false; + } else if ( ! postTypeSupportsComments ) { + warning = sprintf( + /* translators: 1: Post type (i.e. "post", "page") */ + __( + 'Post Comments block: Comments for this post type (%s) are not enabled.' + ), + postType + ); + showPlacholder = false; + } else if ( 'open' !== defaultCommentStatus ) { + warning = __( 'Post Comments block: Comments are not enabled.' ); + showPlacholder = false; + } + } + + const blockProps = useBlockProps( { + className: classnames( { + [ `has-text-align-${ textAlign }` ]: textAlign, + } ), + } ); + + return ( + <> + + { + setAttributes( { textAlign: nextAlign } ); + } } + /> + + +
+ { warning } + + { showPlacholder && ( + + ) } +
+ + ); +} diff --git a/packages/block-library/src/comments/edit/index.js b/packages/block-library/src/comments/edit/index.js index 888292d03513d6..16631aed907eaa 100644 --- a/packages/block-library/src/comments/edit/index.js +++ b/packages/block-library/src/comments/edit/index.js @@ -1,131 +1,38 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { - AlignmentControl, - BlockControls, - Warning, - useBlockProps, - useInnerBlocksProps, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { __, sprintf } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { useEntityProp, store as coreStore } from '@wordpress/core-data'; +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; /** * Internal dependencies */ import CommentsInspectorControls from './comments-inspector-controls'; -import Placeholder from './placeholder'; +import CommentsLegacy from './comments-legacy'; import TEMPLATE from './template'; -export default function PostCommentsEdit( { - attributes, - setAttributes, - context: { postType, postId }, -} ) { - const { tagName: TagName, textAlign } = attributes; - - const [ commentStatus ] = useEntityProp( - 'postType', - postType, - 'comment_status', - postId - ); - - const { defaultCommentStatus } = useSelect( - ( select ) => - select( blockEditorStore ).getSettings() - .__experimentalDiscussionSettings - ); - - const isSiteEditor = postType === undefined || postId === undefined; - - const postTypeSupportsComments = useSelect( ( select ) => - postType - ? !! select( coreStore ).getPostType( postType )?.supports.comments - : false - ); - - let warning = __( - 'Post Comments block: This 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 replacing this block with the "Comments Query Loop" block.' - ); - let showPlacholder = true; - - if ( ! isSiteEditor && 'open' !== commentStatus ) { - if ( 'closed' === commentStatus ) { - warning = sprintf( - /* translators: 1: Post type (i.e. "post", "page") */ - __( - 'Post Comments block: Comments to this %s are not allowed.' - ), - postType - ); - showPlacholder = false; - } else if ( ! postTypeSupportsComments ) { - warning = sprintf( - /* translators: 1: Post type (i.e. "post", "page") */ - __( - 'Post Comments block: Comments for this post type (%s) are not enabled.' - ), - postType - ); - showPlacholder = false; - } else if ( 'open' !== defaultCommentStatus ) { - warning = __( 'Post Comments block: Comments are not enabled.' ); - showPlacholder = false; - } - } +export default function CommentsEdit( props ) { + const { attributes, setAttributes } = props; + const { tagName: TagName, legacy } = attributes; const blockProps = useBlockProps( { - className: classnames( - // We add the previous block name for backward compatibility. - 'wp-block-comments-query-loop', - { - [ `has-text-align-${ textAlign }` ]: textAlign, - } - ), + // We add the previous block name for backward compatibility. + className: 'wp-block-comments-query-loop', } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, } ); - if ( ! attributes.legacy ) { - return ( - <> - - - - ); + if ( legacy ) { + return ; } return ( <> - - { - setAttributes( { textAlign: nextAlign } ); - } } - /> - - -
- { warning } - - { showPlacholder && ( - - ) } -
+ + ); } diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js index 03156e47664f68..c993d450099912 100644 --- a/packages/blocks/src/api/parser/convert-legacy-block.js +++ b/packages/blocks/src/api/parser/convert-legacy-block.js @@ -72,11 +72,8 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) { // Note that we also had to add a deprecation to the block in order // for the ID change to work. } - - // Checks needed after merging core/comments-query-loop and core/post-comments. - if ( name === 'core/post-comments' ) { - name = 'core/comments-query-loop'; + name = 'core/comments'; newAttributes.legacy = true; } From 5161e385e9ed6e82258dd143f26b21cb0779824e Mon Sep 17 00:00:00 2001 From: David Arenas Date: Sat, 9 Jul 2022 02:26:31 +0200 Subject: [PATCH 08/46] Fix typo --- packages/block-library/src/comments/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index 84312c380247b8..f7060684df8326 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -222,7 +222,7 @@ function register_legacy_post_comments_block() { ); /* - * Filters the metadata object, the same way it's done insie + * Filters the metadata object, the same way it's done inside * `register_block_type_from_metadata()`. This applies some default filters, * like `_wp_multiple_block_styles`, which is required in this case because * the block has multiple styles. From 38a924e73a8019292adb7f359be2e56131cc16c2 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Sun, 10 Jul 2022 19:15:13 +0200 Subject: [PATCH 09/46] Replace comments_query_loop with comments --- packages/block-library/src/comments/index.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index f7060684df8326..ca5a331e69d97d 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -13,7 +13,7 @@ * @param WP_Block $block Block instance. * @return string Returns the filtered post comments for the current post wrapped inside "p" tags. */ -function render_block_core_comments_query_loop( $attributes, $content, $block ) { +function render_block_core_comments( $attributes, $content, $block ) { global $post; $is_legacy = 'core/post-comments' === $block->name || isset( $attributes['legacy'] ); @@ -83,16 +83,16 @@ function render_block_core_comments_query_loop( $attributes, $content, $block ) /** * Registers the `core/comments` block on the server. */ -function register_block_core_comments_query_loop() { +function register_block_core_comments() { register_block_type_from_metadata( __DIR__ . '/comments', array( - 'render_callback' => 'render_block_core_comments_query_loop', + 'render_callback' => 'render_block_core_comments', 'skip_inner_blocks' => true, ) ); } -add_action( 'init', 'register_block_core_comments_query_loop' ); +add_action( 'init', 'register_block_core_comments' ); /** * Use the button block classes for the form-submit button. @@ -101,7 +101,7 @@ function register_block_core_comments_query_loop() { * * @return array Returns the modified fields. */ -function comments_query_loop_block_form_defaults( $fields ) { +function comments_block_form_defaults( $fields ) { if ( wp_is_block_theme() ) { $fields['submit_button'] = ''; $fields['submit_field'] = '

%1$s %2$s

'; @@ -109,7 +109,7 @@ function comments_query_loop_block_form_defaults( $fields ) { return $fields; } -add_filter( 'comment_form_defaults', 'comments_query_loop_block_form_defaults' ); +add_filter( 'comment_form_defaults', 'comments_block_form_defaults' ); /** * Enqueues styles from the legacy `core/post-comments` block. These styles are @@ -150,7 +150,7 @@ function render_legacy_post_comments_block( $attributes, $content, $block ) { sprintf( __( 'Block %1$s has been renamed to Comments Query Loop. %1$s will be supported until WordPress version X.X.', 'gutenberg' ), $block->name ), headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE ); - return render_block_core_comments_query_loop( $attributes, $content, $block ); + return render_block_core_comments( $attributes, $content, $block ); } /** From 8f84a2c60371e4d4512a60412339f8bcb8420209 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Sun, 10 Jul 2022 20:03:05 +0200 Subject: [PATCH 10/46] Improve the render callback's description --- packages/block-library/src/comments/index.php | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index ca5a331e69d97d..22897fd62a92e1 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -1,12 +1,20 @@ Date: Sun, 10 Jul 2022 20:05:08 +0200 Subject: [PATCH 11/46] Fix the HTML returned for the non-legacy version --- packages/block-library/src/comments/index.php | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index 22897fd62a92e1..f87be688eb2d1b 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -26,11 +26,7 @@ function render_block_core_comments( $attributes, $content, $block ) { $is_legacy = 'core/post-comments' === $block->name || isset( $attributes['legacy'] ); if ( ! $is_legacy ) { - $inner_blocks_html = ''; - foreach ( $block->inner_blocks as $inner_block ) { - $inner_blocks_html .= $inner_block->render(); - } - return $inner_blocks_html; + return $block->render( array( 'dynamic' => false ) ); } $post_id = $block->context['postId']; From 378154c9f19abe2c3e4c6778f7c204f1d3d0d4c1 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 11 Jul 2022 15:41:52 +0200 Subject: [PATCH 12/46] Run npm run docs:build --- docs/reference-guides/core-blocks.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3ba0f74c68bb2a..761fad23254ecb 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt - **Name:** core/buttons - **Category:** design - **Supports:** align (full, wide), anchor, spacing (blockGap, margin) -- **Attributes:** +- **Attributes:** ## Calendar @@ -168,7 +168,7 @@ Contains the block elements used to display a comment, like the title, date, aut - **Name:** core/comment-template - **Category:** design - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Comments @@ -177,7 +177,7 @@ An advanced block that allows displaying post comments using different visual co - **Name:** core/comments - **Category:** theme - **Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~ -- **Attributes:** tagName +- **Attributes:** legacy, tagName ## Comments Pagination @@ -204,7 +204,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu - **Name:** core/comments-pagination-numbers - **Category:** theme - **Supports:** ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page @@ -420,7 +420,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com - **Name:** core/nextpage - **Category:** design - **Supports:** ~~className~~, ~~customClassName~~, ~~html~~ -- **Attributes:** +- **Attributes:** ## Page List @@ -519,7 +519,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/ - **Name:** core/post-content - **Category:** theme - **Supports:** align (full, wide), ~~html~~ -- **Attributes:** +- **Attributes:** ## Post Date @@ -564,7 +564,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Post Terms @@ -618,7 +618,7 @@ Contains the block elements used to render content when no query results are fou - **Name:** core/query-no-results - **Category:** theme - **Supports:** align, color (background, gradients, link, text), ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Pagination @@ -645,7 +645,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word - **Name:** core/query-pagination-numbers - **Category:** theme - **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page From a190e913130c6b3ef2cf31a47645fcf67ce24823 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 11 Jul 2022 15:46:27 +0200 Subject: [PATCH 13/46] Regenerate fixtures --- test/integration/fixtures/blocks/core__post-comments.json | 7 +++++-- .../fixtures/blocks/core__post-comments.serialized.html | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/test/integration/fixtures/blocks/core__post-comments.json b/test/integration/fixtures/blocks/core__post-comments.json index 0b5af1837cca2f..6cea899e1534b6 100644 --- a/test/integration/fixtures/blocks/core__post-comments.json +++ b/test/integration/fixtures/blocks/core__post-comments.json @@ -1,8 +1,11 @@ [ { - "name": "core/post-comments", + "name": "core/comments", "isValid": true, - "attributes": {}, + "attributes": { + "tagName": "div", + "legacy": true + }, "innerBlocks": [] } ] diff --git a/test/integration/fixtures/blocks/core__post-comments.serialized.html b/test/integration/fixtures/blocks/core__post-comments.serialized.html index 624be4a845676f..a487c09b960ebb 100644 --- a/test/integration/fixtures/blocks/core__post-comments.serialized.html +++ b/test/integration/fixtures/blocks/core__post-comments.serialized.html @@ -1 +1 @@ - + From ff28b3d01f51d71131a745801b0599eb8e537377 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Mon, 11 Jul 2022 19:15:56 +0200 Subject: [PATCH 14/46] Update warning message in the editor Co-authored-by: Bernie Reiter --- packages/block-library/src/comments/edit/comments-legacy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js index e372592040f219..8fcf7ddd7ea75b 100644 --- a/packages/block-library/src/comments/edit/comments-legacy.js +++ b/packages/block-library/src/comments/edit/comments-legacy.js @@ -51,7 +51,7 @@ export default function CommentsLegacy( { ); let warning = __( - 'Post Comments block: This 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 replacing this block with the "Comments Query Loop" block.' + '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.' ); let showPlacholder = true; From 0195ed5f952d9249bcfa558ef83fd94a3b9d5a48 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Mon, 11 Jul 2022 19:31:07 +0200 Subject: [PATCH 15/46] Fix string closing marks --- packages/block-library/src/comments/edit/comments-legacy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js index 8fcf7ddd7ea75b..15e7f2ca8317ca 100644 --- a/packages/block-library/src/comments/edit/comments-legacy.js +++ b/packages/block-library/src/comments/edit/comments-legacy.js @@ -51,7 +51,7 @@ export default function CommentsLegacy( { ); let warning = __( - '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.' + "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." ); let showPlacholder = true; From febc24bb0d42023854e0f306c2369e0086b925fc Mon Sep 17 00:00:00 2001 From: David Arenas Date: Mon, 11 Jul 2022 20:14:34 +0200 Subject: [PATCH 16/46] Add a button to switch from legacy to default --- .../src/comments/edit/comments-legacy.js | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js index 15e7f2ca8317ca..cf83d6c03366fc 100644 --- a/packages/block-library/src/comments/edit/comments-legacy.js +++ b/packages/block-library/src/comments/edit/comments-legacy.js @@ -14,8 +14,10 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useEntityProp, store as coreStore } from '@wordpress/core-data'; +import { createBlock } from '@wordpress/blocks'; +import { Button } from '@wordpress/components'; /** * Internal dependencies @@ -26,6 +28,7 @@ export default function CommentsLegacy( { attributes, setAttributes, context: { postType, postId }, + clientId, } ) { const { textAlign } = attributes; @@ -80,6 +83,22 @@ export default function CommentsLegacy( { } } + const { replaceBlock } = useDispatch( blockEditorStore ); + + const removeLegacy = () => { + const { legacy, ...attributesWithoutLegacy } = attributes; + replaceBlock( + clientId, + createBlock( 'core/comments', attributesWithoutLegacy ) + ); + }; + + const actions = [ + , + ]; + const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, @@ -98,7 +117,7 @@ export default function CommentsLegacy( {
- { warning } + { warning } { showPlacholder && ( From 3dfa5e0d1127ca2b1f5f786bfbb8234bab5be9b4 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 15 Jul 2022 18:23:59 +0200 Subject: [PATCH 17/46] Fix `useBlockProps` call after rebase --- packages/block-library/src/comments/edit/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-library/src/comments/edit/index.js b/packages/block-library/src/comments/edit/index.js index 16631aed907eaa..8d8db650349d87 100644 --- a/packages/block-library/src/comments/edit/index.js +++ b/packages/block-library/src/comments/edit/index.js @@ -14,10 +14,7 @@ export default function CommentsEdit( props ) { const { attributes, setAttributes } = props; const { tagName: TagName, legacy } = attributes; - const blockProps = useBlockProps( { - // We add the previous block name for backward compatibility. - className: 'wp-block-comments-query-loop', - } ); + const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, } ); From 35fda82713c6200132ac30a39436341855d4d7fd Mon Sep 17 00:00:00 2001 From: David Arenas Date: Tue, 19 Jul 2022 10:37:22 +0200 Subject: [PATCH 18/46] Add tests for Post Comments block support --- test/e2e/specs/editor/blocks/comments.spec.js | 144 +++++++++++++++++- 1 file changed, 141 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 212dd2884fa075..15906f2b1ac67f 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -9,8 +9,11 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); */ test.use( { - commentsBlockUtils: async ( { page, admin }, use ) => { - await use( new CommentsBlockUtils( { page, admin } ) ); + commentsBlockUtils: async ( { page, admin, requestUtils }, use ) => { + await use( new CommentsBlockUtils( { page, admin, requestUtils } ) ); + }, + codeEditorUtils: async ( { page }, use ) => { + await use( new CodeEditorUtils( { page } ) ); }, } ); @@ -107,6 +110,7 @@ test.describe( 'Comments', () => { page.locator( 'role=link[name="Newer Comments"i]' ) ).toBeVisible(); } ); + test( 'Pagination links are not appearing if break comments is not enabled', async ( { admin, editor, @@ -141,6 +145,78 @@ test.describe( 'Comments', () => { ).toBeHidden(); } ); + test( 'The old Post Comments block is still supported', async ( { + page, + requestUtils, + commentsBlockUtils, + } ) => { + // Create a post with the old "Post Comments" block. + const postId = await commentsBlockUtils.createNewPost( { + content: '', + } ); + + // Publish a comment on that post. + await requestUtils.createComment( { + content: 'This is an automated comment', + post: postId, + } ); + + // Visit created post. + await page.goto( `/?p=${ postId }` ); + + // Ensure that the rendered post is the legacy version of Post Comments. + await expect( page.locator( '.wp-block-post-comments' ) ).toBeVisible(); + await expect( page.locator( '.comment-content' ) ).toContainText( + 'This is an automated comment' + ); + } ); + + test( 'The old Post Comments is converted to Comments with legacy attribute', async ( { + page, + admin, + requestUtils, + codeEditorUtils, + commentsBlockUtils, + } ) => { + // Create a post with the old "Post Comments" block. + const postId = await commentsBlockUtils.createNewPost( { + content: '', + } ); + await requestUtils.createComment( { + content: 'This is an automated comment', + post: postId, + } ); + + // Go to the post editor. + await admin.visitAdminPage( + '/post.php', + `post=${ postId }&action=edit` + ); + + // Hide welcome guide. + await commentsBlockUtils.hideWelcomeGuide(); + + // Check that the Post Comments block has been replaced by Comments (legacy) + await expect( page.locator( '.wp-block-post-comments' ) ).toBeHidden(); + await expect( page.locator( '.wp-block-comments' ) ).toBeVisible(); + + // Open code editor and check its content. + await codeEditorUtils.open(); + await expect( codeEditorUtils.textbox() ).toContainText( + '' + ); + await codeEditorUtils.close(); + + // Visit post + await page.goto( `/?p=${ postId }` ); + + // Rendered block should be the same as Post Comments + await expect( page.locator( '.wp-block-post-comments' ) ).toBeVisible(); + await expect( page.locator( '.comment-content' ) ).toContainText( + 'This is an automated comment' + ); + } ); + test.afterEach( async ( { requestUtils, commentsBlockUtils } ) => { // Ideally, we'd set options in afterAll. Unfortunately, these // aren't exposed via the REST API, so we have to set them through the @@ -167,9 +243,10 @@ test.describe( 'Comments', () => { } ); class CommentsBlockUtils { - constructor( { page, admin } ) { + constructor( { page, admin, requestUtils } ) { this.page = page; this.admin = admin; + this.requestUtils = requestUtils; } /** @@ -193,4 +270,65 @@ class CommentsBlockUtils { return previousValue; } + + /** + * Creates a post with the given content. + * + * @param {string} content The content for the post. + * + * @return {Promise} Post ID. + */ + async createNewPost( { content } ) { + const post = await this.requestUtils.rest( { + method: 'POST', + path: `/wp/v2/posts`, + params: { status: 'publish', content }, + } ); + + return post.id; + } + + async hideWelcomeGuide() { + await this.page.evaluate( async () => { + const isWelcomeGuideActive = window.wp.data + .select( 'core/edit-post' ) + .isFeatureActive( 'welcomeGuide' ); + + if ( isWelcomeGuideActive ) { + window.wp.data + .dispatch( 'core/edit-post' ) + .toggleFeature( 'welcomeGuide' ); + } + } ); + + await this.page.reload(); + await this.page.waitForSelector( '.edit-post-layout' ); + } +} + +class CodeEditorUtils { + constructor( { page } ) { + this.page = page; + } + + async open() { + await this.page + .locator( + 'role=region[name="Editor top bar"i] >> role=button[name="Options"i]' + ) + .click(); + await this.page + .locator( 'role=menuitemradio[name*="Code editor"i]' ) + .click(); + } + + textbox() { + return this.page.locator( 'role=textbox[name="Type text or HTML"i]' ); + } + + async close() { + await this.page + .locator( 'role=button[name="Exit code editor"i]' ) + .click(); + } } From 3db2eea5b35ba9b6df20b35b826f07151fe0704e Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 20 Jul 2022 13:22:48 +0200 Subject: [PATCH 19/46] Simplify before/after functions --- test/e2e/specs/editor/blocks/comments.spec.js | 77 ++++++++----------- 1 file changed, 34 insertions(+), 43 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 15906f2b1ac67f..1642975a9d2ab3 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -18,31 +18,30 @@ test.use( { } ); test.describe( 'Comments', () => { - let previousPageComments, - previousCommentsPerPage, - previousDefaultCommentsPage; + // Ideally, we'd set options in beforeAll or afterAll. Unfortunately, these + // aren't exposed via the REST API, so we have to set them through the + // relevant wp-admin screen, which involves page utils; but those are + // prohibited from beforeAll/afterAll. test.beforeAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'emptytheme' ); } ); test.beforeEach( async ( { commentsBlockUtils } ) => { - // Ideally, we'd set options in beforeAll. Unfortunately, these - // aren't exposed via the REST API, so we have to set them through the - // relevant wp-admin screen, which involves page utils; but those are - // prohibited from beforeAll. - previousPageComments = await commentsBlockUtils.setOption( - 'page_comments', - '1' - ); - previousCommentsPerPage = await commentsBlockUtils.setOption( - 'comments_per_page', - '1' - ); - previousDefaultCommentsPage = await commentsBlockUtils.setOption( - 'default_comments_page', - 'newest' - ); + await commentsBlockUtils.setOptions( { + page_comments: '1', + comments_per_page: '1', + default_comments_page: 'newest', + } ); + } ); + + test.afterEach( async ( { requestUtils, commentsBlockUtils } ) => { + await commentsBlockUtils.restorePreviousOptions(); + await requestUtils.deleteAllComments(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentyone' ); } ); test( 'We show no results message if there are no comments', async ( { @@ -216,30 +215,6 @@ test.describe( 'Comments', () => { 'This is an automated comment' ); } ); - - test.afterEach( async ( { requestUtils, commentsBlockUtils } ) => { - // Ideally, we'd set options in afterAll. Unfortunately, these - // aren't exposed via the REST API, so we have to set them through the - // relevant wp-admin screen, which involves page utils; but those are - // prohibited from beforeAll. - await commentsBlockUtils.setOption( - 'page_comments', - previousPageComments - ); - await commentsBlockUtils.setOption( - 'comments_per_page', - previousCommentsPerPage - ); - await commentsBlockUtils.setOption( - 'default_comments_page', - previousDefaultCommentsPage - ); - await requestUtils.deleteAllComments(); - } ); - - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.activateTheme( 'twentytwentyone' ); - } ); } ); class CommentsBlockUtils { @@ -247,6 +222,22 @@ class CommentsBlockUtils { this.page = page; this.admin = admin; this.requestUtils = requestUtils; + this.previousOptions = {}; + } + + async setOptions( options ) { + for ( const [ key, value ] of Object.entries( options ) ) { + const previousValue = await this.setOption( key, value ); + if ( ! this.previousOptions[ key ] ) { + this.previousOptions[ key ] = previousValue; + } + } + } + + async restorePreviousOptions() { + for ( const [ key, value ] of Object.entries( this.previousOptions ) ) { + await this.setOption( key, value ); + } } /** From 5e2893d2252e95121b6254c9f5c113801dc677b6 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 20 Jul 2022 13:23:15 +0200 Subject: [PATCH 20/46] Move Post Comments tests into its own describe --- test/e2e/specs/editor/blocks/comments.spec.js | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 1642975a9d2ab3..1921328eaacce1 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -143,8 +143,25 @@ test.describe( 'Comments', () => { page.locator( 'role=link[name="Newer Comments"i]' ) ).toBeHidden(); } ); +} ); +/* + * The following test suite ensures that the legacy Post Comments block is still + * supported and it is converted into the Comments block on the editor. + */ +test.describe( 'Post Comments', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'emptytheme' ); + } ); + + test.afterEach( async ( { requestUtils } ) => { + await requestUtils.deleteAllComments(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.activateTheme( 'twentytwentyone' ); + } ); - test( 'The old Post Comments block is still supported', async ( { + test( 'is still supported', async ( { page, requestUtils, commentsBlockUtils, @@ -170,7 +187,7 @@ test.describe( 'Comments', () => { ); } ); - test( 'The old Post Comments is converted to Comments with legacy attribute', async ( { + test( 'is converted to Comments with legacy attribute', async ( { page, admin, requestUtils, From 249de8c589ff4125ff74f0a3ca784fb14d75c996 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 20 Jul 2022 13:31:55 +0200 Subject: [PATCH 21/46] Move `createPost` to `requestUtils` --- .../src/request-utils/index.ts | 3 ++- .../src/request-utils/posts.js | 17 ++++++++++++ test/e2e/specs/editor/blocks/comments.spec.js | 27 +++---------------- 3 files changed, 22 insertions(+), 25 deletions(-) diff --git a/packages/e2e-test-utils-playwright/src/request-utils/index.ts b/packages/e2e-test-utils-playwright/src/request-utils/index.ts index 03c9002c65bcb1..322aa48e850f86 100644 --- a/packages/e2e-test-utils-playwright/src/request-utils/index.ts +++ b/packages/e2e-test-utils-playwright/src/request-utils/index.ts @@ -19,7 +19,7 @@ import { deleteAllTemplates } from './templates'; import { activateTheme } from './themes'; import { deleteAllBlocks } from './blocks'; import { createComment, deleteAllComments } from './comments'; -import { deleteAllPosts } from './posts'; +import { createPost, deleteAllPosts } from './posts'; import { resetPreferences } from './preferences'; import { deleteAllWidgets, addWidgetBlock } from './widgets'; @@ -121,6 +121,7 @@ class RequestUtils { deactivatePlugin = deactivatePlugin.bind( this ); activateTheme = activateTheme.bind( this ); deleteAllBlocks = deleteAllBlocks; + createPost = createPost.bind( this ); deleteAllPosts = deleteAllPosts.bind( this ); createComment = createComment.bind( this ); deleteAllComments = deleteAllComments.bind( this ); diff --git a/packages/e2e-test-utils-playwright/src/request-utils/posts.js b/packages/e2e-test-utils-playwright/src/request-utils/posts.js index 4b3d7bbc44400c..c46b16c2b5f2ca 100644 --- a/packages/e2e-test-utils-playwright/src/request-utils/posts.js +++ b/packages/e2e-test-utils-playwright/src/request-utils/posts.js @@ -30,3 +30,20 @@ export async function deleteAllPosts() { ) ); } + +/** + * Creates a new post using the REST API. + * + * @param {string} content The content for the post. + * + * @return {Promise} Post ID. + */ +export async function createPost( { content } ) { + const post = await this.rest( { + method: 'POST', + path: `/wp/v2/posts`, + params: { status: 'publish', content }, + } ); + + return post.id; +} diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 1921328eaacce1..e5f59a2924484e 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -161,13 +161,9 @@ test.describe( 'Post Comments', () => { await requestUtils.activateTheme( 'twentytwentyone' ); } ); - test( 'is still supported', async ( { - page, - requestUtils, - commentsBlockUtils, - } ) => { + test( 'is still supported', async ( { page, requestUtils } ) => { // Create a post with the old "Post Comments" block. - const postId = await commentsBlockUtils.createNewPost( { + const postId = await requestUtils.createPost( { content: '', } ); @@ -195,7 +191,7 @@ test.describe( 'Post Comments', () => { commentsBlockUtils, } ) => { // Create a post with the old "Post Comments" block. - const postId = await commentsBlockUtils.createNewPost( { + const postId = await requestUtils.createPost( { content: '', } ); await requestUtils.createComment( { @@ -279,23 +275,6 @@ class CommentsBlockUtils { return previousValue; } - /** - * Creates a post with the given content. - * - * @param {string} content The content for the post. - * - * @return {Promise} Post ID. - */ - async createNewPost( { content } ) { - const post = await this.requestUtils.rest( { - method: 'POST', - path: `/wp/v2/posts`, - params: { status: 'publish', content }, - } ); - - return post.id; - } - async hideWelcomeGuide() { await this.page.evaluate( async () => { const isWelcomeGuideActive = window.wp.data From bb6d16b6a25cadc8acce212dda132af2800bcd1b Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 20 Jul 2022 13:35:46 +0200 Subject: [PATCH 22/46] Add missing newline --- test/e2e/specs/editor/blocks/comments.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index e5f59a2924484e..14797a1d0e2809 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -144,6 +144,7 @@ test.describe( 'Comments', () => { ).toBeHidden(); } ); } ); + /* * The following test suite ensures that the legacy Post Comments block is still * supported and it is converted into the Comments block on the editor. From a2fcb4ab4f7996d45d4e6fc686d70ae3bf571026 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 20 Jul 2022 15:32:36 +0200 Subject: [PATCH 23/46] Add TS to playwright post utils --- .../src/request-utils/{posts.js => posts.ts} | 38 ++++++++++++++----- test/e2e/specs/editor/blocks/comments.spec.js | 6 ++- 2 files changed, 32 insertions(+), 12 deletions(-) rename packages/e2e-test-utils-playwright/src/request-utils/{posts.js => posts.ts} (51%) diff --git a/packages/e2e-test-utils-playwright/src/request-utils/posts.js b/packages/e2e-test-utils-playwright/src/request-utils/posts.ts similarity index 51% rename from packages/e2e-test-utils-playwright/src/request-utils/posts.js rename to packages/e2e-test-utils-playwright/src/request-utils/posts.ts index c46b16c2b5f2ca..8c94e368545dab 100644 --- a/packages/e2e-test-utils-playwright/src/request-utils/posts.js +++ b/packages/e2e-test-utils-playwright/src/request-utils/posts.ts @@ -1,12 +1,28 @@ +/** + * Internal dependencies + */ +import type { RequestUtils } from './index'; + +export interface Post { + id: number; + content: string; + status: 'publish' | 'future' | 'draft' | 'pending' | 'private'; +} + +export interface CreatePostPayload { + content: string; + status: 'publish' | 'future' | 'draft' | 'pending' | 'private'; +} + /** * Delete all posts using REST API. * - * @this {import('./index').RequestUtils} + * @param {} this RequestUtils. */ -export async function deleteAllPosts() { +export async function deleteAllPosts( this: RequestUtils ) { // List all posts. // https://developer.wordpress.org/rest-api/reference/posts/#list-posts - const posts = await this.rest( { + const posts = await this.rest< Post[] >( { path: '/wp/v2/posts', params: { per_page: 100, @@ -34,16 +50,18 @@ export async function deleteAllPosts() { /** * Creates a new post using the REST API. * - * @param {string} content The content for the post. - * - * @return {Promise} Post ID. + * @param {} this RequestUtils. + * @param {} payload Post attributes. */ -export async function createPost( { content } ) { - const post = await this.rest( { +export async function createPost( + this: RequestUtils, + payload: CreatePostPayload +) { + const post = await this.rest< Post >( { method: 'POST', path: `/wp/v2/posts`, - params: { status: 'publish', content }, + params: { ...payload }, } ); - return post.id; + return post; } diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 14797a1d0e2809..ffbec4c6e62675 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -164,8 +164,9 @@ test.describe( 'Post Comments', () => { test( 'is still supported', async ( { page, requestUtils } ) => { // Create a post with the old "Post Comments" block. - const postId = await requestUtils.createPost( { + const { id: postId } = await requestUtils.createPost( { content: '', + status: 'publish', } ); // Publish a comment on that post. @@ -192,8 +193,9 @@ test.describe( 'Post Comments', () => { commentsBlockUtils, } ) => { // Create a post with the old "Post Comments" block. - const postId = await requestUtils.createPost( { + const { id: postId } = await requestUtils.createPost( { content: '', + status: 'publish', } ); await requestUtils.createComment( { content: 'This is an automated comment', From 47f7ae64bdf00b9582f5a936458ad00dc1fc569f Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 20 Jul 2022 16:27:16 +0200 Subject: [PATCH 24/46] Add test to switch button --- test/e2e/specs/editor/blocks/comments.spec.js | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index ffbec4c6e62675..36a16362ad51c1 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -143,6 +143,38 @@ test.describe( 'Comments', () => { page.locator( 'role=link[name="Newer Comments"i]' ) ).toBeHidden(); } ); + + test( 'A button allows the block to switch from legacy mode to editable mode', async ( { + admin, + editor, + page, + } ) => { + await admin.createNewPost(); + await editor.insertBlock( { + name: 'core/comments', + attributes: { legacy: true, textColor: 'vivid-purple' }, + } ); + + const block = page.locator( 'role=document[name="Block: Comments"i]' ); + const warning = block.locator( '.block-editor-warning' ); + const placeholder = block.locator( + '.wp-block-post-comments__placeholder' + ); + + await expect( block ).toHaveClass( /has-vivid-purple-color/ ); + await expect( warning ).toBeVisible(); + await expect( placeholder ).toBeVisible(); + + await page.click( 'role=button[name="Switch to editable mode"i]' ); + + const commentTemplate = block.locator( + 'role=document[name="Block: Comment Template"i]' + ); + await expect( block ).toHaveClass( /has-vivid-purple-color/ ); + await expect( commentTemplate ).toBeVisible(); + await expect( warning ).toBeHidden(); + await expect( placeholder ).toBeHidden(); + } ); } ); /* From 64cc5b49dbde9f7cb27879f43cca8c6fe0648f87 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 20 Jul 2022 16:50:21 +0200 Subject: [PATCH 25/46] Update placeholder classname --- packages/block-library/src/comments/edit/placeholder.js | 2 +- packages/block-library/src/comments/editor.scss | 2 +- test/e2e/specs/editor/blocks/comments.spec.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/comments/edit/placeholder.js b/packages/block-library/src/comments/edit/placeholder.js index 07556f6d52396a..8648dd83f10f49 100644 --- a/packages/block-library/src/comments/edit/placeholder.js +++ b/packages/block-library/src/comments/edit/placeholder.js @@ -26,7 +26,7 @@ export default function PostCommentsPlaceholder( { postType, postId } ) { return (

diff --git a/packages/block-library/src/comments/editor.scss b/packages/block-library/src/comments/editor.scss index ad9a4c9af741e8..2d7b20ad5ca3cd 100644 --- a/packages/block-library/src/comments/editor.scss +++ b/packages/block-library/src/comments/editor.scss @@ -4,7 +4,7 @@ min-width: 230px; } -.wp-block-post-comments__placeholder { +.wp-block-comments__legacy-placeholder { @extend .wp-block-post-comments; * { pointer-events: none; diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 36a16362ad51c1..6aed34e502f305 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -158,7 +158,7 @@ test.describe( 'Comments', () => { const block = page.locator( 'role=document[name="Block: Comments"i]' ); const warning = block.locator( '.block-editor-warning' ); const placeholder = block.locator( - '.wp-block-post-comments__placeholder' + '.wp-block-comments__legacy-placeholder' ); await expect( block ).toHaveClass( /has-vivid-purple-color/ ); From ff8fe04ff6f19b901b4ee93d0ae12c94a7175405 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 13:43:09 +0200 Subject: [PATCH 26/46] Use `setAttributes` to switch from legacy mode Co-authored-by: Bernie Reiter --- packages/block-library/src/comments/block.json | 3 ++- .../src/comments/edit/comments-legacy.js | 12 ++---------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json index 151664b2904ff8..042184b9b8d08d 100644 --- a/packages/block-library/src/comments/block.json +++ b/packages/block-library/src/comments/block.json @@ -12,7 +12,8 @@ "default": "div" }, "legacy": { - "type": "boolean" + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js index cf83d6c03366fc..ee51d3e4b41981 100644 --- a/packages/block-library/src/comments/edit/comments-legacy.js +++ b/packages/block-library/src/comments/edit/comments-legacy.js @@ -14,9 +14,8 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { useEntityProp, store as coreStore } from '@wordpress/core-data'; -import { createBlock } from '@wordpress/blocks'; import { Button } from '@wordpress/components'; /** @@ -28,7 +27,6 @@ export default function CommentsLegacy( { attributes, setAttributes, context: { postType, postId }, - clientId, } ) { const { textAlign } = attributes; @@ -83,14 +81,8 @@ export default function CommentsLegacy( { } } - const { replaceBlock } = useDispatch( blockEditorStore ); - const removeLegacy = () => { - const { legacy, ...attributesWithoutLegacy } = attributes; - replaceBlock( - clientId, - createBlock( 'core/comments', attributesWithoutLegacy ) - ); + setAttributes( { legacy: false } ); }; const actions = [ From 0ac9b0fa7ab0ea2a664baba89898f4f26af06415 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 13:51:08 +0200 Subject: [PATCH 27/46] Regenerate fixtures --- test/integration/fixtures/blocks/core__comments.json | 1 + 1 file changed, 1 insertion(+) diff --git a/test/integration/fixtures/blocks/core__comments.json b/test/integration/fixtures/blocks/core__comments.json index 6f1d1c5c9e8431..1ea7dcae007f65 100644 --- a/test/integration/fixtures/blocks/core__comments.json +++ b/test/integration/fixtures/blocks/core__comments.json @@ -4,6 +4,7 @@ "isValid": true, "attributes": { "tagName": "div", + "legacy": false, "className": "comments-post-extra" }, "innerBlocks": [ From dc7a11eed573c9943b58397bf07bd0f70a55b4b3 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 21 Jul 2022 14:41:09 +0200 Subject: [PATCH 28/46] Move Warning logic into Post Comments Form component --- .../src/comments/edit/placeholder.js | 2 +- .../src/post-comments-form/edit.js | 73 +--------------- .../src/post-comments-form/form.js | 87 ++++++++++++++++++- 3 files changed, 86 insertions(+), 76 deletions(-) diff --git a/packages/block-library/src/comments/edit/placeholder.js b/packages/block-library/src/comments/edit/placeholder.js index 8648dd83f10f49..f12eaa3443154c 100644 --- a/packages/block-library/src/comments/edit/placeholder.js +++ b/packages/block-library/src/comments/edit/placeholder.js @@ -115,7 +115,7 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {

- + ); } diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js index f776a160909871..56eab195b4a29e 100644 --- a/packages/block-library/src/post-comments-form/edit.js +++ b/packages/block-library/src/post-comments-form/edit.js @@ -9,14 +9,8 @@ import classnames from 'classnames'; import { AlignmentControl, BlockControls, - Warning, useBlockProps, - store as blockEditorStore, } from '@wordpress/block-editor'; -import { Button } from '@wordpress/components'; -import { useEntityProp, store as coreStore } from '@wordpress/core-data'; -import { __, _x, sprintf } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -30,72 +24,13 @@ export default function PostCommentsFormEdit( { } ) { const { textAlign } = attributes; const { postId, postType } = context; - const [ commentStatus, setCommentStatus ] = useEntityProp( - 'postType', - postType, - 'comment_status', - postId - ); + const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, } ), } ); - const isSiteEditor = postType === undefined || postId === undefined; - - const { defaultCommentStatus } = useSelect( - ( select ) => - select( blockEditorStore ).getSettings() - .__experimentalDiscussionSettings - ); - - const postTypeSupportsComments = useSelect( ( select ) => - postType - ? !! select( coreStore ).getPostType( postType )?.supports.comments - : false - ); - - let warning = false; - let actions; - let showPlaceholder = true; - - if ( ! isSiteEditor && 'open' !== commentStatus ) { - if ( 'closed' === commentStatus ) { - warning = __( - 'Post Comments Form block: Comments are not enabled for this item.' - ); - - actions = [ - , - ]; - showPlaceholder = false; - } else if ( ! postTypeSupportsComments ) { - warning = sprintf( - /* translators: 1: Post type (i.e. "post", "page") */ - __( - 'Post Comments Form block: Comments are not enabled for this post type (%s).' - ), - postType - ); - showPlaceholder = false; - } else if ( 'open' !== defaultCommentStatus ) { - warning = __( - 'Post Comments Form block: Comments are not enabled.' - ); - showPlaceholder = false; - } - } - return ( <> @@ -107,11 +42,7 @@ export default function PostCommentsFormEdit( { />
- { warning && ( - { warning } - ) } - - { showPlaceholder ? : null } +
); diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js index 48a38d8e8a5628..34e0adc4f41420 100644 --- a/packages/block-library/src/post-comments-form/form.js +++ b/packages/block-library/src/post-comments-form/form.js @@ -6,13 +6,21 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; -import { __experimentalGetElementClassName } from '@wordpress/block-editor'; +import { __, _x, sprintf } from '@wordpress/i18n'; +import { + Warning, + store as blockEditorStore, + __experimentalGetElementClassName, +} from '@wordpress/block-editor'; +import { Button } from '@wordpress/components'; import { useDisabled, useInstanceId } from '@wordpress/compose'; +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { Fragment } from '@wordpress/element'; -const CommentsForm = () => { +const CommentsFormPlaceholder = () => { const disabledFormRef = useDisabled(); - const instanceId = useInstanceId( CommentsForm ); + const instanceId = useInstanceId( CommentsFormPlaceholder ); return (
@@ -47,4 +55,75 @@ const CommentsForm = () => { ); }; +const CommentsForm = ( { postId, postType } ) => { + const [ commentStatus, setCommentStatus ] = useEntityProp( + 'postType', + postType, + 'comment_status', + postId + ); + + const isSiteEditor = postType === undefined || postId === undefined; + + const { defaultCommentStatus } = useSelect( + ( select ) => + select( blockEditorStore ).getSettings() + .__experimentalDiscussionSettings + ); + + const postTypeSupportsComments = useSelect( ( select ) => + postType + ? !! select( coreStore ).getPostType( postType )?.supports.comments + : false + ); + + let warning = false; + let actions; + let showPlaceholder = true; + + if ( ! isSiteEditor && 'open' !== commentStatus ) { + if ( 'closed' === commentStatus ) { + warning = __( + 'Post Comments Form block: Comments are not enabled for this item.' + ); + + actions = [ + , + ]; + showPlaceholder = false; + } else if ( ! postTypeSupportsComments ) { + warning = sprintf( + /* translators: 1: Post type (i.e. "post", "page") */ + __( + 'Post Comments Form block: Comments are not enabled for this post type (%s).' + ), + postType + ); + showPlaceholder = false; + } else if ( 'open' !== defaultCommentStatus ) { + warning = __( + 'Post Comments Form block: Comments are not enabled.' + ); + showPlaceholder = false; + } + } + + return ( + + { warning && { warning } } + + { showPlaceholder ? : null } + + ); +}; + export default CommentsForm; From 2360f68bb9c81328f61a1848dd66024e2e270a2b Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 21 Jul 2022 14:43:51 +0200 Subject: [PATCH 29/46] Deduplicate --- .../src/comments/edit/comments-legacy.js | 59 +------------------ 1 file changed, 3 insertions(+), 56 deletions(-) diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js index ee51d3e4b41981..565e0d995f7c46 100644 --- a/packages/block-library/src/comments/edit/comments-legacy.js +++ b/packages/block-library/src/comments/edit/comments-legacy.js @@ -11,11 +11,8 @@ import { BlockControls, Warning, useBlockProps, - store as blockEditorStore, } from '@wordpress/block-editor'; -import { __, sprintf } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { useEntityProp, store as coreStore } from '@wordpress/core-data'; +import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; /** @@ -30,56 +27,9 @@ export default function CommentsLegacy( { } ) { const { textAlign } = attributes; - const [ commentStatus ] = useEntityProp( - 'postType', - postType, - 'comment_status', - postId - ); - - const { defaultCommentStatus } = useSelect( - ( select ) => - select( blockEditorStore ).getSettings() - .__experimentalDiscussionSettings - ); - - const isSiteEditor = postType === undefined || postId === undefined; - - const postTypeSupportsComments = useSelect( ( select ) => - postType - ? !! select( coreStore ).getPostType( postType )?.supports.comments - : false - ); - - let warning = __( + const warning = __( "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." ); - let showPlacholder = true; - - if ( ! isSiteEditor && 'open' !== commentStatus ) { - if ( 'closed' === commentStatus ) { - warning = sprintf( - /* translators: 1: Post type (i.e. "post", "page") */ - __( - 'Post Comments block: Comments to this %s are not allowed.' - ), - postType - ); - showPlacholder = false; - } else if ( ! postTypeSupportsComments ) { - warning = sprintf( - /* translators: 1: Post type (i.e. "post", "page") */ - __( - 'Post Comments block: Comments for this post type (%s) are not enabled.' - ), - postType - ); - showPlacholder = false; - } else if ( 'open' !== defaultCommentStatus ) { - warning = __( 'Post Comments block: Comments are not enabled.' ); - showPlacholder = false; - } - } const removeLegacy = () => { setAttributes( { legacy: false } ); @@ -110,10 +60,7 @@ export default function CommentsLegacy( {
{ warning } - - { showPlacholder && ( - - ) } +
); From 0ed0317f6e2ca0d9c507a3cb0db7f9424db8bf47 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 21 Jul 2022 14:48:06 +0200 Subject: [PATCH 30/46] Inline warning --- .../src/comments/edit/comments-legacy.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js index 565e0d995f7c46..0217100280cbb8 100644 --- a/packages/block-library/src/comments/edit/comments-legacy.js +++ b/packages/block-library/src/comments/edit/comments-legacy.js @@ -27,10 +27,6 @@ export default function CommentsLegacy( { } ) { const { textAlign } = attributes; - const warning = __( - "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." - ); - const removeLegacy = () => { setAttributes( { legacy: false } ); }; @@ -59,7 +55,15 @@ export default function CommentsLegacy( {
- { warning } + + { __( + "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.' + ) } +
From 2afa3ec02bc9b9ba7517c546b34b82a2dcab8b11 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 21 Jul 2022 14:51:17 +0200 Subject: [PATCH 31/46] Simplify --- .../block-library/src/post-comments-form/form.js | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js index 34e0adc4f41420..9e4aa08fc9a319 100644 --- a/packages/block-library/src/post-comments-form/form.js +++ b/packages/block-library/src/post-comments-form/form.js @@ -16,7 +16,6 @@ import { Button } from '@wordpress/components'; import { useDisabled, useInstanceId } from '@wordpress/compose'; import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { Fragment } from '@wordpress/element'; const CommentsFormPlaceholder = () => { const disabledFormRef = useDisabled(); @@ -79,7 +78,6 @@ const CommentsForm = ( { postId, postType } ) => { let warning = false; let actions; - let showPlaceholder = true; if ( ! isSiteEditor && 'open' !== commentStatus ) { if ( 'closed' === commentStatus ) { @@ -99,7 +97,6 @@ const CommentsForm = ( { postId, postType } ) => { ) } , ]; - showPlaceholder = false; } else if ( ! postTypeSupportsComments ) { warning = sprintf( /* translators: 1: Post type (i.e. "post", "page") */ @@ -108,21 +105,17 @@ const CommentsForm = ( { postId, postType } ) => { ), postType ); - showPlaceholder = false; } else if ( 'open' !== defaultCommentStatus ) { warning = __( 'Post Comments Form block: Comments are not enabled.' ); - showPlaceholder = false; } } - return ( - - { warning && { warning } } - - { showPlaceholder ? : null } - + return warning ? ( + { warning } + ) : ( + ); }; From 6c1ede5389037ae1441f2b868d57a4cd903feff2 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 21 Jul 2022 14:51:55 +0200 Subject: [PATCH 32/46] Nicer on the eye --- packages/block-library/src/post-comments-form/form.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js index 9e4aa08fc9a319..13a03bb0e89659 100644 --- a/packages/block-library/src/post-comments-form/form.js +++ b/packages/block-library/src/post-comments-form/form.js @@ -112,11 +112,11 @@ const CommentsForm = ( { postId, postType } ) => { } } - return warning ? ( - { warning } - ) : ( - - ); + if ( warning ) { + return { warning }; + } + + return ; }; export default CommentsForm; From ce8a1b74ba1e6860ee89eaf8a16f06724e03e65d Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 21 Jul 2022 14:55:00 +0200 Subject: [PATCH 33/46] A bit nicer still --- .../src/post-comments-form/form.js | 44 ++++++++++--------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js index 13a03bb0e89659..00de2cb418d5df 100644 --- a/packages/block-library/src/post-comments-form/form.js +++ b/packages/block-library/src/post-comments-form/form.js @@ -76,16 +76,9 @@ const CommentsForm = ( { postId, postType } ) => { : false ); - let warning = false; - let actions; - if ( ! isSiteEditor && 'open' !== commentStatus ) { if ( 'closed' === commentStatus ) { - warning = __( - 'Post Comments Form block: Comments are not enabled for this item.' - ); - - actions = [ + const actions = [ , ]; + return ( + + { __( + 'Post Comments Form block: Comments are not enabled for this item.' + ) } + + ); } else if ( ! postTypeSupportsComments ) { - warning = sprintf( - /* translators: 1: Post type (i.e. "post", "page") */ - __( - 'Post Comments Form block: Comments are not enabled for this post type (%s).' - ), - postType + return ( + + { sprintf( + /* translators: 1: Post type (i.e. "post", "page") */ + __( + 'Post Comments Form block: Comments are not enabled for this post type (%s).' + ), + postType + ) } + ); } else if ( 'open' !== defaultCommentStatus ) { - warning = __( - 'Post Comments Form block: Comments are not enabled.' + return ( + + { __( + 'Post Comments Form block: Comments are not enabled.' + ) } + ); } } - if ( warning ) { - return { warning }; - } - return ; }; From dc076819246cf0353d4bbc84c1bc1a072a84a115 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 21 Jul 2022 15:16:46 +0200 Subject: [PATCH 34/46] Inlining is fun --- .../block-library/src/comments/edit/comments-legacy.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js index 0217100280cbb8..4d629a857e6527 100644 --- a/packages/block-library/src/comments/edit/comments-legacy.js +++ b/packages/block-library/src/comments/edit/comments-legacy.js @@ -27,12 +27,12 @@ export default function CommentsLegacy( { } ) { const { textAlign } = attributes; - const removeLegacy = () => { - setAttributes( { legacy: false } ); - }; - const actions = [ - , ]; From 03fbcff38dee40ed7d60963198b89743d9f73051 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 21 Jul 2022 15:22:56 +0200 Subject: [PATCH 35/46] i18n fix --- packages/block-library/src/comments/edit/placeholder.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/comments/edit/placeholder.js b/packages/block-library/src/comments/edit/placeholder.js index f12eaa3443154c..837561aad15c00 100644 --- a/packages/block-library/src/comments/edit/placeholder.js +++ b/packages/block-library/src/comments/edit/placeholder.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { store as blockEditorStore } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; import { useEntityProp } from '@wordpress/core-data'; import { useDisabled } from '@wordpress/compose'; @@ -30,7 +30,10 @@ export default function PostCommentsPlaceholder( { postType, postId } ) { ref={ disabledRef } >

- { __( 'One response to' ) } “{ postTitle }” + { + /* translators: %s: Post title. */ + sprintf( __( 'One response to %s' ), postTitle ) + }

From b9b69d227fcf8cd279f0aedc16c30332bc5dd520 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 16:12:33 +0200 Subject: [PATCH 36/46] Only count approved comments --- packages/block-library/src/comments/index.php | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index f87be688eb2d1b..a8ca9098ecde9b 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -37,6 +37,7 @@ function render_block_core_comments( $attributes, $content, $block ) { $comment_args = array( 'post_id' => $post_id, 'count' => true, + 'status' => 'approve', ); // Return early if there are no comments and comments are closed. if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) { From 1e38f4dec2624e150ea715eaf2d9f9c9f36102a8 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 16:14:51 +0200 Subject: [PATCH 37/46] Remove unnecessary warning in PHP --- packages/block-library/src/comments/index.php | 22 +------------------ 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index a8ca9098ecde9b..b60c6d04290d6d 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -138,26 +138,6 @@ function enqueue_legacy_post_comments_block_styles( $block_name ) { } } -/** - * Renders the legacy `core/post-comments` block on the server. - * It triggers a developer warning and then calls the renamed - * block's `render_callback` function output. - * - * @param array $attributes Block attributes. - * @param string $content Block default content. - * @param WP_Block $block Block instance. - * - * @return string Returns the output of the block. - */ -function render_legacy_post_comments_block( $attributes, $content, $block ) { - trigger_error( - /* translators: %1$s: Block type */ - sprintf( __( 'Block %1$s has been renamed to Comments Query Loop. %1$s will be supported until WordPress version X.X.', 'gutenberg' ), $block->name ), - headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE - ); - return render_block_core_comments( $attributes, $content, $block ); -} - /** * Ensures backwards compatibility for any users running the Gutenberg plugin * who have used Post Comments before it was merged into Comments Query Loop. @@ -222,7 +202,7 @@ function register_legacy_post_comments_block() { 'wp-block-button', ), 'editorStyle' => 'wp-block-post-comments-editor', - 'render_callback' => 'render_legacy_post_comments_block', + 'render_callback' => 'render_block_core_comments', 'skip_inner_blocks' => true, ); From f609c8567f9e3895d07120606fdd98cb6aa98938 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 18:35:33 +0200 Subject: [PATCH 38/46] Add tests for the `legacy` attribute --- test/e2e/specs/editor/blocks/comments.spec.js | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 6aed34e502f305..8bd32a4c07aea4 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -175,6 +175,68 @@ test.describe( 'Comments', () => { await expect( warning ).toBeHidden(); await expect( placeholder ).toBeHidden(); } ); + + test( 'The block version is rendered if the legacy attribute is false', async ( { + page, + admin, + editor, + requestUtils, + } ) => { + await admin.createNewPost(); + await editor.insertBlock( { + name: 'core/comments', + attributes: { legacy: false }, + } ); + const postId = await editor.publishPost(); + + // Create a comments for that post. + await requestUtils.createComment( { + content: `This is an automated comment`, + post: postId, + } ); + + // Visit the post that was just published. + await page.click( + 'role=region[name="Editor publish"] >> role=link[name="View Post"i]' + ); + + // Check that the Comment Template block (an inner block) is rendered. + await expect( + page.locator( '.wp-block-comment-template' ) + ).toBeVisible(); + await expect( page.locator( '.commentlist' ) ).toBeHidden(); + } ); + + test( 'The PHP version is rendered if the legacy attribute is true', async ( { + page, + admin, + editor, + requestUtils, + } ) => { + await admin.createNewPost(); + await editor.insertBlock( { + name: 'core/comments', + attributes: { legacy: true }, + } ); + const postId = await editor.publishPost(); + + // Create a comments for that post. + await requestUtils.createComment( { + content: `This is an automated comment`, + post: postId, + } ); + + // Visit the post that was just published. + await page.click( + 'role=region[name="Editor publish"] >> role=link[name="View Post"i]' + ); + + // Check that the Comment Template block (an inner block) is NOT rendered. + await expect( + page.locator( '.wp-block-comment-template' ) + ).toBeHidden(); + await expect( page.locator( '.commentlist' ) ).toBeVisible(); + } ); } ); /* From 8007e53bf643d7341540dbaa8fa080a4d664634d Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 18:35:48 +0200 Subject: [PATCH 39/46] Fix the PHP render callback --- packages/block-library/src/comments/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php index b60c6d04290d6d..5df2ed550a21ec 100644 --- a/packages/block-library/src/comments/index.php +++ b/packages/block-library/src/comments/index.php @@ -24,7 +24,7 @@ function render_block_core_comments( $attributes, $content, $block ) { global $post; - $is_legacy = 'core/post-comments' === $block->name || isset( $attributes['legacy'] ); + $is_legacy = 'core/post-comments' === $block->name || ! empty( $attributes['legacy'] ); if ( ! $is_legacy ) { return $block->render( array( 'dynamic' => false ) ); } From 81cfd7d516ad7e34f598f0bd5e1bd978977a8203 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 23:22:50 +0200 Subject: [PATCH 40/46] Move comment about `setOptions` inside `forEach` --- test/e2e/specs/editor/blocks/comments.spec.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 8bd32a4c07aea4..8eb6b129019c96 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -18,16 +18,15 @@ test.use( { } ); test.describe( 'Comments', () => { - // Ideally, we'd set options in beforeAll or afterAll. Unfortunately, these - // aren't exposed via the REST API, so we have to set them through the - // relevant wp-admin screen, which involves page utils; but those are - // prohibited from beforeAll/afterAll. - test.beforeAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'emptytheme' ); } ); test.beforeEach( async ( { commentsBlockUtils } ) => { + // Ideally, we'd set options in beforeAll or afterAll. Unfortunately, these + // aren't exposed via the REST API, so we have to set them through the + // relevant wp-admin screen, which involves page utils; but those are + // prohibited from beforeAll/afterAll. await commentsBlockUtils.setOptions( { page_comments: '1', comments_per_page: '1', From cf790fde980858ca59255385d6544b1ae41349dc Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 23:28:14 +0200 Subject: [PATCH 41/46] Make `setOptions` util stateless --- test/e2e/specs/editor/blocks/comments.spec.js | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 8eb6b129019c96..1550a36a5ce5aa 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -18,6 +18,8 @@ test.use( { } ); test.describe( 'Comments', () => { + let previousOptions; + test.beforeAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'emptytheme' ); } ); @@ -27,7 +29,7 @@ test.describe( 'Comments', () => { // aren't exposed via the REST API, so we have to set them through the // relevant wp-admin screen, which involves page utils; but those are // prohibited from beforeAll/afterAll. - await commentsBlockUtils.setOptions( { + previousOptions = await commentsBlockUtils.setOptions( { page_comments: '1', comments_per_page: '1', default_comments_page: 'newest', @@ -35,7 +37,7 @@ test.describe( 'Comments', () => { } ); test.afterEach( async ( { requestUtils, commentsBlockUtils } ) => { - await commentsBlockUtils.restorePreviousOptions(); + await commentsBlockUtils.setOptions( previousOptions ); await requestUtils.deleteAllComments(); } ); @@ -331,22 +333,23 @@ class CommentsBlockUtils { this.page = page; this.admin = admin; this.requestUtils = requestUtils; - this.previousOptions = {}; } + /** + * Sets a group of site options, from the options-general admin page. + * + * This is a temporary solution until we can handle options through the REST + * API. + * + * @param {Record} options Options in key-value format. + * @return {Record} Previous options. + */ async setOptions( options ) { + const previousValues = {}; for ( const [ key, value ] of Object.entries( options ) ) { - const previousValue = await this.setOption( key, value ); - if ( ! this.previousOptions[ key ] ) { - this.previousOptions[ key ] = previousValue; - } - } - } - - async restorePreviousOptions() { - for ( const [ key, value ] of Object.entries( this.previousOptions ) ) { - await this.setOption( key, value ); + previousValues[ key ] = await this.setOption( key, value ); } + return previousValues; } /** From 2007766361698a514bdd6c1aef7d952564bd9c65 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 23:33:45 +0200 Subject: [PATCH 42/46] Remove `legacy: false` Co-authored-by: Bernie Reiter --- test/e2e/specs/editor/blocks/comments.spec.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 1550a36a5ce5aa..66fe2163ff166e 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -184,10 +184,7 @@ test.describe( 'Comments', () => { requestUtils, } ) => { await admin.createNewPost(); - await editor.insertBlock( { - name: 'core/comments', - attributes: { legacy: false }, - } ); + await editor.insertBlock( { name: 'core/comments' } ); const postId = await editor.publishPost(); // Create a comments for that post. From 3a23e9fbf1b887cb5b3bb9bc5980d682a8069c0e Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 23:34:52 +0200 Subject: [PATCH 43/46] Clarify "block version" Co-authored-by: Bernie Reiter --- test/e2e/specs/editor/blocks/comments.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 66fe2163ff166e..24239fe3d4fecf 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -177,7 +177,7 @@ test.describe( 'Comments', () => { await expect( placeholder ).toBeHidden(); } ); - test( 'The block version is rendered if the legacy attribute is false', async ( { + test( 'The editable block version is rendered if the legacy attribute is false', async ( { page, admin, editor, From a93d0c787342e4feff3d2c16049ec4bf3995116e Mon Sep 17 00:00:00 2001 From: David Arenas Date: Thu, 21 Jul 2022 23:38:16 +0200 Subject: [PATCH 44/46] Replace unnecessary backticks with single quotes Co-authored-by: Bernie Reiter --- test/e2e/specs/editor/blocks/comments.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 24239fe3d4fecf..3c9e90ee7db99d 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -189,7 +189,7 @@ test.describe( 'Comments', () => { // Create a comments for that post. await requestUtils.createComment( { - content: `This is an automated comment`, + content: 'This is an automated comment', post: postId, } ); @@ -220,7 +220,7 @@ test.describe( 'Comments', () => { // Create a comments for that post. await requestUtils.createComment( { - content: `This is an automated comment`, + content: 'This is an automated comment', post: postId, } ); From bef407cf56465781a83879604dc69e3da775ed35 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 22 Jul 2022 12:50:26 +0200 Subject: [PATCH 45/46] Use `getEditedPostContent` --- test/e2e/specs/editor/blocks/comments.spec.js | 41 ++----------------- 1 file changed, 4 insertions(+), 37 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 3c9e90ee7db99d..f48d66bc15e938 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -12,9 +12,6 @@ test.use( { commentsBlockUtils: async ( { page, admin, requestUtils }, use ) => { await use( new CommentsBlockUtils( { page, admin, requestUtils } ) ); }, - codeEditorUtils: async ( { page }, use ) => { - await use( new CodeEditorUtils( { page } ) ); - }, } ); test.describe( 'Comments', () => { @@ -280,8 +277,8 @@ test.describe( 'Post Comments', () => { test( 'is converted to Comments with legacy attribute', async ( { page, admin, + editor, requestUtils, - codeEditorUtils, commentsBlockUtils, } ) => { // Create a post with the old "Post Comments" block. @@ -307,12 +304,9 @@ test.describe( 'Post Comments', () => { await expect( page.locator( '.wp-block-post-comments' ) ).toBeHidden(); await expect( page.locator( '.wp-block-comments' ) ).toBeVisible(); - // Open code editor and check its content. - await codeEditorUtils.open(); - await expect( codeEditorUtils.textbox() ).toContainText( - '' - ); - await codeEditorUtils.close(); + // Check the block definition has changed. + const content = await editor.getEditedPostContent(); + expect( content ).toBe( '' ); // Visit post await page.goto( `/?p=${ postId }` ); @@ -388,30 +382,3 @@ class CommentsBlockUtils { await this.page.waitForSelector( '.edit-post-layout' ); } } - -class CodeEditorUtils { - constructor( { page } ) { - this.page = page; - } - - async open() { - await this.page - .locator( - 'role=region[name="Editor top bar"i] >> role=button[name="Options"i]' - ) - .click(); - await this.page - .locator( 'role=menuitemradio[name*="Code editor"i]' ) - .click(); - } - - textbox() { - return this.page.locator( 'role=textbox[name="Type text or HTML"i]' ); - } - - async close() { - await this.page - .locator( 'role=button[name="Exit code editor"i]' ) - .click(); - } -} From 85ec8d3cf43116bde66668ddb7833849caaab102 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 22 Jul 2022 12:54:05 +0200 Subject: [PATCH 46/46] Slightly improve some comments --- test/e2e/specs/editor/blocks/comments.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index f48d66bc15e938..581027f53a09ec 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -300,7 +300,7 @@ test.describe( 'Post Comments', () => { // Hide welcome guide. await commentsBlockUtils.hideWelcomeGuide(); - // Check that the Post Comments block has been replaced by Comments (legacy) + // Check that the Post Comments block has been replaced with Comments. await expect( page.locator( '.wp-block-post-comments' ) ).toBeHidden(); await expect( page.locator( '.wp-block-comments' ) ).toBeVisible(); @@ -311,7 +311,7 @@ test.describe( 'Post Comments', () => { // Visit post await page.goto( `/?p=${ postId }` ); - // Rendered block should be the same as Post Comments + // Rendered block should be the same as Post Comments. await expect( page.locator( '.wp-block-post-comments' ) ).toBeVisible(); await expect( page.locator( '.comment-content' ) ).toContainText( 'This is an automated comment'