Better Login Error&Message Displaying

[abhansnuk]

Trac ticket: https://core.trac.wordpress.org/ticket/30685

Owner: sabernhardt

Labeled as 'needs dev note'
Note Joe Dolson's comment on https://core.trac.wordpress.org/ticket/30685#comment:57

[github-actions]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[abhansnuk]

Response from maintainer Rajin Sharwar that this will be ready on October 15, 2023.
Slack message.

[Rajinsharwar]

Hi @abhansnuk, here is a draft for the dev note. Requesting peer review and proofreading.
https://make.wordpress.org/core/?p=108803&preview=1&_ppp=6edd12b9d8

[nalininsbs]

@codente and @abhansnuk we will put this under 'Users' in the Field Guide as it is a sub component of this. It can then list Login and Registration.

[codente]

Hi @Rajinsharwar thank you and nice work on this dev note:

I do have a couple suggestions

1. I think a word is missing here

WordPress 6.4 brings a number of key improvements to the HTML markup of the wp-login.php page to its structure

at the end there, I think we need the word make or a similar word in front of its

to make its structure

2. In the second paragraph, I think you could remove the period before And here

And <div> tag was used for enclosing the error messages.

and just join it together without a separate sentence.

3. In the 3rd paragraph, I think you could remove this And and just start it with "In the case of..."

"And, in the case of multiple error messages"

4. Same paragraph, last sentence I'd rewrite it a little differently.

In the case of multiple errors, bullets have been removed in favor of a small margin between error messages.

5. In the Some other changes section, do we need to do inline code when you mention the br tags and include the opening and closing tag so it looks like this <br>?

6. I think you could remove the So from the last line.

[Rajinsharwar]

Hi @codente, just edited the doc with your suggestions. Let me know it it looks good now.

[codente]

@Rajinsharwar I think the word make got added in the wrong place. It should be before the word its and not after.

"WordPress 6.4 brings a number of key improvements to the HTML markup of the wp-login.php page to make its structure"

Otherwise, the changes look good from here :)

[abhansnuk]

@Rajinsharwar can you please add an excerpt to the dev note. I will add tags once the other the tech edit and changes are done.

Did any of the other maintainers do a tech peer review please? If so, do you have their WP.org IDs please? Thanks for working on this dev note.

[Rajinsharwar]

Ah lol, done @codente. :)

[Rajinsharwar]

Hi @abhansnuk, I added an excerpt. For now, none other than @codente did the review. I am not really sure of your WP.org ID @codente 😅

[abhansnuk]

Hello @Rajinsharwar Thanks for the update.

Could you reduce the size of the excerpt please as it is too long to be effective in search and embeds.

Could you make the images of before and after 6.4 the same height please assuming this is possible with the content wanting to be visible? If not, can they both start at the same top level?

I will share it for further feedback in core once you have finished the current editing you are doing, and do the second docs review too.

Thanks.

[Rajinsharwar]

Hi @abhansnuk, just re-updated the doc. Can you take a look now?

[abhansnuk]

Shared in core for another core review in the next few hours.

Now with the link

[sabernhardt]

All three images need alternative text. These examples probably can be improved:

• Login form comparison: multiple errors were separated by a line break, and now the errors are in a list with a small margin between them
• Registration form comparison: the Register For This Site message paragraph is now inside a div element; multiple errors now have list markup and a margin between them
• Reset password form comparison: both the informational message and the single error are paragraphs inside a div element instead of only one of those elements

[abhansnuk]

@Rajinsharwar are you able to deal with these please?

Thanks @sabernhardt for the review.

[sabernhardt]

The sentence about multiple error messages mentions the styling, but it says nothing about the new list markup. Maybe just add that each message is a list item:

In the case of multiple errors, each message is a list item, and bullets have been removed in favor of a small margin between error messages.

Minor formatting recommendations:

• The wp-login.php filename would be wrapped in inline code instead of italicizing it.
• The quoted text for each link (“Log in“, “Register” and “Lost your password?”) should not need italicizing either because the quotation marks already set the text apart.

[Rajinsharwar]

Hi @sabernhardt @abhansnuk, just updated the doc. Can you take a look now?

[sabernhardt]

1. The heading levels within the post content need to be raised by one. Right now, it skips from level one (the title) to level three. The two section headings should be H2.
2. The second image caption text does not have a period.
3. We probably should add another sentence to say plainly: "CSS selectors such as p.message will not apply styles to the informational messages." It could fit after mentioning "classes on the div (<div>) instead of the paragraph (<p>).").

[Rajinsharwar]

Just made the changes again @sabernhardt.

[codente]

@Rajinsharwar @sabernhardt

With this change:

CSS selectors such as p.message will not apply styles to the informational messages.

Stephen mentioned informational specifically but in the post it says notice messages. Does that distinction matter or is it fine as is?

Stephen's comment makes me think it only applies to certain (informational) notices while the way it is worded now seems like it may apply to all notices?

[sabernhardt]

I see it's already updated to "notice": "will not apply styles to the notice messages." Consistency should be better than saying "informational" there.

Technically, both errors and informational messages have the notice class. Then the notice-info and notice-error classes differentiate those two types.

[sabernhardt]

And it's published 😄
https://make.wordpress.org/core/2023/10/17/html-markup-improvements-to-the-login-and-registration-page/

[nalininsbs]

Is there anything on this for updating the Field Guide?

[nalininsbs]

Noting discussion in release docs area - add to other developer updates in the Field Guide.

[nalininsbs]

@zzap can you change the label to complete please. We are unable to change this. Thank you.