From 491a21da64367c57e2f55048c0fc091e0a9b78f5 Mon Sep 17 00:00:00 2001 From: joedolson Date: Thu, 21 Sep 2023 18:24:15 +0000 Subject: [PATCH] Login and Registration: Improve HTML for errors and notices. Improve markup on Login and Registration errors. Use list markup for multiple issues, paragraph when only one to reduce semantic burden in the most common case. Normalize classes and markup for wrapper using `wp_admin_notice()` and `wp_get_admin_notice()` functions. Move definition of those functions from `wp-admin\includes\misc.php` to `wp-includes\functions.php`. Move tests to functions group. Props extendwings, sabernhardt, afercia, lukecavanagh, rianrietveld, oglekler, sergeybiryukov, costdev, joedolson. Fixes #30685. Built from https://develop.svn.wordpress.org/trunk@56654 git-svn-id: http://core.svn.wordpress.org/trunk@56166 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/login-rtl.css | 26 ++++-- wp-admin/css/login-rtl.min.css | 2 +- wp-admin/css/login.css | 26 ++++-- wp-admin/css/login.min.css | 2 +- wp-admin/includes/misc.php | 144 --------------------------------- wp-includes/functions.php | 144 +++++++++++++++++++++++++++++++++ wp-includes/version.php | 2 +- wp-login.php | 95 ++++++++++++++++++---- 8 files changed, 268 insertions(+), 173 deletions(-) diff --git a/wp-admin/css/login-rtl.css b/wp-admin/css/login-rtl.css index fab1bc168c..7211a85e5e 100644 --- a/wp-admin/css/login-rtl.css +++ b/wp-admin/css/login-rtl.css @@ -43,8 +43,8 @@ p { } .login .message, -.login .success, -.login #login_error { +.login .notice, +.login .success { border-right: 4px solid #72aee6; padding: 12px; margin-right: 0; @@ -58,10 +58,19 @@ p { border-right-color: #00a32a; } -.login #login_error { +/* Match border color from common.css */ +.login .notice-error { border-right-color: #d63638; } +.login .login-error-list { + list-style: none; +} + +.login .login-error-list li + li { + margin-top: 4px; +} + #loginform p.submit, .login-action-lostpassword p.submit { border: none; @@ -238,6 +247,11 @@ p { margin-bottom: 0; } +#login form .indicator-hint, +#login #reg_passmail { + margin-bottom: 16px; +} + #login form p.submit { margin: 0; padding: 0; @@ -343,9 +357,7 @@ p { font-family: Consolas, Monaco, monospace; } -.js.login input.password-input, -.js.login-action-rp form .input, -.js.login-action-rp input[type="text"] { +.js.login input.password-input { padding-left: 2.5rem; } @@ -355,6 +367,8 @@ p { background: #fff; } +.js.login-action-resetpass input[type="text"], +.js.login-action-resetpass input[type="password"], .js.login-action-rp input[type="text"], .js.login-action-rp input[type="password"] { margin-bottom: 0; diff --git a/wp-admin/css/login-rtl.min.css b/wp-admin/css/login-rtl.min.css index 591e680706..e10f361a2f 100644 --- a/wp-admin/css/login-rtl.min.css +++ b/wp-admin/css/login-rtl.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;min-width:0;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a{outline:0}a:active,a:hover{color:#135e96}a:focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}p{line-height:1.5}.login #login_error,.login .message,.login .success{border-right:4px solid #72aee6;padding:12px;margin-right:0;margin-bottom:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);word-wrap:break-word}.login .success{border-right-color:#00a32a}.login #login_error{border-right-color:#d63638}#loginform p.submit,.login-action-lostpassword p.submit{border:none;margin:-10px 0 20px}.login *{margin:0;padding:0}.login .input::-ms-clear{display:none}.login .pw-weak{margin-bottom:15px}.login .button.wp-hide-pw{background:0 0;border:1px solid transparent;box-shadow:none;font-size:14px;line-height:2;width:2.5rem;height:2.5rem;min-width:40px;min-height:40px;margin:0;padding:5px 9px;position:absolute;left:0;top:0}.login .button.wp-hide-pw:hover{background:0 0}.login .button.wp-hide-pw:focus{background:0 0;border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.login .button.wp-hide-pw:active{background:0 0;box-shadow:none;transform:none}.login .button.wp-hide-pw .dashicons{width:1.25rem;height:1.25rem;top:.25rem}.login .wp-pwd{position:relative}.no-js .hide-if-no-js{display:none}.login form{margin-top:20px;margin-right:0;padding:26px 24px 34px;font-weight:400;overflow:hidden;background:#fff;border:1px solid #c3c4c7;box-shadow:0 1px 3px rgba(0,0,0,.04)}.login form.shake{animation:shake .2s cubic-bezier(.19,.49,.38,.79) both;animation-iteration-count:3;transform:translateX(0)}@keyframes shake{25%{transform:translateX(20px)}75%{transform:translateX(-20px)}100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.login form.shake{animation:none;transform:none}}.login-action-confirm_admin_email #login{width:60vw;max-width:650px;margin-top:-2vh}@media screen and (max-width:782px){.login-action-confirm_admin_email #login{box-sizing:border-box;margin-top:0;padding-right:4vw;padding-left:4vw;width:100vw}}.login form .forgetmenot{font-weight:400;float:right;margin-bottom:0}.login .button-primary{float:left}.login .reset-pass-submit{display:flex;flex-flow:row wrap;justify-content:space-between}.login .reset-pass-submit .button{display:inline-block;float:none;margin-bottom:6px}.login .admin-email-confirm-form .submit{text-align:center}.admin-email__later{text-align:right}.login form p.admin-email__details{margin:1.1em 0}.login h1.admin-email__heading{border-bottom:1px #f0f0f1 solid;color:#50575e;font-weight:400;padding-bottom:.5em;text-align:right}.admin-email__actions div{padding-top:1.5em}.login .admin-email__actions .button-primary{float:none;margin-right:.25em;margin-left:.25em}#login form p{margin-bottom:0}#login form p.submit{margin:0;padding:0}.login label{font-size:14px;line-height:1.5;display:inline-block;margin-bottom:3px}.login .forgetmenot label,.login .pw-weak label{line-height:1.5;vertical-align:baseline}.login h1{text-align:center}.login h1 a{background-image:url(../images/w-logo-blue.png?ver=20131202);background-image:none,url(../images/wordpress-logo.svg?ver=20131107);background-size:84px;background-position:center top;background-repeat:no-repeat;color:#3c434a;height:84px;font-size:20px;font-weight:400;line-height:1.3;margin:0 auto 25px;padding:0;text-decoration:none;width:84px;text-indent:-9999px;outline:0;overflow:hidden;display:block}#login{width:320px;padding:5% 0 0;margin:auto}.login #backtoblog,.login #nav{font-size:13px;padding:0 24px}.login #nav{margin:24px 0 0}#backtoblog{margin:16px 0;word-wrap:break-word}.login #backtoblog a,.login #nav a{text-decoration:none;color:#50575e}.login #backtoblog a:hover,.login #nav a:hover,.login h1 a:hover{color:#135e96}.login #backtoblog a:focus,.login #nav a:focus,.login h1 a:focus{color:#043959}.login .privacy-policy-page-link{text-align:center;width:100%;margin:3em 0 2em}.login form .input,.login input[type=password],.login input[type=text]{font-size:24px;line-height:1.33333333;width:100%;border-width:.0625rem;padding:.1875rem .3125rem;margin:0 0 16px 6px;min-height:40px;max-height:none}.login input.password-input{font-family:Consolas,Monaco,monospace}.js.login input.password-input,.js.login-action-rp form .input,.js.login-action-rp input[type=text]{padding-left:2.5rem}.login form .input,.login form input[type=checkbox],.login input[type=text]{background:#fff}.js.login-action-rp input[type=password],.js.login-action-rp input[type=text]{margin-bottom:0}.login #pass-strength-result{font-weight:600;margin:-1px 0 16px 5px;padding:6px 5px;text-align:center;width:100%}body.interim-login{height:auto}.interim-login #login{padding:0;margin:5px auto 20px}.interim-login.login h1 a{width:auto}.interim-login #login_error,.interim-login.login .message{margin:0 0 16px}.interim-login.login form{margin:0}.screen-reader-text,.screen-reader-text span{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}input::-ms-reveal{display:none}#language-switcher{padding:0;overflow:visible;background:0 0;border:none;box-shadow:none}#language-switcher select{margin-left:.25em}.language-switcher{margin:0 auto;padding:0 0 24px;text-align:center}.language-switcher label{margin-left:.25em}.language-switcher label .dashicons{width:auto;height:auto}.login .language-switcher .button{margin-bottom:0}@media screen and (max-height:550px){#login{padding:20px 0}#language-switcher{margin-top:0}}@media screen and (max-width:782px){.interim-login input[type=checkbox]{width:1rem;height:1rem}.interim-login input[type=checkbox]:checked:before{width:1.3125rem;height:1.3125rem;margin:-.1875rem -.25rem 0 0}#language-switcher label,#language-switcher select{margin-left:0}}@media screen and (max-width:400px){.login .language-switcher .button{display:block;margin:5px auto 0}} \ No newline at end of file +body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;min-width:0;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a{outline:0}a:active,a:hover{color:#135e96}a:focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}p{line-height:1.5}.login .message,.login .notice,.login .success{border-right:4px solid #72aee6;padding:12px;margin-right:0;margin-bottom:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);word-wrap:break-word}.login .success{border-right-color:#00a32a}.login .notice-error{border-right-color:#d63638}.login .login-error-list{list-style:none}.login .login-error-list li+li{margin-top:4px}#loginform p.submit,.login-action-lostpassword p.submit{border:none;margin:-10px 0 20px}.login *{margin:0;padding:0}.login .input::-ms-clear{display:none}.login .pw-weak{margin-bottom:15px}.login .button.wp-hide-pw{background:0 0;border:1px solid transparent;box-shadow:none;font-size:14px;line-height:2;width:2.5rem;height:2.5rem;min-width:40px;min-height:40px;margin:0;padding:5px 9px;position:absolute;left:0;top:0}.login .button.wp-hide-pw:hover{background:0 0}.login .button.wp-hide-pw:focus{background:0 0;border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.login .button.wp-hide-pw:active{background:0 0;box-shadow:none;transform:none}.login .button.wp-hide-pw .dashicons{width:1.25rem;height:1.25rem;top:.25rem}.login .wp-pwd{position:relative}.no-js .hide-if-no-js{display:none}.login form{margin-top:20px;margin-right:0;padding:26px 24px 34px;font-weight:400;overflow:hidden;background:#fff;border:1px solid #c3c4c7;box-shadow:0 1px 3px rgba(0,0,0,.04)}.login form.shake{animation:shake .2s cubic-bezier(.19,.49,.38,.79) both;animation-iteration-count:3;transform:translateX(0)}@keyframes shake{25%{transform:translateX(20px)}75%{transform:translateX(-20px)}100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.login form.shake{animation:none;transform:none}}.login-action-confirm_admin_email #login{width:60vw;max-width:650px;margin-top:-2vh}@media screen and (max-width:782px){.login-action-confirm_admin_email #login{box-sizing:border-box;margin-top:0;padding-right:4vw;padding-left:4vw;width:100vw}}.login form .forgetmenot{font-weight:400;float:right;margin-bottom:0}.login .button-primary{float:left}.login .reset-pass-submit{display:flex;flex-flow:row wrap;justify-content:space-between}.login .reset-pass-submit .button{display:inline-block;float:none;margin-bottom:6px}.login .admin-email-confirm-form .submit{text-align:center}.admin-email__later{text-align:right}.login form p.admin-email__details{margin:1.1em 0}.login h1.admin-email__heading{border-bottom:1px #f0f0f1 solid;color:#50575e;font-weight:400;padding-bottom:.5em;text-align:right}.admin-email__actions div{padding-top:1.5em}.login .admin-email__actions .button-primary{float:none;margin-right:.25em;margin-left:.25em}#login form p{margin-bottom:0}#login #reg_passmail,#login form .indicator-hint{margin-bottom:16px}#login form p.submit{margin:0;padding:0}.login label{font-size:14px;line-height:1.5;display:inline-block;margin-bottom:3px}.login .forgetmenot label,.login .pw-weak label{line-height:1.5;vertical-align:baseline}.login h1{text-align:center}.login h1 a{background-image:url(../images/w-logo-blue.png?ver=20131202);background-image:none,url(../images/wordpress-logo.svg?ver=20131107);background-size:84px;background-position:center top;background-repeat:no-repeat;color:#3c434a;height:84px;font-size:20px;font-weight:400;line-height:1.3;margin:0 auto 25px;padding:0;text-decoration:none;width:84px;text-indent:-9999px;outline:0;overflow:hidden;display:block}#login{width:320px;padding:5% 0 0;margin:auto}.login #backtoblog,.login #nav{font-size:13px;padding:0 24px}.login #nav{margin:24px 0 0}#backtoblog{margin:16px 0;word-wrap:break-word}.login #backtoblog a,.login #nav a{text-decoration:none;color:#50575e}.login #backtoblog a:hover,.login #nav a:hover,.login h1 a:hover{color:#135e96}.login #backtoblog a:focus,.login #nav a:focus,.login h1 a:focus{color:#043959}.login .privacy-policy-page-link{text-align:center;width:100%;margin:3em 0 2em}.login form .input,.login input[type=password],.login input[type=text]{font-size:24px;line-height:1.33333333;width:100%;border-width:.0625rem;padding:.1875rem .3125rem;margin:0 0 16px 6px;min-height:40px;max-height:none}.login input.password-input{font-family:Consolas,Monaco,monospace}.js.login input.password-input{padding-left:2.5rem}.login form .input,.login form input[type=checkbox],.login input[type=text]{background:#fff}.js.login-action-resetpass input[type=password],.js.login-action-resetpass input[type=text],.js.login-action-rp input[type=password],.js.login-action-rp input[type=text]{margin-bottom:0}.login #pass-strength-result{font-weight:600;margin:-1px 0 16px 5px;padding:6px 5px;text-align:center;width:100%}body.interim-login{height:auto}.interim-login #login{padding:0;margin:5px auto 20px}.interim-login.login h1 a{width:auto}.interim-login #login_error,.interim-login.login .message{margin:0 0 16px}.interim-login.login form{margin:0}.screen-reader-text,.screen-reader-text span{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}input::-ms-reveal{display:none}#language-switcher{padding:0;overflow:visible;background:0 0;border:none;box-shadow:none}#language-switcher select{margin-left:.25em}.language-switcher{margin:0 auto;padding:0 0 24px;text-align:center}.language-switcher label{margin-left:.25em}.language-switcher label .dashicons{width:auto;height:auto}.login .language-switcher .button{margin-bottom:0}@media screen and (max-height:550px){#login{padding:20px 0}#language-switcher{margin-top:0}}@media screen and (max-width:782px){.interim-login input[type=checkbox]{width:1rem;height:1rem}.interim-login input[type=checkbox]:checked:before{width:1.3125rem;height:1.3125rem;margin:-.1875rem -.25rem 0 0}#language-switcher label,#language-switcher select{margin-left:0}}@media screen and (max-width:400px){.login .language-switcher .button{display:block;margin:5px auto 0}} \ No newline at end of file diff --git a/wp-admin/css/login.css b/wp-admin/css/login.css index 8f43504c1c..fe790f0b42 100644 --- a/wp-admin/css/login.css +++ b/wp-admin/css/login.css @@ -42,8 +42,8 @@ p { } .login .message, -.login .success, -.login #login_error { +.login .notice, +.login .success { border-left: 4px solid #72aee6; padding: 12px; margin-left: 0; @@ -57,10 +57,19 @@ p { border-left-color: #00a32a; } -.login #login_error { +/* Match border color from common.css */ +.login .notice-error { border-left-color: #d63638; } +.login .login-error-list { + list-style: none; +} + +.login .login-error-list li + li { + margin-top: 4px; +} + #loginform p.submit, .login-action-lostpassword p.submit { border: none; @@ -237,6 +246,11 @@ p { margin-bottom: 0; } +#login form .indicator-hint, +#login #reg_passmail { + margin-bottom: 16px; +} + #login form p.submit { margin: 0; padding: 0; @@ -342,9 +356,7 @@ p { font-family: Consolas, Monaco, monospace; } -.js.login input.password-input, -.js.login-action-rp form .input, -.js.login-action-rp input[type="text"] { +.js.login input.password-input { padding-right: 2.5rem; } @@ -354,6 +366,8 @@ p { background: #fff; } +.js.login-action-resetpass input[type="text"], +.js.login-action-resetpass input[type="password"], .js.login-action-rp input[type="text"], .js.login-action-rp input[type="password"] { margin-bottom: 0; diff --git a/wp-admin/css/login.min.css b/wp-admin/css/login.min.css index 3ad17483e8..2b3d93755b 100644 --- a/wp-admin/css/login.min.css +++ b/wp-admin/css/login.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;min-width:0;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a{outline:0}a:active,a:hover{color:#135e96}a:focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}p{line-height:1.5}.login #login_error,.login .message,.login .success{border-left:4px solid #72aee6;padding:12px;margin-left:0;margin-bottom:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);word-wrap:break-word}.login .success{border-left-color:#00a32a}.login #login_error{border-left-color:#d63638}#loginform p.submit,.login-action-lostpassword p.submit{border:none;margin:-10px 0 20px}.login *{margin:0;padding:0}.login .input::-ms-clear{display:none}.login .pw-weak{margin-bottom:15px}.login .button.wp-hide-pw{background:0 0;border:1px solid transparent;box-shadow:none;font-size:14px;line-height:2;width:2.5rem;height:2.5rem;min-width:40px;min-height:40px;margin:0;padding:5px 9px;position:absolute;right:0;top:0}.login .button.wp-hide-pw:hover{background:0 0}.login .button.wp-hide-pw:focus{background:0 0;border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.login .button.wp-hide-pw:active{background:0 0;box-shadow:none;transform:none}.login .button.wp-hide-pw .dashicons{width:1.25rem;height:1.25rem;top:.25rem}.login .wp-pwd{position:relative}.no-js .hide-if-no-js{display:none}.login form{margin-top:20px;margin-left:0;padding:26px 24px 34px;font-weight:400;overflow:hidden;background:#fff;border:1px solid #c3c4c7;box-shadow:0 1px 3px rgba(0,0,0,.04)}.login form.shake{animation:shake .2s cubic-bezier(.19,.49,.38,.79) both;animation-iteration-count:3;transform:translateX(0)}@keyframes shake{25%{transform:translateX(-20px)}75%{transform:translateX(20px)}100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.login form.shake{animation:none;transform:none}}.login-action-confirm_admin_email #login{width:60vw;max-width:650px;margin-top:-2vh}@media screen and (max-width:782px){.login-action-confirm_admin_email #login{box-sizing:border-box;margin-top:0;padding-left:4vw;padding-right:4vw;width:100vw}}.login form .forgetmenot{font-weight:400;float:left;margin-bottom:0}.login .button-primary{float:right}.login .reset-pass-submit{display:flex;flex-flow:row wrap;justify-content:space-between}.login .reset-pass-submit .button{display:inline-block;float:none;margin-bottom:6px}.login .admin-email-confirm-form .submit{text-align:center}.admin-email__later{text-align:left}.login form p.admin-email__details{margin:1.1em 0}.login h1.admin-email__heading{border-bottom:1px #f0f0f1 solid;color:#50575e;font-weight:400;padding-bottom:.5em;text-align:left}.admin-email__actions div{padding-top:1.5em}.login .admin-email__actions .button-primary{float:none;margin-left:.25em;margin-right:.25em}#login form p{margin-bottom:0}#login form p.submit{margin:0;padding:0}.login label{font-size:14px;line-height:1.5;display:inline-block;margin-bottom:3px}.login .forgetmenot label,.login .pw-weak label{line-height:1.5;vertical-align:baseline}.login h1{text-align:center}.login h1 a{background-image:url(../images/w-logo-blue.png?ver=20131202);background-image:none,url(../images/wordpress-logo.svg?ver=20131107);background-size:84px;background-position:center top;background-repeat:no-repeat;color:#3c434a;height:84px;font-size:20px;font-weight:400;line-height:1.3;margin:0 auto 25px;padding:0;text-decoration:none;width:84px;text-indent:-9999px;outline:0;overflow:hidden;display:block}#login{width:320px;padding:5% 0 0;margin:auto}.login #backtoblog,.login #nav{font-size:13px;padding:0 24px}.login #nav{margin:24px 0 0}#backtoblog{margin:16px 0;word-wrap:break-word}.login #backtoblog a,.login #nav a{text-decoration:none;color:#50575e}.login #backtoblog a:hover,.login #nav a:hover,.login h1 a:hover{color:#135e96}.login #backtoblog a:focus,.login #nav a:focus,.login h1 a:focus{color:#043959}.login .privacy-policy-page-link{text-align:center;width:100%;margin:3em 0 2em}.login form .input,.login input[type=password],.login input[type=text]{font-size:24px;line-height:1.33333333;width:100%;border-width:.0625rem;padding:.1875rem .3125rem;margin:0 6px 16px 0;min-height:40px;max-height:none}.login input.password-input{font-family:Consolas,Monaco,monospace}.js.login input.password-input,.js.login-action-rp form .input,.js.login-action-rp input[type=text]{padding-right:2.5rem}.login form .input,.login form input[type=checkbox],.login input[type=text]{background:#fff}.js.login-action-rp input[type=password],.js.login-action-rp input[type=text]{margin-bottom:0}.login #pass-strength-result{font-weight:600;margin:-1px 5px 16px 0;padding:6px 5px;text-align:center;width:100%}body.interim-login{height:auto}.interim-login #login{padding:0;margin:5px auto 20px}.interim-login.login h1 a{width:auto}.interim-login #login_error,.interim-login.login .message{margin:0 0 16px}.interim-login.login form{margin:0}.screen-reader-text,.screen-reader-text span{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}input::-ms-reveal{display:none}#language-switcher{padding:0;overflow:visible;background:0 0;border:none;box-shadow:none}#language-switcher select{margin-right:.25em}.language-switcher{margin:0 auto;padding:0 0 24px;text-align:center}.language-switcher label{margin-right:.25em}.language-switcher label .dashicons{width:auto;height:auto}.login .language-switcher .button{margin-bottom:0}@media screen and (max-height:550px){#login{padding:20px 0}#language-switcher{margin-top:0}}@media screen and (max-width:782px){.interim-login input[type=checkbox]{width:1rem;height:1rem}.interim-login input[type=checkbox]:checked:before{width:1.3125rem;height:1.3125rem;margin:-.1875rem 0 0 -.25rem}#language-switcher label,#language-switcher select{margin-right:0}}@media screen and (max-width:400px){.login .language-switcher .button{display:block;margin:5px auto 0}} \ No newline at end of file +body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;min-width:0;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a{outline:0}a:active,a:hover{color:#135e96}a:focus{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8)}p{line-height:1.5}.login .message,.login .notice,.login .success{border-left:4px solid #72aee6;padding:12px;margin-left:0;margin-bottom:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);word-wrap:break-word}.login .success{border-left-color:#00a32a}.login .notice-error{border-left-color:#d63638}.login .login-error-list{list-style:none}.login .login-error-list li+li{margin-top:4px}#loginform p.submit,.login-action-lostpassword p.submit{border:none;margin:-10px 0 20px}.login *{margin:0;padding:0}.login .input::-ms-clear{display:none}.login .pw-weak{margin-bottom:15px}.login .button.wp-hide-pw{background:0 0;border:1px solid transparent;box-shadow:none;font-size:14px;line-height:2;width:2.5rem;height:2.5rem;min-width:40px;min-height:40px;margin:0;padding:5px 9px;position:absolute;right:0;top:0}.login .button.wp-hide-pw:hover{background:0 0}.login .button.wp-hide-pw:focus{background:0 0;border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.login .button.wp-hide-pw:active{background:0 0;box-shadow:none;transform:none}.login .button.wp-hide-pw .dashicons{width:1.25rem;height:1.25rem;top:.25rem}.login .wp-pwd{position:relative}.no-js .hide-if-no-js{display:none}.login form{margin-top:20px;margin-left:0;padding:26px 24px 34px;font-weight:400;overflow:hidden;background:#fff;border:1px solid #c3c4c7;box-shadow:0 1px 3px rgba(0,0,0,.04)}.login form.shake{animation:shake .2s cubic-bezier(.19,.49,.38,.79) both;animation-iteration-count:3;transform:translateX(0)}@keyframes shake{25%{transform:translateX(-20px)}75%{transform:translateX(20px)}100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.login form.shake{animation:none;transform:none}}.login-action-confirm_admin_email #login{width:60vw;max-width:650px;margin-top:-2vh}@media screen and (max-width:782px){.login-action-confirm_admin_email #login{box-sizing:border-box;margin-top:0;padding-left:4vw;padding-right:4vw;width:100vw}}.login form .forgetmenot{font-weight:400;float:left;margin-bottom:0}.login .button-primary{float:right}.login .reset-pass-submit{display:flex;flex-flow:row wrap;justify-content:space-between}.login .reset-pass-submit .button{display:inline-block;float:none;margin-bottom:6px}.login .admin-email-confirm-form .submit{text-align:center}.admin-email__later{text-align:left}.login form p.admin-email__details{margin:1.1em 0}.login h1.admin-email__heading{border-bottom:1px #f0f0f1 solid;color:#50575e;font-weight:400;padding-bottom:.5em;text-align:left}.admin-email__actions div{padding-top:1.5em}.login .admin-email__actions .button-primary{float:none;margin-left:.25em;margin-right:.25em}#login form p{margin-bottom:0}#login #reg_passmail,#login form .indicator-hint{margin-bottom:16px}#login form p.submit{margin:0;padding:0}.login label{font-size:14px;line-height:1.5;display:inline-block;margin-bottom:3px}.login .forgetmenot label,.login .pw-weak label{line-height:1.5;vertical-align:baseline}.login h1{text-align:center}.login h1 a{background-image:url(../images/w-logo-blue.png?ver=20131202);background-image:none,url(../images/wordpress-logo.svg?ver=20131107);background-size:84px;background-position:center top;background-repeat:no-repeat;color:#3c434a;height:84px;font-size:20px;font-weight:400;line-height:1.3;margin:0 auto 25px;padding:0;text-decoration:none;width:84px;text-indent:-9999px;outline:0;overflow:hidden;display:block}#login{width:320px;padding:5% 0 0;margin:auto}.login #backtoblog,.login #nav{font-size:13px;padding:0 24px}.login #nav{margin:24px 0 0}#backtoblog{margin:16px 0;word-wrap:break-word}.login #backtoblog a,.login #nav a{text-decoration:none;color:#50575e}.login #backtoblog a:hover,.login #nav a:hover,.login h1 a:hover{color:#135e96}.login #backtoblog a:focus,.login #nav a:focus,.login h1 a:focus{color:#043959}.login .privacy-policy-page-link{text-align:center;width:100%;margin:3em 0 2em}.login form .input,.login input[type=password],.login input[type=text]{font-size:24px;line-height:1.33333333;width:100%;border-width:.0625rem;padding:.1875rem .3125rem;margin:0 6px 16px 0;min-height:40px;max-height:none}.login input.password-input{font-family:Consolas,Monaco,monospace}.js.login input.password-input{padding-right:2.5rem}.login form .input,.login form input[type=checkbox],.login input[type=text]{background:#fff}.js.login-action-resetpass input[type=password],.js.login-action-resetpass input[type=text],.js.login-action-rp input[type=password],.js.login-action-rp input[type=text]{margin-bottom:0}.login #pass-strength-result{font-weight:600;margin:-1px 5px 16px 0;padding:6px 5px;text-align:center;width:100%}body.interim-login{height:auto}.interim-login #login{padding:0;margin:5px auto 20px}.interim-login.login h1 a{width:auto}.interim-login #login_error,.interim-login.login .message{margin:0 0 16px}.interim-login.login form{margin:0}.screen-reader-text,.screen-reader-text span{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}input::-ms-reveal{display:none}#language-switcher{padding:0;overflow:visible;background:0 0;border:none;box-shadow:none}#language-switcher select{margin-right:.25em}.language-switcher{margin:0 auto;padding:0 0 24px;text-align:center}.language-switcher label{margin-right:.25em}.language-switcher label .dashicons{width:auto;height:auto}.login .language-switcher .button{margin-bottom:0}@media screen and (max-height:550px){#login{padding:20px 0}#language-switcher{margin-top:0}}@media screen and (max-width:782px){.interim-login input[type=checkbox]{width:1rem;height:1rem}.interim-login input[type=checkbox]:checked:before{width:1.3125rem;height:1.3125rem;margin:-.1875rem 0 0 -.25rem}#language-switcher label,#language-switcher select{margin-right:0}}@media screen and (max-width:400px){.login .language-switcher .button{display:block;margin:5px auto 0}} \ No newline at end of file diff --git a/wp-admin/includes/misc.php b/wp-admin/includes/misc.php index 8c4caa468d..090282062f 100644 --- a/wp-admin/includes/misc.php +++ b/wp-admin/includes/misc.php @@ -1642,147 +1642,3 @@ function wp_check_php_version() { return $response; } - -/** - * Creates and returns the markup for an admin notice. - * - * @since 6.4.0 - * - * @param string $message The message. - * @param array $args { - * Optional. An array of arguments for the admin notice. Default empty array. - * - * @type string $type Optional. The type of admin notice. - * For example, 'error', 'success', 'warning', 'info'. - * Default empty string. - * @type bool $dismissible Optional. Whether the admin notice is dismissible. Default false. - * @type string $id Optional. The value of the admin notice's ID attribute. Default empty string. - * @type string[] $additional_classes Optional. A string array of class names. Default empty array. - * @type string[] $attributes Optional. Additional attributes for the notice div. Default empty array. - * @type bool $paragraph_wrap Optional. Whether to wrap the message in paragraph tags. Default true. - * } - * @return string The markup for an admin notice. - */ -function wp_get_admin_notice( $message, $args = array() ) { - $defaults = array( - 'type' => '', - 'dismissible' => false, - 'id' => '', - 'additional_classes' => array(), - 'attributes' => array(), - 'paragraph_wrap' => true, - ); - - $args = wp_parse_args( $args, $defaults ); - - /** - * Filters the arguments for an admin notice. - * - * @since 6.4.0 - * - * @param array $args The arguments for the admin notice. - * @param string $message The message for the admin notice. - */ - $args = apply_filters( 'wp_admin_notice_args', $args, $message ); - $id = ''; - $classes = 'notice'; - $attributes = ''; - - if ( is_string( $args['id'] ) ) { - $trimmed_id = trim( $args['id'] ); - - if ( '' !== $trimmed_id ) { - $id = 'id="' . $trimmed_id . '" '; - } - } - - if ( is_string( $args['type'] ) ) { - $type = trim( $args['type'] ); - - if ( str_contains( $type, ' ' ) ) { - _doing_it_wrong( - __FUNCTION__, - sprintf( - /* translators: %s: The "type" key. */ - __( 'The %s key must be a string without spaces.' ), - 'type' - ), - '6.4.0' - ); - } - - if ( '' !== $type ) { - $classes .= ' notice-' . $type; - } - } - - if ( true === $args['dismissible'] ) { - $classes .= ' is-dismissible'; - } - - if ( is_array( $args['additional_classes'] ) && ! empty( $args['additional_classes'] ) ) { - $classes .= ' ' . implode( ' ', $args['additional_classes'] ); - } - - if ( is_array( $args['attributes'] ) && ! empty( $args['attributes'] ) ) { - $attributes = ''; - foreach ( $args['attributes'] as $attr => $val ) { - if ( is_bool( $val ) ) { - $attributes .= $val ? ' ' . $attr : ''; - } elseif ( is_int( $attr ) ) { - $attributes .= ' ' . esc_attr( trim( $val ) ); - } elseif ( $val ) { - $attributes .= ' ' . $attr . '="' . esc_attr( trim( $val ) ) . '"'; - } - } - } - - if ( false !== $args['paragraph_wrap'] ) { - $message = "

$message

"; - } - - $markup = sprintf( '
%4$s
', $id, $classes, $attributes, $message ); - - /** - * Filters the markup for an admin notice. - * - * @since 6.4.0 - * - * @param string $markup The HTML markup for the admin notice. - * @param string $message The message for the admin notice. - * @param array $args The arguments for the admin notice. - */ - return apply_filters( 'wp_admin_notice_markup', $markup, $message, $args ); -} - -/** - * Outputs an admin notice. - * - * @since 6.4.0 - * - * @param string $message The message to output. - * @param array $args { - * Optional. An array of arguments for the admin notice. Default empty array. - * - * @type string $type Optional. The type of admin notice. - * For example, 'error', 'success', 'warning', 'info'. - * Default empty string. - * @type bool $dismissible Optional. Whether the admin notice is dismissible. Default false. - * @type string $id Optional. The value of the admin notice's ID attribute. Default empty string. - * @type string[] $additional_classes Optional. A string array of class names. Default empty array. - * @type bool $paragraph_wrap Optional. Whether to wrap the message in paragraph tags. Default true. - * } - */ -function wp_admin_notice( $message, $args = array() ) { - /** - * Fires before an admin notice is output. - * - * @since 6.4.0 - * - * @param string $message The message for the admin notice. - * @param array $args The arguments for the admin notice. - */ - do_action( 'wp_admin_notice', $message, $args ); - - echo wp_kses_post( wp_get_admin_notice( $message, $args ) ); -} diff --git a/wp-includes/functions.php b/wp-includes/functions.php index f3c4af1405..d2c02abedd 100644 --- a/wp-includes/functions.php +++ b/wp-includes/functions.php @@ -8762,3 +8762,147 @@ function is_php_version_compatible( $required ) { function wp_fuzzy_number_match( $expected, $actual, $precision = 1 ) { return abs( (float) $expected - (float) $actual ) <= $precision; } + +/** + * Creates and returns the markup for an admin notice. + * + * @since 6.4.0 + * + * @param string $message The message. + * @param array $args { + * Optional. An array of arguments for the admin notice. Default empty array. + * + * @type string $type Optional. The type of admin notice. + * For example, 'error', 'success', 'warning', 'info'. + * Default empty string. + * @type bool $dismissible Optional. Whether the admin notice is dismissible. Default false. + * @type string $id Optional. The value of the admin notice's ID attribute. Default empty string. + * @type string[] $additional_classes Optional. A string array of class names. Default empty array. + * @type string[] $attributes Optional. Additional attributes for the notice div. Default empty array. + * @type bool $paragraph_wrap Optional. Whether to wrap the message in paragraph tags. Default true. + * } + * @return string The markup for an admin notice. + */ +function wp_get_admin_notice( $message, $args = array() ) { + $defaults = array( + 'type' => '', + 'dismissible' => false, + 'id' => '', + 'additional_classes' => array(), + 'attributes' => array(), + 'paragraph_wrap' => true, + ); + + $args = wp_parse_args( $args, $defaults ); + + /** + * Filters the arguments for an admin notice. + * + * @since 6.4.0 + * + * @param array $args The arguments for the admin notice. + * @param string $message The message for the admin notice. + */ + $args = apply_filters( 'wp_admin_notice_args', $args, $message ); + $id = ''; + $classes = 'notice'; + $attributes = ''; + + if ( is_string( $args['id'] ) ) { + $trimmed_id = trim( $args['id'] ); + + if ( '' !== $trimmed_id ) { + $id = 'id="' . $trimmed_id . '" '; + } + } + + if ( is_string( $args['type'] ) ) { + $type = trim( $args['type'] ); + + if ( str_contains( $type, ' ' ) ) { + _doing_it_wrong( + __FUNCTION__, + sprintf( + /* translators: %s: The "type" key. */ + __( 'The %s key must be a string without spaces.' ), + 'type' + ), + '6.4.0' + ); + } + + if ( '' !== $type ) { + $classes .= ' notice-' . $type; + } + } + + if ( true === $args['dismissible'] ) { + $classes .= ' is-dismissible'; + } + + if ( is_array( $args['additional_classes'] ) && ! empty( $args['additional_classes'] ) ) { + $classes .= ' ' . implode( ' ', $args['additional_classes'] ); + } + + if ( is_array( $args['attributes'] ) && ! empty( $args['attributes'] ) ) { + $attributes = ''; + foreach ( $args['attributes'] as $attr => $val ) { + if ( is_bool( $val ) ) { + $attributes .= $val ? ' ' . $attr : ''; + } elseif ( is_int( $attr ) ) { + $attributes .= ' ' . esc_attr( trim( $val ) ); + } elseif ( $val ) { + $attributes .= ' ' . $attr . '="' . esc_attr( trim( $val ) ) . '"'; + } + } + } + + if ( false !== $args['paragraph_wrap'] ) { + $message = "

$message

"; + } + + $markup = sprintf( '
%4$s
', $id, $classes, $attributes, $message ); + + /** + * Filters the markup for an admin notice. + * + * @since 6.4.0 + * + * @param string $markup The HTML markup for the admin notice. + * @param string $message The message for the admin notice. + * @param array $args The arguments for the admin notice. + */ + return apply_filters( 'wp_admin_notice_markup', $markup, $message, $args ); +} + +/** + * Outputs an admin notice. + * + * @since 6.4.0 + * + * @param string $message The message to output. + * @param array $args { + * Optional. An array of arguments for the admin notice. Default empty array. + * + * @type string $type Optional. The type of admin notice. + * For example, 'error', 'success', 'warning', 'info'. + * Default empty string. + * @type bool $dismissible Optional. Whether the admin notice is dismissible. Default false. + * @type string $id Optional. The value of the admin notice's ID attribute. Default empty string. + * @type string[] $additional_classes Optional. A string array of class names. Default empty array. + * @type bool $paragraph_wrap Optional. Whether to wrap the message in paragraph tags. Default true. + * } + */ +function wp_admin_notice( $message, $args = array() ) { + /** + * Fires before an admin notice is output. + * + * @since 6.4.0 + * + * @param string $message The message for the admin notice. + * @param array $args The arguments for the admin notice. + */ + do_action( 'wp_admin_notice', $message, $args ); + + echo wp_kses_post( wp_get_admin_notice( $message, $args ) ); +} diff --git a/wp-includes/version.php b/wp-includes/version.php index 9805541c04..f1489bab3d 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.4-alpha-56653'; +$wp_version = '6.4-alpha-56654'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. diff --git a/wp-login.php b/wp-login.php index de2ee486c7..60877bdb70 100644 --- a/wp-login.php +++ b/wp-login.php @@ -228,21 +228,35 @@ function login_header( $title = 'Log In', $message = '', $wp_error = null ) { } if ( $wp_error->has_errors() ) { - $errors = ''; - $messages = ''; + $error_list = array(); + $messages = ''; foreach ( $wp_error->get_error_codes() as $code ) { $severity = $wp_error->get_error_data( $code ); foreach ( $wp_error->get_error_messages( $code ) as $error_message ) { if ( 'message' === $severity ) { - $messages .= ' ' . $error_message . "
\n"; + $messages .= '

' . $error_message . '

'; } else { - $errors .= ' ' . $error_message . "
\n"; + $error_list[] = $error_message; } } } - if ( ! empty( $errors ) ) { + if ( ! empty( $error_list ) ) { + $errors = ''; + + if ( count( $error_list ) > 1 ) { + $errors .= ''; + } else { + $errors .= '

' . $error_message . '

'; + } + /** * Filters the error messages displayed above the login form. * @@ -250,7 +264,15 @@ function login_header( $title = 'Log In', $message = '', $wp_error = null ) { * * @param string $errors Login error message. */ - echo '
' . apply_filters( 'login_errors', $errors ) . "
\n"; + $errors = apply_filters( 'login_errors', $errors ); + wp_admin_notice( + $errors, + array( + 'type' => 'error', + 'id' => 'login_error', + 'paragraph_wrap' => false, + ) + ); } if ( ! empty( $messages ) ) { @@ -261,7 +283,16 @@ function login_header( $title = 'Log In', $message = '', $wp_error = null ) { * * @param string $messages Login messages. */ - echo '

' . apply_filters( 'login_messages', $messages ) . "

\n"; + $messages = apply_filters( 'login_messages', $messages ); + wp_admin_notice( + $messages, + array( + 'type' => 'info', + 'id' => 'login-message', + 'additional_classes' => array( 'message' ), + 'paragraph_wrap' => false, + ) + ); } } } // End of login_header(). @@ -399,7 +430,6 @@ function login_footer( $input_id = '' ) { do_action( 'login_footer' ); ?> -
' . __( 'Please enter your username or email address. You will receive an email message with instructions on how to reset your password.' ) . '

', $errors ); + login_header( + __( 'Lost Password' ), + wp_get_admin_notice( + __( 'Please enter your username or email address. You will receive an email message with instructions on how to reset your password.' ), + array( + 'type' => 'info', + 'additional_classes' => array( 'message' ), + ) + ), + $errors + ); $user_login = ''; @@ -946,7 +986,16 @@ switch ( $action ) { if ( ( ! $errors->has_errors() ) && isset( $_POST['pass1'] ) && ! empty( $_POST['pass1'] ) ) { reset_password( $user, $_POST['pass1'] ); setcookie( $rp_cookie, ' ', time() - YEAR_IN_SECONDS, $rp_path, COOKIE_DOMAIN, is_ssl(), true ); - login_header( __( 'Password Reset' ), '

' . __( 'Your password has been reset.' ) . ' ' . __( 'Log in' ) . '

' ); + login_header( + __( 'Password Reset' ), + wp_get_admin_notice( + __( 'Your password has been reset.' ) . ' ' . __( 'Log in' ) . '', + array( + 'type' => 'info', + 'additional_classes' => array( 'message', 'reset-pass' ), + ) + ) + ); login_footer(); exit; } @@ -954,7 +1003,17 @@ switch ( $action ) { wp_enqueue_script( 'utils' ); wp_enqueue_script( 'user-profile' ); - login_header( __( 'Reset Password' ), '

' . __( 'Enter your new password below or generate one.' ) . '

', $errors ); + login_header( + __( 'Reset Password' ), + wp_get_admin_notice( + __( 'Enter your new password below or generate one.' ), + array( + 'type' => 'info', + 'additional_classes' => array( 'message', 'reset-pass' ), + ) + ), + $errors + ); ?>
@@ -985,7 +1044,6 @@ switch ( $action ) {

-
' . __( 'Register For This Site' ) . '

', $errors ); + login_header( + __( 'Registration Form' ), + wp_get_admin_notice( + __( 'Register For This Site' ), + array( + 'type' => 'info', + 'additional_classes' => array( 'message', 'register' ), + ) + ), + $errors + ); ?> @@ -1104,7 +1172,6 @@ switch ( $action ) {

-