Add min-width to audio block. (#11749)

* Add min-width to audio block.

Fixes #11740.

The audio block has no intrinsic width, and collapses if we don't set an explicit min-width on it. This PR does that.

* Update changelog

* Move to style.scss instead.

* Refactor, address feedback.

packages/block-library/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.2.3 (Unreleased)
+
+### Bug Fixes
+
+- Add a minimum width for the audio block to fixed floated audio blocks.
+
+## 2.2.2 (2018-11-12)
+
+### Polish
+
+- Columns Block: Improve usability while editing columns.
+
 ## 2.2.1 (2018-11-09)
 
 ## 2.2.0 (2018-11-09)

packages/block-library/src/audio/editor.scss

@@ -1,7 +1,3 @@
 .wp-block-audio {
 	margin: 0;
 }
-
-.wp-block-audio audio {
-	width: 100%;
-}

packages/block-library/src/audio/style.scss

@@ -1,6 +1,17 @@
-.wp-block-audio figcaption {
-	margin-top: 0.5em;
-	color: $dark-gray-300;
-	text-align: center;
-	font-size: $default-font-size;
+.wp-block-audio {
+	// 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.
+	figcaption {
+		@include caption-style();
+	}
+
+	// Show full-width when not aligned.
+	audio {
+		width: 100%;
+
+		// The browser natively applies a 300px width to the audio block.
+		// We restore this as a min-width instead, for alignments.
+		min-width: 300px;
+	}
 }