Add margin and padding supports to Audio block. (#43351)

* Add margin and padding supports to Audio block. * Add border box rule.
WordPress · Aug 18, 2022 · 31e1810 · 31e1810
1 parent ef94685
commit 31e1810
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -23,7 +23,7 @@ Embed a simple audio player. ([Source](https://github.com/WordPress/gutenberg/tr
 
 -	**Name:** core/audio
 -	**Category:** media
--	**Supports:** align, anchor
+-	**Supports:** align, anchor, spacing (margin, padding)
 -	**Attributes:** autoplay, caption, id, loop, preload, src
 
 ## Avatar

diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
@@ -48,6 +48,10 @@
 			"spacing": {
 				"margin": "0 0 1em 0"
 			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
 		}
 	},
 	"editorStyle": "wp-block-audio-editor",

diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss
@@ -1,4 +1,6 @@
 .wp-block-audio {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.