Opened 6 years ago
Closed 6 years ago
#46901 closed task (blessed) (fixed)
5.2 About Page
Reported by: | desrosj | Owned by: | karmatosed |
---|---|---|---|
Milestone: | 5.2 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Help/About | Keywords: | has-patch has-screenshots commit dev-reviewed |
Focuses: | Cc: |
Description
It's time to design and write the About page for version 5.2!
Attachments (42)
Change History (119)
This ticket was mentioned in Slack in #design by karmatosed. View the logs.
6 years ago
#4
in reply to:
↑ 1
@
6 years ago
- 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.
#5
@
6 years ago
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#
#6
@
6 years ago
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
#7
follow-up:
↓ 9
@
6 years ago
- Keywords has-patch has-screenshots added; needs-patch needs-design removed
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
foralignleft
images, mirroring the rules foralignright
. - 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?
#8
@
6 years ago
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.
#9
in reply to:
↑ 7
;
follow-ups:
↓ 10
↓ 19
@
6 years ago
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.
#10
in reply to:
↑ 9
@
6 years ago
- 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".
#11
@
6 years ago
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.
#12
@
6 years ago
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.
#13
@
6 years ago
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>
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?
#14
@
6 years ago
Good catch, thanks @birgire! You're correct, it's a Google Docs copy/pasta problem.
#15
@
6 years ago
46901.4.diff removes the google.com redirect link.
This ticket was mentioned in Slack in #core by pento. View the logs.
6 years ago
#18
follow-up:
↓ 27
@
6 years ago
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>
#19
in reply to:
↑ 9
@
6 years ago
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
#20
@
6 years ago
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.
#21
@
6 years ago
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.
@
6 years ago
The bottom border will disappear when you move the mouse over the active tab on a small screen.
#22
@
6 years ago
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.
#23
@
6 years ago
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.
#24
@
6 years ago
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
#25
@
6 years ago
@afercia Thanks for your follow-up. If 1.8
is correct, the line height of .about-wrap .nav-tab
will be 1.4
.
#27
in reply to:
↑ 18
@
6 years ago
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>
#28
@
6 years ago
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
? :)
This ticket was mentioned in Slack in #core by desrosj. View the logs.
6 years ago
#30
@
6 years ago
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.
#31
follow-up:
↓ 41
@
6 years ago
@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. Thisline-height
needs to be the equivalent to24px
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.
#32
@
6 years ago
@chanthaboune thanks, 46901-links.diff changes the links.
This ticket was mentioned in Slack in #core by jorbin. View the logs.
6 years ago
#35
@
6 years ago
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.
#36
follow-up:
↓ 55
@
6 years ago
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.
#37
@
6 years ago
Just a minor heads up in case someone ends up having some time for this: Ideally, the Health Check and Error Protection feature-section
s 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. 👍
#38
@
6 years ago
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...
#39
follow-up:
↓ 43
@
6 years ago
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.
This ticket was mentioned in Slack in #core by desrosj. View the logs.
6 years ago
#41
in reply to:
↑ 31
@
6 years ago
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.
This ticket was mentioned in Slack in #core by chanthaboune. View the logs.
6 years ago
#43
in reply to:
↑ 39
@
6 years ago
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.
#44
@
6 years ago
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).
#45
@
6 years ago
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 👍
This ticket was mentioned in Slack in #core by afercia. View the logs.
6 years ago
#48
@
6 years ago
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.
#49
@
6 years ago
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.
#50
follow-up:
↓ 51
@
6 years ago
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
#51
in reply to:
↑ 50
@
6 years ago
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.
#53
@
6 years ago
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.
#54
follow-ups:
↓ 61
↓ 62
@
6 years ago
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.
#55
in reply to:
↑ 36
@
6 years ago
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.
#56
@
6 years ago
All of the changes from 46901-remaining.4.diff (that I didn't add) look good for commit!
#57
@
6 years ago
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.
#58
@
6 years ago
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.
#60
@
6 years ago
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.
#61
in reply to:
↑ 54
@
6 years ago
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
#62
in reply to:
↑ 54
@
6 years ago
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.
#63
@
6 years ago
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.
#64
@
6 years ago
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.
#65
@
6 years ago
- Keywords needs-dev-review added
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.
This ticket was mentioned in Slack in #core by desrosj. View the logs.
6 years ago
#68
@
6 years ago
Yep, latest patch 49601.diff looks good to me as well.
This ticket was mentioned in Slack in #core by ocean90. View the logs.
6 years ago
#74
@
6 years ago
- Keywords needs-dev-review added; dev-reviewed commit removed
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.
#75
@
6 years ago
- Keywords commit dev-reviewed added; needs-dev-review removed
46901.7.diff: We could drop the printf() call but let's do that after the release. 🚢 it.
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:
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?