vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Login and Registration: Improve HTML for errors and notices.

Browse Source 
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.

git-svn-id: https://develop.svn.wordpress.org/trunk@56654 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson 2023-09-21 18:22:10 +00:00
parent fa0969d06a
commit b9adbb33da
6 changed files with 249 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/wp-admin/css/login.css
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;

144
src/wp-admin/includes/misc.php
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 ) );
}

144
src/wp-includes/functions.php
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 ) );
}

95
src/wp-login.php
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' ); ?>" />

4
tests/phpunit/tests/admin/wpAdminNotice.php → tests/phpunit/tests/functions/wpAdminNotice.php
View File

@ -3,11 +3,11 @@
/**
* Tests for `wp_admin_notice()`.
*
* @group admin
* @group functions.php
*
* @covers ::wp_admin_notice
*/
class Tests_Admin_WpAdminNotice extends WP_UnitTestCase {
class Tests_Functions_WpAdminNotice extends WP_UnitTestCase {
/**
* Tests that `wp_admin_notice()` outputs the expected admin notice markup.

4
tests/phpunit/tests/admin/wpGetAdminNotice.php → tests/phpunit/tests/functions/wpGetAdminNotice.php
View File

@ -3,11 +3,11 @@
/**
* Tests for `wp_get_admin_notice()`.
*
* @group admin
* @group functions.php
*
* @covers ::wp_get_admin_notice
*/
class Tests_Admin_WpGetAdminNotice extends WP_UnitTestCase {
class Tests_Functions_WpGetAdminNotice extends WP_UnitTestCase {
/**
* Tests that `wp_get_admin_notice()` returns the expected admin notice markup.