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
This commit is contained in:
joedolson 2023-09-21 18:24:15 +00:00
parent 198543cf2f
commit 491a21da64
8 changed files with 268 additions and 173 deletions

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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.' ),
'<code>type</code>'
),
'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 = "<p>$message</p>";
}
$markup = sprintf( '<div %1$sclass="%2$s"%3$s>%4$s</div>', $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 ) );
}

View File

@ -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.' ),
'<code>type</code>'
),
'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 = "<p>$message</p>";
}
$markup = sprintf( '<div %1$sclass="%2$s"%3$s>%4$s</div>', $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 ) );
}

View File

@ -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.

View File

@ -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 . "<br />\n";
$messages .= '<p>' . $error_message . '</p>';
} else {
$errors .= ' ' . $error_message . "<br />\n";
$error_list[] = $error_message;
}
}
}
if ( ! empty( $errors ) ) {
if ( ! empty( $error_list ) ) {
$errors = '';
if ( count( $error_list ) > 1 ) {
$errors .= '<ul class="login-error-list">';
foreach ( $error_list as $item ) {
$errors .= '<li>' . $item . '</li>';
}
$errors .= '</ul>';
} else {
$errors .= '<p>' . $error_message . '</p>';
}
/**
* 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 '<div id="login_error">' . apply_filters( 'login_errors', $errors ) . "</div>\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 '<p class="message" id="login-message">' . apply_filters( 'login_messages', $messages ) . "</p>\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' );
?>
<div class="clear"></div>
</body>
</html>
<?php
@ -829,7 +859,17 @@ switch ( $action ) {
*/
do_action( 'lost_password', $errors );
login_header( __( 'Lost Password' ), '<p class="message">' . __( 'Please enter your username or email address. You will receive an email message with instructions on how to reset your password.' ) . '</p>', $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' ), '<p class="message reset-pass">' . __( 'Your password has been reset.' ) . ' <a href="' . esc_url( wp_login_url() ) . '">' . __( 'Log in' ) . '</a></p>' );
login_header(
__( 'Password Reset' ),
wp_get_admin_notice(
__( 'Your password has been reset.' ) . ' <a href="' . esc_url( wp_login_url() ) . '">' . __( 'Log in' ) . '</a>',
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' ), '<p class="message reset-pass">' . __( 'Enter your new password below or generate one.' ) . '</p>', $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
);
?>
<form name="resetpassform" id="resetpassform" action="<?php echo esc_url( network_site_url( 'wp-login.php?action=resetpass', 'login_post' ) ); ?>" method="post" autocomplete="off">
@ -985,7 +1044,6 @@ switch ( $action ) {
</p>
<p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
<br class="clear" />
<?php
@ -1079,7 +1137,17 @@ switch ( $action ) {
*/
$redirect_to = apply_filters( 'registration_redirect', $registration_redirect, $errors );
login_header( __( 'Registration Form' ), '<p class="message register">' . __( 'Register For This Site' ) . '</p>', $errors );
login_header(
__( 'Registration Form' ),
wp_get_admin_notice(
__( 'Register For This Site' ),
array(
'type' => 'info',
'additional_classes' => array( 'message', 'register' ),
)
),
$errors
);
?>
<form name="registerform" id="registerform" action="<?php echo esc_url( site_url( 'wp-login.php?action=register', 'login_post' ) ); ?>" method="post" novalidate="novalidate">
@ -1104,7 +1172,6 @@ switch ( $action ) {
<p id="reg_passmail">
<?php _e( 'Registration confirmation will be emailed to you.' ); ?>
</p>
<br class="clear" />
<input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Register' ); ?>" />