Comments Query Loop: Update default template (WordPress#40165)

* Change isLink and fontSize defaults

The fontSize prop default is set to 'small'.
The isLink prop is set to true.
Blocks with changes are:
- Comment Author Name
- Comment Date
- Comment Edit Link
- Comment Reply Link

* Improve default template

* Update fixtures

* Update php-unit tests

* Remove trailing comma

docs/reference-guides/core-blocks.md

@@ -123,7 +123,7 @@ Displays the name of the author of the comment. ([Source](https://github.com/Wor
 - **Name:** core/comment-author-name
 - **Category:** theme
 - **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:** isLink, linkTarget, textAlign
+- **Attributes:** fontSize, isLink, linkTarget, textAlign
 
 ## Comment Content
 
@@ -141,7 +141,7 @@ Displays the date on which the comment was posted. ([Source](https://github.com/
 - **Name:** core/comment-date
 - **Category:** theme
 - **Supports:** color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:** format, isLink
+- **Attributes:** fontSize, format, isLink
 
 ## Comment Edit Link
 
@@ -150,7 +150,7 @@ Displays a link to edit the comment in the WordPress Dashboard. This link is onl
 - **Name:** core/comment-edit-link
 - **Category:** theme
 - **Supports:** color (background, gradients, link, ~~text~~), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:** linkTarget, textAlign
+- **Attributes:** fontSize, linkTarget, textAlign
 
 ## Comment Reply Link
 
@@ -159,7 +159,7 @@ Displays a link to reply to a comment. ([Source](https://github.com/WordPress/gu
 - **Name:** core/comment-reply-link
 - **Category:** theme
 - **Supports:** color (background, gradients, link, ~~text~~), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:** textAlign
+- **Attributes:** fontSize, textAlign
 
 ## Comment Template
 

packages/block-library/src/comment-author-name/block.json

@@ -10,14 +10,18 @@
  "attributes": {
  "isLink": {
  "type": "boolean",
- "default": false
+ "default": true
  },
  "linkTarget": {
  "type": "string",
  "default": "_self"
  },
  "textAlign": {
  "type": "string"
+ },
+ "fontSize": {
+ "type": "string",
+ "default": "small"
  }
  },
  "usesContext": [ "commentId" ],

packages/block-library/src/comment-author-name/index.php

@@ -27,6 +27,9 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
  if ( isset( $attributes['textAlign'] ) ) {
  $classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
  }
+ if ( isset( $attributes['fontSize'] ) ) {
+ $classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+ }
 
  $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
  $comment_author = get_comment_author( $comment );

packages/block-library/src/comment-date/block.json

@@ -13,7 +13,11 @@
  },
  "isLink": {
  "type": "boolean",
- "default": false
+ "default": true
+ },
+ "fontSize": {
+ "type": "string",
+ "default": "small"
  }
  },
  "usesContext": [ "commentId" ],

packages/block-library/src/comment-date/index.php

@@ -23,7 +23,12 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
  return '';
  }
 
- $wrapper_attributes = get_block_wrapper_attributes();
+ $classes = '';
+ if ( isset( $attributes['fontSize'] ) ) {
+ $classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+ }
+
+ $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
  $formatted_date = get_comment_date(
  isset( $attributes['format'] ) ? $attributes['format'] : '',
  $comment

packages/block-library/src/comment-edit-link/block.json

@@ -15,6 +15,10 @@
  },
  "textAlign": {
  "type": "string"
+ },
+ "fontSize": {
+ "type": "string",
+ "default": "small"
  }
  },
  "supports": {

packages/block-library/src/comment-edit-link/index.php

@@ -31,6 +31,9 @@ function render_block_core_comment_edit_link( $attributes, $content, $block ) {
  if ( isset( $attributes['textAlign'] ) ) {
  $classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
  }
+ if ( isset( $attributes['fontSize'] ) ) {
+ $classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+ }
 
  $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 

packages/block-library/src/comment-reply-link/block.json

@@ -11,6 +11,10 @@
  "attributes": {
  "textAlign": {
  "type": "string"
+ },
+ "fontSize": {
+ "type": "string",
+ "default": "small"
  }
  },
  "supports": {

packages/block-library/src/comment-reply-link/index.php

@@ -53,7 +53,10 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
  $classes = '';
  if ( isset( $attributes['textAlign'] ) ) {
- $classes .= 'has-text-align-' . $attributes['textAlign'];
+ $classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
+ }
+ if ( isset( $attributes['fontSize'] ) ) {
+ $classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
  }
 
  $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

packages/block-library/src/comments-query-loop/edit.js

@@ -9,7 +9,60 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import CommentsInspectorControls from './edit/comments-inspector-controls';
 
 const TEMPLATE = [
- [ 'core/comment-template' ],
+ [
+ 'core/comment-template',
+ {},
+ [
+ [
+ 'core/columns',
+ {},
+ [
+ [
+ 'core/column',
+ { width: '40px' },
+ [
+ [
+ 'core/avatar',
+ {
+ size: 40,
+ style: {
+ border: { radius: '20px' },
+ },
+ },
+ ],
+ ],
+ ],
+ [
+ 'core/column',
+ {},
+ [
+ [ 'core/comment-author-name' ],
+ [
+ 'core/group',
+ {
+ layout: { type: 'flex' },
+ style: {
+ spacing: {
+ margin: {
+ top: '0px',
+ bottom: '0px',
+ },
+ },
+ },
+ },
+ [
+ [ 'core/comment-date' ],
+ [ 'core/comment-edit-link' ],
+ ],
+ ],
+ [ 'core/comment-content' ],
+ [ 'core/comment-reply-link' ],
+ ],
+ ],
+ ],
+ ],
+ ],
+ ],
  [ 'core/comments-pagination' ],
 ];
 

phpunit/class-block-library-comment-template-test.php

@@ -39,6 +39,7 @@ public function setUp() {
  array(
  'comment_author' => 'Test',
  'comment_author_email' => '[email protected]',
+ 'comment_author_url' => 'https://example.com/author-url/',
  'comment_content' => 'Hello world',
  )
  );
@@ -112,8 +113,8 @@ function test_rendering_comment_template() {
  // Here we use the function prefixed with 'gutenberg_*' because it's added
  // in the build step.
  $this->assertEquals(
- gutenberg_render_block_core_comment_template( null, null, $block ),
- '<ol ><li><div class="wp-block-comment-author-name">Test</div><div class="wp-block-comment-content">Hello world</div></li></ol>'
+ '<ol ><li><div class="has-small-font-size wp-block-comment-author-name"><a rel="external ugc" href="https://example.com/author-url/" target="_self" >Test</a></div><div class="wp-block-comment-content">Hello world</div></li></ol>',
+ gutenberg_render_block_core_comment_template( null, null, $block )
  );
  }
 
@@ -132,6 +133,7 @@ function test_rendering_comment_template_nested() {
  'comment_parent' => self::$comment_ids[0],
  'comment_author' => 'Test',
  'comment_author_email' => '[email protected]',
+ 'comment_author_url' => 'https://example.com/author-url/',
  'comment_content' => 'Hello world',
  )
  );
@@ -143,6 +145,7 @@ function test_rendering_comment_template_nested() {
  'comment_parent' => $nested_comment_ids[0],
  'comment_author' => 'Test',
  'comment_author_email' => '[email protected]',
+ 'comment_author_url' => 'https://example.com/author-url/',
  'comment_content' => 'Hello world',
  )
  );
@@ -160,7 +163,7 @@ function test_rendering_comment_template_nested() {
 
  $this->assertEquals(
  gutenberg_render_block_core_comment_template( null, null, $block ),
- '<ol ><li><div class="wp-block-comment-author-name">Test</div><div class="wp-block-comment-content">Hello world</div><ol><li><div class="wp-block-comment-author-name">Test</div><div class="wp-block-comment-content">Hello world</div><ol><li><div class="wp-block-comment-author-name">Test</div><div class="wp-block-comment-content">Hello world</div></li></ol></li></ol></li></ol>'
+ '<ol ><li><div class="has-small-font-size wp-block-comment-author-name"><a rel="external ugc" href="https://example.com/author-url/" target="_self" >Test</a></div><div class="wp-block-comment-content">Hello world</div><ol><li><div class="has-small-font-size wp-block-comment-author-name"><a rel="external ugc" href="https://example.com/author-url/" target="_self" >Test</a></div><div class="wp-block-comment-content">Hello world</div><ol><li><div class="has-small-font-size wp-block-comment-author-name"><a rel="external ugc" href="https://example.com/author-url/" target="_self" >Test</a></div><div class="wp-block-comment-content">Hello world</div></li></ol></li></ol></li></ol>'
  );
  }
  /**
@@ -180,6 +183,7 @@ function test_build_comment_query_vars_from_block_sets_cpage_var() {
  array(
  'comment_author' => 'Test',
  'comment_author_email' => '[email protected]',
+ 'comment_author_url' => 'https://example.com/author-url/',
  'comment_content' => 'Hello world',
  )
  );

test/integration/fixtures/blocks/core__comment-author-name.json

@@ -3,8 +3,9 @@
  "name": "core/comment-author-name",
  "isValid": true,
  "attributes": {
- "isLink": false,
- "linkTarget": "_self"
+ "isLink": true,
+ "linkTarget": "_self",
+ "fontSize": "small"
  },
  "innerBlocks": []
  }

test/integration/fixtures/blocks/core__comment-author-name__deprecated-v1.serialized.html

@@ -1 +1 @@
-<!-- wp:comment-author-name {"fontFamily":"cambria-georgia"} /-->
+<!-- wp:comment-author-name {"isLink":false,"fontFamily":"cambria-georgia"} /-->

test/integration/fixtures/blocks/core__comment-date.json

@@ -3,7 +3,8 @@
  "name": "core/comment-date",
  "isValid": true,
  "attributes": {
- "isLink": false
+ "isLink": true,
+ "fontSize": "small"
  },
  "innerBlocks": []
  }

test/integration/fixtures/blocks/core__comment-date__deprecated-v1.serialized.html

@@ -1 +1 @@
-<!-- wp:comment-date {"fontFamily":"cambria-georgia"} /-->
+<!-- wp:comment-date {"isLink":false,"fontFamily":"cambria-georgia"} /-->

test/integration/fixtures/blocks/core__comment-edit-link.json

@@ -4,9 +4,9 @@
  "isValid": true,
  "attributes": {
  "linkTarget": "_blank",
+ "fontSize": "extra-large",
  "backgroundColor": "recommended-color-03",
  "fontFamily": "system-monospace",
- "fontSize": "extra-large",
  "style": {
  "typography": {
  "fontStyle": "normal",

test/integration/fixtures/blocks/core__comment-edit-link.serialized.html

@@ -1 +1 @@
-<!-- wp:comment-edit-link {"linkTarget":"_blank","backgroundColor":"recommended-color-03","fontFamily":"system-monospace","fontSize":"extra-large","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}}} /-->
+<!-- wp:comment-edit-link {"linkTarget":"_blank","fontSize":"extra-large","backgroundColor":"recommended-color-03","fontFamily":"system-monospace","style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"2","textTransform":"uppercase","letterSpacing":"13px"},"elements":{"link":{"color":{"text":"#ed1717"}}}}} /-->

test/integration/fixtures/blocks/core__comment-reply-link.json

@@ -4,8 +4,8 @@
  "isValid": true,
  "attributes": {
  "textAlign": "right",
- "fontFamily": "cambria-georgia",
  "fontSize": "extra-large",
+ "fontFamily": "cambria-georgia",
  "style": {
  "typography": {
  "lineHeight": "0.8",

test/integration/fixtures/blocks/core__comment-reply-link.serialized.html

@@ -1 +1 @@
-<!-- wp:comment-reply-link {"textAlign":"right","fontFamily":"cambria-georgia","fontSize":"extra-large","style":{"typography":{"lineHeight":"0.8","textTransform":"uppercase","letterSpacing":"10px"},"elements":{"link":{"color":{"text":"var:preset|color|blue"}}},"color":{"background":"#c82222"}}} /-->
+<!-- wp:comment-reply-link {"textAlign":"right","fontSize":"extra-large","fontFamily":"cambria-georgia","style":{"typography":{"lineHeight":"0.8","textTransform":"uppercase","letterSpacing":"10px"},"elements":{"link":{"color":{"text":"var:preset|color|blue"}}},"color":{"background":"#c82222"}}} /-->

test/integration/fixtures/blocks/core__comments-query-loop.html

@@ -1,17 +1,41 @@
 <!-- wp:comments-query-loop -->
 <div class="wp-block-comments-query-loop">
  <!-- wp:comment-template -->
- <!-- wp:comment-author-avatar /-->
+ <!-- wp:columns -->
+ <div class="wp-block-columns">
+ <!-- wp:column {"width":"40px"} -->
+ <div class="wp-block-column" style="flex-basis:40px">
+ <!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /-->
+ </div>
+ <!-- /wp:column -->
 
- <!-- wp:comment-author-name /-->
+ <!-- wp:column -->
+ <div class="wp-block-column">
+ <!-- wp:comment-author-name /-->
 
- <!-- wp:comment-date /-->
+ <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
+ <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
+ <!-- wp:comment-date /-->
 
- <!-- wp:comment-content /-->
+ <!-- wp:comment-edit-link /-->
+ </div>
+ <!-- /wp:group -->
 
- <!-- wp:comment-reply-link /-->
+  <!-- wp:comment-content /-->
 
- <!-- wp:comment-edit-link /-->
+ <!-- wp:comment-reply-link /-->
+ </div>
+ <!-- /wp:column -->
+ </div>
+ <!-- /wp:columns -->
  <!-- /wp:comment-template -->
+
+ <!-- wp:comments-pagination -->
+ <!-- wp:comments-pagination-previous /-->
+
+ <!-- wp:comments-pagination-numbers /-->
+
+ <!-- wp:comments-pagination-next /-->
+ <!-- /wp:comments-pagination -->
 </div>
 <!-- /wp:comments-query-loop -->