Menus: Remove floats from custom links section in the Nav Menus screen.

With the new admin design, there were some issues with floating elements in the custom links section of the classic Menu screen. This changeset simplifies the CSS implementation by removing floats and `wp-clearfix` classes from some elements in favor of a more robust implementation based on flex positionning.

Props audrasjb, huzaifaalmesbah, shailu25, nikunj8866, joedolson, khushi1501, ozgursar.
Fixes #64692.
See #64308.



git-svn-id: https://develop.svn.wordpress.org/trunk@62097 602fd350-edb4-49c9-b593-d223f7449a82

Author: audrasjb

src/wp-admin/css/nav-menus.css

@@ -375,17 +375,11 @@ input.bulk-select-switcher:focus + .bulk-select-button-label {
 }
 
 /* Add Menu Item Boxes */
-.postbox .howto input,
-.customlinkdiv .menu-item-textbox,
-.customlinkdiv .error-message {
+.postbox .howto input {
 	width: 180px;
 	float: right;
 }
 
-.customlinkdiv .error-message {
-	clear: right;
-}
-
 .accordion-container .outer-border {
 	margin: 0;
 }
@@ -477,7 +471,10 @@ input.bulk-select-switcher:focus + .bulk-select-button-label {
 	width: 180px;
 }
 
-.customlinkdiv label,
+.customlinkdiv .menu-item-textbox {
+	width: 100%;
+}
+
 .nav-menus-php .howto span {
 	float: left;
 	margin-top: 6px;
@@ -876,6 +873,10 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 	justify-content: space-between;
 }
 
+.button-controls-customlinkdiv {
+	justify-content: flex-end;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */
 

src/wp-admin/includes/nav-menu.php

@@ -363,7 +363,7 @@ function wp_nav_menu_item_link_meta_box() {
 	<div class="customlinkdiv" id="customlinkdiv">
 		<input type="hidden" value="custom" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" />
 		<p id="menu-item-url-wrap" class="wp-clearfix">
-			<label class="howto" for="custom-menu-item-url"><?php _e( 'URL' ); ?></label>
+			<label for="custom-menu-item-url"><?php _e( 'URL' ); ?></label>
 			<input id="custom-menu-item-url" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-url]"
 				type="text"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?>
 				class="code menu-item-textbox form-required" placeholder="https://"
@@ -372,14 +372,14 @@ class="code menu-item-textbox form-required" placeholder="https://"
 		</p>
 
 		<p id="menu-item-name-wrap" class="wp-clearfix">
-			<label class="howto" for="custom-menu-item-name"><?php _e( 'Link Text' ); ?></label>
+			<label for="custom-menu-item-name"><?php _e( 'Link Text' ); ?></label>
 			<input id="custom-menu-item-name" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-title]"
 				type="text"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?>
 				class="regular-text menu-item-textbox"
 			/>
 		</p>
 
-		<p class="button-controls wp-clearfix">
+		<p class="button-controls button-controls-customlinkdiv">
 			<span class="add-to-menu">
 				<input id="submit-customlinkdiv" name="add-custom-menu-item"
 					type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?>
@@ -820,7 +820,7 @@ class="categorychecklist form-no-clear"
 			<?php endif; ?>
 		</div><!-- /.tabs-panel -->
 
-		<p class="button-controls wp-clearfix" data-items-type="<?php echo esc_attr( "posttype-{$post_type_name}" ); ?>">
+		<p class="button-controls" data-items-type="<?php echo esc_attr( "posttype-{$post_type_name}" ); ?>">
 			<span class="list-controls hide-if-no-js">
 				<input type="checkbox"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?>
 					id="<?php echo esc_attr( $tab_name ); ?>" class="select-all"
@@ -1115,7 +1115,7 @@ class="categorychecklist form-no-clear"
 			</ul>
 		</div><!-- /.tabs-panel -->
 
-		<p class="button-controls wp-clearfix" data-items-type="<?php echo esc_attr( "taxonomy-{$taxonomy_name}" ); ?>">
+		<p class="button-controls" data-items-type="<?php echo esc_attr( "taxonomy-{$taxonomy_name}" ); ?>">
 			<span class="list-controls hide-if-no-js">
 				<input type="checkbox"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?>
 					id="<?php echo esc_attr( $tab_name ); ?>" class="select-all"