From 1cff4360f698355eaf15f7e3fd26f9035e6498cd Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 4 Dec 2022 09:28:43 -0600 Subject: [PATCH 01/36] Add password visibility switch to setup-config --- Gruntfile.js | 1 + src/js/_enqueues/admin/setup-config.js | 38 +++++++++++++++++++++ src/wp-admin/css/forms.css | 46 ++++++++++++++++++++++++++ src/wp-admin/setup-config.php | 10 +++++- src/wp-includes/script-loader.php | 13 ++++++++ 5 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 src/js/_enqueues/admin/setup-config.js diff --git a/Gruntfile.js b/Gruntfile.js index de15cdb4198fe..67e0688ab7de4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -275,6 +275,7 @@ module.exports = function(grunt) { [ WORKING_DIR + 'wp-admin/js/plugin-install.js' ]: [ './src/js/_enqueues/admin/plugin-install.js' ], [ WORKING_DIR + 'wp-admin/js/post.js' ]: [ './src/js/_enqueues/admin/post.js' ], [ WORKING_DIR + 'wp-admin/js/postbox.js' ]: [ './src/js/_enqueues/admin/postbox.js' ], + [ WORKING_DIR + 'wp-admin/js/setup-config.js' ]: [ './src/js/_enqueues/admin/setup-config.js' ], [ WORKING_DIR + 'wp-admin/js/revisions.js' ]: [ './src/js/_enqueues/wp/revisions.js' ], [ WORKING_DIR + 'wp-admin/js/set-post-thumbnail.js' ]: [ './src/js/_enqueues/admin/set-post-thumbnail.js' ], [ WORKING_DIR + 'wp-admin/js/svg-painter.js' ]: [ './src/js/_enqueues/wp/svg-painter.js' ], diff --git a/src/js/_enqueues/admin/setup-config.js b/src/js/_enqueues/admin/setup-config.js new file mode 100644 index 0000000000000..947c2ef522c1f --- /dev/null +++ b/src/js/_enqueues/admin/setup-config.js @@ -0,0 +1,38 @@ +/** + * Adds show/hide toggle for the setup config database password. + * + * @since 6.2.0 + * @output wp-admin/js/setup-config.js + */ + +/* global setupConfigL10n */ +( function () { + var toggle, status, input, icon, label; + + toggle = document.getElementById( 'pwd-toggle' ); + toggle.classList.remove('hide-if-no-js'); + toggle.addEventListener( 'click', togglePassword ); + + function togglePassword() { + status = toggle.getAttribute( 'data-toggle' ); + input = document.getElementById( 'pwd' ); + icon = toggle.getElementsByClassName( 'dashicons' )[ 0 ]; + label = toggle.getElementsByClassName( 'text' )[ 0 ]; + + if ( 0 === parseInt( status, 10 ) ) { + toggle.setAttribute( 'data-toggle', 1 ); + input.setAttribute( 'type', 'text' ); + icon.classList.remove( 'dashicons-visibility' ); + icon.classList.add( 'dashicons-hidden' ); + label.innerHTML = setupConfigL10n.hide; + toggle.setAttribute( 'aria-label', setupConfigL10n.ariaShow ); + } else { + toggle.setAttribute( 'data-toggle', 0 ); + input.setAttribute( 'type', 'password' ); + icon.classList.remove( 'dashicons-hidden' ); + icon.classList.add( 'dashicons-visibility' ); + label.innerHTML = setupConfigL10n.show; + toggle.setAttribute( 'aria-label', setupConfigL10n.ariaHide ); + } + } +} )(); diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 9066f583981bd..bcf503f705c22 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -551,6 +551,51 @@ fieldset label, .wp-pwd { margin-top: 1em; + position: relative; +} + +.wp-pwd input { + direction: ltr; + padding-right: 2.5rem; +} + +.wp-pwd button#pwd-toggle { + background: transparent; + border: 1px solid transparent; + box-shadow: none; + font-size: 14px; + line-height: 2; + width: 2rem; + min-width: 30px; + margin: 0; + padding: 0; + position: absolute; + right: 4px; + top: -7px; +} + +.wp-pwd button#pwd-toggle:hover { + background: transparent; + border-color: transparent; +} + +.wp-pwd button#pwd-toggle:focus { + background: transparent; + border-color: #3582c4; + border-radius: 4px; + box-shadow: 0 0 0 1px #3582c4; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +.wp-pwd button#pwd-toggle:active { + background: transparent; + box-shadow: none; + transform: none; +} + +.wp-pwd button#pwd-toggle .dashicons { + line-height: 1.375; } #misc-publishing-actions label { @@ -1657,6 +1702,7 @@ table.form-table td .updated p { } .wp-pwd button.button { + display: initial; background: transparent; border: 1px solid transparent; box-shadow: none; diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index e2cdc763176cb..772242f3a0789 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -223,7 +223,14 @@ function setup_config_display_header( $body_classes = array() ) { - + + + + + + @@ -250,6 +257,7 @@ function setup_config_display_header( $body_classes = array() ) {

add( 'setup-config', "/wp-admin/js/setup-config$suffix.js", array(), false, 1 ); + did_action( 'init' ) && $scripts->localize( + 'setup-config', + 'setupConfigL10n', + array( + 'show' => __( 'Show' ), + 'hide' => __( 'Hide' ), + 'ariaShow' => esc_attr__( 'Show password' ), + 'ariaHide' => esc_attr__( 'Hide password' ), + ) + ); + $scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 ); $scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 ); From 610991c50ffe728fdd58894574704132c602becd Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 4 Dec 2022 10:13:29 -0600 Subject: [PATCH 02/36] Fix position differences between browsers --- src/wp-admin/css/forms.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index bcf503f705c22..d46fe2a444416 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -550,7 +550,7 @@ fieldset label, } .wp-pwd { - margin-top: 1em; + display: flex; position: relative; } @@ -570,8 +570,8 @@ fieldset label, margin: 0; padding: 0; position: absolute; - right: 4px; - top: -7px; + right: 0; + top: 0; } .wp-pwd button#pwd-toggle:hover { From 532d957d8c415dd49fbccca4e1c05234fa2e604f Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 4 Dec 2022 11:05:20 -0600 Subject: [PATCH 03/36] Remove aria show/hide label --- src/js/_enqueues/admin/setup-config.js | 5 ----- src/wp-includes/script-loader.php | 10 ---------- 2 files changed, 15 deletions(-) diff --git a/src/js/_enqueues/admin/setup-config.js b/src/js/_enqueues/admin/setup-config.js index 947c2ef522c1f..e4210a2b8edcc 100644 --- a/src/js/_enqueues/admin/setup-config.js +++ b/src/js/_enqueues/admin/setup-config.js @@ -5,7 +5,6 @@ * @output wp-admin/js/setup-config.js */ -/* global setupConfigL10n */ ( function () { var toggle, status, input, icon, label; @@ -24,15 +23,11 @@ input.setAttribute( 'type', 'text' ); icon.classList.remove( 'dashicons-visibility' ); icon.classList.add( 'dashicons-hidden' ); - label.innerHTML = setupConfigL10n.hide; - toggle.setAttribute( 'aria-label', setupConfigL10n.ariaShow ); } else { toggle.setAttribute( 'data-toggle', 0 ); input.setAttribute( 'type', 'password' ); icon.classList.remove( 'dashicons-hidden' ); icon.classList.add( 'dashicons-visibility' ); - label.innerHTML = setupConfigL10n.show; - toggle.setAttribute( 'aria-label', setupConfigL10n.ariaHide ); } } } )(); diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index cbb2065182435..259fca24fc43f 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1180,16 +1180,6 @@ function wp_default_scripts( $scripts ) { ); $scripts->add( 'setup-config', "/wp-admin/js/setup-config$suffix.js", array(), false, 1 ); - did_action( 'init' ) && $scripts->localize( - 'setup-config', - 'setupConfigL10n', - array( - 'show' => __( 'Show' ), - 'hide' => __( 'Hide' ), - 'ariaShow' => esc_attr__( 'Show password' ), - 'ariaHide' => esc_attr__( 'Hide password' ), - ) - ); $scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 ); From 8b9a548f8bdd7fc67629e3265d4f099ac75e5e53 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 4 Dec 2022 11:17:36 -0600 Subject: [PATCH 04/36] Add padding so password visibility button does not overlap for rtl/ltr text --- src/wp-admin/css/install.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 62a596f0fe1fa..2a9371c278589 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -151,6 +151,10 @@ textarea { padding: 3px 5px; } +.form-table .wp-pwd input { + padding-right: 30px; +} + input, submit { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; From a285e1eb945d12d0a0d9cfdbeedf26f0104d87ab Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 4 Dec 2022 13:32:26 -0600 Subject: [PATCH 05/36] Change the button width back to 40px to be consistent --- src/wp-admin/css/forms.css | 2 +- src/wp-admin/css/install.css | 2 +- wp-config-old.php | 96 ++++++++++++++++++++++++++++++++++++ 3 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 wp-config-old.php diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index d46fe2a444416..b276c2137772b 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -566,7 +566,7 @@ fieldset label, font-size: 14px; line-height: 2; width: 2rem; - min-width: 30px; + min-width: 40px; margin: 0; padding: 0; position: absolute; diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 2a9371c278589..d666ba956cbe7 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -152,7 +152,7 @@ textarea { } .form-table .wp-pwd input { - padding-right: 30px; + padding-right: 40px; } input, diff --git a/wp-config-old.php b/wp-config-old.php new file mode 100644 index 0000000000000..1f777bea0a358 --- /dev/null +++ b/wp-config-old.php @@ -0,0 +1,96 @@ +$z70(?J|WG_SOh]L)DFo{vm*UhB;]v%BG+VStebs?[+s4tFs.BPLi`=]s=DRk-W2Gzbq[& B|?>]6p(wYd/6v`1{C`?8[Mo' ); +define( 'SECURE_AUTH_SALT', '*cJd_o}aU50Zj!-;~5rW)5!F<#dJl[b4!ed|*Pnxnif#&Wb7I[' ); +define( 'NONCE_SALT', 'RE9jJ&.#oq+D0z2m(8sx4zWIgVFsP)u4?lf/%*HamK0};:Xte50W>M~zP+aB6+>=' ); + +/**#@-*/ + +/** + * WordPress database table prefix. + * + * You can have multiple installations in one database if you give each + * a unique prefix. Only numbers, letters, and underscores please! + */ +$table_prefix = 'wp_'; + +/** + * For developers: WordPress debugging mode. + * + * Change this to true to enable the display of notices during development. + * It is strongly recommended that plugin and theme developers use WP_DEBUG + * in their development environments. + * + * For information on other constants that can be used for debugging, + * visit the documentation. + * + * @link https://wordpress.org/support/article/debugging-in-wordpress/ + */ +define( 'WP_DEBUG', false ); + +/* Add any custom values between this line and the "stop editing" line. */ + + + +/* That's all, stop editing! Happy publishing. */ + +/** Absolute path to the WordPress directory. */ +if ( ! defined( 'ABSPATH' ) ) { + define( 'ABSPATH', __DIR__ . '/' ); +} + +/** Sets up WordPress vars and included files. */ +require_once ABSPATH . 'wp-settings.php'; From 108ce823bff8bab17288baab0e7c82f4baebc3c5 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 4 Dec 2022 13:34:23 -0600 Subject: [PATCH 06/36] Change .wp-pwd back to inline-block to stay consistent --- src/wp-admin/css/forms.css | 3 +- src/wp-includes/script-loader.php | 1 - wp-config-old.php | 96 ------------------------------- 3 files changed, 2 insertions(+), 98 deletions(-) delete mode 100644 wp-config-old.php diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index b276c2137772b..17020a5a3e817 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -550,7 +550,8 @@ fieldset label, } .wp-pwd { - display: flex; + display: inline-block; + margin-top: 0; position: relative; } diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 259fca24fc43f..40312fc82f8c2 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1,4 +1,3 @@ - $z70(?J|WG_SOh]L)DFo{vm*UhB;]v%BG+VStebs?[+s4tFs.BPLi`=]s=DRk-W2Gzbq[& B|?>]6p(wYd/6v`1{C`?8[Mo' ); -define( 'SECURE_AUTH_SALT', '*cJd_o}aU50Zj!-;~5rW)5!F<#dJl[b4!ed|*Pnxnif#&Wb7I[' ); -define( 'NONCE_SALT', 'RE9jJ&.#oq+D0z2m(8sx4zWIgVFsP)u4?lf/%*HamK0};:Xte50W>M~zP+aB6+>=' ); - -/**#@-*/ - -/** - * WordPress database table prefix. - * - * You can have multiple installations in one database if you give each - * a unique prefix. Only numbers, letters, and underscores please! - */ -$table_prefix = 'wp_'; - -/** - * For developers: WordPress debugging mode. - * - * Change this to true to enable the display of notices during development. - * It is strongly recommended that plugin and theme developers use WP_DEBUG - * in their development environments. - * - * For information on other constants that can be used for debugging, - * visit the documentation. - * - * @link https://wordpress.org/support/article/debugging-in-wordpress/ - */ -define( 'WP_DEBUG', false ); - -/* Add any custom values between this line and the "stop editing" line. */ - - - -/* That's all, stop editing! Happy publishing. */ - -/** Absolute path to the WordPress directory. */ -if ( ! defined( 'ABSPATH' ) ) { - define( 'ABSPATH', __DIR__ . '/' ); -} - -/** Sets up WordPress vars and included files. */ -require_once ABSPATH . 'wp-settings.php'; From c727c385de2a0aee60e69fdf75738cc05f7a8406 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 4 Dec 2022 18:30:12 -0600 Subject: [PATCH 07/36] Remove leftover `display: initial` from forms.css --- src/wp-admin/css/forms.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 17020a5a3e817..1e3e72ce8885a 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -1703,7 +1703,6 @@ table.form-table td .updated p { } .wp-pwd button.button { - display: initial; background: transparent; border: 1px solid transparent; box-shadow: none; From 59101519322d9dda3fbba0b20053d6a306eb2c9c Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 4 Dec 2022 21:05:01 -0600 Subject: [PATCH 08/36] Rename setup-config.js to password-toggle.js --- Gruntfile.js | 2 +- src/js/_enqueues/admin/{setup-config.js => password-toggle.js} | 0 src/wp-admin/setup-config.php | 2 +- src/wp-includes/script-loader.php | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename src/js/_enqueues/admin/{setup-config.js => password-toggle.js} (100%) diff --git a/Gruntfile.js b/Gruntfile.js index 67e0688ab7de4..aed6167da568a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -275,7 +275,7 @@ module.exports = function(grunt) { [ WORKING_DIR + 'wp-admin/js/plugin-install.js' ]: [ './src/js/_enqueues/admin/plugin-install.js' ], [ WORKING_DIR + 'wp-admin/js/post.js' ]: [ './src/js/_enqueues/admin/post.js' ], [ WORKING_DIR + 'wp-admin/js/postbox.js' ]: [ './src/js/_enqueues/admin/postbox.js' ], - [ WORKING_DIR + 'wp-admin/js/setup-config.js' ]: [ './src/js/_enqueues/admin/setup-config.js' ], + [ WORKING_DIR + 'wp-admin/js/password-toggle.js' ]: [ './src/js/_enqueues/admin/password-toggle.js' ], [ WORKING_DIR + 'wp-admin/js/revisions.js' ]: [ './src/js/_enqueues/wp/revisions.js' ], [ WORKING_DIR + 'wp-admin/js/set-post-thumbnail.js' ]: [ './src/js/_enqueues/admin/set-post-thumbnail.js' ], [ WORKING_DIR + 'wp-admin/js/svg-painter.js' ]: [ './src/js/_enqueues/wp/svg-painter.js' ], diff --git a/src/js/_enqueues/admin/setup-config.js b/src/js/_enqueues/admin/password-toggle.js similarity index 100% rename from src/js/_enqueues/admin/setup-config.js rename to src/js/_enqueues/admin/password-toggle.js diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index 772242f3a0789..b0018ce955f8c 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -257,7 +257,7 @@ function setup_config_display_header( $body_classes = array() ) {

add( 'setup-config', "/wp-admin/js/setup-config$suffix.js", array(), false, 1 ); + $scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 ); $scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 ); From ab58f95532c22d4d24af6dad9b9a01e8ace005c2 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Tue, 6 Dec 2022 05:58:04 -0600 Subject: [PATCH 09/36] Update password-toggle.js @output to new file name Need to use global search next time when renaming things. --- src/js/_enqueues/admin/password-toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index e4210a2b8edcc..53b7baee4e133 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -2,7 +2,7 @@ * Adds show/hide toggle for the setup config database password. * * @since 6.2.0 - * @output wp-admin/js/setup-config.js + * @output wp-admin/js/password-toggle.js */ ( function () { From b676c71463a2b43e2f41bede8191b51888a24931 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Wed, 4 Jan 2023 22:56:07 -0600 Subject: [PATCH 10/36] Update #pwd-toggle to .pwd-toggle --- src/js/_enqueues/admin/password-toggle.js | 2 +- src/wp-admin/css/forms.css | 10 +++++----- src/wp-admin/setup-config.php | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index 53b7baee4e133..0df17c1b38988 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -8,7 +8,7 @@ ( function () { var toggle, status, input, icon, label; - toggle = document.getElementById( 'pwd-toggle' ); + toggle = document.querySelector( '.pwd-toggle' ); toggle.classList.remove('hide-if-no-js'); toggle.addEventListener( 'click', togglePassword ); diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 1e3e72ce8885a..a50cd94d45e1f 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -560,7 +560,7 @@ fieldset label, padding-right: 2.5rem; } -.wp-pwd button#pwd-toggle { +.wp-pwd button.pwd-toggle { background: transparent; border: 1px solid transparent; box-shadow: none; @@ -575,12 +575,12 @@ fieldset label, top: 0; } -.wp-pwd button#pwd-toggle:hover { +.wp-pwd button.pwd-toggle:hover { background: transparent; border-color: transparent; } -.wp-pwd button#pwd-toggle:focus { +.wp-pwd button.pwd-toggle:focus { background: transparent; border-color: #3582c4; border-radius: 4px; @@ -589,13 +589,13 @@ fieldset label, outline: 2px solid transparent; } -.wp-pwd button#pwd-toggle:active { +.wp-pwd button.pwd-toggle:active { background: transparent; box-shadow: none; transform: none; } -.wp-pwd button#pwd-toggle .dashicons { +.wp-pwd button.pwd-toggle .dashicons { line-height: 1.375; } diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index b0018ce955f8c..418c54d6411d9 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -226,7 +226,7 @@ function setup_config_display_header( $body_classes = array() ) { - From 5c4ab19fbd172ee2f0247a2c3baf3c476c749b0f Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Wed, 4 Jan 2023 23:23:46 -0600 Subject: [PATCH 11/36] Update `password-toggle.js` to toggle any and all `.pwd-toggle` fields --- src/js/_enqueues/admin/password-toggle.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index 0df17c1b38988..30cb1dad13e82 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -8,23 +8,26 @@ ( function () { var toggle, status, input, icon, label; - toggle = document.querySelector( '.pwd-toggle' ); - toggle.classList.remove('hide-if-no-js'); - toggle.addEventListener( 'click', togglePassword ); + toggle = document.querySelectorAll('.pwd-toggle'); + + toggle.forEach( function (t) { + t.classList.remove('hide-if-no-js'); + t.addEventListener( 'click', togglePassword ); + } ); function togglePassword() { - status = toggle.getAttribute( 'data-toggle' ); + status = this.getAttribute( 'data-toggle' ); input = document.getElementById( 'pwd' ); - icon = toggle.getElementsByClassName( 'dashicons' )[ 0 ]; - label = toggle.getElementsByClassName( 'text' )[ 0 ]; + icon = this.getElementsByClassName( 'dashicons' )[ 0 ]; + label = this.getElementsByClassName( 'text' )[ 0 ]; if ( 0 === parseInt( status, 10 ) ) { - toggle.setAttribute( 'data-toggle', 1 ); + this.setAttribute( 'data-toggle', 1 ); input.setAttribute( 'type', 'text' ); icon.classList.remove( 'dashicons-visibility' ); icon.classList.add( 'dashicons-hidden' ); } else { - toggle.setAttribute( 'data-toggle', 0 ); + this.setAttribute( 'data-toggle', 0 ); input.setAttribute( 'type', 'password' ); icon.classList.remove( 'dashicons-hidden' ); icon.classList.add( 'dashicons-visibility' ); From a0fd4b63228a3e569b09d4271e2196f5dda4c0a4 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 20:03:46 -0600 Subject: [PATCH 12/36] Change default aria-label from "Hide" to "Show" --- src/wp-admin/setup-config.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index 418c54d6411d9..282f3e78b1f89 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -226,7 +226,7 @@ function setup_config_display_header( $body_classes = array() ) { - From b3905ba22e222eb6a464d0bdae7f866e3ff3de8a Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 20:34:55 -0600 Subject: [PATCH 13/36] Reword file description for password-toggle.js --- src/js/_enqueues/admin/password-toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index 30cb1dad13e82..3115060c2b28a 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -1,5 +1,5 @@ /** - * Adds show/hide toggle for the setup config database password. + * Adds functionality for password visibility buttons to toggle between text and password input types. * * @since 6.2.0 * @output wp-admin/js/password-toggle.js From 1240f8e51840691b1b9cc34d7347873a80ab98fd Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 20:38:32 -0600 Subject: [PATCH 14/36] Fix spacing inside parenthesis so it's consistent --- src/js/_enqueues/admin/password-toggle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index 3115060c2b28a..cd2b4623c3cb5 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -8,10 +8,10 @@ ( function () { var toggle, status, input, icon, label; - toggle = document.querySelectorAll('.pwd-toggle'); + toggle = document.querySelectorAll( '.pwd-toggle' ); toggle.forEach( function (t) { - t.classList.remove('hide-if-no-js'); + t.classList.remove( 'hide-if-no-js' ); t.addEventListener( 'click', togglePassword ); } ); From 106d80c65973ad9cb604fc9f360fafe2368becfc Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 20:40:34 -0600 Subject: [PATCH 15/36] Change `toggle` to `toggleElements` to imply potentially several `.pwd-toggle` elements --- src/js/_enqueues/admin/password-toggle.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index cd2b4623c3cb5..e2fa5400e8c04 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -6,13 +6,13 @@ */ ( function () { - var toggle, status, input, icon, label; + var toggleElements, status, input, icon, label; - toggle = document.querySelectorAll( '.pwd-toggle' ); + toggleElements = document.querySelectorAll( '.pwd-toggle' ); - toggle.forEach( function (t) { - t.classList.remove( 'hide-if-no-js' ); - t.addEventListener( 'click', togglePassword ); + toggleElements.forEach( function (toggle) { + toggle.classList.remove( 'hide-if-no-js' ); + toggle.addEventListener( 'click', togglePassword ); } ); function togglePassword() { From 10270a8d197276157e89aac6389d3fa0adf428c3 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 20:48:42 -0600 Subject: [PATCH 16/36] Change `.wp-pwd` from inline to block --- src/wp-admin/css/forms.css | 1 - src/wp-admin/setup-config.php | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index a50cd94d45e1f..c8cd056579474 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -550,7 +550,6 @@ fieldset label, } .wp-pwd { - display: inline-block; margin-top: 0; position: relative; } diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index 282f3e78b1f89..6aba43e0b3ffa 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -224,12 +224,12 @@ function setup_config_display_header( $body_classes = array() ) { - +
- +
From 605a8d61472c98177828a961118ea83d31688b49 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 21:17:37 -0600 Subject: [PATCH 17/36] Fix password-toggle.js so it correctly toggles the input that the button applies to if there are multiple fields --- src/js/_enqueues/admin/password-toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index e2fa5400e8c04..f900cf75d6883 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -17,7 +17,7 @@ function togglePassword() { status = this.getAttribute( 'data-toggle' ); - input = document.getElementById( 'pwd' ); + input = this.parentElement.children.namedItem( 'pwd' ); icon = this.getElementsByClassName( 'dashicons' )[ 0 ]; label = this.getElementsByClassName( 'text' )[ 0 ]; From cf8bae6576fc3102b9f76744996a53dac5b8e3c9 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 21:42:38 -0600 Subject: [PATCH 18/36] Add `hide-if-no-js` to `setup-config.php` toggle as it is unusable w/o JS --- src/wp-admin/setup-config.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index 6aba43e0b3ffa..fca148e325f4f 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -226,7 +226,7 @@ function setup_config_display_header( $body_classes = array() ) {
-
From 70de2bdff319cfbca1da09de6bf6b4b1170188a0 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 21:47:46 -0600 Subject: [PATCH 19/36] Update forms.css and install.css for appropriate input padding --- src/wp-admin/css/forms.css | 5 ----- src/wp-admin/css/install.css | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index c8cd056579474..06fdaaa8bbc5f 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -554,11 +554,6 @@ fieldset label, position: relative; } -.wp-pwd input { - direction: ltr; - padding-right: 2.5rem; -} - .wp-pwd button.pwd-toggle { background: transparent; border: 1px solid transparent; diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index d666ba956cbe7..b0773d08bb8c6 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -152,7 +152,7 @@ textarea { } .form-table .wp-pwd input { - padding-right: 40px; + padding-right: 2.5rem; } input, From 6a33173acf6cadbdb12e559aec5643bf3e1ac6e4 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 21:50:40 -0600 Subject: [PATCH 20/36] Remove `data-pw` from setup-config.php --- src/wp-admin/setup-config.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index fca148e325f4f..1d1c8720e0da1 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -225,7 +225,7 @@ function setup_config_display_header( $body_classes = array() ) {
- + From 31210f927c70885775c7b80df56fba0ca54ec3a9 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 22:45:31 -0600 Subject: [PATCH 21/36] Change `aria-label` on toggle including translation support --- src/js/_enqueues/admin/password-toggle.js | 2 ++ src/wp-admin/setup-config.php | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index f900cf75d6883..8988961f01fcb 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -23,11 +23,13 @@ if ( 0 === parseInt( status, 10 ) ) { this.setAttribute( 'data-toggle', 1 ); + this.setAttribute( 'aria-label', this.getAttribute( 'data-hide-label' ) ); input.setAttribute( 'type', 'text' ); icon.classList.remove( 'dashicons-visibility' ); icon.classList.add( 'dashicons-hidden' ); } else { this.setAttribute( 'data-toggle', 0 ); + this.setAttribute( 'aria-label', this.getAttribute( 'data-show-label' ) ); input.setAttribute( 'type', 'password' ); icon.classList.remove( 'dashicons-hidden' ); icon.classList.add( 'dashicons-visibility' ); diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index 1d1c8720e0da1..689c6177a0240 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -226,7 +226,7 @@ function setup_config_display_header( $body_classes = array() ) {
-
From 8b3997c3b222820e07e5f811afff455541f3e28d Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 23:09:36 -0600 Subject: [PATCH 22/36] Change install.css selector for `padding-right` so as to not affect installation page --- src/wp-admin/css/install.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index b0773d08bb8c6..f0baffd47895c 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -151,7 +151,7 @@ textarea { padding: 3px 5px; } -.form-table .wp-pwd input { +.wp-pwd input#pwd { padding-right: 2.5rem; } From 304428c78197049041d65f7d19e52babd5e935cf Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Thu, 5 Jan 2023 23:18:36 -0600 Subject: [PATCH 23/36] Change `margin-top` to not affect top margin on profile page --- src/wp-admin/css/forms.css | 2 +- src/wp-admin/css/install.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 06fdaaa8bbc5f..73c1c27224d33 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -550,7 +550,7 @@ fieldset label, } .wp-pwd { - margin-top: 0; + margin-top: 1em; position: relative; } diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index f0baffd47895c..c5c04de0b8c16 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -151,6 +151,10 @@ textarea { padding: 3px 5px; } +.wp-pwd { + margin-top: 0; +} + .wp-pwd input#pwd { padding-right: 2.5rem; } From b00361f1c13f6626ef31cad6f2686438444d7358 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 8 Jan 2023 09:45:27 -0600 Subject: [PATCH 24/36] Change icon to text and fix pw mgr icon support --- src/js/_enqueues/admin/password-toggle.js | 14 +++++----- src/wp-admin/css/forms.css | 34 ++--------------------- src/wp-admin/css/install.css | 2 +- src/wp-admin/setup-config.php | 4 +-- src/wp-includes/script-loader.php | 1 + 5 files changed, 14 insertions(+), 41 deletions(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index 8988961f01fcb..ad32d4a3b398b 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -6,7 +6,7 @@ */ ( function () { - var toggleElements, status, input, icon, label; + var toggleElements, status, input, icon, label, __ = wp.i18n.__; toggleElements = document.querySelectorAll( '.pwd-toggle' ); @@ -23,16 +23,16 @@ if ( 0 === parseInt( status, 10 ) ) { this.setAttribute( 'data-toggle', 1 ); - this.setAttribute( 'aria-label', this.getAttribute( 'data-hide-label' ) ); + this.setAttribute( 'aria-label', __( 'Hide password' ) ); input.setAttribute( 'type', 'text' ); - icon.classList.remove( 'dashicons-visibility' ); - icon.classList.add( 'dashicons-hidden' ); + label.innerHTML = __( 'Hide' ); + this.classList.add( 'button-primary' ); } else { this.setAttribute( 'data-toggle', 0 ); - this.setAttribute( 'aria-label', this.getAttribute( 'data-show-label' ) ); + this.setAttribute( 'aria-label', __( 'Show password' ) ); input.setAttribute( 'type', 'password' ); - icon.classList.remove( 'dashicons-hidden' ); - icon.classList.add( 'dashicons-visibility' ); + label.innerHTML = __( 'Show' ); + this.classList.remove( 'button-primary' ); } } } )(); diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 73c1c27224d33..2e7f43fc3bbc6 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -552,47 +552,19 @@ fieldset label, .wp-pwd { margin-top: 1em; position: relative; + display: flex; } .wp-pwd button.pwd-toggle { - background: transparent; - border: 1px solid transparent; - box-shadow: none; - font-size: 14px; - line-height: 2; - width: 2rem; + width: 2.75rem; min-width: 40px; margin: 0; padding: 0; - position: absolute; + display: inline; right: 0; top: 0; } -.wp-pwd button.pwd-toggle:hover { - background: transparent; - border-color: transparent; -} - -.wp-pwd button.pwd-toggle:focus { - background: transparent; - border-color: #3582c4; - border-radius: 4px; - box-shadow: 0 0 0 1px #3582c4; - /* Only visible in Windows High Contrast mode */ - outline: 2px solid transparent; -} - -.wp-pwd button.pwd-toggle:active { - background: transparent; - box-shadow: none; - transform: none; -} - -.wp-pwd button.pwd-toggle .dashicons { - line-height: 1.375; -} - #misc-publishing-actions label { vertical-align: baseline; } diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index c5c04de0b8c16..88d1e5e8aa2a4 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -156,7 +156,7 @@ textarea { } .wp-pwd input#pwd { - padding-right: 2.5rem; + width: calc(218px - 2.75rem); } input, diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index 689c6177a0240..b642081d4d472 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -226,8 +226,8 @@ function setup_config_display_header( $body_classes = array() ) {
-
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 087a67f94fe4c..195f3e4592be5 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1179,6 +1179,7 @@ function wp_default_scripts( $scripts ) { ); $scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 ); + $scripts->set_translations( 'password-toggle' ); $scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 ); From 82be788c514577f618b54c422d09919a8d077300 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 8 Jan 2023 10:19:13 -0600 Subject: [PATCH 25/36] Remove unneeded `margin: 0` from `.pwd-toggle`. Margin is already set to 0 in `.wp-core-ui .button`. --- src/wp-admin/css/forms.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 2e7f43fc3bbc6..523fe805a9eee 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -558,7 +558,6 @@ fieldset label, .wp-pwd button.pwd-toggle { width: 2.75rem; min-width: 40px; - margin: 0; padding: 0; display: inline; right: 0; From ca73852f5dd91e18e2971f4d9a7a3400c57ee3d8 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Sun, 8 Jan 2023 12:27:22 -0600 Subject: [PATCH 26/36] Fix password strength result and button height --- src/wp-admin/css/forms.css | 5 +++++ src/wp-admin/css/install.css | 2 +- src/wp-admin/install.php | 6 ++++-- src/wp-admin/user-new.php | 2 +- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 523fe805a9eee..8ec4a09f405ce 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -553,6 +553,11 @@ fieldset label, margin-top: 1em; position: relative; display: flex; + gap: 0.25rem; +} + +.wp-pwd button { + height: min-content; } .wp-pwd button.pwd-toggle { diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 88d1e5e8aa2a4..808027efc70f9 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -156,7 +156,7 @@ textarea { } .wp-pwd input#pwd { - width: calc(218px - 2.75rem); + width: calc(218px - 3rem); } input, diff --git a/src/wp-admin/install.php b/src/wp-admin/install.php index 3edc3230cdfaa..53333b54db13c 100644 --- a/src/wp-admin/install.php +++ b/src/wp-admin/install.php @@ -140,12 +140,14 @@ function display_setup_form( $error = null ) {
- +
+ +
+
-

diff --git a/src/wp-admin/user-new.php b/src/wp-admin/user-new.php index 9edd7f067f884..32a0af5576efd 100644 --- a/src/wp-admin/user-new.php +++ b/src/wp-admin/user-new.php @@ -572,12 +572,12 @@ +

-
From f1c7a78c9f987461c84af33904711c9fa29c5af2 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Fri, 13 Jan 2023 18:20:05 -0600 Subject: [PATCH 27/36] Remove unnecessary `.pwd-toggle` styles from forms.css --- src/wp-admin/css/forms.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 8ec4a09f405ce..335a2cfd1a254 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -564,9 +564,6 @@ fieldset label, width: 2.75rem; min-width: 40px; padding: 0; - display: inline; - right: 0; - top: 0; } #misc-publishing-actions label { From 65c0011a864cc8353441e576a88da3d42d3d09a1 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Fri, 13 Jan 2023 18:25:38 -0600 Subject: [PATCH 28/36] Re-add icon to button for consistency --- src/js/_enqueues/admin/password-toggle.js | 6 ++++-- src/wp-admin/css/forms.css | 8 ++++++-- src/wp-admin/css/install.css | 2 +- src/wp-admin/setup-config.php | 1 + 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js index ad32d4a3b398b..6971a2612e47b 100644 --- a/src/js/_enqueues/admin/password-toggle.js +++ b/src/js/_enqueues/admin/password-toggle.js @@ -26,13 +26,15 @@ this.setAttribute( 'aria-label', __( 'Hide password' ) ); input.setAttribute( 'type', 'text' ); label.innerHTML = __( 'Hide' ); - this.classList.add( 'button-primary' ); + icon.classList.remove( 'dashicons-visibility' ); + icon.classList.add( 'dashicons-hidden' ); } else { this.setAttribute( 'data-toggle', 0 ); this.setAttribute( 'aria-label', __( 'Show password' ) ); input.setAttribute( 'type', 'password' ); label.innerHTML = __( 'Show' ); - this.classList.remove( 'button-primary' ); + icon.classList.remove( 'dashicons-hidden' ); + icon.classList.add( 'dashicons-visibility' ); } } } )(); diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 335a2cfd1a254..806af45c13256 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -561,11 +561,15 @@ fieldset label, } .wp-pwd button.pwd-toggle { - width: 2.75rem; - min-width: 40px; + width: 4.25rem; padding: 0; } +.wp-pwd button.pwd-toggle .dashicons { + position: relative; + top: 0.25rem +} + #misc-publishing-actions label { vertical-align: baseline; } diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 808027efc70f9..74c2698a0a917 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -156,7 +156,7 @@ textarea { } .wp-pwd input#pwd { - width: calc(218px - 3rem); + width: calc(218px - 4.5rem); } input, diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index b642081d4d472..3978f2a82e474 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -227,6 +227,7 @@ function setup_config_display_header( $body_classes = array() ) {
From 5c77e9f2ed9a83f7dcd518b9e76ce058510d4273 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Fri, 13 Jan 2023 19:35:01 -0600 Subject: [PATCH 29/36] Increase input size slightly to allow for pwd-toggle. Also fixes orphan words in the input descriptions. --- src/wp-admin/css/install.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 74c2698a0a917..fdd971809a8cc 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -131,7 +131,7 @@ textarea { font-size: 14px; text-align: left; padding: 10px 20px 10px 0; - width: 140px; + width: 115px; vertical-align: top; } @@ -156,7 +156,7 @@ textarea { } .wp-pwd input#pwd { - width: calc(218px - 4.5rem); + width: calc(230px - 4.5rem); } input, @@ -169,7 +169,7 @@ submit { .form-table input[type=url], .form-table input[type=password], #pass-strength-result { - width: 218px; + width: 230px; } .form-table th p { From 359b3c69bc551aa41c0dcf28f69f71f2545f84f2 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Fri, 20 Jan 2023 22:08:30 -0600 Subject: [PATCH 30/36] Revert `.pwd-toggle` to default button width/padding --- src/wp-admin/css/forms.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 640d88c5f7036..bdfa9bf34b12a 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -560,11 +560,6 @@ fieldset label, height: min-content; } -.wp-pwd button.pwd-toggle { - width: 4.25rem; - padding: 0; -} - .wp-pwd button.pwd-toggle .dashicons { position: relative; top: 0.25rem From bef447e7bec9a268671848eff9f693e04135eff5 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Fri, 20 Jan 2023 22:10:17 -0600 Subject: [PATCH 31/36] Fix input width on narrow screens and update `calc()` based on reversion of width/padding --- src/wp-admin/css/install.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index fdd971809a8cc..1714fe20ae06f 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -155,10 +155,6 @@ textarea { margin-top: 0; } -.wp-pwd input#pwd { - width: calc(230px - 4.5rem); -} - input, submit { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -250,6 +246,12 @@ body.rtl, } } +@media screen and (min-width: 783px) { + .wp-pwd input#pwd { + width: calc(230px - 5.125rem); + } +} + @media screen and (max-width: 782px) { .form-table { From c7d4314d24a3ecdbed6cd5828ae3b5289576cbc0 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Tue, 31 Jan 2023 17:56:44 -0600 Subject: [PATCH 32/36] Reorder `password-toggle.js` in gruntfile so it is listed alphabetically. --- Gruntfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index aed6167da568a..fca755eb529a2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -272,10 +272,10 @@ module.exports = function(grunt) { [ WORKING_DIR + 'wp-admin/js/media.js' ]: [ './src/js/_enqueues/admin/media.js' ], [ WORKING_DIR + 'wp-admin/js/nav-menu.js' ]: [ './src/js/_enqueues/lib/nav-menu.js' ], [ WORKING_DIR + 'wp-admin/js/password-strength-meter.js' ]: [ './src/js/_enqueues/wp/password-strength-meter.js' ], + [ WORKING_DIR + 'wp-admin/js/password-toggle.js' ]: [ './src/js/_enqueues/admin/password-toggle.js' ], [ WORKING_DIR + 'wp-admin/js/plugin-install.js' ]: [ './src/js/_enqueues/admin/plugin-install.js' ], [ WORKING_DIR + 'wp-admin/js/post.js' ]: [ './src/js/_enqueues/admin/post.js' ], [ WORKING_DIR + 'wp-admin/js/postbox.js' ]: [ './src/js/_enqueues/admin/postbox.js' ], - [ WORKING_DIR + 'wp-admin/js/password-toggle.js' ]: [ './src/js/_enqueues/admin/password-toggle.js' ], [ WORKING_DIR + 'wp-admin/js/revisions.js' ]: [ './src/js/_enqueues/wp/revisions.js' ], [ WORKING_DIR + 'wp-admin/js/set-post-thumbnail.js' ]: [ './src/js/_enqueues/admin/set-post-thumbnail.js' ], [ WORKING_DIR + 'wp-admin/js/svg-painter.js' ]: [ './src/js/_enqueues/wp/svg-painter.js' ], From f2fb3ff76f7e0dfec6fca571a99a00c9f56a9996 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Tue, 31 Jan 2023 18:02:44 -0600 Subject: [PATCH 33/36] Update `script-loader.php` to group `password-toggle` near `password-strength-meter` --- src/wp-includes/script-loader.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index f9ccc22b5f34f..b912d1312f2aa 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1162,6 +1162,9 @@ function wp_default_scripts( $scripts ) { ); $scripts->set_translations( 'password-strength-meter' ); + $scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 ); + $scripts->set_translations( 'password-toggle' ); + $scripts->add( 'application-passwords', "/wp-admin/js/application-passwords$suffix.js", array( 'jquery', 'wp-util', 'wp-api-request', 'wp-date', 'wp-i18n', 'wp-hooks' ), false, 1 ); $scripts->set_translations( 'application-passwords' ); @@ -1180,9 +1183,6 @@ function wp_default_scripts( $scripts ) { ) ); - $scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 ); - $scripts->set_translations( 'password-toggle' ); - $scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 ); $scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 ); From e71bd9f14eac8919231284dd9259efe69a7337d8 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Tue, 31 Jan 2023 19:43:03 -0600 Subject: [PATCH 34/36] Remove `display: flex` from forms.css that was causing the `wp-login.php` toggle from aligning properly. --- src/wp-admin/css/forms.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index bdfa9bf34b12a..5269d572cdbbc 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -552,8 +552,6 @@ fieldset label, .wp-pwd { margin-top: 1em; position: relative; - display: flex; - gap: 0.25rem; } .wp-pwd button { From 86e33e04c7874270f7b4b3bd308167a4d19bc539 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Tue, 31 Jan 2023 19:51:52 -0600 Subject: [PATCH 35/36] Add fixed width to toggle button --- src/wp-admin/css/forms.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 5269d572cdbbc..05d793d7cf96d 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -556,6 +556,7 @@ fieldset label, .wp-pwd button { height: min-content; + width: 4.875rem; } .wp-pwd button.pwd-toggle .dashicons { From 6c1b2fdf869769a7fdcc692dd22f99f77ca618a5 Mon Sep 17 00:00:00 2001 From: Brennan Goewert Date: Tue, 31 Jan 2023 20:11:20 -0600 Subject: [PATCH 36/36] Add `.password-input-wrapper` with `display: inline-block` to forms.css. This keep toggle buttons in-line, which was removed with the removal of `display: flex`. --- src/wp-admin/css/forms.css | 4 ++++ src/wp-admin/install.php | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 05d793d7cf96d..2c36026ab707e 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -604,6 +604,10 @@ fieldset label, opacity: 1; } +.password-input-wrapper { + display: inline-block; +} + .password-input-wrapper input { font-family: Consolas, Monaco, monospace; } diff --git a/src/wp-admin/install.php b/src/wp-admin/install.php index 3edcbf654aa95..2b45e23addbba 100644 --- a/src/wp-admin/install.php +++ b/src/wp-admin/install.php @@ -140,10 +140,10 @@ function display_setup_form( $error = null ) {
-
+
-
+