Changeset 62967

Timestamp:

08/02/2026 09:59:17 PM (2 months ago)

Author:

joedolson

Message:

Users: Show/hide password button icon misaligned.

In several contexts (Add New User, Install, and Setup/Config), the show/hide password icon was misaligned in varying amounts in different viewports.

Add the classes wp-hide-pw and user-new-password-toggle to the button container to re-use existing CSS consistently.

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

Props sanayasir, iamchitti, softglaze, shailu25, soyebsalar01, noruzzaman, ugyensupport, wildworks, ankitpatel1578, praful2111, joedolson, sabernhardt.
Fixes #65605.

Location:

trunk/src/wp-admin

Files:

• install.php (modified) (1 diff)
• setup-config.php (modified) (1 diff)
• user-new.php (modified) (1 diff)

trunk/src/wp-admin/install.php

@@ -144 +144 @@
                                                 <div id="pass-strength-result" aria-live="polite"></div>
                                         </div>
-                                        <button type="button" class="button wp-hide-pw hide-if-no-js" data-start-masked="<?php echo (int) isset( $_POST['admin_password'] ); ?>" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
+                                        <button type="button" class="button wp-hide-pw user-new-password-toggle hide-if-no-js" data-start-masked="<?php echo (int) isset( $_POST['admin_password'] ); ?>" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
                                                 <span class="dashicons dashicons-hidden"></span>
                                                 <span class="text"><?php _e( 'Hide' ); ?></span>

trunk/src/wp-admin/setup-config.php

@@ -241 +241 @@
                                 <div class="wp-pwd">
                                         <input name="pwd" id="pwd" type="password" class="regular-text" data-reveal="1" aria-describedby="pwd-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" spellcheck="false" />
-                                        <button type="button" class="button pwd-toggle hide-if-no-js" data-toggle="0" data-start-masked="1" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
+                                        <button type="button" class="button wp-hide-pw user-new-password-toggle pwd-toggle hide-if-no-js" data-toggle="0" data-start-masked="1" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
                                                 <span class="dashicons dashicons-visibility"></span>
                                                 <span class="text"><?php _e( 'Show' ); ?></span>

trunk/src/wp-admin/user-new.php

@@ -604 +604 @@
                                         <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
                                 </div>
-                                <button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
+                                <button type="button" class="button wp-hide-pw user-new-password-toggle hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
                                         <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
                                         <span class="text"><?php _e( 'Hide' ); ?></span>