Changeset 62097

Timestamp:

03/24/2026 05:56:12 AM (4 days ago)

Author:

audrasjb

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/nav-menus.css (modified) (3 diffs)
• includes/nav-menu.php (modified) (5 diffs)

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

@@ -376 +376 @@
 
 /* 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;
 }
 
@@ -478 +472 @@
 }
 
-.customlinkdiv label,
+.customlinkdiv .menu-item-textbox {
+    width: 100%;
+}
+
 .nav-menus-php .howto span {
     float: left;
@@ -877 +874 @@
 }
 
+.button-controls-customlinkdiv {
+    justify-content: flex-end;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */

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

@@ -364 +364 @@
         <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 ); ?>
@@ -373 +373 @@
 
         <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 ); ?>
@@ -380 +380 @@
         </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"
@@ -821 +821 @@
         </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 ); ?>
@@ -1116 +1116 @@
         </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 ); ?>