WordPress.org
Get WordPress

Make WordPress Core

Changeset 56654


Ignore:
Timestamp:
09/21/2023 06:22:10 PM (13 months ago)
Author:
joedolson
Message:

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.

Location:
trunk
Files:
4 edited
2 moved

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/login.css

    r55582 r56654  
    4343
    4444.login .message,
    45 .login .success,
    46 .login #login_error {
     45.login .notice,
     46.login .success {
    4747    border-left: 4px solid #72aee6;
    4848    padding: 12px;
    … …  
    5858}
    5959
    60 .login #login_error {
     60/* Match border color from common.css */
     61.login .notice-error {
    6162    border-left-color: #d63638;
     63}
     64
     65.login .login-error-list {
     66    list-style: none;
     67}
     68
     69.login .login-error-list li + li {
     70    margin-top: 4px;
    6271}
    6372
    … …  
    238247}
    239248
     249#login form .indicator-hint,
     250#login #reg_passmail {
     251    margin-bottom: 16px;
     252}
     253
    240254#login form p.submit {
    241255    margin: 0;
    … …  
    343357}
    344358
    345 .js.login input.password-input,
    346 .js.login-action-rp form .input,
    347 .js.login-action-rp input[type="text"] {
     359.js.login input.password-input {
    348360    padding-right: 2.5rem;
    349361}
    … …  
    355367}
    356368
     369.js.login-action-resetpass input[type="text"],
     370.js.login-action-resetpass input[type="password"],
    357371.js.login-action-rp input[type="text"],
    358372.js.login-action-rp input[type="password"] {

  • trunk/src/wp-admin/includes/misc.php

    r56603 r56654  
    16431643    return $response;
    16441644}
    1645 
    1646 /**
    1647  * Creates and returns the markup for an admin notice.
    1648  *
    1649  * @since 6.4.0
    1650  *
    1651  * @param string $message The message.
    1652  * @param array  $args {
    1653  *     Optional. An array of arguments for the admin notice. Default empty array.
    1654  *
    1655  *     @type string   $type               Optional. The type of admin notice.
    1656  *                                        For example, 'error', 'success', 'warning', 'info'.
    1657  *                                        Default empty string.
    1658  *     @type bool     $dismissible        Optional. Whether the admin notice is dismissible. Default false.
    1659  *     @type string   $id                 Optional. The value of the admin notice's ID attribute. Default empty string.
    1660  *     @type string[] $additional_classes Optional. A string array of class names. Default empty array.
    1661  *     @type string[] $attributes         Optional. Additional attributes for the notice div. Default empty array.
    1662  *     @type bool     $paragraph_wrap     Optional. Whether to wrap the message in paragraph tags. Default true.
    1663  * }
    1664  * @return string The markup for an admin notice.
    1665  */
    1666 function wp_get_admin_notice( $message, $args = array() ) {
    1667     $defaults = array(
    1668         'type'               => '',
    1669         'dismissible'        => false,
    1670         'id'                 => '',
    1671         'additional_classes' => array(),
    1672         'attributes'         => array(),
    1673         'paragraph_wrap'     => true,
    1674     );
    1675 
    1676     $args = wp_parse_args( $args, $defaults );
    1677 
    1678     /**
    1679      * Filters the arguments for an admin notice.
    1680      *
    1681      * @since 6.4.0
    1682      *
    1683      * @param array  $args    The arguments for the admin notice.
    1684      * @param string $message The message for the admin notice.
    1685      */
    1686     $args       = apply_filters( 'wp_admin_notice_args', $args, $message );
    1687     $id         = '';
    1688     $classes    = 'notice';
    1689     $attributes = '';
    1690 
    1691     if ( is_string( $args['id'] ) ) {
    1692         $trimmed_id = trim( $args['id'] );
    1693 
    1694         if ( '' !== $trimmed_id ) {
    1695             $id = 'id="' . $trimmed_id . '" ';
    1696         }
    1697     }
    1698 
    1699     if ( is_string( $args['type'] ) ) {
    1700         $type = trim( $args['type'] );
    1701 
    1702         if ( str_contains( $type, ' ' ) ) {
    1703             _doing_it_wrong(
    1704                 __FUNCTION__,
    1705                 sprintf(
    1706                     /* translators: %s: The "type" key. */
    1707                     __( 'The %s key must be a string without spaces.' ),
    1708                     '<code>type</code>'
    1709                 ),
    1710                 '6.4.0'
    1711             );
    1712         }
    1713 
    1714         if ( '' !== $type ) {
    1715             $classes .= ' notice-' . $type;
    1716         }
    1717     }
    1718 
    1719     if ( true === $args['dismissible'] ) {
    1720         $classes .= ' is-dismissible';
    1721     }
    1722 
    1723     if ( is_array( $args['additional_classes'] ) && ! empty( $args['additional_classes'] ) ) {
    1724         $classes .= ' ' . implode( ' ', $args['additional_classes'] );
    1725     }
    1726 
    1727     if ( is_array( $args['attributes'] ) && ! empty( $args['attributes'] ) ) {
    1728         $attributes = '';
    1729         foreach ( $args['attributes'] as $attr => $val ) {
    1730             if ( is_bool( $val ) ) {
    1731                 $attributes .= $val ? ' ' . $attr : '';
    1732             } elseif ( is_int( $attr ) ) {
    1733                 $attributes .= ' ' . esc_attr( trim( $val ) );
    1734             } elseif ( $val ) {
    1735                 $attributes .= ' ' . $attr . '="' . esc_attr( trim( $val ) ) . '"';
    1736             }
    1737         }
    1738     }
    1739 
    1740     if ( false !== $args['paragraph_wrap'] ) {
    1741         $message = "<p>$message</p>";
    1742     }
    1743 
    1744     $markup = sprintf( '<div %1$sclass="%2$s"%3$s>%4$s</div>', $id, $classes, $attributes, $message );
    1745 
    1746     /**
    1747      * Filters the markup for an admin notice.
    1748      *
    1749      * @since 6.4.0
    1750      *
    1751      * @param string $markup  The HTML markup for the admin notice.
    1752      * @param string $message The message for the admin notice.
    1753      * @param array  $args    The arguments for the admin notice.
    1754      */
    1755     return apply_filters( 'wp_admin_notice_markup', $markup, $message, $args );
    1756 }
    1757 
    1758 /**
    1759  * Outputs an admin notice.
    1760  *
    1761  * @since 6.4.0
    1762  *
    1763  * @param string $message The message to output.
    1764  * @param array  $args {
    1765  *     Optional. An array of arguments for the admin notice. Default empty array.
    1766  *
    1767  *     @type string   $type               Optional. The type of admin notice.
    1768  *                                        For example, 'error', 'success', 'warning', 'info'.
    1769  *                                        Default empty string.
    1770  *     @type bool     $dismissible        Optional. Whether the admin notice is dismissible. Default false.
    1771  *     @type string   $id                 Optional. The value of the admin notice's ID attribute. Default empty string.
    1772  *     @type string[] $additional_classes Optional. A string array of class names. Default empty array.
    1773  *     @type bool     $paragraph_wrap     Optional. Whether to wrap the message in paragraph tags. Default true.
    1774  * }
    1775  */
    1776 function wp_admin_notice( $message, $args = array() ) {
    1777     /**
    1778      * Fires before an admin notice is output.
    1779      *
    1780      * @since 6.4.0
    1781      *
    1782      * @param string $message The message for the admin notice.
    1783      * @param array  $args    The arguments for the admin notice.
    1784      */
    1785     do_action( 'wp_admin_notice', $message, $args );
    1786 
    1787     echo wp_kses_post( wp_get_admin_notice( $message, $args ) );
    1788 }

  • trunk/src/wp-includes/functions.php

    r56570 r56654  
    87638763    return abs( (float) $expected - (float) $actual ) <= $precision;
    87648764}
     8765
     8766/**
     8767 * Creates and returns the markup for an admin notice.
     8768 *
     8769 * @since 6.4.0
     8770 *
     8771 * @param string $message The message.
     8772 * @param array  $args {
     8773 *     Optional. An array of arguments for the admin notice. Default empty array.
     8774 *
     8775 *     @type string   $type               Optional. The type of admin notice.
     8776 *                                        For example, 'error', 'success', 'warning', 'info'.
     8777 *                                        Default empty string.
     8778 *     @type bool     $dismissible        Optional. Whether the admin notice is dismissible. Default false.
     8779 *     @type string   $id                 Optional. The value of the admin notice's ID attribute. Default empty string.
     8780 *     @type string[] $additional_classes Optional. A string array of class names. Default empty array.
     8781 *     @type string[] $attributes         Optional. Additional attributes for the notice div. Default empty array.
     8782 *     @type bool     $paragraph_wrap     Optional. Whether to wrap the message in paragraph tags. Default true.
     8783 * }
     8784 * @return string The markup for an admin notice.
     8785 */
     8786function wp_get_admin_notice( $message, $args = array() ) {
     8787    $defaults = array(
     8788        'type'               => '',
     8789        'dismissible'        => false,
     8790        'id'                 => '',
     8791        'additional_classes' => array(),
     8792        'attributes'         => array(),
     8793        'paragraph_wrap'     => true,
     8794    );
     8795
     8796    $args = wp_parse_args( $args, $defaults );
     8797
     8798    /**
     8799     * Filters the arguments for an admin notice.
     8800     *
     8801     * @since 6.4.0
     8802     *
     8803     * @param array  $args    The arguments for the admin notice.
     8804     * @param string $message The message for the admin notice.
     8805     */
     8806    $args       = apply_filters( 'wp_admin_notice_args', $args, $message );
     8807    $id         = '';
     8808    $classes    = 'notice';
     8809    $attributes = '';
     8810
     8811    if ( is_string( $args['id'] ) ) {
     8812        $trimmed_id = trim( $args['id'] );
     8813
     8814        if ( '' !== $trimmed_id ) {
     8815            $id = 'id="' . $trimmed_id . '" ';
     8816        }
     8817    }
     8818
     8819    if ( is_string( $args['type'] ) ) {
     8820        $type = trim( $args['type'] );
     8821
     8822        if ( str_contains( $type, ' ' ) ) {
     8823            _doing_it_wrong(
     8824                __FUNCTION__,
     8825                sprintf(
     8826                    /* translators: %s: The "type" key. */
     8827                    __( 'The %s key must be a string without spaces.' ),
     8828                    '<code>type</code>'
     8829                ),
     8830                '6.4.0'
     8831            );
     8832        }
     8833
     8834        if ( '' !== $type ) {
     8835            $classes .= ' notice-' . $type;
     8836        }
     8837    }
     8838
     8839    if ( true === $args['dismissible'] ) {
     8840        $classes .= ' is-dismissible';
     8841    }
     8842
     8843    if ( is_array( $args['additional_classes'] ) && ! empty( $args['additional_classes'] ) ) {
     8844        $classes .= ' ' . implode( ' ', $args['additional_classes'] );
     8845    }
     8846
     8847    if ( is_array( $args['attributes'] ) && ! empty( $args['attributes'] ) ) {
     8848        $attributes = '';
     8849        foreach ( $args['attributes'] as $attr => $val ) {
     8850            if ( is_bool( $val ) ) {
     8851                $attributes .= $val ? ' ' . $attr : '';
     8852            } elseif ( is_int( $attr ) ) {
     8853                $attributes .= ' ' . esc_attr( trim( $val ) );
     8854            } elseif ( $val ) {
     8855                $attributes .= ' ' . $attr . '="' . esc_attr( trim( $val ) ) . '"';
     8856            }
     8857        }
     8858    }
     8859
     8860    if ( false !== $args['paragraph_wrap'] ) {
     8861        $message = "<p>$message</p>";
     8862    }
     8863
     8864    $markup = sprintf( '<div %1$sclass="%2$s"%3$s>%4$s</div>', $id, $classes, $attributes, $message );
     8865
     8866    /**
     8867     * Filters the markup for an admin notice.
     8868     *
     8869     * @since 6.4.0
     8870     *
     8871     * @param string $markup  The HTML markup for the admin notice.
     8872     * @param string $message The message for the admin notice.
     8873     * @param array  $args    The arguments for the admin notice.
     8874     */
     8875    return apply_filters( 'wp_admin_notice_markup', $markup, $message, $args );
     8876}
     8877
     8878/**
     8879 * Outputs an admin notice.
     8880 *
     8881 * @since 6.4.0
     8882 *
     8883 * @param string $message The message to output.
     8884 * @param array  $args {
     8885 *     Optional. An array of arguments for the admin notice. Default empty array.
     8886 *
     8887 *     @type string   $type               Optional. The type of admin notice.
     8888 *                                        For example, 'error', 'success', 'warning', 'info'.
     8889 *                                        Default empty string.
     8890 *     @type bool     $dismissible        Optional. Whether the admin notice is dismissible. Default false.
     8891 *     @type string   $id                 Optional. The value of the admin notice's ID attribute. Default empty string.
     8892 *     @type string[] $additional_classes Optional. A string array of class names. Default empty array.
     8893 *     @type bool     $paragraph_wrap     Optional. Whether to wrap the message in paragraph tags. Default true.
     8894 * }
     8895 */
     8896function wp_admin_notice( $message, $args = array() ) {
     8897    /**
     8898     * Fires before an admin notice is output.
     8899     *
     8900     * @since 6.4.0
     8901     *
     8902     * @param string $message The message for the admin notice.
     8903     * @param array  $args    The arguments for the admin notice.
     8904     */
     8905    do_action( 'wp_admin_notice', $message, $args );
     8906
     8907    echo wp_kses_post( wp_get_admin_notice( $message, $args ) );
     8908}

  • trunk/src/wp-login.php

    r56628 r56654  
    229229
    230230    if ( $wp_error->has_errors() ) {
    231         $errors   = '';
    232         $messages = '';
     231        $error_list = array();
     232        $messages   = '';
    233233
    234234        foreach ( $wp_error->get_error_codes() as $code ) {
    … …  
    236236            foreach ( $wp_error->get_error_messages( $code ) as $error_message ) {
    237237                if ( 'message' === $severity ) {
    238                     $messages .= '  ' . $error_message . "<br />\n";
     238                    $messages .= '<p>' . $error_message . '</p>';
    239239                } else {
    240                     $errors .= '    ' . $error_message . "<br />\n";
     240                    $error_list[] = $error_message;
    241241                }
    242242            }
    243243        }
    244244
    245         if ( ! empty( $errors ) ) {
     245        if ( ! empty( $error_list ) ) {
     246            $errors = '';
     247
     248            if ( count( $error_list ) > 1 ) {
     249                $errors .= '<ul class="login-error-list">';
     250
     251                foreach ( $error_list as $item ) {
     252                    $errors .= '<li>' . $item . '</li>';
     253                }
     254
     255                $errors .= '</ul>';
     256            } else {
     257                $errors .= '<p>' . $error_message . '</p>';
     258            }
     259
    246260            /**
    247261             * Filters the error messages displayed above the login form.
    … …  
    251265             * @param string $errors Login error message.
    252266             */
    253             echo '<div id="login_error">' . apply_filters( 'login_errors', $errors ) . "</div>\n";
     267            $errors = apply_filters( 'login_errors', $errors );
     268            wp_admin_notice(
     269                $errors,
     270                array(
     271                    'type'           => 'error',
     272                    'id'             => 'login_error',
     273                    'paragraph_wrap' => false,
     274                )
     275            );
    254276        }
    255277
    … …  
    262284             * @param string $messages Login messages.
    263285             */
    264             echo '<p class="message" id="login-message">' . apply_filters( 'login_messages', $messages ) . "</p>\n";
     286            $messages = apply_filters( 'login_messages', $messages );
     287            wp_admin_notice(
     288                $messages,
     289                array(
     290                    'type'               => 'info',
     291                    'id'                 => 'login-message',
     292                    'additional_classes' => array( 'message' ),
     293                    'paragraph_wrap'     => false,
     294                )
     295            );
    265296        }
    266297    }
    … …  
    400431
    401432    ?>
    402     <div class="clear"></div>
    403433    </body>
    404434    </html>
    … …  
    830860        do_action( 'lost_password', $errors );
    831861
    832         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 );
     862        login_header(
     863            __( 'Lost Password' ),
     864            wp_get_admin_notice(
     865                __( 'Please enter your username or email address. You will receive an email message with instructions on how to reset your password.' ),
     866                array(
     867                    'type'               => 'info',
     868                    'additional_classes' => array( 'message' ),
     869                )
     870            ),
     871            $errors
     872        );
    833873
    834874        $user_login = '';
    … …  
    947987            reset_password( $user, $_POST['pass1'] );
    948988            setcookie( $rp_cookie, ' ', time() - YEAR_IN_SECONDS, $rp_path, COOKIE_DOMAIN, is_ssl(), true );
    949             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>' );
     989            login_header(
     990                __( 'Password Reset' ),
     991                wp_get_admin_notice(
     992                    __( 'Your password has been reset.' ) . ' <a href="' . esc_url( wp_login_url() ) . '">' . __( 'Log in' ) . '</a>',
     993                    array(
     994                        'type'               => 'info',
     995                        'additional_classes' => array( 'message', 'reset-pass' ),
     996                    )
     997                )
     998            );
    950999            login_footer();
    9511000            exit;
    … …  
    9551004        wp_enqueue_script( 'user-profile' );
    9561005
    957         login_header( __( 'Reset Password' ), '<p class="message reset-pass">' . __( 'Enter your new password below or generate one.' ) . '</p>', $errors );
     1006        login_header(
     1007            __( 'Reset Password' ),
     1008            wp_get_admin_notice(
     1009                __( 'Enter your new password below or generate one.' ),
     1010                array(
     1011                    'type'               => 'info',
     1012                    'additional_classes' => array( 'message', 'reset-pass' ),
     1013                )
     1014            ),
     1015            $errors
     1016        );
    9581017
    9591018        ?>
    … …  
    9861045
    9871046            <p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    988             <br class="clear" />
    9891047
    9901048            <?php
    … …  
    10801138        $redirect_to = apply_filters( 'registration_redirect', $registration_redirect, $errors );
    10811139
    1082         login_header( __( 'Registration Form' ), '<p class="message register">' . __( 'Register For This Site' ) . '</p>', $errors );
     1140        login_header(
     1141            __( 'Registration Form' ),
     1142            wp_get_admin_notice(
     1143                __( 'Register For This Site' ),
     1144                array(
     1145                    'type'               => 'info',
     1146                    'additional_classes' => array( 'message', 'register' ),
     1147                )
     1148            ),
     1149            $errors
     1150        );
    10831151
    10841152        ?>
    … …  
    11051173                <?php _e( 'Registration confirmation will be emailed to you.' ); ?>
    11061174            </p>
    1107             <br class="clear" />
    11081175            <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
    11091176            <p class="submit">

  • trunk/tests/phpunit/tests/functions/wpAdminNotice.php

    r56653 r56654  
    44 * Tests for `wp_admin_notice()`.
    55 *
    6  * @group admin
     6 * @group functions.php
    77 *
    88 * @covers ::wp_admin_notice
    99 */
    10 class Tests_Admin_WpAdminNotice extends WP_UnitTestCase {
     10class Tests_Functions_WpAdminNotice extends WP_UnitTestCase {
    1111
    1212    /**

  • trunk/tests/phpunit/tests/functions/wpGetAdminNotice.php

    r56653 r56654  
    44 * Tests for `wp_get_admin_notice()`.
    55 *
    6  * @group admin
     6 * @group functions.php
    77 *
    88 * @covers ::wp_get_admin_notice
    99 */
    10 class Tests_Admin_WpGetAdminNotice extends WP_UnitTestCase {
     10class Tests_Functions_WpGetAdminNotice extends WP_UnitTestCase {
    1111
    1212    /**
Note: See TracChangeset for help on using the changeset viewer.