Skip to content

Commit

Permalink
Add server side render, refactor getting avatar url
Browse files Browse the repository at this point in the history
  • Loading branch information
Carlos Bravo committed Oct 5, 2021
1 parent 7c2395f commit 3b17852
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 83 deletions.
2 changes: 1 addition & 1 deletion lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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": {
Expand All @@ -14,14 +14,6 @@
"height": {
"type": "number",
"default": 96
},
"url": {
"type": "string"
},
"alt": {
"type": "string",
"source": "attribute",
"default": ""
}
},
"usesContext": [ "commentId" ],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<InspectorControls>
Expand All @@ -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 }
/>
</PanelBody>
Expand Down Expand Up @@ -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' ) }` }
/>
</ResizableBox>
) : null }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import metadata from './block.json';
import edit from './edit';
import save from './save';

/**
* WordPress dependencies
Expand All @@ -16,5 +15,4 @@ export { metadata, name };
export const settings = {
icon,
edit,
save,
};
126 changes: 126 additions & 0 deletions packages/block-library/src/comment-avatar/index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<?php
/**
* Server-side rendering of the `core/comment-avatar` block.
*
* @package WordPress
*/

/**
* Builds an array of inline styles for the search block.
*
* The result will contain one entry for shared styles such as those for the
* inner input or button and a second for the inner wrapper should the block
* be positioning the button "inside".
*
* @param array $attributes The block attributes.
*
* @return array Style HTML attribute.
*/
function styles_for_comment_avatar( $attributes ) {
$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
$has_padding = ! empty( $attributes['style']['spacing']['padding'] );
$border_styles = array();
$wrapper_styles = array();

if ( $has_border_radius ) {
$border_radius = $attributes['style']['border']['radius'];
if ( is_array( $border_radius ) ) {
// Apply styles for individual corner border radii.
foreach ( $border_radius as $key => $value ) {
if ( null !== $value ) {
// Convert camelCase key to kebab-case.
$name = strtolower( preg_replace( '/(?<!^)[A-Z]/', '-$0', $key ) );

// Add shared styles for individual border radii for input & button.
$border_style = sprintf(
'border-%1$s-radius: %2$s;',
esc_attr( $name ),
esc_attr( $value )
);
$border_styles[] = $border_style;
}
}
} else {
// Numeric check is for backwards compatibility purposes.
$border_radius = is_numeric( $border_radius ) ? $border_radius . 'px' : $border_radius;
$border_style = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
$border_styles[] = $border_style;
}
}

if ( $has_padding ) {
$padding = $attributes['style']['spacing']['padding'];
foreach ( $padding as $key => $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(
'<div %1$s>%2$s</div>',
$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' );
4 changes: 2 additions & 2 deletions packages/block-library/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -242,7 +242,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
postAuthor,
postComment,
postCommentAuthor,
postCommentAvatar,
commentAvatar,
postCommentContent,
postCommentDate,
postComments,
Expand Down
17 changes: 0 additions & 17 deletions packages/block-library/src/post-comment-avatar/index.php

This file was deleted.

19 changes: 0 additions & 19 deletions packages/block-library/src/post-comment-avatar/save.js

This file was deleted.

0 comments on commit 3b17852

Please sign in to comment.