Avatar: add padding support (#43519)

* Update DateTimePicker readme * Add padding support for Avatar block * add box-sizing for frontend * Additional comment clarification for box-sizing
WordPress · Sep 6, 2022 · 3b4526a · 3b4526a
1 parent ec29b9c
commit 3b4526a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -32,7 +32,7 @@ Add a user's avatar. ([Source](https://github.com/WordPress/gutenberg/tree/trunk
 
 -	**Name:** core/avatar
 -	**Category:** theme
--	**Supports:** align, color (~~background~~, ~~text~~), spacing (margin), ~~alignWide~~, ~~html~~
+-	**Supports:** align, color (~~background~~, ~~text~~), spacing (margin, padding), ~~alignWide~~, ~~html~~
 -	**Attributes:** isLink, linkTarget, size, userId
 
 ## Reusable block

diff --git a/packages/block-library/src/avatar/block.json b/packages/block-library/src/avatar/block.json
@@ -29,7 +29,8 @@
 		"align": true,
 		"alignWide": false,
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		},
 		"__experimentalBorder": {
 			"__experimentalSkipSerialization": true,

diff --git a/packages/block-library/src/avatar/style.scss b/packages/block-library/src/avatar/style.scss
@@ -1,4 +1,7 @@
 .wp-block-avatar {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&.aligncenter {
 		text-align: center;
 	}