Add spacing attributes to comment author avatar

WordPress · Nov 8, 2021 · 81a4369 · 81a4369
1 parent e5c5b82
commit 81a4369
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git 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
@@ -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 }
-			<div>{ displayAvatar }</div>
+			<div { ...spacingProps }>{ displayAvatar }</div>
 		</>
 	);
 }
diff --git 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('<div style="%1s">%2s</div>', $spacing_string, $avatar_block);
+	}
+	return sprintf('<div>%1s</div>', $avatar_block);
 }
 
 /**