diff --git a/packages/block-library/src/comment-author-avatar/block.json b/packages/block-library/src/comment-author-avatar/block.json
index e1ddf516d453c..d4a1a735a1788 100644
--- a/packages/block-library/src/comment-author-avatar/block.json
+++ b/packages/block-library/src/comment-author-avatar/block.json
@@ -30,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..2010ce2ed7645 100644
--- a/packages/block-library/src/comment-author-avatar/index.php
+++ b/packages/block-library/src/comment-author-avatar/index.php
@@ -25,15 +25,31 @@ 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();
- $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'] : '';
+
+ /**
+ * 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'] : '';
+ $classes = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
/* 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 +61,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 );
}
/**