From c3bf2f51a7d42860379e3cc8c54b8575c78e93e8 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Wed, 20 Oct 2021 16:24:44 +0200 Subject: [PATCH] Comment Content Block: Add typography, color and padding support (#35183) * Comment Content Block: add more `supports` settings Settings are: * Typography and color settings (same as the Paragraph block) * Layout settings (same as Post Content block) * Comment Content: Add block icon * Comment Content: Show placeholder when no context * Comment Content: Add jsdoc to `edit` component * Comment Content: Remove the layout setting * Comment Content: Fix path props in icon * Comment Content: Check if the comment is ready * Comment Content: Replace loading message with placeholder * Comment Content: Support for `textAlign` attribute I've also removed some cases that I think should be handled in the parent block: - When the comment is not ready yet - When the comment does not exist * Comment Content: Add padding support * Comment Content: Add more typography settings Added experimental settings for changing - Font family - Font weight - Font style - Text transform - Letter spacing * Comment Content: Remove unnecessary comments * Icons: Add `post` prefix to Comment Content icon * Comment Content: Show block name as placeholder --- .../src/post-comment-content/block.json | 24 +++++++ .../src/post-comment-content/edit.js | 68 +++++++++++++++---- .../src/post-comment-content/index.js | 2 +- .../src/post-comment-content/index.php | 11 ++- packages/icons/src/index.js | 1 + .../icons/src/library/post-comment-content.js | 16 +++++ 6 files changed, 105 insertions(+), 17 deletions(-) create mode 100644 packages/icons/src/library/post-comment-content.js diff --git a/packages/block-library/src/post-comment-content/block.json b/packages/block-library/src/post-comment-content/block.json index 53cb97d855fd5e..551780a3a4ac16 100644 --- a/packages/block-library/src/post-comment-content/block.json +++ b/packages/block-library/src/post-comment-content/block.json @@ -7,7 +7,31 @@ "description": "Post comment content", "textdomain": "default", "usesContext": [ "commentId" ], + "attributes": { + "textAlign": { + "type": "string" + } + }, "supports": { + "color": { + "gradients": true, + "link": true + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontFamily": true, + "__experimentalFontWeight": true, + "__experimentalFontStyle": true, + "__experimentalTextTransform": true, + "__experimentalLetterSpacing": true + }, + "spacing": { + "padding": [ "horizontal", "vertical" ], + "__experimentalDefaultControls": { + "padding": true + } + }, "html": false } } diff --git a/packages/block-library/src/post-comment-content/edit.js b/packages/block-library/src/post-comment-content/edit.js index 52b65fe53b2f63..65fce288d956a8 100644 --- a/packages/block-library/src/post-comment-content/edit.js +++ b/packages/block-library/src/post-comment-content/edit.js @@ -1,32 +1,70 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { RawHTML } from '@wordpress/element'; -import { useEntityProp } from '@wordpress/core-data'; -import { useBlockProps, Warning } from '@wordpress/block-editor'; import { Disabled } from '@wordpress/components'; +import { useEntityProp } from '@wordpress/core-data'; +import { + AlignmentControl, + BlockControls, + useBlockProps, +} from '@wordpress/block-editor'; + +/** + * Renders the `core/post-comment-content` block on the editor. + * + * @param {Object} props React props. + * @param {Object} props.setAttributes Callback for updating block attributes. + * @param {Object} props.attributes Block attributes. + * @param {string} props.attributes.textAlign The `textAlign` attribute. + * @param {Object} props.context Inherited context. + * @param {string} props.context.commentId The comment ID. + * + * @return {JSX.Element} React element. + */ +export default function Edit( { + setAttributes, + attributes: { textAlign }, + context: { commentId }, +} ) { + const blockProps = useBlockProps( { + className: classnames( { + [ `has-text-align-${ textAlign }` ]: textAlign, + } ), + } ); -export default function Edit( { context: { commentId } } ) { - const blockProps = useBlockProps(); const [ content ] = useEntityProp( 'root', 'comment', 'content', commentId ); - if ( ! content?.rendered ) { - return ( + + return ( + <> + + + setAttributes( { textAlign: newAlign } ) + } + /> +
- { __( 'Comment has no content.' ) } + { ! commentId || ! content ? ( +

{ __( 'Post Comment Content' ) }

+ ) : ( + + { content.rendered } + + ) }
- ); - } - return ( -
- - { content.rendered } - -
+ ); } diff --git a/packages/block-library/src/post-comment-content/index.js b/packages/block-library/src/post-comment-content/index.js index e5025ba5110e0f..cd57ce74b9702d 100644 --- a/packages/block-library/src/post-comment-content/index.js +++ b/packages/block-library/src/post-comment-content/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { postContent as icon } from '@wordpress/icons'; +import { postCommentContent as icon } from '@wordpress/icons'; /** * Internal dependencies diff --git a/packages/block-library/src/post-comment-content/index.php b/packages/block-library/src/post-comment-content/index.php index e96af31ee3f357..d27bb9c68c8909 100644 --- a/packages/block-library/src/post-comment-content/index.php +++ b/packages/block-library/src/post-comment-content/index.php @@ -17,13 +17,22 @@ function render_block_core_post_comment_content( $attributes, $content, $block ) if ( ! isset( $block->context['commentId'] ) ) { return ''; } + $comment_text = get_comment_text( $block->context['commentId'] ); if ( ! $comment_text ) { return ''; } + + $classes = ''; + if ( isset( $attributes['textAlign'] ) ) { + $classes .= 'has-text-align-' . $attributes['textAlign']; + } + + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); + return sprintf( '
%2$s
', - get_block_wrapper_attributes(), + $wrapper_attributes, $comment_text ); } diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 360f93e673cf11..b2e0a7cb529425 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -50,6 +50,7 @@ export { default as column } from './library/column'; export { default as columns } from './library/columns'; export { default as comment } from './library/comment'; export { default as commentAuthor } from './library/comment-author'; +export { default as postCommentContent } from './library/post-comment-content'; 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/post-comment-content.js b/packages/icons/src/library/post-comment-content.js new file mode 100644 index 00000000000000..8140cc408f6830 --- /dev/null +++ b/packages/icons/src/library/post-comment-content.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +const postCommentContent = ( + + + +); + +export default postCommentContent;