diff --git a/packages/block-library/src/comment-author-avatar/block.json b/packages/block-library/src/comment-author-avatar/block.json index 74fb553fe44fa..69d2c72c802a7 100644 --- a/packages/block-library/src/comment-author-avatar/block.json +++ b/packages/block-library/src/comment-author-avatar/block.json @@ -1,4 +1,5 @@ { + "$schema": "https://json.schemastore.org/block.json", "apiVersion": 2, "name": "core/comment-author-avatar", "title": "Comment Author Avatar", @@ -29,6 +30,11 @@ "background": true, "text": false, "links": false + }, + "spacing": { + "__experimentalSkipSerialization": true, + "margin": true, + "padding": true } } } diff --git a/packages/block-library/src/comment-author-avatar/edit.js b/packages/block-library/src/comment-author-avatar/edit.js index 430d7779a9774..e93aec55ec8ec 100644 --- a/packages/block-library/src/comment-author-avatar/edit.js +++ b/packages/block-library/src/comment-author-avatar/edit.js @@ -1,7 +1,11 @@ /** * WordPress dependencies */ -import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { + InspectorControls, + useBlockProps, + __experimentalGetSpacingClassesAndStyles as useSpacingProps, +} from '@wordpress/block-editor'; import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; import { __, _x, isRTL } from '@wordpress/i18n'; @@ -31,6 +35,7 @@ export default function Edit( { const minSize = sizes ? sizes[ 0 ] : 24; const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96; const blockProps = useBlockProps(); + const spacingProps = useSpacingProps( attributes ); const maxSizeBuffer = Math.floor( maxSize * 2.5 ); const inspectorControls = ( @@ -90,7 +95,7 @@ export default function Edit( { return ( <> { inspectorControls } -
{ displayAvatar }
+
{ displayAvatar }
); } diff --git a/packages/block-library/src/comment-author-avatar/index.php b/packages/block-library/src/comment-author-avatar/index.php index 0aa7f9aeb8e12..204ec14475fc6 100644 --- a/packages/block-library/src/comment-author-avatar/index.php +++ b/packages/block-library/src/comment-author-avatar/index.php @@ -25,6 +25,23 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block // This is the only way to retreive style and classes on different instances. $wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports(); + + /** + * We get the spacing attributes and transform the array provided into a string formatted for being applied as a style html tag. + * Good candidate to be moved to a separate function in core. + * + **/ + $spacing_attributes = isset($attributes['style']['spacing']) ? $attributes['style']['spacing'] : null; + if ( isset($spacing_attributes) && ! empty( $spacing_attributes ) ) { + $spacing_array = array(); + foreach ( $spacing_attributes as $spacing_attribute_key => $spacing_attribute_value ) { + foreach ($spacing_attribute_value as $position_key => $position_value) { + $spacing_array[] = $spacing_attribute_key . '-' . $position_key . ': ' . $position_value; + } + } + $spacing_string = implode( ';', $spacing_array ); + } + $width = isset( $attributes['width'] ) ? $attributes['width'] : 96; $height = isset( $attributes['height'] ) ? $attributes['height'] : 96; $styles = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : ''; @@ -33,7 +50,7 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block /* translators: %s is the Comment Author name */ $alt = sprintf( __( '%s Avatar' ), $comment->comment_author ); - $avatar_string = get_avatar( + $avatar_block = get_avatar( $comment, null, '', @@ -45,7 +62,10 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block 'class' => $classes, ) ); - return $avatar_string; + if (isset($spacing_attributes)) { + return sprintf('
%2s
', $spacing_string, $avatar_block); + } + return sprintf('
%1s
', $avatar_block); } /**