From 3b1785210e747be40bae1940a65139346e9cc3b3 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 5 Oct 2021 18:15:24 +0200 Subject: [PATCH] Add server side render, refactor getting avatar url --- lib/blocks.php | 2 +- .../block.json | 14 +- .../edit.js | 53 +++----- .../index.js | 2 - .../src/comment-avatar/index.php | 126 ++++++++++++++++++ packages/block-library/src/index.js | 4 +- .../src/post-comment-avatar/index.php | 17 --- .../src/post-comment-avatar/save.js | 19 --- 8 files changed, 154 insertions(+), 83 deletions(-) rename packages/block-library/src/{post-comment-avatar => comment-avatar}/block.json (67%) rename packages/block-library/src/{post-comment-avatar => comment-avatar}/edit.js (61%) rename packages/block-library/src/{post-comment-avatar => comment-avatar}/index.js (89%) create mode 100644 packages/block-library/src/comment-avatar/index.php delete mode 100644 packages/block-library/src/post-comment-avatar/index.php delete mode 100644 packages/block-library/src/post-comment-avatar/save.js diff --git a/lib/blocks.php b/lib/blocks.php index 50a2c07e040a4d..dc3325eff0a41d 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -71,7 +71,7 @@ function gutenberg_reregister_core_block_types() { 'post-author.php' => 'core/post-author', 'post-comment.php' => 'core/post-comment', 'post-comment-author.php' => 'core/post-comment-author', - 'post-comment-avatar.php' => 'core/post-comment-avatar', + 'comment-avatar.php' => 'core/comment-avatar', 'post-comment-content.php' => 'core/post-comment-content', 'post-comment-date.php' => 'core/post-comment-date', 'post-comments.php' => 'core/post-comments', diff --git a/packages/block-library/src/post-comment-avatar/block.json b/packages/block-library/src/comment-avatar/block.json similarity index 67% rename from packages/block-library/src/post-comment-avatar/block.json rename to packages/block-library/src/comment-avatar/block.json index ee717bfee382b7..feb392c6230747 100644 --- a/packages/block-library/src/post-comment-avatar/block.json +++ b/packages/block-library/src/comment-avatar/block.json @@ -1,10 +1,10 @@ { "apiVersion": 2, - "name": "core/post-comment-avatar", - "title": "Post Comment Avatar", + "name": "core/comment-avatar", + "title": "Comment Avatar", "category": "design", "parent": [ "core/post-comment" ], - "description": "Post comment avatar.", + "description": "Comment Avatar.", "textdomain": "default", "attributes": { "width": { @@ -14,14 +14,6 @@ "height": { "type": "number", "default": 96 - }, - "url": { - "type": "string" - }, - "alt": { - "type": "string", - "source": "attribute", - "default": "" } }, "usesContext": [ "commentId" ], diff --git a/packages/block-library/src/post-comment-avatar/edit.js b/packages/block-library/src/comment-avatar/edit.js similarity index 61% rename from packages/block-library/src/post-comment-avatar/edit.js rename to packages/block-library/src/comment-avatar/edit.js index 7b9e646853ce3d..9eb2ce713af984 100644 --- a/packages/block-library/src/post-comment-avatar/edit.js +++ b/packages/block-library/src/comment-avatar/edit.js @@ -13,40 +13,31 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { PanelBody, ResizableBox } from '@wordpress/components'; -import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; +import { useEntityProp } from '@wordpress/core-data'; import { __, isRTL } from '@wordpress/i18n'; -import { useEffect, useState } from '@wordpress/element'; export default ( { attributes, context: { commentId }, setAttributes } ) => { - const { className, style, height, width, alt, url } = attributes; + const { className, style, height, width } = attributes; - const { comment } = useSelect( - ( select ) => { - const { getEntityRecord } = select( coreStore ); - return { - comment: getEntityRecord( 'root', 'comment', commentId ), - }; - }, - [ commentId ] + const [ avatars ] = useEntityProp( + 'root', + 'comment', + 'author_avatar_urls', + commentId + ); + + const [ authorName ] = useEntityProp( + 'root', + 'comment', + 'author_name', + commentId ); - const borderProps = useBorderProps( attributes ); - const authorAvatarUrls = comment?.author_avatar_urls; // eslint-disable-line camelcase - const avatarUrls = authorAvatarUrls - ? Object.values( authorAvatarUrls ) - : null; - const [ { defaultWidth, defaultHeight }, setDefaultSize ] = useState( {} ); - // Set default widht, height and url on first render. - useEffect( () => { - setDefaultSize( { defaultWidth: width, defaultHeight: height } ); - }, [] ); + const avatarUrls = avatars ? Object.values( avatars ) : null; + const sizes = avatars ? Object.keys( avatars ) : null; + const maxSize = sizes ? sizes[ sizes.length - 1 ] : null; + const borderProps = useBorderProps( attributes ); - useEffect( () => { - setAttributes( { - url: avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : '', // we get the biggest resolution one - } ); - }, [ avatarUrls ] ); return ( <> @@ -55,8 +46,8 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => { onChange={ ( value ) => setAttributes( value ) } width={ width } height={ height } - imageWidth={ defaultWidth } - imageHeight={ defaultHeight } + imageWidth={ maxSize } + imageHeight={ maxSize } showPresets={ false } /> @@ -96,8 +87,8 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => { style={ { ...borderProps.style, } } - src={ url } - alt={ alt } + src={ avatarUrls[ avatarUrls.length - 1 ] } + alt={ `${ authorName } ${ __( 'Avatar' ) }` } /> ) : null } diff --git a/packages/block-library/src/post-comment-avatar/index.js b/packages/block-library/src/comment-avatar/index.js similarity index 89% rename from packages/block-library/src/post-comment-avatar/index.js rename to packages/block-library/src/comment-avatar/index.js index f3bc9040831c8c..c3e927cd9a2859 100644 --- a/packages/block-library/src/post-comment-avatar/index.js +++ b/packages/block-library/src/comment-avatar/index.js @@ -3,7 +3,6 @@ */ import metadata from './block.json'; import edit from './edit'; -import save from './save'; /** * WordPress dependencies @@ -16,5 +15,4 @@ export { metadata, name }; export const settings = { icon, edit, - save, }; diff --git a/packages/block-library/src/comment-avatar/index.php b/packages/block-library/src/comment-avatar/index.php new file mode 100644 index 00000000000000..269c5b4df9cfa5 --- /dev/null +++ b/packages/block-library/src/comment-avatar/index.php @@ -0,0 +1,126 @@ + $value ) { + if ( null !== $value ) { + // Convert camelCase key to kebab-case. + $name = strtolower( preg_replace( '/(? $value ) { + if ( null !== $value ) { + // Convert to lowercase. + $lowercase_key = strtolower( $key ); + + // Add shared styles for individual border radii for input & button. + $wrapper_style = sprintf( + 'padding-%1$s: %2$s;', + esc_attr( $lowercase_key ), + esc_attr( $value ) + ); + $wrapper_styles[] = $wrapper_style; + } + } + } + + return array( + 'img' => ! empty( $border_styles ) ? sprintf( ' style="%s"', implode( ' ', $border_styles ) ) : '', + 'wrapper' => ! empty( $wrapper_styles ) ? sprintf( 'class="wp-block-comment-avatar" style="%s"', implode( ' ', $wrapper_styles ) ) : '', + ); +} + +/** + * Renders the `core/post-comment-author` block on the server. + * + * @param array $attributes Block attributes. + * @param string $content Block default content. + * @param WP_Block $block Block instance. + * @return string Return the post comment's content. + */ +function render_block_core_comment_avatar( $attributes, $content, $block ) { + if ( ! isset( $block->context['commentId'] ) ) { + return ''; + } + $comment = get_comment( $block->context['commentId'] ); + // We use this function in order to have the border-radius applied to the image and the padding to the wrapper. + // Would be better to parse get_block_wrapper_attributes() and move the border-radius to the img? + $inline_styles = styles_for_comment_avatar( $attributes ); + + $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; + $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; + $alt = $comment->comment_author . __( ' Avatar' ); + + return sprintf( + '
%2$s
', + $inline_styles['wrapper'], + get_avatar( + $comment, + null, + '', + $alt, + array( + 'height' => $height, + 'width' => $width, + 'class' => $attributes['className'], + 'extra_attr' => $inline_styles['img'], + ) + ) + ); + +} + +/** + * Registers the `core/comment-avatar` block on the server. + */ +function register_block_core_comment_avatar() { + register_block_type_from_metadata( + __DIR__ . '/comment-avatar', + array( + 'render_callback' => 'render_block_core_comment_avatar', + ) + ); +} +add_action( 'init', 'register_block_core_comment_avatar' ); diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index a10c31edee97de..e19496ba37df8c 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -80,7 +80,7 @@ import * as postContent from './post-content'; import * as postAuthor from './post-author'; import * as postComment from './post-comment'; import * as postCommentAuthor from './post-comment-author'; -import * as postCommentAvatar from './post-comment-avatar'; +import * as commentAvatar from './comment-avatar'; import * as postCommentContent from './post-comment-content'; import * as postCommentDate from './post-comment-date'; import * as postComments from './post-comments'; @@ -242,7 +242,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = postAuthor, postComment, postCommentAuthor, - postCommentAvatar, + commentAvatar, postCommentContent, postCommentDate, postComments, diff --git a/packages/block-library/src/post-comment-avatar/index.php b/packages/block-library/src/post-comment-avatar/index.php deleted file mode 100644 index f2479da42ee763..00000000000000 --- a/packages/block-library/src/post-comment-avatar/index.php +++ /dev/null @@ -1,17 +0,0 @@ - - ); -}