Changeset 63332

Timestamp:

08/21/2026 02:15:14 PM (8 weeks ago)

Author:

afercia

Message:

Customize: Fix visual and DOM order mismatch of the Widgets panel buttons.

In the Customizer > Widgets panel, the visual order of the 'Reorder' and 'Add a Widget' buttons didn't match the DOM order. For accessibility, the visual order and DOM order must match when they impact tab sequence, interaction, and meaning. Also, improves the alignment of the buttons.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13135

Props khokansardar, joedolson, afercia.
Fixes #65902.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (2 diffs)
• wp-includes/customize/class-wp-widget-area-customize-control.php (modified) (1 diff)

trunk/src/wp-admin/css/customize-controls.css

@@ -2494 +2494 @@
  */
 
+.customize-control-widgets-buttons {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 8px;
+}
+
 /* higher specificity than .wp-core-ui .button */
 #customize-theme-controls .add-new-widget,
 #customize-theme-controls .add-new-menu-item {
         cursor: pointer;
-        float: right;
-        margin: 0 0 0 10px;
+        margin: 0;
         transition: all 0.2s;
         -webkit-user-select: none;
@@ -2531 +2537 @@
 /* Reordering */
 .reorder-toggle {
-        float: right;
         padding: 5px 8px;
         text-decoration: none;

trunk/src/wp-includes/customize/class-wp-widget-area-customize-control.php

@@ -54 +54 @@
                 $id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
                 ?>
-                <button type="button" class="button add-new-widget" aria-expanded="false" aria-controls="available-widgets">
-                        <?php _e( 'Add a Widget' ); ?>
-                </button>
-                <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
-                        <span class="reorder"><?php _e( 'Reorder' ); ?></span>
-                        <span class="reorder-done"><?php _e( 'Done' ); ?></span>
-                </button>
+                <div class="customize-control-widgets-buttons">
+                        <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
+                                <span class="reorder"><?php _e( 'Reorder' ); ?></span>
+                                <span class="reorder-done"><?php _e( 'Done' ); ?></span>
+                        </button>
+                        <button type="button" class="button add-new-widget" aria-expanded="false" aria-controls="available-widgets">
+                                <?php _e( 'Add a Widget' ); ?>
+                        </button>
+                </div>
                 <p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>">
                         <?php