From f939b58154432de849870b52efacd13d24c4181c Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 5 Oct 2021 18:15:24 +0200 Subject: [PATCH 01/24] Add server side render, refactor getting avatar url --- lib/blocks.php | 1 + .../src/comment-avatar/block.json | 32 +++++ .../block-library/src/comment-avatar/edit.js | 98 ++++++++++++++ .../block-library/src/comment-avatar/index.js | 18 +++ .../src/comment-avatar/index.php | 126 ++++++++++++++++++ packages/block-library/src/index.js | 2 + 6 files changed, 277 insertions(+) create mode 100644 packages/block-library/src/comment-avatar/block.json create mode 100644 packages/block-library/src/comment-avatar/edit.js create mode 100644 packages/block-library/src/comment-avatar/index.js create mode 100644 packages/block-library/src/comment-avatar/index.php diff --git a/lib/blocks.php b/lib/blocks.php index 4cdd36d268c926..9a015ae828cf37 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -71,6 +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', + '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/comment-avatar/block.json b/packages/block-library/src/comment-avatar/block.json new file mode 100644 index 00000000000000..feb392c6230747 --- /dev/null +++ b/packages/block-library/src/comment-avatar/block.json @@ -0,0 +1,32 @@ +{ + "apiVersion": 2, + "name": "core/comment-avatar", + "title": "Comment Avatar", + "category": "design", + "parent": [ "core/post-comment" ], + "description": "Comment Avatar.", + "textdomain": "default", + "attributes": { + "width": { + "type": "number", + "default": 96 + }, + "height": { + "type": "number", + "default": 96 + } + }, + "usesContext": [ "commentId" ], + "supports": { + "html": false, + "__experimentalBorder": { + "radius": true + }, + "spacing": { + "padding": true, + "__experimentalDefaultControls": { + "padding": true + } + } + } +} diff --git a/packages/block-library/src/comment-avatar/edit.js b/packages/block-library/src/comment-avatar/edit.js new file mode 100644 index 00000000000000..9eb2ce713af984 --- /dev/null +++ b/packages/block-library/src/comment-avatar/edit.js @@ -0,0 +1,98 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + InspectorControls, + __experimentalUseBorderProps as useBorderProps, + __experimentalImageSizeControl as ImageSizeControl, + useBlockProps, +} from '@wordpress/block-editor'; +import { PanelBody, ResizableBox } from '@wordpress/components'; +import { useEntityProp } from '@wordpress/core-data'; +import { __, isRTL } from '@wordpress/i18n'; + +export default ( { attributes, context: { commentId }, setAttributes } ) => { + const { className, style, height, width } = attributes; + + const [ avatars ] = useEntityProp( + 'root', + 'comment', + 'author_avatar_urls', + commentId + ); + + const [ authorName ] = useEntityProp( + 'root', + 'comment', + 'author_name', + commentId + ); + + 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 ); + + return ( + <> + + + setAttributes( value ) } + width={ width } + height={ height } + imageWidth={ maxSize } + imageHeight={ maxSize } + showPresets={ false } + /> + + +
+ { avatarUrls ? ( + { + setAttributes( { + height: parseInt( height + delta.height, 10 ), + width: parseInt( width + delta.width, 10 ), + } ); + } } + lockAspectRatio + enable={ { + top: false, + right: isRTL() ? false : true, + bottom: true, + left: isRTL() ? true : false, + } } + > + { + + ) : null } +
+ + ); +}; diff --git a/packages/block-library/src/comment-avatar/index.js b/packages/block-library/src/comment-avatar/index.js new file mode 100644 index 00000000000000..c3e927cd9a2859 --- /dev/null +++ b/packages/block-library/src/comment-avatar/index.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +/** + * WordPress dependencies + */ +import { postCommentsAvatar as icon } from '@wordpress/icons'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon, + edit, +}; 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 600fe010b7f13f..e19496ba37df8c 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -80,6 +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 commentAvatar from './comment-avatar'; import * as postCommentContent from './post-comment-content'; import * as postCommentDate from './post-comment-date'; import * as postComments from './post-comments'; @@ -241,6 +242,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = postAuthor, postComment, postCommentAuthor, + commentAvatar, postCommentContent, postCommentDate, postComments, From f8e0217d71c4e735d17a23891ec8bcd466b9f989 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 6 Oct 2021 12:22:08 +0200 Subject: [PATCH 02/24] Rename component and add server side rendering --- packages/components/src/resizable-box/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index fc9bf3ec96c6ef..feca32387d2e49 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -17,6 +17,11 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M } } +// Make the image inside the resize to get the full width +.components-resizable-box__container > img { + width: inherit; +} + // This is the "visible" resize handle - the circle part .components-resizable-box__handle::after { display: block; From 6ef7dfa6e6c409dcf1c81890a612c6ba288fd46d Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 6 Oct 2021 13:09:59 +0200 Subject: [PATCH 03/24] Add icon for comment avatar --- packages/icons/src/index.js | 1 + packages/icons/src/library/comment-avatar.js | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 packages/icons/src/library/comment-avatar.js diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index b2e0a7cb529425..f27db62fd44f49 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -153,6 +153,7 @@ export { default as postAuthor } from './library/post-author'; export { default as postCategories } from './library/post-categories'; export { default as postContent } from './library/post-content'; export { default as postComments } from './library/post-comments'; +export { default as commentAvatar } from './library/comment-avatar'; export { default as postCommentsCount } from './library/post-comments-count'; export { default as postCommentsForm } from './library/post-comments-form'; export { default as postDate } from './library/post-date'; diff --git a/packages/icons/src/library/comment-avatar.js b/packages/icons/src/library/comment-avatar.js new file mode 100644 index 00000000000000..4ddf214b8f0d00 --- /dev/null +++ b/packages/icons/src/library/comment-avatar.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +const postCommentsCount = ( + + + +); + +export default postCommentsCount; From 3c63143f95ac6a98e0a7b880e6e65cddea002190 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 6 Oct 2021 13:29:34 +0200 Subject: [PATCH 04/24] Update icon name --- packages/block-library/src/comment-avatar/index.js | 2 +- packages/icons/src/library/comment-avatar.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/comment-avatar/index.js b/packages/block-library/src/comment-avatar/index.js index c3e927cd9a2859..f6772b32736ae2 100644 --- a/packages/block-library/src/comment-avatar/index.js +++ b/packages/block-library/src/comment-avatar/index.js @@ -7,7 +7,7 @@ import edit from './edit'; /** * WordPress dependencies */ -import { postCommentsAvatar as icon } from '@wordpress/icons'; +import { commentAvatar as icon } from '@wordpress/icons'; const { name } = metadata; export { metadata, name }; diff --git a/packages/icons/src/library/comment-avatar.js b/packages/icons/src/library/comment-avatar.js index 4ddf214b8f0d00..99d65e4fdcbac1 100644 --- a/packages/icons/src/library/comment-avatar.js +++ b/packages/icons/src/library/comment-avatar.js @@ -3,7 +3,7 @@ */ import { Path, SVG } from '@wordpress/primitives'; -const postCommentsCount = ( +const commentAvatar = ( ); -export default postCommentsCount; +export default commentAvatar; From 8d7cb2a5c74498896efa1ad9781e9199feedd025 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 6 Oct 2021 13:48:26 +0200 Subject: [PATCH 05/24] Update comments to target avatar block --- packages/block-library/src/comment-avatar/index.php | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/comment-avatar/index.php b/packages/block-library/src/comment-avatar/index.php index 269c5b4df9cfa5..333904e59c8556 100644 --- a/packages/block-library/src/comment-avatar/index.php +++ b/packages/block-library/src/comment-avatar/index.php @@ -6,11 +6,10 @@ */ /** - * Builds an array of inline styles for the search block. + * Builds an array of inline styles for the avatar 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". + * inner img and a second for the inner wrapper. * * @param array $attributes The block attributes. * @@ -73,7 +72,7 @@ function styles_for_comment_avatar( $attributes ) { } /** - * Renders the `core/post-comment-author` block on the server. + * Renders the `core/comment-avatar` block on the server. * * @param array $attributes Block attributes. * @param string $content Block default content. From 738d44fada9a21f6b1581d404f61f6e10cb685ed Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 7 Oct 2021 16:19:22 +0200 Subject: [PATCH 06/24] Add temporary fixtures, add default max size --- .../block-library/src/comment-avatar/edit.js | 6 ++--- .../src/comment-avatar/index.php | 6 ++--- .../fixtures/blocks/core__comment-avatar.html | 1 + .../fixtures/blocks/core__comment-avatar.json | 26 +++++++++++++++++++ .../blocks/core__comment-avatar.parsed.json | 23 ++++++++++++++++ .../core__comment-avatar.serialized.html | 1 + 6 files changed, 57 insertions(+), 6 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__comment-avatar.html create mode 100644 test/integration/fixtures/blocks/core__comment-avatar.json create mode 100644 test/integration/fixtures/blocks/core__comment-avatar.parsed.json create mode 100644 test/integration/fixtures/blocks/core__comment-avatar.serialized.html diff --git a/packages/block-library/src/comment-avatar/edit.js b/packages/block-library/src/comment-avatar/edit.js index 9eb2ce713af984..d0f34d2a56cad3 100644 --- a/packages/block-library/src/comment-avatar/edit.js +++ b/packages/block-library/src/comment-avatar/edit.js @@ -35,7 +35,7 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => { const avatarUrls = avatars ? Object.values( avatars ) : null; const sizes = avatars ? Object.keys( avatars ) : null; - const maxSize = sizes ? sizes[ sizes.length - 1 ] : null; + const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96; const borderProps = useBorderProps( attributes ); return ( @@ -68,9 +68,9 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => { lockAspectRatio enable={ { top: false, - right: isRTL() ? false : true, + right: ! isRTL(), bottom: true, - left: isRTL() ? true : false, + left: isRTL(), } } > 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 ); + $inline_styles = block_core_comment_avatar_set_styles( $attributes ); $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; - $alt = $comment->comment_author . __( ' Avatar' ); + $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); return sprintf( '
%2$s
', diff --git a/test/integration/fixtures/blocks/core__comment-avatar.html b/test/integration/fixtures/blocks/core__comment-avatar.html new file mode 100644 index 00000000000000..3954c8db988564 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comment-avatar.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__comment-avatar.json b/test/integration/fixtures/blocks/core__comment-avatar.json new file mode 100644 index 00000000000000..de8436c97a3848 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comment-avatar.json @@ -0,0 +1,26 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/comment-avatar", + "isValid": true, + "attributes": { + "width": 96, + "height": 96, + "style": { + "spacing": { + "padding": { + "top": "30px", + "right": "30px", + "bottom": "30px", + "left": "30px" + } + }, + "border": { + "radius": "100px" + } + } + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__comment-avatar.parsed.json b/test/integration/fixtures/blocks/core__comment-avatar.parsed.json new file mode 100644 index 00000000000000..580d0c10ffd60b --- /dev/null +++ b/test/integration/fixtures/blocks/core__comment-avatar.parsed.json @@ -0,0 +1,23 @@ +[ + { + "blockName": "core/comment-avatar", + "attrs": { + "style": { + "spacing": { + "padding": { + "top": "30px", + "right": "30px", + "bottom": "30px", + "left": "30px" + } + }, + "border": { + "radius": "100px" + } + } + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__comment-avatar.serialized.html b/test/integration/fixtures/blocks/core__comment-avatar.serialized.html new file mode 100644 index 00000000000000..3954c8db988564 --- /dev/null +++ b/test/integration/fixtures/blocks/core__comment-avatar.serialized.html @@ -0,0 +1 @@ + From f66d27bfa5ad6b679ccc1474432707e80993e0d3 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 7 Oct 2021 17:37:22 +0200 Subject: [PATCH 07/24] Add translators comment --- packages/block-library/src/comment-avatar/index.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/comment-avatar/index.php b/packages/block-library/src/comment-avatar/index.php index c1786ecb4ae11b..4db2283ca925d9 100644 --- a/packages/block-library/src/comment-avatar/index.php +++ b/packages/block-library/src/comment-avatar/index.php @@ -90,7 +90,8 @@ function render_block_core_comment_avatar( $attributes, $content, $block ) { $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; - $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); + /* translators: %s is the Comment Author name */ + $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); return sprintf( '
%2$s
', From c3818a8024d0b94a31747c7247c1e4244a600c15 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 8 Oct 2021 11:20:31 +0200 Subject: [PATCH 08/24] Update structure with only img tag --- .../block-library/src/comment-avatar/edit.js | 5 +- .../src/comment-avatar/index.php | 100 +++--------------- .../fixtures/blocks/core__comment-avatar.html | 2 +- .../fixtures/blocks/core__comment-avatar.json | 19 ++-- .../blocks/core__comment-avatar.parsed.json | 19 ++-- .../core__comment-avatar.serialized.html | 2 +- 6 files changed, 43 insertions(+), 104 deletions(-) diff --git a/packages/block-library/src/comment-avatar/edit.js b/packages/block-library/src/comment-avatar/edit.js index d0f34d2a56cad3..7144a2c80662c8 100644 --- a/packages/block-library/src/comment-avatar/edit.js +++ b/packages/block-library/src/comment-avatar/edit.js @@ -10,6 +10,7 @@ import { InspectorControls, __experimentalUseBorderProps as useBorderProps, __experimentalImageSizeControl as ImageSizeControl, + __experimentalGetSpacingClassesAndStyles as useSpacingProps, useBlockProps, } from '@wordpress/block-editor'; import { PanelBody, ResizableBox } from '@wordpress/components'; @@ -37,7 +38,7 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => { const sizes = avatars ? Object.keys( avatars ) : null; const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96; const borderProps = useBorderProps( attributes ); - + const spacingProps = useSpacingProps( attributes ); return ( <> @@ -77,6 +78,7 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => { className={ classnames( className, borderProps.className, + spacingProps.className, { // For backwards compatibility add style that isn't // provided via block support. @@ -86,6 +88,7 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => { ) } style={ { ...borderProps.style, + ...spacingProps.style, } } src={ avatarUrls[ avatarUrls.length - 1 ] } alt={ `${ authorName } ${ __( 'Avatar' ) }` } diff --git a/packages/block-library/src/comment-avatar/index.php b/packages/block-library/src/comment-avatar/index.php index 4db2283ca925d9..40e4c3814422f0 100644 --- a/packages/block-library/src/comment-avatar/index.php +++ b/packages/block-library/src/comment-avatar/index.php @@ -5,72 +5,6 @@ * @package WordPress */ -/** - * Builds an array of inline styles for the avatar block. - * - * The result will contain one entry for shared styles such as those for the - * inner img and a second for the inner wrapper. - * - * @param array $attributes The block attributes. - * - * @return array Style HTML attribute. - */ -function block_core_comment_avatar_set_styles( $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( '/(? $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/comment-avatar` block on the server. * @@ -84,32 +18,30 @@ function render_block_core_comment_avatar( $attributes, $content, $block ) { 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 = block_core_comment_avatar_set_styles( $attributes ); + + if ( ! $comment ) { + return ''; + } + + $wrapper_attributes = get_block_wrapper_attributes(); $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; /* translators: %s is the Comment Author name */ $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); - 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'], - ) + return get_avatar( + $comment, + null, + '', + $alt, + array( + 'height' => $height, + 'width' => $width, + 'extra_attr' => $wrapper_attributes, + 'class' => 'wp-block-comment-avatar ' . $attributes['className'], ) ); - } /** diff --git a/test/integration/fixtures/blocks/core__comment-avatar.html b/test/integration/fixtures/blocks/core__comment-avatar.html index 3954c8db988564..658ee55d679925 100644 --- a/test/integration/fixtures/blocks/core__comment-avatar.html +++ b/test/integration/fixtures/blocks/core__comment-avatar.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comment-avatar.json b/test/integration/fixtures/blocks/core__comment-avatar.json index de8436c97a3848..24bc8f41a4addf 100644 --- a/test/integration/fixtures/blocks/core__comment-avatar.json +++ b/test/integration/fixtures/blocks/core__comment-avatar.json @@ -4,19 +4,20 @@ "name": "core/comment-avatar", "isValid": true, "attributes": { - "width": 96, - "height": 96, + "width": 152, + "height": 152, + "className": "additional-class", "style": { + "border": { + "radius": "65px" + }, "spacing": { "padding": { - "top": "30px", - "right": "30px", - "bottom": "30px", - "left": "30px" + "top": "10px", + "right": "10px", + "bottom": "10px", + "left": "10px" } - }, - "border": { - "radius": "100px" } } }, diff --git a/test/integration/fixtures/blocks/core__comment-avatar.parsed.json b/test/integration/fixtures/blocks/core__comment-avatar.parsed.json index 580d0c10ffd60b..0449a4a751e26d 100644 --- a/test/integration/fixtures/blocks/core__comment-avatar.parsed.json +++ b/test/integration/fixtures/blocks/core__comment-avatar.parsed.json @@ -2,19 +2,22 @@ { "blockName": "core/comment-avatar", "attrs": { + "width": 152, + "height": 152, "style": { + "border": { + "radius": "65px" + }, "spacing": { "padding": { - "top": "30px", - "right": "30px", - "bottom": "30px", - "left": "30px" + "top": "10px", + "right": "10px", + "bottom": "10px", + "left": "10px" } - }, - "border": { - "radius": "100px" } - } + }, + "className": "additional-class" }, "innerBlocks": [], "innerHTML": "", diff --git a/test/integration/fixtures/blocks/core__comment-avatar.serialized.html b/test/integration/fixtures/blocks/core__comment-avatar.serialized.html index 3954c8db988564..c3aaf2195b2648 100644 --- a/test/integration/fixtures/blocks/core__comment-avatar.serialized.html +++ b/test/integration/fixtures/blocks/core__comment-avatar.serialized.html @@ -1 +1 @@ - + From 59e28d475acc99b72c3b1d5bcc7fecb91a6d660d Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 11 Oct 2021 16:54:09 +0200 Subject: [PATCH 09/24] Reorder white spaces to be easier to read --- packages/block-library/src/comment-avatar/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/comment-avatar/index.php b/packages/block-library/src/comment-avatar/index.php index 40e4c3814422f0..398a7baa6e7028 100644 --- a/packages/block-library/src/comment-avatar/index.php +++ b/packages/block-library/src/comment-avatar/index.php @@ -17,8 +17,8 @@ function render_block_core_comment_avatar( $attributes, $content, $block ) { if ( ! isset( $block->context['commentId'] ) ) { return ''; } - $comment = get_comment( $block->context['commentId'] ); + $comment = get_comment( $block->context['commentId'] ); if ( ! $comment ) { return ''; } From e553e7d719896fdca646ae25fedb71c5427fa528 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 15 Oct 2021 12:15:38 +0200 Subject: [PATCH 10/24] Return to post comment avatar naming except title and description --- packages/block-library/src/index.js | 4 ++-- .../block.json | 2 +- .../edit.js | 8 ++++++-- .../index.js | 2 +- .../index.php | 16 ++++++++-------- packages/icons/src/index.js | 2 +- ...{comment-avatar.js => post-comment-avatar.js} | 4 ++-- 7 files changed, 21 insertions(+), 17 deletions(-) rename packages/block-library/src/{comment-avatar => post-comment-avatar}/block.json (93%) rename packages/block-library/src/{comment-avatar => post-comment-avatar}/edit.js (96%) rename packages/block-library/src/{comment-avatar => post-comment-avatar}/index.js (78%) rename packages/block-library/src/{comment-avatar => post-comment-avatar}/index.php (68%) rename packages/icons/src/library/{comment-avatar.js => post-comment-avatar.js} (93%) diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index e19496ba37df8c..a10c31edee97de 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 commentAvatar from './comment-avatar'; +import * as postCommentAvatar from './post-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, - commentAvatar, + postCommentAvatar, postCommentContent, postCommentDate, postComments, diff --git a/packages/block-library/src/comment-avatar/block.json b/packages/block-library/src/post-comment-avatar/block.json similarity index 93% rename from packages/block-library/src/comment-avatar/block.json rename to packages/block-library/src/post-comment-avatar/block.json index feb392c6230747..7608324c106f9f 100644 --- a/packages/block-library/src/comment-avatar/block.json +++ b/packages/block-library/src/post-comment-avatar/block.json @@ -1,6 +1,6 @@ { "apiVersion": 2, - "name": "core/comment-avatar", + "name": "core/post-comment-avatar", "title": "Comment Avatar", "category": "design", "parent": [ "core/post-comment" ], diff --git a/packages/block-library/src/comment-avatar/edit.js b/packages/block-library/src/post-comment-avatar/edit.js similarity index 96% rename from packages/block-library/src/comment-avatar/edit.js rename to packages/block-library/src/post-comment-avatar/edit.js index 7144a2c80662c8..362a9202f5838f 100644 --- a/packages/block-library/src/comment-avatar/edit.js +++ b/packages/block-library/src/post-comment-avatar/edit.js @@ -17,7 +17,11 @@ import { PanelBody, ResizableBox } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { __, isRTL } from '@wordpress/i18n'; -export default ( { attributes, context: { commentId }, setAttributes } ) => { +export default function Edit( { + attributes, + context: { commentId }, + setAttributes, +} ) { const { className, style, height, width } = attributes; const [ avatars ] = useEntityProp( @@ -98,4 +102,4 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => { ); -}; +} diff --git a/packages/block-library/src/comment-avatar/index.js b/packages/block-library/src/post-comment-avatar/index.js similarity index 78% rename from packages/block-library/src/comment-avatar/index.js rename to packages/block-library/src/post-comment-avatar/index.js index f6772b32736ae2..e5f67a9e8ba715 100644 --- a/packages/block-library/src/comment-avatar/index.js +++ b/packages/block-library/src/post-comment-avatar/index.js @@ -7,7 +7,7 @@ import edit from './edit'; /** * WordPress dependencies */ -import { commentAvatar as icon } from '@wordpress/icons'; +import { postCommentAvatar as icon } from '@wordpress/icons'; const { name } = metadata; export { metadata, name }; diff --git a/packages/block-library/src/comment-avatar/index.php b/packages/block-library/src/post-comment-avatar/index.php similarity index 68% rename from packages/block-library/src/comment-avatar/index.php rename to packages/block-library/src/post-comment-avatar/index.php index 398a7baa6e7028..2e5455b4da5095 100644 --- a/packages/block-library/src/comment-avatar/index.php +++ b/packages/block-library/src/post-comment-avatar/index.php @@ -1,19 +1,19 @@ context['commentId'] ) ) { return ''; } @@ -47,12 +47,12 @@ function render_block_core_comment_avatar( $attributes, $content, $block ) { /** * Registers the `core/comment-avatar` block on the server. */ -function register_block_core_comment_avatar() { +function register_block_core_post_comment_avatar() { register_block_type_from_metadata( - __DIR__ . '/comment-avatar', + __DIR__ . '/post-comment-avatar', array( - 'render_callback' => 'render_block_core_comment_avatar', + 'render_callback' => 'render_block_core_post_comment_avatar', ) ); } -add_action( 'init', 'register_block_core_comment_avatar' ); +add_action( 'init', 'register_block_core_post_comment_avatar' ); diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index f27db62fd44f49..d6418766d41e17 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -153,7 +153,7 @@ export { default as postAuthor } from './library/post-author'; export { default as postCategories } from './library/post-categories'; export { default as postContent } from './library/post-content'; export { default as postComments } from './library/post-comments'; -export { default as commentAvatar } from './library/comment-avatar'; +export { default as postCommentAvatar } from './library/post-comment-avatar'; export { default as postCommentsCount } from './library/post-comments-count'; export { default as postCommentsForm } from './library/post-comments-form'; export { default as postDate } from './library/post-date'; diff --git a/packages/icons/src/library/comment-avatar.js b/packages/icons/src/library/post-comment-avatar.js similarity index 93% rename from packages/icons/src/library/comment-avatar.js rename to packages/icons/src/library/post-comment-avatar.js index 99d65e4fdcbac1..2f0a8cfc761d0d 100644 --- a/packages/icons/src/library/comment-avatar.js +++ b/packages/icons/src/library/post-comment-avatar.js @@ -3,7 +3,7 @@ */ import { Path, SVG } from '@wordpress/primitives'; -const commentAvatar = ( +const postCommentAvatar = ( ); -export default commentAvatar; +export default postCommentAvatar; From a62f1a9048921659c3fbff2a6229c705abe0282a Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 15 Oct 2021 13:15:26 +0200 Subject: [PATCH 11/24] Update fixtures tests --- .../fixtures/blocks/core__comment-avatar.html | 1 - .../blocks/core__comment-avatar.serialized.html | 1 - .../blocks/core__post-comment-avatar.html | 1 + ...avatar.json => core__post-comment-avatar.json} | 13 ++++++------- ...json => core__post-comment-avatar.parsed.json} | 15 +++++++-------- .../core__post-comment-avatar.serialized.html | 1 + 6 files changed, 15 insertions(+), 17 deletions(-) delete mode 100644 test/integration/fixtures/blocks/core__comment-avatar.html delete mode 100644 test/integration/fixtures/blocks/core__comment-avatar.serialized.html create mode 100644 test/integration/fixtures/blocks/core__post-comment-avatar.html rename test/integration/fixtures/blocks/{core__comment-avatar.json => core__post-comment-avatar.json} (70%) rename test/integration/fixtures/blocks/{core__comment-avatar.parsed.json => core__post-comment-avatar.parsed.json} (65%) create mode 100644 test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html diff --git a/test/integration/fixtures/blocks/core__comment-avatar.html b/test/integration/fixtures/blocks/core__comment-avatar.html deleted file mode 100644 index 658ee55d679925..00000000000000 --- a/test/integration/fixtures/blocks/core__comment-avatar.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/integration/fixtures/blocks/core__comment-avatar.serialized.html b/test/integration/fixtures/blocks/core__comment-avatar.serialized.html deleted file mode 100644 index c3aaf2195b2648..00000000000000 --- a/test/integration/fixtures/blocks/core__comment-avatar.serialized.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.html b/test/integration/fixtures/blocks/core__post-comment-avatar.html new file mode 100644 index 00000000000000..a42b48a26a4d10 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-avatar.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__comment-avatar.json b/test/integration/fixtures/blocks/core__post-comment-avatar.json similarity index 70% rename from test/integration/fixtures/blocks/core__comment-avatar.json rename to test/integration/fixtures/blocks/core__post-comment-avatar.json index 24bc8f41a4addf..35394bfc0f0fd8 100644 --- a/test/integration/fixtures/blocks/core__comment-avatar.json +++ b/test/integration/fixtures/blocks/core__post-comment-avatar.json @@ -1,16 +1,12 @@ [ { "clientId": "_clientId_0", - "name": "core/comment-avatar", + "name": "core/post-comment-avatar", "isValid": true, "attributes": { - "width": 152, - "height": 152, - "className": "additional-class", + "width": 170, + "height": 170, "style": { - "border": { - "radius": "65px" - }, "spacing": { "padding": { "top": "10px", @@ -18,6 +14,9 @@ "bottom": "10px", "left": "10px" } + }, + "border": { + "radius": "100%" } } }, diff --git a/test/integration/fixtures/blocks/core__comment-avatar.parsed.json b/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json similarity index 65% rename from test/integration/fixtures/blocks/core__comment-avatar.parsed.json rename to test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json index 0449a4a751e26d..a7c814f382fd10 100644 --- a/test/integration/fixtures/blocks/core__comment-avatar.parsed.json +++ b/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json @@ -1,13 +1,10 @@ [ { - "blockName": "core/comment-avatar", + "blockName": "core/post-comment-avatar", "attrs": { - "width": 152, - "height": 152, + "width": 170, + "height": 170, "style": { - "border": { - "radius": "65px" - }, "spacing": { "padding": { "top": "10px", @@ -15,9 +12,11 @@ "bottom": "10px", "left": "10px" } + }, + "border": { + "radius": "100%" } - }, - "className": "additional-class" + } }, "innerBlocks": [], "innerHTML": "", diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html b/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html new file mode 100644 index 00000000000000..a42b48a26a4d10 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html @@ -0,0 +1 @@ + From 2ebeb7d8afbf10401213057f64167daa012e23a0 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 15 Oct 2021 17:43:51 +0200 Subject: [PATCH 12/24] Implement size only attribute --- lib/blocks.php | 2 +- .../src/post-comment-avatar/edit.js | 37 +++++++++++++------ .../blocks/core__post-comment-avatar.html | 2 +- .../blocks/core__post-comment-avatar.json | 18 ++++----- .../core__post-comment-avatar.parsed.json | 18 ++++----- .../core__post-comment-avatar.serialized.html | 2 +- 6 files changed, 47 insertions(+), 32 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index 9a015ae828cf37..439e0f9ed841e1 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', - 'comment-avatar.php' => 'core/comment-avatar', + 'post-comment-avatar.php' => 'core/post-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/edit.js b/packages/block-library/src/post-comment-avatar/edit.js index 362a9202f5838f..65a4349ef5aa8e 100644 --- a/packages/block-library/src/post-comment-avatar/edit.js +++ b/packages/block-library/src/post-comment-avatar/edit.js @@ -9,13 +9,18 @@ import classnames from 'classnames'; import { InspectorControls, __experimentalUseBorderProps as useBorderProps, - __experimentalImageSizeControl as ImageSizeControl, __experimentalGetSpacingClassesAndStyles as useSpacingProps, useBlockProps, } from '@wordpress/block-editor'; -import { PanelBody, ResizableBox } from '@wordpress/components'; +import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { __, isRTL } from '@wordpress/i18n'; +import { useRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import useClientWidth from '../image/use-client-width'; export default function Edit( { attributes, @@ -37,27 +42,35 @@ export default function Edit( { 'author_name', commentId ); - + const containerRef = useRef(); + const clientWidth = useClientWidth( containerRef ); const avatarUrls = avatars ? Object.values( avatars ) : null; const sizes = avatars ? Object.keys( avatars ) : null; + const minSize = sizes ? sizes[ 0 ] : 24; const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96; const borderProps = useBorderProps( attributes ); const spacingProps = useSpacingProps( attributes ); + return ( <> - setAttributes( value ) } - width={ width } - height={ height } - imageWidth={ maxSize } - imageHeight={ maxSize } - showPresets={ false } + + setAttributes( { + width: newWidth, + height: newWidth, + } ) + } + min={ minSize } + max={ clientWidth || maxSize } + initialPosition={ width } + value={ width } /> -
+
{ avatarUrls ? ( + diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.json b/test/integration/fixtures/blocks/core__post-comment-avatar.json index 35394bfc0f0fd8..bf2b806c75f216 100644 --- a/test/integration/fixtures/blocks/core__post-comment-avatar.json +++ b/test/integration/fixtures/blocks/core__post-comment-avatar.json @@ -4,19 +4,19 @@ "name": "core/post-comment-avatar", "isValid": true, "attributes": { - "width": 170, - "height": 170, + "width": 153, + "height": 153, "style": { + "border": { + "radius": "61%" + }, "spacing": { "padding": { - "top": "10px", - "right": "10px", - "bottom": "10px", - "left": "10px" + "top": "20px", + "right": "20px", + "bottom": "20px", + "left": "20px" } - }, - "border": { - "radius": "100%" } } }, diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json b/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json index a7c814f382fd10..46d247f9b26daf 100644 --- a/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json +++ b/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json @@ -2,19 +2,19 @@ { "blockName": "core/post-comment-avatar", "attrs": { - "width": 170, - "height": 170, + "width": 153, + "height": 153, "style": { + "border": { + "radius": "61%" + }, "spacing": { "padding": { - "top": "10px", - "right": "10px", - "bottom": "10px", - "left": "10px" + "top": "20px", + "right": "20px", + "bottom": "20px", + "left": "20px" } - }, - "border": { - "radius": "100%" } } }, diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html b/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html index a42b48a26a4d10..6f298b351b69b4 100644 --- a/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html +++ b/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html @@ -1 +1 @@ - + From 3642be811dc6b31ce358727c1e9b379a44a9cca4 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 18 Oct 2021 16:04:52 +0200 Subject: [PATCH 13/24] Rename to Comment Author Avatar --- lib/blocks.php | 94 +++++++++---------- packages/block-library/src/index.js | 4 +- .../block.json | 6 +- .../edit.js | 2 +- .../index.js | 2 +- .../index.php | 12 +-- packages/icons/src/index.js | 2 +- ...vatar.js => post-comment-author-avatar.js} | 4 +- .../core__post-comment-author-avatar.html | 1 + ... => core__post-comment-author-avatar.json} | 2 +- ...e__post-comment-author-avatar.parsed.json} | 2 +- ...post-comment-author-avatar.serialized.html | 1 + .../blocks/core__post-comment-avatar.html | 1 - .../core__post-comment-avatar.serialized.html | 1 - 14 files changed, 67 insertions(+), 67 deletions(-) rename packages/block-library/src/{post-comment-avatar => post-comment-author-avatar}/block.json (79%) rename packages/block-library/src/{post-comment-avatar => post-comment-author-avatar}/edit.js (97%) rename packages/block-library/src/{post-comment-avatar => post-comment-author-avatar}/index.js (77%) rename packages/block-library/src/{post-comment-avatar => post-comment-author-avatar}/index.php (72%) rename packages/icons/src/library/{post-comment-avatar.js => post-comment-author-avatar.js} (92%) create mode 100644 test/integration/fixtures/blocks/core__post-comment-author-avatar.html rename test/integration/fixtures/blocks/{core__post-comment-avatar.json => core__post-comment-author-avatar.json} (88%) rename test/integration/fixtures/blocks/{core__post-comment-avatar.parsed.json => core__post-comment-author-avatar.parsed.json} (86%) create mode 100644 test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html delete mode 100644 test/integration/fixtures/blocks/core__post-comment-avatar.html delete mode 100644 test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html diff --git a/lib/blocks.php b/lib/blocks.php index 439e0f9ed841e1..752675134af85b 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -50,54 +50,54 @@ function gutenberg_reregister_core_block_types() { 'embed', ), 'block_names' => array( - 'archives.php' => 'core/archives', - 'block.php' => 'core/block', - 'calendar.php' => 'core/calendar', - 'categories.php' => 'core/categories', - 'file.php' => 'core/file', - 'latest-comments.php' => 'core/latest-comments', - 'latest-posts.php' => 'core/latest-posts', - 'loginout.php' => 'core/loginout', - 'navigation.php' => 'core/navigation', - 'navigation-link.php' => 'core/navigation-link', - 'navigation-submenu.php' => 'core/navigation-submenu', - 'home-link.php' => 'core/home-link', - 'rss.php' => 'core/rss', - 'search.php' => 'core/search', - 'shortcode.php' => 'core/shortcode', - 'social-link.php' => 'core/social-link', - 'tag-cloud.php' => 'core/tag-cloud', - 'page-list.php' => 'core/page-list', - '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', - 'post-comment-content.php' => 'core/post-comment-content', - 'post-comment-date.php' => 'core/post-comment-date', - 'post-comments.php' => 'core/post-comments', - 'post-comments-count.php' => 'core/post-comments-count', - 'post-comments-form.php' => 'core/post-comments-form', - 'post-comments-link.php' => 'core/post-comments-link', - 'post-content.php' => 'core/post-content', - 'post-date.php' => 'core/post-date', - 'post-excerpt.php' => 'core/post-excerpt', - 'post-featured-image.php' => 'core/post-featured-image', - 'post-terms.php' => 'core/post-terms', - 'post-navigation-link.php' => 'core/post-navigation-link', - 'post-title.php' => 'core/post-title', - 'query.php' => 'core/query', - 'post-template.php' => 'core/post-template', - 'query-title.php' => 'core/query-title', - 'query-pagination.php' => 'core/query-pagination', - 'query-pagination-next.php' => 'core/query-pagination-next', - 'query-pagination-numbers.php' => 'core/query-pagination-numbers', - 'query-pagination-previous.php' => 'core/query-pagination-previous', - 'site-logo.php' => 'core/site-logo', - 'site-tagline.php' => 'core/site-tagline', - 'site-title.php' => 'core/site-title', + 'archives.php' => 'core/archives', + 'block.php' => 'core/block', + 'calendar.php' => 'core/calendar', + 'categories.php' => 'core/categories', + 'file.php' => 'core/file', + 'latest-comments.php' => 'core/latest-comments', + 'latest-posts.php' => 'core/latest-posts', + 'loginout.php' => 'core/loginout', + 'navigation.php' => 'core/navigation', + 'navigation-link.php' => 'core/navigation-link', + 'navigation-submenu.php' => 'core/navigation-submenu', + 'home-link.php' => 'core/home-link', + 'rss.php' => 'core/rss', + 'search.php' => 'core/search', + 'shortcode.php' => 'core/shortcode', + 'social-link.php' => 'core/social-link', + 'tag-cloud.php' => 'core/tag-cloud', + 'page-list.php' => 'core/page-list', + 'post-author.php' => 'core/post-author', + 'post-comment.php' => 'core/post-comment', + 'post-comment-author.php' => 'core/post-comment-author', + 'post-comment-author-avatar.php' => 'core/post-comment-author-avatar', + 'post-comment-content.php' => 'core/post-comment-content', + 'post-comment-date.php' => 'core/post-comment-date', + 'post-comments.php' => 'core/post-comments', + 'post-comments-count.php' => 'core/post-comments-count', + 'post-comments-form.php' => 'core/post-comments-form', + 'post-comments-link.php' => 'core/post-comments-link', + 'post-content.php' => 'core/post-content', + 'post-date.php' => 'core/post-date', + 'post-excerpt.php' => 'core/post-excerpt', + 'post-featured-image.php' => 'core/post-featured-image', + 'post-terms.php' => 'core/post-terms', + 'post-navigation-link.php' => 'core/post-navigation-link', + 'post-title.php' => 'core/post-title', + 'query.php' => 'core/query', + 'post-template.php' => 'core/post-template', + 'query-title.php' => 'core/query-title', + 'query-pagination.php' => 'core/query-pagination', + 'query-pagination-next.php' => 'core/query-pagination-next', + 'query-pagination-numbers.php' => 'core/query-pagination-numbers', + 'query-pagination-previous.php' => 'core/query-pagination-previous', + 'site-logo.php' => 'core/site-logo', + 'site-tagline.php' => 'core/site-tagline', + 'site-title.php' => 'core/site-title', // 'table-of-contents.php' => 'core/table-of-contents', - 'template-part.php' => 'core/template-part', - 'term-description.php' => 'core/term-description', + 'template-part.php' => 'core/template-part', + 'term-description.php' => 'core/term-description', ), ), __DIR__ . '/../build/edit-widgets/blocks/' => array( diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index a10c31edee97de..b491765b98dfcf 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 postCommentAuthorAvatar from './post-comment-author-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, + postCommentAuthorAvatar, postCommentContent, postCommentDate, postComments, diff --git a/packages/block-library/src/post-comment-avatar/block.json b/packages/block-library/src/post-comment-author-avatar/block.json similarity index 79% rename from packages/block-library/src/post-comment-avatar/block.json rename to packages/block-library/src/post-comment-author-avatar/block.json index 7608324c106f9f..6e7bd88c5ff25e 100644 --- a/packages/block-library/src/post-comment-avatar/block.json +++ b/packages/block-library/src/post-comment-author-avatar/block.json @@ -1,10 +1,10 @@ { "apiVersion": 2, - "name": "core/post-comment-avatar", - "title": "Comment Avatar", + "name": "core/post-comment-author-avatar", + "title": "Comment Author Avatar", "category": "design", "parent": [ "core/post-comment" ], - "description": "Comment Avatar.", + "description": "Comment Author Avatar.", "textdomain": "default", "attributes": { "width": { diff --git a/packages/block-library/src/post-comment-avatar/edit.js b/packages/block-library/src/post-comment-author-avatar/edit.js similarity index 97% rename from packages/block-library/src/post-comment-avatar/edit.js rename to packages/block-library/src/post-comment-author-avatar/edit.js index 65a4349ef5aa8e..af04efddc87e67 100644 --- a/packages/block-library/src/post-comment-avatar/edit.js +++ b/packages/block-library/src/post-comment-author-avatar/edit.js @@ -54,7 +54,7 @@ export default function Edit( { return ( <> - + diff --git a/packages/block-library/src/post-comment-avatar/index.js b/packages/block-library/src/post-comment-author-avatar/index.js similarity index 77% rename from packages/block-library/src/post-comment-avatar/index.js rename to packages/block-library/src/post-comment-author-avatar/index.js index e5f67a9e8ba715..19d26999d29a6b 100644 --- a/packages/block-library/src/post-comment-avatar/index.js +++ b/packages/block-library/src/post-comment-author-avatar/index.js @@ -7,7 +7,7 @@ import edit from './edit'; /** * WordPress dependencies */ -import { postCommentAvatar as icon } from '@wordpress/icons'; +import { postCommentAuthorAvatar as icon } from '@wordpress/icons'; const { name } = metadata; export { metadata, name }; diff --git a/packages/block-library/src/post-comment-avatar/index.php b/packages/block-library/src/post-comment-author-avatar/index.php similarity index 72% rename from packages/block-library/src/post-comment-avatar/index.php rename to packages/block-library/src/post-comment-author-avatar/index.php index 2e5455b4da5095..3ce768b9370443 100644 --- a/packages/block-library/src/post-comment-avatar/index.php +++ b/packages/block-library/src/post-comment-author-avatar/index.php @@ -1,19 +1,19 @@ context['commentId'] ) ) { return ''; } @@ -47,12 +47,12 @@ function render_block_core_post_comment_avatar( $attributes, $content, $block ) /** * Registers the `core/comment-avatar` block on the server. */ -function register_block_core_post_comment_avatar() { +function register_block_core_post_comment_author_avatar() { register_block_type_from_metadata( __DIR__ . '/post-comment-avatar', array( - 'render_callback' => 'render_block_core_post_comment_avatar', + 'render_callback' => 'render_block_core_post_comment_author_avatar', ) ); } -add_action( 'init', 'register_block_core_post_comment_avatar' ); +add_action( 'init', 'register_block_core_post_comment_author_avatar' ); diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index d6418766d41e17..27d3cdd12c819a 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -153,7 +153,7 @@ export { default as postAuthor } from './library/post-author'; export { default as postCategories } from './library/post-categories'; export { default as postContent } from './library/post-content'; export { default as postComments } from './library/post-comments'; -export { default as postCommentAvatar } from './library/post-comment-avatar'; +export { default as postCommentAuthorAvatar } from './library/post-comment-author-avatar'; export { default as postCommentsCount } from './library/post-comments-count'; export { default as postCommentsForm } from './library/post-comments-form'; export { default as postDate } from './library/post-date'; diff --git a/packages/icons/src/library/post-comment-avatar.js b/packages/icons/src/library/post-comment-author-avatar.js similarity index 92% rename from packages/icons/src/library/post-comment-avatar.js rename to packages/icons/src/library/post-comment-author-avatar.js index 2f0a8cfc761d0d..87bf6ed8b1bb26 100644 --- a/packages/icons/src/library/post-comment-avatar.js +++ b/packages/icons/src/library/post-comment-author-avatar.js @@ -3,7 +3,7 @@ */ import { Path, SVG } from '@wordpress/primitives'; -const postCommentAvatar = ( +const postCommentAuthorAvatar = ( ); -export default postCommentAvatar; +export default postCommentAuthorAvatar; diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.html b/test/integration/fixtures/blocks/core__post-comment-author-avatar.html new file mode 100644 index 00000000000000..91a8983cc98f87 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.json b/test/integration/fixtures/blocks/core__post-comment-author-avatar.json similarity index 88% rename from test/integration/fixtures/blocks/core__post-comment-avatar.json rename to test/integration/fixtures/blocks/core__post-comment-author-avatar.json index bf2b806c75f216..0eb2f75e3724da 100644 --- a/test/integration/fixtures/blocks/core__post-comment-avatar.json +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.json @@ -1,7 +1,7 @@ [ { "clientId": "_clientId_0", - "name": "core/post-comment-avatar", + "name": "core/post-comment-author-avatar", "isValid": true, "attributes": { "width": 153, diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json b/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json similarity index 86% rename from test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json rename to test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json index 46d247f9b26daf..a0ccce5bdc7acd 100644 --- a/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json @@ -1,6 +1,6 @@ [ { - "blockName": "core/post-comment-avatar", + "blockName": "core/post-comment-author-avatar", "attrs": { "width": 153, "height": 153, diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html b/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html new file mode 100644 index 00000000000000..91a8983cc98f87 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.html b/test/integration/fixtures/blocks/core__post-comment-avatar.html deleted file mode 100644 index 6f298b351b69b4..00000000000000 --- a/test/integration/fixtures/blocks/core__post-comment-avatar.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html b/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html deleted file mode 100644 index 6f298b351b69b4..00000000000000 --- a/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html +++ /dev/null @@ -1 +0,0 @@ - From 94745be3507b609dc5aeeaaf4dbbd30ec06166ac Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 18 Oct 2021 16:47:18 +0200 Subject: [PATCH 14/24] Add border width, style and color --- .../src/post-comment-author-avatar/block.json | 5 ++- .../src/post-comment-author-avatar/edit.js | 35 +++---------------- .../src/post-comment-author-avatar/index.php | 4 +-- 3 files changed, 11 insertions(+), 33 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/block.json b/packages/block-library/src/post-comment-author-avatar/block.json index 6e7bd88c5ff25e..5660f42ac673b3 100644 --- a/packages/block-library/src/post-comment-author-avatar/block.json +++ b/packages/block-library/src/post-comment-author-avatar/block.json @@ -20,7 +20,10 @@ "supports": { "html": false, "__experimentalBorder": { - "radius": true + "radius": true, + "width": true, + "color": true, + "style": true }, "spacing": { "padding": true, diff --git a/packages/block-library/src/post-comment-author-avatar/edit.js b/packages/block-library/src/post-comment-author-avatar/edit.js index af04efddc87e67..a0f7990b3d018a 100644 --- a/packages/block-library/src/post-comment-author-avatar/edit.js +++ b/packages/block-library/src/post-comment-author-avatar/edit.js @@ -1,17 +1,7 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { - InspectorControls, - __experimentalUseBorderProps as useBorderProps, - __experimentalGetSpacingClassesAndStyles as useSpacingProps, - useBlockProps, -} from '@wordpress/block-editor'; +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { __, isRTL } from '@wordpress/i18n'; @@ -27,7 +17,7 @@ export default function Edit( { context: { commentId }, setAttributes, } ) { - const { className, style, height, width } = attributes; + const { height, width } = attributes; const [ avatars ] = useEntityProp( 'root', @@ -48,8 +38,7 @@ export default function Edit( { const sizes = avatars ? Object.keys( avatars ) : null; const minSize = sizes ? sizes[ 0 ] : 24; const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96; - const borderProps = useBorderProps( attributes ); - const spacingProps = useSpacingProps( attributes ); + const blockProps = useBlockProps(); return ( <> @@ -70,7 +59,7 @@ export default function Edit( { /> -
+
{ avatarUrls ? ( { ) : null } diff --git a/packages/block-library/src/post-comment-author-avatar/index.php b/packages/block-library/src/post-comment-author-avatar/index.php index 3ce768b9370443..2c83dce23db31d 100644 --- a/packages/block-library/src/post-comment-author-avatar/index.php +++ b/packages/block-library/src/post-comment-author-avatar/index.php @@ -45,11 +45,11 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b } /** - * Registers the `core/comment-avatar` block on the server. + * Registers the `core/comment-author-avatar` block on the server. */ function register_block_core_post_comment_author_avatar() { register_block_type_from_metadata( - __DIR__ . '/post-comment-avatar', + __DIR__ . '/post-comment-author-avatar', array( 'render_callback' => 'render_block_core_post_comment_author_avatar', ) From 67c63900f0e1b1cc56e57609a339f327d7ec99f9 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 18 Oct 2021 17:07:35 +0200 Subject: [PATCH 15/24] Add background option --- .../src/post-comment-author-avatar/block.json | 5 +++++ .../src/post-comment-author-avatar/index.php | 8 +++++--- .../blocks/core__post-comment-author-avatar.html | 2 +- .../blocks/core__post-comment-author-avatar.json | 13 ++++++++++--- .../core__post-comment-author-avatar.parsed.json | 15 +++++++++++---- ...re__post-comment-author-avatar.serialized.html | 2 +- 6 files changed, 33 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/block.json b/packages/block-library/src/post-comment-author-avatar/block.json index 5660f42ac673b3..841fe125f2330e 100644 --- a/packages/block-library/src/post-comment-author-avatar/block.json +++ b/packages/block-library/src/post-comment-author-avatar/block.json @@ -25,6 +25,11 @@ "color": true, "style": true }, + "color": { + "background": true, + "text": false, + "links": false + }, "spacing": { "padding": true, "__experimentalDefaultControls": { diff --git a/packages/block-library/src/post-comment-author-avatar/index.php b/packages/block-library/src/post-comment-author-avatar/index.php index 2c83dce23db31d..568c652a719502 100644 --- a/packages/block-library/src/post-comment-author-avatar/index.php +++ b/packages/block-library/src/post-comment-author-avatar/index.php @@ -25,11 +25,13 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b $wrapper_attributes = get_block_wrapper_attributes(); - $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; - $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; + $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; + $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; + $className = isset( $attributes['className'] ) ? $attributes['className'] : ''; /* translators: %s is the Comment Author name */ $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); + return get_avatar( $comment, null, @@ -39,7 +41,7 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b 'height' => $height, 'width' => $width, 'extra_attr' => $wrapper_attributes, - 'class' => 'wp-block-comment-avatar ' . $attributes['className'], + 'class' => 'wp-block-comment-avatar ' . $className, ) ); } diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.html b/test/integration/fixtures/blocks/core__post-comment-author-avatar.html index 91a8983cc98f87..3c4288444661b3 100644 --- a/test/integration/fixtures/blocks/core__post-comment-author-avatar.html +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.json b/test/integration/fixtures/blocks/core__post-comment-author-avatar.json index 0eb2f75e3724da..e55864936ad106 100644 --- a/test/integration/fixtures/blocks/core__post-comment-author-avatar.json +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.json @@ -4,11 +4,18 @@ "name": "core/post-comment-author-avatar", "isValid": true, "attributes": { - "width": 153, - "height": 153, + "width": 126, + "height": 126, + "className": "additional-class", "style": { "border": { - "radius": "61%" + "width": "11px", + "style": "solid", + "color": "#8000ff", + "radius": "100%" + }, + "color": { + "background": "#ff0000" }, "spacing": { "padding": { diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json b/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json index a0ccce5bdc7acd..0b6d38d0069f13 100644 --- a/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json @@ -2,11 +2,17 @@ { "blockName": "core/post-comment-author-avatar", "attrs": { - "width": 153, - "height": 153, + "width": 126, + "height": 126, "style": { "border": { - "radius": "61%" + "width": "11px", + "style": "solid", + "color": "#8000ff", + "radius": "100%" + }, + "color": { + "background": "#ff0000" }, "spacing": { "padding": { @@ -16,7 +22,8 @@ "left": "20px" } } - } + }, + "className": "additional-class" }, "innerBlocks": [], "innerHTML": "", diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html b/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html index 91a8983cc98f87..3c669a7f99e6b2 100644 --- a/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html @@ -1 +1 @@ - + From 6e5c2c6853b6b8efb3557aea0e9af5dc10906fe2 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 18 Oct 2021 17:23:55 +0200 Subject: [PATCH 16/24] Use better name for settings, apply format to php --- .../block-library/src/post-comment-author-avatar/edit.js | 2 +- .../src/post-comment-author-avatar/index.php | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/edit.js b/packages/block-library/src/post-comment-author-avatar/edit.js index a0f7990b3d018a..b9a896f9509610 100644 --- a/packages/block-library/src/post-comment-author-avatar/edit.js +++ b/packages/block-library/src/post-comment-author-avatar/edit.js @@ -43,7 +43,7 @@ export default function Edit( { return ( <> - + diff --git a/packages/block-library/src/post-comment-author-avatar/index.php b/packages/block-library/src/post-comment-author-avatar/index.php index 568c652a719502..b49b077eae07d8 100644 --- a/packages/block-library/src/post-comment-author-avatar/index.php +++ b/packages/block-library/src/post-comment-author-avatar/index.php @@ -25,13 +25,12 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b $wrapper_attributes = get_block_wrapper_attributes(); - $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; - $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; - $className = isset( $attributes['className'] ) ? $attributes['className'] : ''; + $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; + $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; + $class_name = isset( $attributes['className'] ) ? $attributes['className'] : ''; /* translators: %s is the Comment Author name */ $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); - return get_avatar( $comment, null, @@ -41,7 +40,7 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b 'height' => $height, 'width' => $width, 'extra_attr' => $wrapper_attributes, - 'class' => 'wp-block-comment-avatar ' . $className, + 'class' => 'wp-block-comment-avatar ' . $class_name, ) ); } From 42e17e1e2ac02383a987cf12b6503d3f240cd725 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 21 Oct 2021 13:06:10 +0200 Subject: [PATCH 17/24] Fix background not working --- .../src/post-comment-author-avatar/index.php | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/index.php b/packages/block-library/src/post-comment-author-avatar/index.php index b49b077eae07d8..2e260985fbd188 100644 --- a/packages/block-library/src/post-comment-author-avatar/index.php +++ b/packages/block-library/src/post-comment-author-avatar/index.php @@ -23,15 +23,17 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b return ''; } - $wrapper_attributes = get_block_wrapper_attributes(); + // This is the only way to retreive style and classes on different instances + $wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports(); + $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; + $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; + $styles = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : ''; + $classes = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : ''; - $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; - $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; - $class_name = isset( $attributes['className'] ) ? $attributes['className'] : ''; /* translators: %s is the Comment Author name */ $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); - return get_avatar( + $avatar_string = get_avatar( $comment, null, '', @@ -39,10 +41,11 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b array( 'height' => $height, 'width' => $width, - 'extra_attr' => $wrapper_attributes, - 'class' => 'wp-block-comment-avatar ' . $class_name, + 'extra_attr' => sprintf( 'style="%1s"', $styles ), + 'class' => $classes, ) ); + return $avatar_string; } /** From 09e774adde44811c6ed1832819ed1b1695d0f4cd Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 25 Oct 2021 14:01:12 +0200 Subject: [PATCH 18/24] End comments with a dot --- packages/block-library/src/post-comment-author-avatar/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-comment-author-avatar/index.php b/packages/block-library/src/post-comment-author-avatar/index.php index 2e260985fbd188..5db723677870c4 100644 --- a/packages/block-library/src/post-comment-author-avatar/index.php +++ b/packages/block-library/src/post-comment-author-avatar/index.php @@ -23,7 +23,7 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b return ''; } - // This is the only way to retreive style and classes on different instances + // This is the only way to retreive style and classes on different instances. $wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports(); $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; From 88640925d9eb11e51a3f48bdb6797a765385d40f Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 25 Oct 2021 14:35:58 +0200 Subject: [PATCH 19/24] Remove padding, update tests --- .../src/post-comment-author-avatar/block.json | 6 ----- .../core__post-comment-author-avatar.html | 2 +- .../core__post-comment-author-avatar.json | 23 +++++-------------- ...re__post-comment-author-avatar.parsed.json | 23 +++++-------------- ...post-comment-author-avatar.serialized.html | 2 +- 5 files changed, 14 insertions(+), 42 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/block.json b/packages/block-library/src/post-comment-author-avatar/block.json index 841fe125f2330e..0d17f2b23e8475 100644 --- a/packages/block-library/src/post-comment-author-avatar/block.json +++ b/packages/block-library/src/post-comment-author-avatar/block.json @@ -29,12 +29,6 @@ "background": true, "text": false, "links": false - }, - "spacing": { - "padding": true, - "__experimentalDefaultControls": { - "padding": true - } } } } diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.html b/test/integration/fixtures/blocks/core__post-comment-author-avatar.html index 3c4288444661b3..bed05ba0a3ab94 100644 --- a/test/integration/fixtures/blocks/core__post-comment-author-avatar.html +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.json b/test/integration/fixtures/blocks/core__post-comment-author-avatar.json index e55864936ad106..e7cb1956cd568f 100644 --- a/test/integration/fixtures/blocks/core__post-comment-author-avatar.json +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.json @@ -4,26 +4,15 @@ "name": "core/post-comment-author-avatar", "isValid": true, "attributes": { - "width": 126, - "height": 126, - "className": "additional-class", + "width": 120, + "height": 120, + "borderColor": "recommended-color-02", + "backgroundColor": "text-color", "style": { "border": { - "width": "11px", + "width": "3px", "style": "solid", - "color": "#8000ff", - "radius": "100%" - }, - "color": { - "background": "#ff0000" - }, - "spacing": { - "padding": { - "top": "20px", - "right": "20px", - "bottom": "20px", - "left": "20px" - } + "radius": "100px" } } }, diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json b/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json index 0b6d38d0069f13..52899f814b38e1 100644 --- a/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.parsed.json @@ -2,28 +2,17 @@ { "blockName": "core/post-comment-author-avatar", "attrs": { - "width": 126, - "height": 126, + "width": 120, + "height": 120, "style": { "border": { - "width": "11px", + "width": "3px", "style": "solid", - "color": "#8000ff", - "radius": "100%" - }, - "color": { - "background": "#ff0000" - }, - "spacing": { - "padding": { - "top": "20px", - "right": "20px", - "bottom": "20px", - "left": "20px" - } + "radius": "100px" } }, - "className": "additional-class" + "borderColor": "recommended-color-02", + "backgroundColor": "text-color" }, "innerBlocks": [], "innerHTML": "", diff --git a/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html b/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html index 3c669a7f99e6b2..1d6f41053cb166 100644 --- a/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html +++ b/test/integration/fixtures/blocks/core__post-comment-author-avatar.serialized.html @@ -1 +1 @@ - + From 97831c1486e1eedecb149c6506aab2059b32306b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 26 Oct 2021 11:29:46 +0200 Subject: [PATCH 20/24] Use default max width --- .../src/post-comment-author-avatar/edit.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/edit.js b/packages/block-library/src/post-comment-author-avatar/edit.js index b9a896f9509610..1fecc18670107d 100644 --- a/packages/block-library/src/post-comment-author-avatar/edit.js +++ b/packages/block-library/src/post-comment-author-avatar/edit.js @@ -7,11 +7,6 @@ import { useEntityProp } from '@wordpress/core-data'; import { __, isRTL } from '@wordpress/i18n'; import { useRef } from '@wordpress/element'; -/** - * Internal dependencies - */ -import useClientWidth from '../image/use-client-width'; - export default function Edit( { attributes, context: { commentId }, @@ -33,12 +28,12 @@ export default function Edit( { commentId ); const containerRef = useRef(); - const clientWidth = useClientWidth( containerRef ); const avatarUrls = avatars ? Object.values( avatars ) : null; const sizes = avatars ? Object.keys( avatars ) : null; const minSize = sizes ? sizes[ 0 ] : 24; const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96; const blockProps = useBlockProps(); + const maxSizeBuffer = maxSize * 2.5; return ( <> @@ -53,7 +48,7 @@ export default function Edit( { } ) } min={ minSize } - max={ clientWidth || maxSize } + max={ maxSizeBuffer } initialPosition={ width } value={ width } /> @@ -80,7 +75,7 @@ export default function Edit( { left: isRTL(), } } minWidth={ minSize } - maxWidth={ clientWidth || maxSize } + maxWidth={ maxSizeBuffer } > Date: Tue, 26 Oct 2021 11:35:12 +0200 Subject: [PATCH 21/24] Add default option if avatar could not be loaded --- .../src/post-comment-author-avatar/edit.js | 104 +++++++++--------- 1 file changed, 55 insertions(+), 49 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/edit.js b/packages/block-library/src/post-comment-author-avatar/edit.js index 1fecc18670107d..9bd3ea690c3c5b 100644 --- a/packages/block-library/src/post-comment-author-avatar/edit.js +++ b/packages/block-library/src/post-comment-author-avatar/edit.js @@ -4,7 +4,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; -import { __, isRTL } from '@wordpress/i18n'; +import { __, _x, isRTL } from '@wordpress/i18n'; import { useRef } from '@wordpress/element'; export default function Edit( { @@ -35,56 +35,62 @@ export default function Edit( { const blockProps = useBlockProps(); const maxSizeBuffer = maxSize * 2.5; + const inspectorControls = ( + + + + setAttributes( { + width: newWidth, + height: newWidth, + } ) + } + min={ minSize } + max={ maxSizeBuffer } + initialPosition={ width } + value={ width } + /> + + + ); + + const displayAvatar = avatarUrls ? ( + { + setAttributes( { + height: parseInt( height + delta.height, 10 ), + width: parseInt( width + delta.width, 10 ), + } ); + } } + lockAspectRatio + enable={ { + top: false, + right: ! isRTL(), + bottom: true, + left: isRTL(), + } } + minWidth={ minSize } + maxWidth={ maxSizeBuffer } + > + { + + ) : ( +

{ _x( 'Post Comment Author Avatar', 'block title' ) }

+ ); + return ( <> - - - - setAttributes( { - width: newWidth, - height: newWidth, - } ) - } - min={ minSize } - max={ maxSizeBuffer } - initialPosition={ width } - value={ width } - /> - - -
- { avatarUrls ? ( - { - setAttributes( { - height: parseInt( height + delta.height, 10 ), - width: parseInt( width + delta.width, 10 ), - } ); - } } - lockAspectRatio - enable={ { - top: false, - right: ! isRTL(), - bottom: true, - left: isRTL(), - } } - minWidth={ minSize } - maxWidth={ maxSizeBuffer } - > - { - - ) : null } -
+ { inspectorControls } +
{ displayAvatar }
); } From cda00593d340e2f1e132bd49f63b353381e4d28b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 26 Oct 2021 12:28:55 +0200 Subject: [PATCH 22/24] Force max size to be integer, apply on php numbers instead of strings --- packages/block-library/src/post-comment-author-avatar/edit.js | 2 +- .../block-library/src/post-comment-author-avatar/index.php | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/edit.js b/packages/block-library/src/post-comment-author-avatar/edit.js index 9bd3ea690c3c5b..dccabeb114fc92 100644 --- a/packages/block-library/src/post-comment-author-avatar/edit.js +++ b/packages/block-library/src/post-comment-author-avatar/edit.js @@ -33,7 +33,7 @@ export default function Edit( { const minSize = sizes ? sizes[ 0 ] : 24; const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96; const blockProps = useBlockProps(); - const maxSizeBuffer = maxSize * 2.5; + const maxSizeBuffer = Math.floor( maxSize * 2.5 ); const inspectorControls = ( diff --git a/packages/block-library/src/post-comment-author-avatar/index.php b/packages/block-library/src/post-comment-author-avatar/index.php index 5db723677870c4..cc6df8454466bc 100644 --- a/packages/block-library/src/post-comment-author-avatar/index.php +++ b/packages/block-library/src/post-comment-author-avatar/index.php @@ -25,8 +25,8 @@ function render_block_core_post_comment_author_avatar( $attributes, $content, $b // This is the only way to retreive style and classes on different instances. $wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports(); - $width = isset( $attributes['width'] ) ? $attributes['width'] : '96'; - $height = isset( $attributes['height'] ) ? $attributes['height'] : '96'; + $width = isset( $attributes['width'] ) ? $attributes['width'] : 96; + $height = isset( $attributes['height'] ) ? $attributes['height'] : 96; $styles = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : ''; $classes = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : ''; From 51cf70319fc3b6fe3947c31f0b3f4f1c66c05cd1 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 26 Oct 2021 12:59:35 +0200 Subject: [PATCH 23/24] Set default name as title, remove no needed code --- .../block-library/src/post-comment-author-avatar/edit.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/edit.js b/packages/block-library/src/post-comment-author-avatar/edit.js index dccabeb114fc92..58c1324a292692 100644 --- a/packages/block-library/src/post-comment-author-avatar/edit.js +++ b/packages/block-library/src/post-comment-author-avatar/edit.js @@ -5,7 +5,6 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { __, _x, isRTL } from '@wordpress/i18n'; -import { useRef } from '@wordpress/element'; export default function Edit( { attributes, @@ -27,7 +26,6 @@ export default function Edit( { 'author_name', commentId ); - const containerRef = useRef(); const avatarUrls = avatars ? Object.values( avatars ) : null; const sizes = avatars ? Object.keys( avatars ) : null; const minSize = sizes ? sizes[ 0 ] : 24; @@ -84,13 +82,15 @@ export default function Edit( { /> ) : ( -

{ _x( 'Post Comment Author Avatar', 'block title' ) }

+
+

{ _x( 'Comment Author Avatar', 'block title' ) }

+
); return ( <> { inspectorControls } -
{ displayAvatar }
+
{ displayAvatar }
); } From 5729707cace3ebdc39c3543c18f1d4e8672b23b9 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 26 Oct 2021 15:38:13 +0200 Subject: [PATCH 24/24] Add blockprops to be easy to select --- .../block-library/src/post-comment-author-avatar/edit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/post-comment-author-avatar/edit.js b/packages/block-library/src/post-comment-author-avatar/edit.js index 58c1324a292692..430d7779a97742 100644 --- a/packages/block-library/src/post-comment-author-avatar/edit.js +++ b/packages/block-library/src/post-comment-author-avatar/edit.js @@ -82,9 +82,9 @@ export default function Edit( { /> ) : ( -
-

{ _x( 'Comment Author Avatar', 'block title' ) }

-
+

+ { _x( 'Comment Author Avatar', 'block title' ) } +

); return (