Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers.

Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method.
- uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing
- removes a couple leftovers from [40428]
- fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border

Props sabernhardt, afercia.
See #40152.
Fixes #48378.

Built from https://develop.svn.wordpress.org/trunk@47266


git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -308,7 +308,7 @@
 
 .media-frame-toolbar .media-toolbar {
 	top: auto;
-	bottom: -45px;
+	bottom: -47px;
 	height: auto;
 	overflow: visible;
 	border-top: 1px solid #ddd;
@@ -347,7 +347,7 @@
 	left: 0;
 	bottom: 0;
 	width: 267px;
-	padding: 0 16px 24px;
+	padding: 0 16px;
 	z-index: 75;
 	background: #f3f3f3;
 	border-right: 1px solid #ddd;
@@ -355,6 +355,17 @@
 	-webkit-overflow-scrolling: touch;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-sidebar::after {
+	content: "";
+	display: flex;
+	clear: both;
+	height: 24px;
+}
+
 .hide-toolbar .media-sidebar {
 	bottom: 0;
 }
@@ -747,8 +758,6 @@
 	position: absolute;
 	right: 200px;
 	left: 0;
-	bottom: 0;
-	height: 60px;
 	z-index: 100;
 	bottom: 60px;
 	height: auto;
@@ -1851,7 +1860,7 @@
 }
 
 .media-modal .imgedit-wrap .imgedit-panel-content {
-	padding: 16px;
+	padding: 16px 16px 0 16px;
 	position: absolute;
 	top: 0;
 	left: 282px;
@@ -1860,10 +1869,18 @@
 	overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-submit {
+	margin-bottom: 16px;
+}
+
 .media-modal .imgedit-wrap .imgedit-settings {
 	background: #f3f3f3;
 	border-right: 1px solid #ddd;
-	padding: 20px 16px 16px;
+	padding: 20px 16px 0;
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -1872,6 +1889,14 @@
 	overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-save-target {
+	margin: 8px 0 24px;
+}
+
 .media-modal .imgedit-group {
 	background: none;
 	border: none;
@@ -2002,10 +2027,22 @@
 	right: 0;
 	left: 0;
 	bottom: 0;
-	padding: 0 16px 32px;
+	padding: 0 16px;
 	overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.embed-link-settings::after,
+.embed-media-settings::after {
+	content: "";
+	display: flex;
+	clear: both;
+	height: 24px;
+}
+
 .media-embed .embed-link-settings {
 	/* avoid Firefox to give focus to the embed preview container parent */
 	overflow: visible;
@@ -2050,6 +2087,10 @@
 	padding: 0;
 }
 
+.image-details .embed-media-settings::after {
+	content: none;
+}
+
 .image-details .embed-media-settings,
 .image-details .embed-media-settings div {
 	box-sizing: border-box;
@@ -2670,7 +2711,7 @@
 	}
 
 	.media-frame-toolbar .media-toolbar {
-		bottom: -48px;
+		bottom: -54px;
 	}
 }
 

wp-includes/css/media-views.css

@@ -307,7 +307,7 @@
 
 .media-frame-toolbar .media-toolbar {
 	top: auto;
-	bottom: -45px;
+	bottom: -47px;
 	height: auto;
 	overflow: visible;
 	border-top: 1px solid #ddd;
@@ -346,7 +346,7 @@
 	right: 0;
 	bottom: 0;
 	width: 267px;
-	padding: 0 16px 24px;
+	padding: 0 16px;
 	z-index: 75;
 	background: #f3f3f3;
 	border-left: 1px solid #ddd;
@@ -354,6 +354,17 @@
 	-webkit-overflow-scrolling: touch;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-sidebar::after {
+	content: "";
+	display: flex;
+	clear: both;
+	height: 24px;
+}
+
 .hide-toolbar .media-sidebar {
 	bottom: 0;
 }
@@ -746,8 +757,6 @@
 	position: absolute;
 	left: 200px;
 	right: 0;
-	bottom: 0;
-	height: 60px;
 	z-index: 100;
 	bottom: 60px;
 	height: auto;
@@ -1850,7 +1859,7 @@
 }
 
 .media-modal .imgedit-wrap .imgedit-panel-content {
-	padding: 16px;
+	padding: 16px 16px 0 16px;
 	position: absolute;
 	top: 0;
 	right: 282px;
@@ -1859,10 +1868,18 @@
 	overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-submit {
+	margin-bottom: 16px;
+}
+
 .media-modal .imgedit-wrap .imgedit-settings {
 	background: #f3f3f3;
 	border-left: 1px solid #ddd;
-	padding: 20px 16px 16px;
+	padding: 20px 16px 0;
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -1871,6 +1888,14 @@
 	overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-save-target {
+	margin: 8px 0 24px;
+}
+
 .media-modal .imgedit-group {
 	background: none;
 	border: none;
@@ -2001,10 +2026,22 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 0 16px 32px;
+	padding: 0 16px;
 	overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.embed-link-settings::after,
+.embed-media-settings::after {
+	content: "";
+	display: flex;
+	clear: both;
+	height: 24px;
+}
+
 .media-embed .embed-link-settings {
 	/* avoid Firefox to give focus to the embed preview container parent */
 	overflow: visible;
@@ -2049,6 +2086,10 @@
 	padding: 0;
 }
 
+.image-details .embed-media-settings::after {
+	content: none;
+}
+
 .image-details .embed-media-settings,
 .image-details .embed-media-settings div {
 	box-sizing: border-box;
@@ -2669,7 +2710,7 @@
 	}
 
 	.media-frame-toolbar .media-toolbar {
-		bottom: -48px;
+		bottom: -54px;
 	}
 }
 

wp-includes/js/media-views.js

@@ -8935,6 +8935,9 @@ AttachmentDisplay = Settings.extend(/** @lends wp.media.view.Settings.Attachment
 		}
 
 		$input.closest( '.setting' ).removeClass( 'hidden' );
+		if ( $input.length ) {
+			$input[0].scrollIntoView();
+		}
 	}
 });
 

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.4-alpha-47265';
+$wp_version = '5.4-alpha-47266';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.