Toolbar: Provide a CSS custom property for the admin bar height.

This new custom property, `--wp-admin--admin-bar--height`, reflects the admin bar's height and adjusts responsively on smaller screens. It can be used to offset content to avoid overlapping the admin bar, without needing to copy the media query.

This also removes a workaround only needed for Internet Explorer 6 and below.

Props nico23, sabernhardt.
Fixes #52623.


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


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

wp-includes/admin-bar.php

@@ -1167,10 +1167,8 @@ function _admin_bar_bump_cb() {
 	?>
 <style<?php echo $type_attr; ?> media="screen">
 	html { margin-top: 32px !important; }
-	* html body { margin-top: 32px !important; }
 	@media screen and ( max-width: 782px ) {
 		html { margin-top: 46px !important; }
-		* html body { margin-top: 46px !important; }
 	}
 </style>
 	<?php

wp-includes/css/admin-bar-rtl.css

@@ -1,4 +1,8 @@
 /*! This file is auto-generated */
+html {
+	--wp-admin--admin-bar--height: 32px;
+}
+
 #wpadminbar * {
 	height: auto;
 	width: auto;
@@ -730,6 +734,10 @@ html:lang(he-il) .rtl #wpadminbar * {
 }
 
 @media screen and (max-width: 782px) {
+	html {
+		--wp-admin--admin-bar--height: 46px;
+	}
+
 	/* Toolbar Touchification*/
 	html #wpadminbar {
 		height: 46px;

wp-includes/css/admin-bar.css

@@ -1,3 +1,7 @@
+html {
+	--wp-admin--admin-bar--height: 32px;
+}
+
 #wpadminbar * {
 	height: auto;
 	width: auto;
@@ -729,6 +733,10 @@ html:lang(he-il) .rtl #wpadminbar * {
 }
 
 @media screen and (max-width: 782px) {
+	html {
+		--wp-admin--admin-bar--height: 46px;
+	}
+
 	/* Toolbar Touchification*/
 	html #wpadminbar {
 		height: 46px;

wp-includes/version.php

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