5.4 about page

[karmatosed]

This is where discussion and work will take place during 5.4 for the about page.

[marybaum]

Strings patch for aout.php

[birgire]

Hi @marybaum

I noticed that you tagged with needs-patch-review

I was wondering about what version of the about.php file you modified? I could not match it with the previous 5.3 version in trunk.

What part of the sentence should be a link?

[audrasjb]

Hi @marybaum,

There's probably an issue with your patch, it only contains one string change, and also it's not generated against trunk.

[francina]

This is the draft of the copy ​https://docs.google.com/document/d/1huaxhgWtKSyLYKBNPtmQpPVNNvat-k9xCD60ITlloxI/edit
Awaiting final review from Josepha. @karmatosed can you remove the link in your post? Thanks!

[audrasjb]

About Page: Introduce translation strings for WP 5.4 RC 1 (and keep the existing design for the moment)

[audrasjb]

About Page: Introduce translation strings for WP 5.4 RC 1

[melchoyce]

Rough first draft.

[audrasjb]

@melchoyce the Building more with blocks, faster and easier. subtitle was not included in the about page draft.

Should I add it to the translation strings patch?

[melchoyce]

@marybaum What are your thoughts?

[marybaum]

Love the layout and visuals; copy is final as of review last night.

My two thoughts: would maybe like to see bigger h1 and h2 elements and possibly bigger type throughout; in my youth I used to complain bitterly about old men who wanted everything in 24px helvetica bold (course pixels were bigger then) so I’m absolutely not suggesting that—but maybe a bump on the p and then a slightly stronger hierarchy?

I also wonder if the medium blue behind the dark type should go lighter or clearer, or darker. Take that with a box of salt, though — I’m an all-brights, three-digit hex codes person, and I’m very influenced by that bias.

[melchoyce]

Sorry, should have been more specific — what do we want to do about the release tagline that @audrasjb mentions in #comment:10?

[SergeyBiryukov]

In 47422:

Help/About: Add strings for 5.4 About page.

Props elmastudio, chanthaboune, francina, marybaum, audrasjb.
See #49295.

[garrett-eclipse]

Minor string changes for the privacy portion

[garrett-eclipse]

Hello, reviewing the content in full can I make some minor amendments? Uploaded 49295.2.diff to suggest minor changes to the privacy strings.

1. Location data from the community events widget was also included with session tokens and is probably more important to the privacy focused user.
2. Stating 'see where you are' is a little ambiguous as it could mean where you are on the page, in the site or otherwise. So I feel it's more informative to indicate you'll 'See progress as you process requests'
3. If we're going to capitalize Privacy Tools we should capitalize both instances.

Thanks

[audrasjb]

Hello @garrett-eclipse,

With RC1 and string freeze, we shouldn't change the current strings, as polyglots are going to start translating them in few hours… 😬

[SergeyBiryukov]

Replying to audrasjb:

With RC1 and string freeze, we shouldn't change the current strings, as polyglots are going to start translating them in few hours… 😬

It's not uncommon to have some minor string changes after the freeze if there's a good reason for them (typo fixes, clarifications, etc.), there's an i18n-change keyword for that.

49295.2.diff​ seems fine to go in after a second committer's review.

It occurred to me that 5.4 strings are not actually available for translation yet. I think @ocean90 handled this in the past. I looked around for some documentation on this, but could not find any. I'll try to do some more research tomorrow, any insights appreciated :)

[garrett-eclipse]

Thanks @SergeyBiryukov in that case I've added i18n-change here. It would be nice to clarify those two privacy strings.

As you're done an initial review also marking with commit dev-feedback to illicit the second committer's review.

[SergeyBiryukov]

@ocean90 Thanks for making 5.4 strings available for translation!

Is ​this checklist still accurate? It doesn't include dotorg commits, could those be added there for completeness and future reference? Documenting all the necessary steps is one of the goals of the ​Release Model Working Group and would be helpful for future release leads.

For 5.5+, there are plans of clearing the milestone by Beta 1 and branching earlier, I guess that might include an earlier string freeze as well.

[Ipstenu]

Small grammar fix - periods go on the outside of HTML.

[Ipstenu]

I know it's string freeze. There's a minor grammar issue with a period on the inside of an HTML link

https://core.trac.wordpress.org/attachment/ticket/49295/49295.3.diff corrects it.

[ocean90]

I'd be okay with string changes if we can get the updated strings committed by end of this week.

I'm wondering why some strings are capitalized like "Personal Data Exports" or "Privacy Tools Tables". The latest block editor updates included many labels that where changed to sentence case (related ​GitHub issue).

It looks like someone really likes em dashes. Would have been better if the HTML entity — was used to make translating strings with dashes easier. Same for apostrophes, we should have been the ’ entity. The space usage before/after the dash is a bit inconsistent.

Finally, a note about tooling. If you’re a Composer fan, version 5.4 supports this more modern tooling for PHPUnit and external libraries.

Does somebody know what change this should highlight? Based on the log there weren't any meaningful updates to the file.

[SergeyBiryukov]

Replying to ocean90:

Finally, a note about tooling. If you’re a Composer fan, version 5.4 supports this more modern tooling for PHPUnit and external libraries.

Does somebody know what change this should highlight? Based on the log there weren't any meaningful updates to the file.

Found this in ​dev chat summary from January 15:

Build tools: @johnbillion is going to look at getting several of the Composer related tickets into 5.4 (like using Composer for external libraries and phpunit).

It appears to be a reference to #46815 and #48086, none of which have made it into the release, so the sentence should indeed be removed.

[garrett-eclipse]

Combined patch to update privacy strings, fix period placement, update to use ’ and — (removing surrounding spacing) and drop line concerning Composer.

[garrett-eclipse]

Thanks everyone, I've combined the patches in 49295.4.diff along with a few other changes to addressed the flagged concerns.

Full list of changes;

• Updated privacy strings as mentioned in my comment:16.
• Sentenced cases the privacy strings to address @ocean90's comment:22
• Updated apostrophes to ’ entity
• Updated dashes to — entity where appropriate as well as removed spacing as they shouldn't have any surrounding space.
• Removed the string about Composer as the changes related to that didn't make this release see @SergeyBiryukov's comment:23

This should address all concerns so far mentioned in this Trac thread and will just need a final review from two committers (potentially @ocean90 and @SergeyBiryukov)

[melchoyce]

Some updated colors, layout, and illustrations by @elmastudio.

[ocean90]

49295.4.diff​ looks good to me. I'd be fine with skipping the switch to HTML entities for 5.3 and just keeping it in mind for future about pages.

[ocean90]

As ​noted on Slack by @la-geek, the new block for social icons is called "Social Icons" not "Social Links".

[SergeyBiryukov]

In 47436:

Help/About: Update and correct some strings for 5.4 About page.

Props garrett-eclipse, Ipstenu, ocean90, tobifjellner, la-geek.
Reviewed by ocean90, SergeyBiryukov.
See #49295.

[SergeyBiryukov]

In 47438:

Help/About: Update and correct some strings for 5.4 About page.

Props garrett-eclipse, Ipstenu, ocean90, tobifjellner, la-geek.
Reviewed by ocean90, SergeyBiryukov.
Merges [47436] to the 5.4 branch.
See #49295.

[afercia]

Please check color contrast for all elements. At first glance, the one for the "tabs" seems not sufficient: it's only 3.57:1. See ​https://jdlsn.com/color/?type=rgb&color=255,255,255&color2=22,141,220

Checker tool courtesy of @joedolson

I have some concerns regarding the vertical text. Will propose to discuss it during next accessibility team weekly meeting.

[francina]

The look & feel is fantastic: thank you all!

I have two items that I'd like to bring up:

1. This was mentioned for 5.3, but I wouldn't use the circle element around the number of the version and remove "Code is Poetry" since it's so small it's basically unreadable.
2. I second @afercia concern about the vertical text. Is it necessary? I'd rather have it in a more readable, prominent way.

Thanks

[melchoyce]

At first glance, the one for the "tabs" seems not sufficient: it's only 3.57:1.

Will fix 👍

This was mentioned for 5.3, but I wouldn't use the circle element around the number of the version and remove "Code is Poetry" since it's so small it's basically unreadable.

This is meant to be a visual identifier that ties all the release pages together; it's a reference to Blue Note albums:

• ​https://cdn8.openculture.com/2018/11/21232236/bluenotealbumcovers.jpg
• ​https://cdn.vox-cdn.com/thumbor/qRPhac-g5c63tWXb1LJFlhnYZG0=/0x0:1600x1595/1200x0/filters:focal(0x0:1600x1595):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/13662666/freddie_hubbard_hub_cap_front_1600.png
• ​https://www.udiscovermusic.com/wp-content/uploads/2018/12/Wayne-Shorter-Speak-No-Evil-album-cover-web-optimised-740.jpg

It's not content for reading, but instead more like a sticker that denotes each page is part of a series. If people really object to it, though, we can ditch that concept moving forward.

I second @afercia concern about the vertical text. Is it necessary? I'd rather have it in a more readable, prominent way.

The text is vertical to mimic the movement of the illustration — I don't think it's nearly as effective when it's horizontal. You can see some alternate options in Figma: ​https://www.figma.com/file/Haqdaz1jlMhSRdhhSDxbIE/About-Page-5.4?node-id=0%3A1, but, they feel like much weaker compositions to me.

[marybaum]

New top block.

[marybaum]

Changes based on feedback:

As Mel pointed out, the vertical label WordPress 5.4 and the Blue Note Album notation are both more visual than lexical elements -- and you've got to know how much that word lexical is killing me, the copy hack and wannabe standup comedian, to write. But I'll get over it.

I have always understood this top illustration as evoking piano keys, and in this version those keys play the music over all else.

As a [design] squad, we're willing to let go of the album notation entirely if there's still heavy opposition; we do still feel pretty strongly about the vertical WordPress 5.4.

A further note: the oval is part of the standard format of the album notation -- I point it out only because it's easy to miss in the examples Mel cites. I missed it until she pointed them out explicitly! Course, I have never claimed to be a musical sophisticate.

In a nod toward readability, you'll notice the tag line, "Building more with blocks, faster and easier." is bigger. It starts directly in line with the Privacy nav link and extends to the natural right margin of the rest of the type.

[La Geek]

​https://build.trac.wordpress.org/browser/trunk/wp-admin/about.php?marks=172#L172

<li><?php _e( 'In embeds, now the block editor supports TikTok—and CollegeHumor is gone.' ); ?></li>

CollegeHumor is gone.

CollegeHumor has gone in WP 5.3.1 not within 5.4.

[audrasjb]

Replying to La Geek:

CollegeHumor has gone in WP 5.3.1 not within 5.4.

It was removed from the Block Editor within WP 5.4.
The Pull Request on GitHub was slated to Gutenberg 7.0: ​https://github.com/WordPress/gutenberg/pull/18591

[La Geek]

Replying to audrasjb:

Replying to La Geek:

CollegeHumor has gone in WP 5.3.1 not within 5.4.

It was removed from the Block Editor within WP 5.4.
The Pull Request on GitHub was slated to Gutenberg 7.0: ​https://github.com/WordPress/gutenberg/pull/18591

@audrasjb

Please open 5.3.2 without Plugin Gutenberg. It is not embedded.
See also: https://core.trac.wordpress.org/search?q=college

[audrasjb]

Replying to La Geek:

Please open 5.3.2 without Plugin Gutenberg. It is not embedded.
See also: https://core.trac.wordpress.org/search?q=college

Yes, the embed provider was removed in #48696 during a point release, but the embed Block was slated removed on Gutenberg 7.0, which was fully merged in core with WordPress 5.4, that's why the related dev note was published on Make/Core for 5.4. I'm not opposed to remove this item from the about page, but I'd say it's better to stay consistent with the Gutenberg releases and the related dev notes :)

[sabernhardt]

In the second design concept, "Code Is Poetry" is larger, but the typo remains (poery).

[melchoyce]

Updated some colors and the header, including fixing the Code is Poetry typo

[ryelle]

49295.5.diff​ implements the latest mockup styles, switches up the embedded svgs, and reorganizes some HTML (but no string changes).

In this patch, the header image is a background image pulled from the local uploads, so it won't work until that lives somewhere real. I think the header image SVG should be uploaded to the CDN, since it's a bit large for embedding into the CSS, but could go either way.

I also added the badge (diagonal "code is poetry") into the header background image, since it's meant as a decorative element.

[audrasjb]

Vertical overflow issue on small height viewports

[audrasjb]

Fix SVG image vertical overflow on small height viewports

[audrasjb]

Thanks @ryelle !
I noticed small bugs in some specific contexts

49295.6.diff addresses a vertical overflow issue on screens with small height (like when you use the browser inspector).

[audrasjb]

Vertical margin issue on credits screen (not addressed in 49265.6.diff)

[ryelle]

@audrasjb what OS & browser is that?

[audrasjb]

@ryelle it's Mac OS X 13 / Chrome last version

[ryelle]

@audrasjb I can't replicate that (also on Mac, tried FF, Chrome & Safari)— could you have the CSS cached, maybe?

[audrasjb]

Yes @ryelle , it should be my cache, sorry :)

[SergeyBiryukov]

In 47475:

Help/About: Add design for 5.4 About page.

Props melchoyce, marybaum, marktimemedia, elmastudio, ryelle, karmatosed, audrasjb, afercia, francina, sabernhardt.
See #49295.

[SergeyBiryukov]

Replying to ryelle:

In this patch, the header image is a background image pulled from the local uploads, so it won't work until that lives somewhere real. I think the header image SVG should be uploaded to the CDN, since it's a bit large for embedding into the CSS, but could go either way.

The image has been uploaded to WordPress.org, but [47475] didn't use a CDN URL just in case it needs any updates before the final release. The URL should be replaced with a CDN domain (s.w.org) before the final release. This is now added to the ​Pre Final Release checklist.

[SergeyBiryukov]

In 47476:

Coding Standards: Fix WPCS issue in [47475].

See #49295.

[SergeyBiryukov]

In 47477:

Help/About: Add design for 5.4 About page.

Props melchoyce, marybaum, marktimemedia, elmastudio, ryelle, karmatosed, audrasjb, afercia, francina, sabernhardt.
Reviewed by karmatosed, SergeyBiryukov.
Merges [47475] and [47476] to the 5.4 branch.
See #49295.

[garrett-eclipse]

Updated link to Field Guide now that it's published

[garrett-eclipse]

Testing the committed changes I found the Field Guide URL was using the p=### format and not it's permalink. In 49295.7.diff I've updated to use the permalink;
​https://make.wordpress.org/core/2020/03/03/wordpress-5-4-field-guide/

Also concerning use of the s.w.org CDN can we not just switch them to encoded data-uri's to avoid the external call?

[garrett-eclipse]

One other question while I tested on mobile, Should the footer contents vanish? Speaking of the 'Thank you for creating with WordPress.' message and version information found at the base of the page.

[ixkaito]

49295.8.diff​ fixes a typo in the about page.

[jorgefilipecosta]

Hi @garrett-eclipse, @ixkaito thank you for patches https://core.trac.wordpress.org/attachment/ticket/49295/49295.7.diff and https://core.trac.wordpress.org/attachment/ticket/49295/49295.8.diff both of them were committed.

[SergeyBiryukov]

In 47501:

Help/About: Fix a typo on the about page and fix a link.

The text "on your" appeared two times. This commit fixes the issue and removes the duplication. It also updates the field guide permalink.

Props garrett-eclipse, ixkaito.
Reviewed by jorgefilipecosta, karmatosed, SergeyBiryukov.
Merges [47500] to the 5.4 branch.
See #49295.

[melchoyce]

Replying to garrett-eclipse:

One other question while I tested on mobile, Should the footer contents vanish? Speaking of the 'Thank you for creating with WordPress.' message and version information found at the base of the page.

Do they on other pages on mobile? We should copy whatever the rest of the admin does.

[SergeyBiryukov]

Replying to garrett-eclipse:

One other question while I tested on mobile, Should the footer contents vanish? Speaking of the 'Thank you for creating with WordPress.' message and version information found at the base of the page.

Thanks for bringing this up! Per these lines in wp-admin/css/common.css​, hiding the footer on mobile on all admin pages does seem to be intentional, so it's not a regression. Introduced in [26134].

[garrett-eclipse]

Thanks for the commit @jorgefilipecosta.

And I appreciate the response @melchoyce & @SergeyBiryukov it appears it was intentional, although scanning the ticket I see no mention as to why. Seems an odd choice so will do some more digging and maybe look to re-introduce that helpful information to mobile users in the future.

[sabernhardt]

header: moving h1 tag to other text while maintaining previous styles, editing breakpoint for mobile layout, and adding fixes for Internet Explorer and/or RTL languages

[sabernhardt]

Arabic header section, in Firefox 74

[sabernhardt]

Header image overlap at 640 pixels wide, in Firefox

[sabernhardt]

IE11 at 1366 pixels wide, with 250% zoom

[sabernhardt]

IE11 at 560 pixels wide

[sabernhardt]

49295.9.diff has some changes for the header section:

1. The vertical text was intended as more visual than informational, but then it was placed inside a heading tag. The H1 would make it the most important text on the page.

However, it could be better to move the H1 tag anyway, so that it would be unique to each page. These choices seemed most logical to me:

About (What's New): "Say hello to more and better." (add Maintenance Releases section below this intro section later)
Credits: "WordPress is created by a worldwide team of passionate individuals."
Freedoms: "Freedoms"
Privacy: "Privacy"

The stylesheet is revised to match the current styling for "WordPress 5.4" as well as the first heading within the content, but with the new tags.

2. With the blue rectangles so close to the edge of the 600×600 background image, text can overlap the rectangles. The patch removes the 600px breaking point for header elements, so that layout starts at 782px instead. (This makes the header section taller at those widths, but it's a simpler option than editing either the SVG or the background-size property.)

3. The max-height: none replaces unset for Internet Explorer at a high zoom level and/or narrow browser width. The vertical text was switching direction from up to down instead of switching to horizontal, which pushed the other header content on top of later content. I also added clear: both to the section containers to prevent overlapping.

4. Again for IE11, -ms-writing-mode needed lr-tb (and rl-tb) instead of initial. It also includes the direction property.

5. The RTL-specific styles remove the 180-degree rotation to align the text to the outer edge.

[sabernhardt]

The last patch could use some further testing yet :)

If you're curious about the Arabic "Building more..." text, I needed to add that manually. (The translation was approved, but apparently after the most recent package was made available through the Updates page.)

[karmatosed]

In today's accessibility chat it was raised that the current patch to change away from a heading is still something they would advise isn't far enough. @melchoyce stepped up and created a rapid iteration as shown here:

Whilst, we are in release candidate, as this doesn't change strings it can be something to bring in. @audrasjb is being gracious enough to work on a patch.

The tagline is to be seen as a visual element in this case, which is a middle ground that keeps the art direction but iterates based on feedback the release title.

[ryelle]

I was just testing & updating 49295.9.diff​, and was about to post an updated patch— will the headings still need to be changed, or will this be an entirely new patch? There are other fixes in 49295.9.diff​ that should still come across.

[ryelle]

Well, in any case… I've uploaded two patches, 49295-heading-changes.diff​ iterates on 49295.9.diff​ to make the heading level changes consistent across all screens.

And if we don't need the heading change anymore, 49295-no-heading-changes.diff​ pulls out the non-heading related changes from 49295.9.diff​ so they're easier to merge into the patch @audrasjb is working on.

[audrasjb]

About page: remove text rotation on WordPress version and useless <em> tag as per accessibility team meeting statements

[audrasjb]

49295.10.diff

[audrasjb]

Hi,

49295.10.diff implements 49295.9.diff and:

• removes the 180deg rotation on WordPress version text
• removes an useless <em> tag as per accessibility team statement

No string change, please help testing this patch!

[davidbaumwald]

I am seeing the "WordPress 5.4" much smaller now. I think 49295.10.diff is missing the CSS changes that reference the old H1 in favor of the new P heading. Confirmed by @karmatosed in testing as well. Screenshot incoming.

[davidbaumwald]

Heading Font Size in .10.diff Patch

[ryelle]

49295.11.diff​ integrates the changes from 49295-heading-changes.diff, resets the font size on 5.4, and removes the un-rotating CSS from the media queries (since we're not rotating the text in the first place).

@davidbaumwald Can you try a hard refresh? sometimes the CSS caching is a bit aggressive.

[davidbaumwald]

@ryelle Yes, I did a hard refresh. I think is was just an issue of some missing CSS in the 49295.10.diff patch, and it's being reworked now. ;) Thanks!

[ryelle]

@davidbaumwald You could try with 49295.11.diff​? that should have all the appropriate CSS.

[SergeyBiryukov]

49295.12.diff​ builds on 49295.11.diff​ with one change:

• Readjust the logic in credits.php to avoid displaying two similar "WordPress is created by..." strings next to each other if the Credits API response is unavailable.

Still seeing one minor issue with it: "WordPress 5.4" overlaps with the image on smaller screen resolutions, see 49295.12.overlapping.png​. The initial mockup in comment:64 didn't have this issue as there was some vertical space between the image and the "WordPress 5.4" text. Currently trying to address that, any help appreciated.

[audrasjb]

There is still a minor issue, but this is not a blocker in my opinion.
For what it's worth, I'd sign-off for shipping 49295.12 as it is @SergeyBiryukov 🙂

[audrasjb]

Concerning the minor issue, I think one plan would be to handle positioning breakpoint by breakpoint. We could also rethink the CSS of the block to place the text after/at the bottom of the SVG image. But this would need a full refresh of the CSS of this block. Not sure it's doable in our timeframe.

[SergeyBiryukov]

Remove leftover writing-mode and transform properties

[audrasjb]

I didn't test it for now, but the current small screen media query uses a padding-top: 80%. Maybe we could use something like that to ensure the text is at the bottom of the svg image?

[sabernhardt]

.about__header {padding-top: 10%;} seems to work well enough for me to try in a patch :)

...which then would need to be removed so it doesn't add to the current 80% on the title div

[ryelle]

I didn't test it for now, but the current small screen media query uses a padding-top: 80%. Maybe we could use something like that to ensure the text is at the bottom of the svg image?

That only works because it's not flexed anymore— we can update the SVG to be slightly taller, which works to give the necessary space.

[SergeyBiryukov]

.about__header { padding-top: 10%; } didn't seem to work in my testing.

Took another approach in 49295.14.diff​ with a few breakpoints for the font size:

@media screen and (max-width: 1280px) {
	.about__header-title p {
		font-size: 3.4em;
	}
}

@media screen and (max-width: 1024px) {
	.about__header-title p {
		font-size: 3em;
	}
}

@media screen and (max-width: 960px) {
	.about__header-title p {
		font-size: 2.7em;
	}
}

That seems to work and resolves the overlapping.

[ryelle]

We've got a new image coming that avoids the overlap, working on a patch now.

[ryelle]

New header SVG for wp.org

[ryelle]

Nevermind that patch, doesn't work with RTL 😑

[ryelle]

New header SVG for wp.org (final.final 😅)

[ryelle]

RTL header SVG for wp.org

[ryelle]

49295.16.diff​ adds a new header image, along with an RTL version, to prevent the overlap. Now that we don't need to line up text, this also removes the unnecessary grid-styling. It should look like this: ​LTR page, ​RTL page.

The images will need to be uploaded & renamed in the patch.

[audrasjb]

Diagonal SVG

[audrasjb]

I tested 49295.16.diff and it looks great to me, thanks @ryelle !

[audrasjb]

Sorry, I took ownership by mistake :D

[SergeyBiryukov]

Replying to ryelle:

49295.16.diff​ adds a new header image, along with an RTL version, to prevent the overlap.

Looks great to me too. Thanks! :)

[SergeyBiryukov]

In 47521:

Help/About: Improve accessibility of the 5.4 About page:

• Remove vertical text and unnecessary italics.
• Update H1 headings on About, Credits, Freedoms, Privacy pages to be unique to each page.

Props sabernhardt, ryelle, melchoyce, karmatosed, audrasjb, afercia, davidbaumwald, SergeyBiryukov.
See #49295.

[SergeyBiryukov]

In 47522:

Help/About: Improve accessibility of the 5.4 About page:

• Remove vertical text and unnecessary italics.
• Update H1 headings to be unique for each of the About, Credits, Freedoms, Privacy pages.

Props sabernhardt, ryelle, melchoyce, karmatosed, audrasjb, afercia, davidbaumwald, SergeyBiryukov.
Reviewed by ryelle, SergeyBiryukov.
Merges [47521] to the 5.4 branch.
See #49295.