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);
}
/**