From a1a14685dba6c082ecb9c799842fe05be1c169ec Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com> Date: Tue, 19 Apr 2022 21:53:23 +0200 Subject: [PATCH] Create Comments Title block with simple styling (#40419) Co-authored-by: Michal Czaplinski Co-authored-by: Bernie Reiter --- docs/reference-guides/core-blocks.md | 9 + lib/blocks.php | 1 + .../src/comments-query-loop/edit.js | 1 + .../src/comments-title/block.json | 70 +++++++ .../block-library/src/comments-title/edit.js | 197 ++++++++++++++++++ .../src/comments-title/editor.scss | 4 + .../block-library/src/comments-title/index.js | 18 ++ .../src/comments-title/index.php | 68 ++++++ packages/block-library/src/editor.scss | 1 + packages/block-library/src/index.js | 3 + packages/icons/CHANGELOG.md | 2 + packages/icons/src/index.js | 1 + packages/icons/src/library/comment-title.js | 12 ++ .../blocks/core__comments-query-loop.html | 56 +++-- .../blocks/core__comments-query-loop.json | 28 +++ .../core__comments-query-loop.parsed.json | 75 +++++-- .../core__comments-query-loop.serialized.html | 4 +- .../fixtures/blocks/core__comments-title.html | 1 + .../fixtures/blocks/core__comments-title.json | 30 +++ .../blocks/core__comments-title.parsed.json | 29 +++ .../core__comments-title.serialized.html | 1 + 21 files changed, 555 insertions(+), 56 deletions(-) create mode 100644 packages/block-library/src/comments-title/block.json create mode 100644 packages/block-library/src/comments-title/edit.js create mode 100644 packages/block-library/src/comments-title/editor.scss create mode 100644 packages/block-library/src/comments-title/index.js create mode 100644 packages/block-library/src/comments-title/index.php create mode 100644 packages/icons/src/library/comment-title.js create mode 100644 test/integration/fixtures/blocks/core__comments-title.html create mode 100644 test/integration/fixtures/blocks/core__comments-title.json create mode 100644 test/integration/fixtures/blocks/core__comments-title.parsed.json create mode 100644 test/integration/fixtures/blocks/core__comments-title.serialized.html diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 16a5c8f607c1d8..08367cb90f925c 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -215,6 +215,15 @@ An advanced block that allows displaying post comments using different visual co - **Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~ - **Attributes:** tagName +## Comments Title + +Displays a title with the number of comments ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title)) + +- **Name:** core/comments-title +- **Category:** theme +- **Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~ +- **Attributes:** level, multipleCommentsLabel, showCommentsCount, showPostTitle, singleCommentLabel, textAlign + ## Cover Add an image or video with a text overlay — great for headers. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover)) diff --git a/lib/blocks.php b/lib/blocks.php index 41ad13c442411d..c7bf4e2d36c270 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -69,6 +69,7 @@ function gutenberg_reregister_core_block_types() { 'comments-pagination-next.php' => 'core/comments-pagination-next', 'comments-pagination-numbers.php' => 'core/comments-pagination-numbers', 'comments-pagination-previous.php' => 'core/comments-pagination-previous', + 'comments-title.php' => 'core/comments-title', 'file.php' => 'core/file', 'home-link.php' => 'core/home-link', 'image.php' => 'core/image', diff --git a/packages/block-library/src/comments-query-loop/edit.js b/packages/block-library/src/comments-query-loop/edit.js index 297811030f15ef..8aa6d6a1155a59 100644 --- a/packages/block-library/src/comments-query-loop/edit.js +++ b/packages/block-library/src/comments-query-loop/edit.js @@ -9,6 +9,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import CommentsInspectorControls from './edit/comments-inspector-controls'; const TEMPLATE = [ + [ 'core/comments-title' ], [ 'core/comment-template', {}, diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json new file mode 100644 index 00000000000000..3ad6babf81e571 --- /dev/null +++ b/packages/block-library/src/comments-title/block.json @@ -0,0 +1,70 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "core/comments-title", + "title": "Comments Title", + "category": "theme", + "ancestor": [ "core/comments-query-loop" ], + "description": "Displays a title with the number of comments", + "textdomain": "default", + "usesContext": [ "postId", "postType" ], + "attributes": { + "textAlign": { + "type": "string" + }, + "singleCommentLabel": { + "type": "string" + }, + "multipleCommentsLabel": { + "type": "string" + }, + "showPostTitle": { + "type": "boolean", + "default": true + }, + "showCommentsCount": { + "type": "boolean", + "default": true + }, + "level": { + "type": "number", + "default": 2 + } + }, + "supports": { + "anchor": false, + "align": true, + "html": false, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true + }, + "color": { + "gradients": true, + "__experimentalDefaultControls": { + "background": true, + "text": true + } + }, + "spacing": { + "margin": true, + "padding": true + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true, + "__experimentalFontFamily": true, + "__experimentalTextTransform": true, + "__experimentalDefaultControls": { + "fontSize": true, + "__experimentalFontFamily": true, + "__experimentalFontStyle": true, + "__experimentalFontWeight": true + } + } + } +} diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js new file mode 100644 index 00000000000000..e3855d60c2a560 --- /dev/null +++ b/packages/block-library/src/comments-title/edit.js @@ -0,0 +1,197 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + AlignmentControl, + BlockControls, + useBlockProps, + PlainText, + InspectorControls, +} from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; +import { useEntityProp } from '@wordpress/core-data'; +import { + PanelBody, + ToggleControl, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; +import { useState, useEffect } from '@wordpress/element'; +import apiFetch from '@wordpress/api-fetch'; +import { addQueryArgs } from '@wordpress/url'; + +/** + * Internal dependencies + */ +import HeadingLevelDropdown from '../heading/heading-level-dropdown'; + +export default function Edit( { + attributes: { + textAlign, + singleCommentLabel, + multipleCommentsLabel, + showPostTitle, + showCommentsCount, + level, + }, + setAttributes, + context: { postType, postId }, +} ) { + const TagName = 'h' + level; + const [ commentsCount, setCommentsCount ] = useState(); + const [ editingMode, setEditingMode ] = useState( 'plural' ); + const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId ); + const isSiteEditor = typeof postId === 'undefined'; + const blockProps = useBlockProps( { + className: classnames( { + [ `has-text-align-${ textAlign }` ]: textAlign, + } ), + } ); + + useEffect( () => { + if ( isSiteEditor ) { + setCommentsCount( 3 ); + return; + } + const currentPostId = postId; + apiFetch( { + path: addQueryArgs( '/wp/v2/comments', { + post: postId, + _fields: 'id', + } ), + method: 'HEAD', + parse: false, + } ) + .then( ( res ) => { + // Stale requests will have the `currentPostId` of an older closure. + if ( currentPostId === postId ) { + setCommentsCount( + parseInt( res.headers.get( 'X-WP-Total' ) ) + ); + } + } ) + .catch( () => { + setCommentsCount( 0 ); + } ); + }, [ postId ] ); + + const blockControls = ( + + + setAttributes( { textAlign: newAlign } ) + } + /> + + setAttributes( { level: newLevel } ) + } + /> + + ); + + const inspectorControls = ( + + + { isSiteEditor && ( + + + + + ) } + + setAttributes( { showPostTitle: value } ) + } + /> + + setAttributes( { showCommentsCount: value } ) + } + /> + + + ); + + const postTitle = isSiteEditor ? __( '"Post Title"' ) : `"${ rawTitle }"`; + + const singlePlaceholder = showPostTitle + ? __( 'One response to ' ) + : __( 'One response' ); + + const multiplePlaceholder = showPostTitle + ? __( 'Responses to ' ) + : __( 'Responses' ); + + return ( + <> + { blockControls } + { inspectorControls } + + { editingMode === 'singular' || commentsCount === 1 ? ( + <> + + setAttributes( { + singleCommentLabel: newLabel, + } ) + } + /> + { showPostTitle ? postTitle : null } + </> + ) : ( + <> + { showCommentsCount ? commentsCount : null } + <PlainText + __experimentalVersion={ 2 } + tagName="span" + aria-label={ + showCommentsCount + ? ` ${ multiplePlaceholder }` + : multiplePlaceholder + } + placeholder={ + showCommentsCount + ? ` ${ multiplePlaceholder }` + : multiplePlaceholder + } + value={ multipleCommentsLabel } + onChange={ ( newLabel ) => + setAttributes( { + multipleCommentsLabel: newLabel, + } ) + } + /> + { showPostTitle ? postTitle : null } + </> + ) } + </TagName> + </> + ); +} diff --git a/packages/block-library/src/comments-title/editor.scss b/packages/block-library/src/comments-title/editor.scss new file mode 100644 index 00000000000000..6f9d964bbb9c66 --- /dev/null +++ b/packages/block-library/src/comments-title/editor.scss @@ -0,0 +1,4 @@ + +.wp-block-comments-title.has-background { + padding: inherit; +} diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js new file mode 100644 index 00000000000000..988be3ef86169d --- /dev/null +++ b/packages/block-library/src/comments-title/index.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { commentTitle 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/comments-title/index.php b/packages/block-library/src/comments-title/index.php new file mode 100644 index 00000000000000..ed95541b7ecb0d --- /dev/null +++ b/packages/block-library/src/comments-title/index.php @@ -0,0 +1,68 @@ +<?php +/** + * Server-side rendering of the `core/comments-title` block. + * + * @package WordPress + */ + +/** + * Renders the `core/comments-title` block on the server. + * + * @param array $attributes Block attributes. + * + * @return string Return the post comments title. + */ +function render_block_core_comments_title( $attributes ) { + + $align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}"; + $show_post_title = ! empty( $attributes['showPostTitle'] ) && $attributes['showPostTitle']; + $show_comments_count = ! empty( $attributes['showCommentsCount'] ) && $attributes['showCommentsCount']; + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) ); + $post_title = $show_post_title ? sprintf( '"%1$s"', get_the_title() ) : null; + $comments_count = number_format_i18n( get_comments_number() ); + $tag_name = 'h2'; + if ( isset( $attributes['level'] ) ) { + $tag_name = 'h' . $attributes['level']; + } + + if ( '0' === $comments_count ) { + return; + } + + $single_default_comment_label = $show_post_title ? __( 'One response to' ) : __( 'One response' ); + $single_comment_label = ! empty( $attributes['singleCommentLabel'] ) ? $attributes['singleCommentLabel'] : $single_default_comment_label; + + $multiple_default_comment_label = $show_post_title ? __( 'Responses to' ) : __( 'Responses' ); + $multiple_comment_label = ! empty( $attributes['multipleCommentsLabel'] ) ? $attributes['multipleCommentsLabel'] : $multiple_default_comment_label; + + $comments_title = '%1$s %2$s %3$s'; + + $comments_title = sprintf( + $comments_title, + // If there is only one comment, only display the label. + '1' !== $comments_count && $show_comments_count ? $comments_count : null, + '1' === $comments_count ? $single_comment_label : $multiple_comment_label, + $post_title + ); + + return sprintf( + '<%1$s id="comments" %2$s>%3$s</%1$s>', + $tag_name, + $wrapper_attributes, + $comments_title + ); +} + + /** + * Registers the `core/comments-title` block on the server. + */ +function register_block_core_comments_title() { + register_block_type_from_metadata( + __DIR__ . '/comments-title', + array( + 'render_callback' => 'render_block_core_comments_title', + ) + ); +} + + add_action( 'init', 'register_block_core_comments_title' ); diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 59c1f993a51e1c..ff322e97d467f4 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -10,6 +10,7 @@ @import "./comments-query-loop/editor.scss"; @import "./comments-pagination/editor.scss"; @import "./comments-pagination-numbers/editor.scss"; +@import "./comments-title/editor.scss"; @import "./cover/editor.scss"; @import "./embed/editor.scss"; @import "./file/editor.scss"; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 1fe0de453d4e6f..03e79846060c08 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -35,6 +35,7 @@ import * as commentsQueryLoop from './comments-query-loop'; import * as commentsPagination from './comments-pagination'; import * as commentsPaginationNext from './comments-pagination-next'; import * as commentsPaginationNumbers from './comments-pagination-numbers'; +import * as commentsTitle from './comments-title'; import * as cover from './cover'; import * as embed from './embed'; import * as file from './file'; @@ -212,11 +213,13 @@ export const __experimentalGetCoreBlocks = () => [ commentEditLink, commentReplyLink, commentTemplate, + commentsTitle, commentsQueryLoop, commentsPagination, commentsPaginationNext, commentsPaginationNumbers, commentsPaginationPrevious, + postComments, homeLink, logInOut, diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 4655d0ee7a5a3b..afb1ace38c3e7f 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- Add new `commentTitle` icon. ([#40419](https://github.com/WordPress/gutenberg/pull/40419)) + ## 8.2.0 (2022-04-08) ### New Features diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 32d4cfe14bfdf2..231dbf6ac6a563 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -54,6 +54,7 @@ export { default as commentAuthorName } from './library/comment-author-name'; export { default as commentContent } from './library/comment-content'; export { default as commentReplyLink } from './library/comment-reply-link'; export { default as commentEditLink } from './library/comment-edit-link'; +export { default as commentTitle } from './library/comment-title'; export { default as cover } from './library/cover'; export { default as create } from './library/create'; export { default as crop } from './library/crop'; diff --git a/packages/icons/src/library/comment-title.js b/packages/icons/src/library/comment-title.js new file mode 100644 index 00000000000000..dd119dea0e03dc --- /dev/null +++ b/packages/icons/src/library/comment-title.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +const commentTitle = ( + <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <Path d="M6 11.9c.6.3 1.3.5 2.1.5.4 0 .8 0 1.2-.1.4-.1.7-.2 1-.3l-.1-1.3c-.3.1-.6.3-.9.3-.3.1-.7.1-1.1.1-.6 0-1.1-.1-1.5-.4-.4-.3-.7-.6-.9-1-.2-.5-.3-1-.3-1.5 0-.6.1-1.1.3-1.5.2-.4.5-.8.9-1 .4-.3.9-.4 1.5-.4.4 0 .7 0 1.1.1l.9.3.1-1.3c-.3-.1-.6-.2-1-.3C9 4 8.6 4 8.2 4c-.9 0-1.6.2-2.2.5-.6.4-1.1.8-1.5 1.5-.3.6-.5 1.3-.5 2.2s.2 1.6.5 2.2c.4.6.9 1.1 1.5 1.5zm-2 2.6V16h16v-1.5H4zM4 20h9v-1.5H4V20z" /> + </SVG> +); + +export default commentTitle; diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.html b/test/integration/fixtures/blocks/core__comments-query-loop.html index 2fbc1e0de80de2..156166ee90f9a4 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.html +++ b/test/integration/fixtures/blocks/core__comments-query-loop.html @@ -1,41 +1,33 @@ <!-- wp:comments-query-loop --> -<div class="wp-block-comments-query-loop"> +<div class="wp-block-comments-query-loop"><!-- wp:comments-title {"level":4,"style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}},"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large"} /--> + <!-- wp:comment-template --> <!-- 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:column --> - <div class="wp-block-column"> - <!-- wp:comment-author-name /--> - - <!-- 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-edit-link /--> - </div> - <!-- /wp:group --> - - <!-- wp:comment-content /--> - - <!-- wp:comment-reply-link /--> - </div> - <!-- /wp:column --> - </div> + <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:column --> + <div class="wp-block-column"><!-- wp:comment-author-name /--> + + <!-- 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-edit-link /--></div> + <!-- /wp:group --> + + <!-- wp:comment-content /--> + + <!-- 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 --> + <!-- /wp:comments-pagination --></div> + <!-- /wp:comments-query-loop --> \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.json b/test/integration/fixtures/blocks/core__comments-query-loop.json index 98e97afdb9c90a..d796d78c97ffd9 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.json +++ b/test/integration/fixtures/blocks/core__comments-query-loop.json @@ -6,6 +6,34 @@ "tagName": "div" }, "innerBlocks": [ + { + "name": "core/comments-title", + "isValid": true, + "attributes": { + "showPostTitle": true, + "showCommentsCount": true, + "level": 4, + "borderColor": "vivid-red", + "backgroundColor": "primary", + "textColor": "background", + "fontSize": "large", + "style": { + "spacing": { + "padding": { + "top": "6px", + "right": "6px", + "bottom": "6px", + "left": "6px" + } + }, + "border": { + "width": "3px", + "radius": "100px" + } + } + }, + "innerBlocks": [] + }, { "name": "core/comment-template", "isValid": true, diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json b/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json index a5f207fff8388a..529336e78a0985 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json +++ b/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json @@ -3,6 +3,33 @@ "blockName": "core/comments-query-loop", "attrs": {}, "innerBlocks": [ + { + "blockName": "core/comments-title", + "attrs": { + "level": 4, + "style": { + "spacing": { + "padding": { + "top": "6px", + "right": "6px", + "bottom": "6px", + "left": "6px" + } + }, + "border": { + "width": "3px", + "radius": "100px" + } + }, + "borderColor": "vivid-red", + "backgroundColor": "primary", + "textColor": "background", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, { "blockName": "core/comment-template", "attrs": {}, @@ -32,11 +59,11 @@ "innerContent": [] } ], - "innerHTML": "\n\t\t<div class=\"wp-block-column\" style=\"flex-basis:40px\">\n\t\t\t\n\t\t</div>\n\t\t", + "innerHTML": "\n\t<div class=\"wp-block-column\" style=\"flex-basis:40px\"></div>\n\t", "innerContent": [ - "\n\t\t<div class=\"wp-block-column\" style=\"flex-basis:40px\">\n\t\t\t", + "\n\t<div class=\"wp-block-column\" style=\"flex-basis:40px\">", null, - "\n\t\t</div>\n\t\t" + "</div>\n\t" ] }, { @@ -81,13 +108,13 @@ "innerContent": [] } ], - "innerHTML": "\n\t\t\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t</div>\n\t\t\t", + "innerHTML": "\n\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n\t\n\t</div>\n\t", "innerContent": [ - "\n\t\t\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">\n\t\t\t\t", + "\n\t<div class=\"wp-block-group\" style=\"margin-top:0px;margin-bottom:0px\">", null, - "\n\n\t\t\t\t", + "\n\t\n\t", null, - "\n\t\t\t</div>\n\t\t\t" + "</div>\n\t" ] }, { @@ -105,27 +132,27 @@ "innerContent": [] } ], - "innerHTML": "\n\t\t<div class=\"wp-block-column\">\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\t\t</div>\n\t\t", + "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\n\t\n\t\n\t\n\t\n\t</div>\n\t", "innerContent": [ - "\n\t\t<div class=\"wp-block-column\">\n\t\t\t", + "\n\t<div class=\"wp-block-column\">", null, - "\n\n\t\t\t", + "\n\t\n\t", null, - "\n\n\t\t\t", + "\n\t\n\t", null, - "\n\n\t\t\t", + "\n\t\n\t", null, - "\n\t\t</div>\n\t\t" + "</div>\n\t" ] } ], - "innerHTML": "\n\t<div class=\"wp-block-columns\">\n\t\t\n\n\t\t\n\t</div>\n\t", + "innerHTML": "\n\t<div class=\"wp-block-columns\">\n\t\n\t</div>\n\t", "innerContent": [ - "\n\t<div class=\"wp-block-columns\">\n\t\t", + "\n\t<div class=\"wp-block-columns\">", null, - "\n\n\t\t", + "\n\t\n\t", null, - "\n\t</div>\n\t" + "</div>\n\t" ] } ], @@ -158,25 +185,27 @@ "innerContent": [] } ], - "innerHTML": "\n\t\n\n\t\n\n\t\n\t", + "innerHTML": "\n\t\n\t\n\t\n\t\n\t\n\t", "innerContent": [ "\n\t", null, - "\n\n\t", + "\n\t\n\t", null, - "\n\n\t", + "\n\t\n\t", null, "\n\t" ] } ], - "innerHTML": "\n<div class=\"wp-block-comments-query-loop\">\n\t\n\n\t\n</div>\n", + "innerHTML": "\n<div class=\"wp-block-comments-query-loop\">\n\n\t\n\t\n\t</div>\n\t", "innerContent": [ - "\n<div class=\"wp-block-comments-query-loop\">\n\t", + "\n<div class=\"wp-block-comments-query-loop\">", null, "\n\n\t", null, - "\n</div>\n" + "\n\t\n\t", + null, + "</div>\n\t" ] } ] diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html index 014b6210aaa089..dd0aa7f091628c 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html @@ -1,5 +1,7 @@ <!-- wp:comments-query-loop --> -<div class="wp-block-comments-query-loop"><!-- wp:comment-template --> +<div class="wp-block-comments-query-loop"><!-- wp:comments-title {"level":4,"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large","style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}}} /--> + +<!-- wp:comment-template --> <!-- 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> diff --git a/test/integration/fixtures/blocks/core__comments-title.html b/test/integration/fixtures/blocks/core__comments-title.html new file mode 100644 index 00000000000000..5af6be31bedfe0 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-title.html @@ -0,0 +1 @@ +<!-- wp:comments-title {"level":4,"style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}},"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large"} /--> \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__comments-title.json b/test/integration/fixtures/blocks/core__comments-title.json new file mode 100644 index 00000000000000..bb436b955cd9ca --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-title.json @@ -0,0 +1,30 @@ +[ + { + "name": "core/comments-title", + "isValid": true, + "attributes": { + "showPostTitle": true, + "showCommentsCount": true, + "level": 4, + "borderColor": "vivid-red", + "backgroundColor": "primary", + "textColor": "background", + "fontSize": "large", + "style": { + "spacing": { + "padding": { + "top": "6px", + "right": "6px", + "bottom": "6px", + "left": "6px" + } + }, + "border": { + "width": "3px", + "radius": "100px" + } + } + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__comments-title.parsed.json b/test/integration/fixtures/blocks/core__comments-title.parsed.json new file mode 100644 index 00000000000000..2aeed039c3a928 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-title.parsed.json @@ -0,0 +1,29 @@ +[ + { + "blockName": "core/comments-title", + "attrs": { + "level": 4, + "style": { + "spacing": { + "padding": { + "top": "6px", + "right": "6px", + "bottom": "6px", + "left": "6px" + } + }, + "border": { + "width": "3px", + "radius": "100px" + } + }, + "borderColor": "vivid-red", + "backgroundColor": "primary", + "textColor": "background", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__comments-title.serialized.html b/test/integration/fixtures/blocks/core__comments-title.serialized.html new file mode 100644 index 00000000000000..6507dc669314d4 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comments-title.serialized.html @@ -0,0 +1 @@ +<!-- wp:comments-title {"level":4,"borderColor":"vivid-red","backgroundColor":"primary","textColor":"background","fontSize":"large","style":{"spacing":{"padding":{"top":"6px","right":"6px","bottom":"6px","left":"6px"}},"border":{"width":"3px","radius":"100px"}}} /-->