5.2 About Page

[desrosj]

It's time to design and write the About page for version 5.2!

[karmatosed]

Thanks for creating this ticket @desrosj. Let's get this about page work underway! I'd love to know what others think but my suggested plan for this would be:

• Within few days: Find out what copy / sections we plan to call out. cc @chanthaboune looping you in here to co-ordinate that.
• Wednesday's design meeting (tomorrow): show this ticket and ask for contributors to get involved, noting the shorter time frame now.
• End of weekend: Have a skeleton version with some suggested images in style previously used.

I am happy to co-ordinate this and would love to have others involved if they are interested.

@desrosj do you know what the final deadline for this to be ready for would be?

[chanthaboune]

• Within few days: Find out what copy / sections we plan to call out. cc @chanthaboune looping you in here to co-ordinate that.

I'll get an outline pulled together that we can all work from.

[chanthaboune]

Boilerplate Figma Template: ​https://www.figma.com/file/LrjiQZDts99EakxvZ6YcuMIr/About-Page?node-id=3%3A47089
Boilerplate Copy Outline: ​https://docs.google.com/document/d/1CV9lBN-FSNcawFDfQUt4V0CHD0cjRv2cmcboyuxrXRY/edit#

[karmatosed]

There is currently an in progress design, thanks to @melchoyce for assisting there.

​https://www.figma.com/file/LrjiQZDts99EakxvZ6YcuMIr/About-Page?node-id=3%3A47089

The images up aren't final but they will do as placeholders. It is our understanding images can be done up until RC 2. If that's not the case it would be great to know @pento

[pento]

Thank you for wrangling the copy and design, everyone!

In 46901.2.diff​:

• Adds the text from ​this doc.
• Implements the design from ​this Figma project.
• Adds placeholder images exported from the current design.
• Implements CSS rules in about.css for alignleft images, mirroring the rules for alignright.
• Tidy up some older bits and pieces from about pages of releases past.

I've also attached screenshots of the about page as viewed on different size devices. (Minor note: I noticed I accidentally had the word "Updates" in "Accessibility Updates" selected when I took a couple of these screenshots. That highlighting isn't a visual bug.)

@melchoyce, @karmatosed, @chanthaboune: Could you please review it when you have a moment?

[melchoyce]

There are some minor layout/CSS updates I'll want to tweak, and of course we need to get you final images, but it looks good for RC1.

[chanthaboune]

Just two things and neither of them seem major, @pento.

• The title for the new body hook in the Developer Happiness section is twice as long as any other title. I'll think about how to refine it between now and Monday.
• The tabs look strange on the small screen, but if that's usual then I wouldn't consider it a blocker.

[chanthaboune]

• The title for the new body hook in the Developer Happiness section is twice as long as any other title. I'll think about how to refine it between now and Monday.

Just kidding! @earnjam and I thought about it now. Let's change "New Body Hook for Themes and Plugins" to read "New Body Tag Hook".

[earnjam]

Was just about to call that out. @pento can you correct the Building JS blurb to read:

With the addition of webpack and Babel configurations in the @wordpress/scripts package, developers won't have to worry about setting up complex build tools to write modern JavaScript.

[pento]

Thank you for the reviews, everyone!

In 46901.3.diff​:

• Change the wp_body_open heading to "New Body Tag Hook".
• Add the correct text for the "Building JavaScript" section.
• Switch the Developer Happiness section to be two columns, instead of four.

I've attached a new screenshot.

[birgire]

I'm not sure about this part:

 <h4><a href="https://www.google.com/url?q=https://make.wordpress.org/core/2019/03/25/building-javascript/"><?php _e( 'Building JavaScript' ); ?></a></h4>

in 46901.3.diff​

Would have expected:

 <h4><a href="https://make.wordpress.org/core/2019/03/25/building-javascript/"><?php _e( 'Building JavaScript' ); ?></a></h4>

I guess this is a leftover from Google Docs?

[pento]

Good catch, thanks @birgire! You're correct, it's a Google Docs copy/pasta problem.

[pento]

46901.4.diff​ removes the google.com redirect link.

[pento]

In 45271:

Admin: Add the text for the WordPress 5.2 About page.

This changes includes placeholder images for now, they'll be replaced by the final images before final release.

Props chanthaboune, melchoyce, karmatosed, pento, marybaum, birgire, earnjam, andreamiddleton.
See #46901.

[afercia]

I'd like to suggest to improve a bit some of the links in the about page (see screenshot attached below). The link destination and purpose should be clear also when reading the link text out of context.

For example:

• The "Site Health" link doesn't inform me it points to the 5.1 release post. It just tells me it's about something generically related to "Site Health". Making the link include a more meaningful part of the sentence could help, e.g. <a ...>the Site Health features introduced in 5.1</a>
• Same for "status" and "debug": when read out of context, they don't help so much. Better link text might be:
  • <a ...>Check your site status</a>
  • <a ...>learn how to debug issues</a>

[afercia]

Links that could be improved

[SergeyBiryukov]

Replying to chanthaboune:

The tabs look strange on the small screen, but if that's usual then I wouldn't consider it a blocker.

Related: #47016

[afercia]

The tabs look strange on the small screen

Oh yes, I see now there's a difference compared to 5.1.1. This comes in part from the markup change in [44905] / #43398 and in part from the various changes to the line-height values in core to make them unit-less. The point is, when using line-height unit-less value and then the font-size changes in the responsive view, the line-height computed value won't be the expected one. It needs to be set again with a proper value based on the responsive font-size. /Cc @ianbelanger

Patch incoming.

[afercia]

Restore previous tabs styles for the About & Co. pages

[afercia]

46901-tabs.diff​ restores the spacing between tabs and the previous size. Actually, the bigger tabs weren't that bad, but I've restored the previous size anyways.

[ixkaito]

The bottom border will disappear when you move the mouse over the active tab on a small screen.

[ixkaito]

46901-tabs.2.diff​ restores the spacing between tabs and the previous size, and fixes the issue of active tabs on hover, and I don't think we need h1, h2, h3 and nav before .nav-tab according to line 2167 on wp-admin/css/common.css.

[karmatosed]

The Figma file now has the final images to include. It would be great to get them added as a patch. cc @chanthaboune. Props to @cathibosco1.

[afercia]

Thanks @ixkaito good catch! Looks like the bottom border glitch is a pre-existing issue, as it happens also on WordPress 5.1 and previous versions: it's a good improvement and I guess it can be included :)

I've noticed one more thing: as a consequence of the changes to the line-height values to make them unit-less, see #45243, the tabs are now 1 px taller. The new value:

 	font-size: 14px;
- 	line-height: 24px;
+ 	line-height: 1.8;

produces a computed value of 25.2 pixels. Not sure what the math behind 1.8 is. The new value should be 1.71428571. /Cc @ianbelanger

[ixkaito]

@afercia Thanks for your follow-up. If 1.8 is correct, the line height of .about-wrap .nav-tab will be 1.4.

[desrosj]

Related: #47075.

[chanthaboune]

I'm fine with both of these changes, @afercia

Replying to afercia:

I'd like to suggest to improve a bit some of the links in the about page (see screenshot attached below). The link destination and purpose should be clear also when reading the link text out of context.

For example:

• The "Site Health" link doesn't inform me it points to the 5.1 release post. It just tells me it's about something generically related to "Site Health". Making the link include a more meaningful part of the sentence could help, e.g. <a ...>the Site Health features introduced in 5.1</a>
• Same for "status" and "debug": when read out of context, they don't help so much. Better link text might be:
  • <a ...>Check your site status</a>
  • <a ...>learn how to debug issues</a>

[SergeyBiryukov]

46901-tabs.3.diff​ fixes a few more discrepancies caused by [44905] and [45243], restoring the previous appearance and fixing both #47075 and the bottom border glitch.

@afercia: Can I get a dev-reviewed? :)

[desrosj]

46901.5.diff​ adds the CDN versions of the images to @SergeyBiryukov's 46901-tabs.3.diff​ patch. Props @tellyworth for getting those committed and pushed to the CDN.

[afercia]

@SergeyBiryukov 46901-tabs.3.diff​ fixes the tabs in the "About" pages but also changes the tabs in Appearance > Menus, on the multisite pages, or the ones used by plugins. Also, I'm not sure there's the need for some of the changes there, unless I'm missing something:

• not sure there's the need to add .about-wrap nav to .about-wrap h2 {} in about.css, as those CSS properties either don't apply to the tabs links or are overridden by other rules
• line-height: 1.33333333;: while this fixes the tabs in the About page, it makes the other tabs smaller. This line-height needs to be the equivalent to 24px with any font-size
• not sure there's the need for .wrap nav.nav-tab-wrapper as there's already .nav-tab-wrapper
• not sure there's the need for higher specificity for .wrap nav .nav-tab
• we should re-add the fix for the bottom border: the rule should override the white border for hover / focus / focus:active.

I've tried to address these points in 46901-tabs.4.diff​. I guess at this point of the release cycle we should try to be very conservative and change only what needs to be changed. Some testing would be nice :) When testing, please check also the tabs in Appearance > Menus and tabs added by plugins, for example Yoast SEO, comparing with the tabs in WordPress 5.1.

[afercia]

@chanthaboune thanks, 46901-links.diff​ changes the links.

[jorbin]

In 45274:

Admin: Add some additional clarity to some about page links

It's important for links to have enough information in them in order to be clearly actionable. Destination and purpose should be clear. For example, debug isn't nearly as useful as learn how to debug issues.

This was signed off on by chanthaboune and jorbin.

Props afercia.
See: #46901.

[melchoyce]

2x images

[melchoyce]

SVG versions of the images

[jeremyfelt]

Make the display of Site Health admin links conditional on capability

[melchoyce]

46901.patch​ make some minor layout adjustments and updates the images to use SVGs. There are a few more changes I'd like to make, but this is good enough for RC2.

@kjellr should receive props for this patch.

[jeremyfelt]

The "Check your site status" and "learn how to debug issues" links on the about page are only available to users with specific capabilities. 46901.6.diff​ adds a capability check for that sentence.

[kjellr]

Just a minor heads up in case someone ends up having some time for this: Ideally, the Health Check and Error Protection feature-sections would be using our two-col class, and the text inside them would be aligned vertically using the flexbox styles for columns that are in the stylesheet.

If someone were to take that on, it's worth noting that for now, the columns in those sections are not inheriting our columns styles at all. This is because the columns style rule uses [class$="-col"] (it looks for a class attribute that ends in -col). That means the order of the classnames in the HTML attribute matters if we want that style to be picked up. The Health Check and Error Protection sections have four total classnames, and their current one-col class is sandwiched in between the others. If we want to have the columns style rules kick in, we'd first need to rearrange the class declarations so that the -col is at the end. 👍

[man4toman]

We have this paragraph in about page:

This administrator-focused update will let you safely fix or manage fatal errors without requiring developer time. It features better handling of the so-called “white screen of death,” and a way to enter recovery mode, which pauses error-causing plugins or themes.

I'm not sure about this, but is it correct?
...the so-called “white screen of death,” and...

Or it must be:
...the so-called “white screen of death”, and...

[ramiy]

Please try to avoid using HTML tags in translation strings, it's hard to translate strings to LTR languages (like Hebrew) with English tags.

We can replace:

5.2 introduces a <code>%1$s</code> hook, which lets themes support injecting code right at the beginning of the <code>%2$s</code> element.

With:

5.2 introduces a %1$s hook, which lets themes support injecting code right at the beginning of the %2$s element.

[SergeyBiryukov]

Replying to afercia:

46901-tabs.3.diff​ fixes the tabs in the "About" pages but also changes the tabs in Appearance > Menus, on the multisite pages, or the ones used by plugins.

Thanks, I forgot about the other tabs :) 46901-tabs.4.diff​ looks good.

[SergeyBiryukov]

Replying to ramiy:

Please try to avoid using HTML tags in translation strings, it's hard to translate strings to LTR languages (like Hebrew) with English tags.

Good catch! Indeed, that's a regression from our own ​i18n best practices.

46901.remove-tags-from-translatable-strings.diff​ addresses that, needs a second committer's review.

[ryelle]

46901-layout.diff​ switches the about page to using CSS grid, but it’s using properties/fallbacks for IE11. The point of this rewrite was to make the about page’s structural CSS a little more obvious, and remove the styles for elements that are no longer on this page (videos, mejs elements, etc – these can be added back if we end up using them again). Hopefully this will be easier for others to jump into in the future :)

There are now 4 classes for 1-4 column grids (no more “class ends with col”!). They all default to 760px wide. Each has-x-columns can only have one row, for compat with IE11. These break at 782px into 2 columns at most, and at 600px into 1 column.

• has-1-columns
• has-2-columns
• has-3-columns
• has-4-columns

You can also add .is-wider-right or .is-wider-left to the has-2-columns container, to make it one-third/two-thirds. This stays two column until 480px.

There are also “width” classes. The default for headline-feature is 680, and can be increased to 760 with is-wide. is-fullwidth can be used to make it 100% (the container stops at 1200, so it will not be larger than that).

Alignment classes: we have vertical and horizontal alignment classes. aligncenter will center text, alignleft & alignright float elements. is-vertically-aligned-top, is-vertically-aligned-center, and is-vertically-aligned-bottom assume a flex or grid context, but they’ll align to the top/center/bottom of the container.

@melchoyce You'll want to check the spacing/alignment of things on the about page and the other pages in the section (credits, freedoms).

[melchoyce]

You'll want to check the spacing/alignment of things on the about page and the other pages in the section (credits, freedoms).

Everything looks perfect 👍

[desrosj]

In 45276:

Help/About: Fix tab display issues.

This change restores About page tab heights and fixes bugs with the tab bottom border caused by [44905] and [45243].

Reviewed by SergeyBiryukov and desrosj.

Props ixkaito, ianbelanger, afercia, SergeyBiryukov.
See #46901.
Fixes #47075.

[desrosj]

46901-remaining.diff​ combines the remaining changes on the ticket (46901-layout.diff​ & 46901.remove-tags-from-translatable-strings.diff​) and updates the image URLs to point to the CDN versions (props @tellyworth).

@ryelle This looks great! Thanks for working on this.

I am seeing one issue, though. When using the CDN versions of the images, the top image is small and there is a large space between the bottom of the image and the next section on the page. After this is fixed, this is good to go, IMO.

[SergeyBiryukov]

46901-remaining.2.diff​ uses the s.w.org domain for images and avoids unintentional string change caused by removing curly quotes from “white screen of death,” in the previous patch.

Replying to man4toman:

I'm not sure about this, but is it correct?
...the so-called “white screen of death,” and...

Or it must be:
...the so-called “white screen of death”, and...

​It's correct in American English. That said, it's inconsistent with a couple of other strings in core:

• If you select "Remember Me", your login will persist for two weeks.
• Once you hit “Confirm Deletion”, the user will be permanently removed.

I'm ambivalent on whether the comma placement should be changed here.

[afercia]

It's correct in American English.

Not sure, as that rule applies only to direct quotes (as in when quoting someone) or citations, not to normal sentences :) example:

“There was a storm last night,” Paul said.

Instead, the following is not a direct quote, nor a citation:

the so-called “white screen of death,” and

[SergeyBiryukov]

Replying to afercia:

It's correct in American English.

Not sure, as that rule applies only to direct quotes (as in when quoting someone) or citations, not to normal sentences :)

Thanks! In that case, 46901-remaining.3.diff​ fixes the comma placement and removes an extra space while we're at it.

[man4toman]

Thanks @afercia, that is exactly what I wanted to say.

[ryelle]

I am seeing one issue, though. When using the CDN versions of the images, the top image is small and there is a large space between the bottom of the image and the next section on the page. After this is fixed, this is good to go, IMO.

@desrosj Looks like the image on the CDN isn't cropped correctly. The others seem fine, but this one has extra space around it. I've just uploaded a new SVG, it should be fine once it's swapped out.

[desrosj]

Thank you, @ryelle!

In the interest of getting RC2 out, I have uploaded the latest PNG from above for that ​image to the Make Core blog to include instead (this is the current approach implemented for RC1). We can update the image after RC2 when someone with the needed access to push to the CDN is available.

[jeremyfelt]

Replying to jeremyfelt:

The "Check your site status" and "learn how to debug issues" links on the about page are only available to users with specific capabilities. 46901.6.diff​ adds a capability check for that sentence.

46901-remaining.4.diff​ adds the cap checks from this patch in with the other remaining work.

[jeremyfelt]

All of the changes from 46901-remaining.4.diff​ (that I didn't add) look good for commit!

[afercia]

Noticed two very small things in the responsive view. Not blockers, they're really minor :) If there's time after RC2, would be nice to try to improve them though. See the attached screenshot:

• On the left: because of their placement, these two images get displayed vertically stacked which is a bit weird to see. Really minor, I guess we can live with that
• On the right: the vertical spacing between sections is a bit inconsistent, maybe could be improved a bit but I guess we can live with that as well

Everything else looks good to me. Note related to accessibility: @audrasjb we forgot to use aria-current on the new <nav> active items :) I guess that should be improved in 5.2.1, though it's just about the addition of an attribute and wouldn't impact anything even if we're in RC2.

[desrosj]

Thanks, @afercia! Those are great to point out, but I think we can tackle those prior to release, as they are likely very minor CSS adjustments.

[desrosj]

In 45278:

Help/About: Polish the About page for 5.2.

• The About page now uses a CSS grid to layout its design, making the page’s structure more obvious and hopefully easier for contributors in the future.
• Removes some code that is no longer used (such as videos, mejs elements, etc.).
• Update images.
• Unnecessary HTML is removed from a string on the page. This was a regression.
• Only users with the correct capability should be instructed to check their site status.
• Fixes the placement of commas.

Reviewed by melchoyce, afercia, jeremyfelt, and desrosj.

Props ryelle, melchoyce, cathibosco1, man4toman, SergeyBiryukov, afercia, ramiy, kjellr, tellyworth, earnjam, andreamiddleton, marybaum.
See #46901.

[afercia]

Noting that in Internet Explorer 11 the grid layout works decently. Just a couple images look a bit "cut-off" by their containers. I'd tend to think things in IE 11 don't necessarily need to look "pretty" :) But if there's time to fix it after RC2, that would be nice. See attached screenshot.

[afercia]

Internet Explorer 11

[Otto42]

Replying to desrosj:

Thank you, @ryelle!

In the interest of getting RC2 out, I have uploaded the latest PNG from above for that ​image to the Make Core blog to include instead (this is the current approach implemented for RC1). We can update the image after RC2 when someone with the needed access to push to the CDN is available.

For the future, can we not use the CDN URLs of the images until the actual release?

See, s.w.org is essentially a mirror of the main wordpress.org site. It's a reverse caching proxy, basically. So, once we reference a file on there, thus making it show up on the CDN, then we can't actually "fix" it. All we can do is to use a different filename, like adding ?1 to the URL or something like that.

So for RCs and betas and other things, it's fine for us to use the wordpress.org URLs instead of the s.w.org URLs, especially when the files are not finalized and subject to change like has been in this ticket.

I can update the files, anybody with admin over here can do it, but I can't clear the CDN once it's been used. All you can do is to add ?1, ?2 and so on to their URLs.

If we're sure these files are final, let me know, and I'm happy to push them onto wordpress.org and tell you what URLs to use.

cc @tellyworth

[SergeyBiryukov]

Replying to desrosj:

In the interest of getting RC2 out, I have uploaded the latest PNG from above for that ​image to the Make Core blog to include instead (this is the current approach implemented for RC1). We can update the image after RC2 when someone with the needed access to push to the CDN is available.

This appears to be the same file that's already available on the CDN: ​https://s.w.org/images/core/5.2/about_maintain-wordpress.png.

I'm attaching the new one: about_maintain-wordpress-cropped.png​, made from about_maintain-wordpress-cropped.svg​.

[ianbelanger]

Fixes cutoff images in ie11 grid

[ianbelanger]

46901-ie11-img-fix.diff​ should fix the issue of the svg's being cutoff in ie11.

I tested the solution on a Windows 10 machine, in Chrome, FireFox, IE11 and Edge. Due to the changes contained in the patch, it should probably be tested in other OS's and browsers.

[ianbelanger]

IE11 images after 46901-ie11-img-fix.diff

[SergeyBiryukov]

46901-ie11-img-fix-maintain-wordpress-v2-cdn.diff​ includes 46901-ie11-img-fix.diff​ and uses a CDN URL for the last remaining image, now properly cropped.

[desrosj]

This looks good to go. I did some MacOS browser testing. Everything looks good (attached Firefox and Safari screenshots).

49601.diff​ changes the image format from PNG to SVG, which is the format we should use on the page. This file was uploaded last night to the CDN.

Will ping in Slack for another set of committer eyes before getting this in.

Edit Oops, wrong ticket number in my patch. But patch contains correct changes.

[audrasjb]

The latest patch works fine on my side, if it can help.

[afercia]

Yep, latest patch 49601.diff​ looks good to me as well.

[desrosj]

In 45287:

Help/About: Final 5.2 about page updates.

Use final image URLs and fix a bug in IE11 where images were being cut off.

Props afercia, SergeyBiryukov, ianbelanger, desrosj, audrasjb.
See #46901.

[desrosj]

In 45288:

Help/About: Final 5.2 about page updates.

Use final image URLs and fix a bug in IE11 where images were being cut off.

Reviewed by afercia, desrosj.
Merges [45287] to the 5.2 branch.

Props afercia, SergeyBiryukov, ianbelanger, desrosj, audrasjb.
Fixes #46901.

[desrosj]

46901.7.diff​ updates the tagline on the Credits and Freedoms pages.

One thing to note, the version was hard coded on the about page and did not use the placeholder. To prevent a string change, it should be hard coded on Freedoms and Credits. This can be fixed after release.

[ocean90]

46901.7.diff​: We could drop the printf() call but let's do that after the release. 🚢 it.

[desrosj]

In 45292:

Help/About: Update the 5.2 tagline on Freedoms and Credits.

Props ocean90.
See #46901.

[desrosj]

In 45293:

Help/About: Move 5.2 tagline to Freedoms and Credits.

Reviewed by ocean90, SergeyBiryukov.
Props ocean90.
Fixes #46901.