Media: Improve layout of image rotation options panel.

Add visual affordance to expanded/collapsed states and move panel under the control rather than placing it next to the toggle, to prevent overflow with the save menu.

Props nithi22, deepakvijayan, antpb, joedolson.
Fixes #58756.
Built from https://develop.svn.wordpress.org/trunk@56239


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

wp-admin/css/media-rtl.css

@@ -1002,6 +1002,7 @@ border color while dragging a file over the uploader drop area */
 	padding: 0 10px;
 }
 
+.imgedit-menu .button:after,
 .imgedit-menu .button:before {
 	font: normal 16px/1 dashicons;
 	margin-left: 8px;
@@ -1013,6 +1014,16 @@ border color while dragging a file over the uploader drop area */
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.imgedit-menu .imgedit-rotate.button:after {
+	content: '\f140';
+	margin-right: 2px;
+	margin-left: 0;
+}
+
+.imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
+	content: '\f142';
+}
+
 .imgedit-menu .button.disabled {
 	color: #a7aaad;
 	border-color: #dcdcde;
@@ -1122,10 +1133,11 @@ border color while dragging a file over the uploader drop area */
 }
 
 .imgedit-popup-menu {
-	width: fit-content;
+	width: calc( 100% - 20px );
 	position: absolute;
-	right: calc( 100% + 4px );
+	background: #fff;
-	top: -3px;
+	padding: 10px;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 }
 
 .image-editor .imgedit-menu .imgedit-popup-menu button {

wp-admin/css/media.css

@@ -1001,6 +1001,7 @@ border color while dragging a file over the uploader drop area */
 	padding: 0 10px;
 }
 
+.imgedit-menu .button:after,
 .imgedit-menu .button:before {
 	font: normal 16px/1 dashicons;
 	margin-right: 8px;
@@ -1012,6 +1013,16 @@ border color while dragging a file over the uploader drop area */
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.imgedit-menu .imgedit-rotate.button:after {
+	content: '\f140';
+	margin-left: 2px;
+	margin-right: 0;
+}
+
+.imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
+	content: '\f142';
+}
+
 .imgedit-menu .button.disabled {
 	color: #a7aaad;
 	border-color: #dcdcde;
@@ -1121,10 +1132,11 @@ border color while dragging a file over the uploader drop area */
 }
 
 .imgedit-popup-menu {
-	width: fit-content;
+	width: calc( 100% - 20px );
 	position: absolute;
-	left: calc( 100% + 4px );
+	background: #fff;
-	top: -3px;
+	padding: 10px;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 }
 
 .image-editor .imgedit-menu .imgedit-popup-menu button {

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.3-beta4-56238';
+$wp_version = '6.3-beta4-56239';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.