WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 4 months ago

#49295 closed task (blessed) (fixed)

5.4 about page

Reported by: karmatosed Owned by: karmatosed
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: needs-design has-patch dev-feedback needs-testing commit dev-feedback
Focuses: ui, accessibility, administration Cc:

Description (last modified by karmatosed)

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

Attachments (39)

49295-strings.patch (793 bytes) - added by marybaum 5 months ago.
Strings patch for aout.php
54-about-page-draft-RC1.png (715.5 KB) - added by audrasjb 5 months ago.
About Page: Introduce translation strings for WP 5.4 RC 1 (and keep the existing design for the moment)
49295.diff (15.1 KB) - added by audrasjb 5 months ago.
About Page: Introduce translation strings for WP 5.4 RC 1
About Page 5.4.jpg (4.2 MB) - added by melchoyce 5 months ago.
Rough first draft.
49295.2.diff (1.3 KB) - added by garrett-eclipse 5 months ago.
Minor string changes for the privacy portion
49295.3.diff (830 bytes) - added by Ipstenu 5 months ago.
Small grammar fix - periods go on the outside of HTML.
49295.4.diff (7.4 KB) - added by garrett-eclipse 5 months ago.
Combined patch to update privacy strings, fix period placement, update to use ’ and — (removing surrounding spacing) and drop line concerning Composer.
About Page 5.4 4.jpg (4.0 MB) - added by melchoyce 5 months ago.
Some updated colors, layout, and illustrations by @elmastudio.
49295-social-icons.png (29.8 KB) - added by ocean90 5 months ago.
Layer 10.jpg (374.9 KB) - added by marybaum 5 months ago.
New top block.
About Page 5.4 8.jpg (4.0 MB) - added by melchoyce 5 months ago.
Updated some colors and the header, including fixing the Code is Poetry typo
49295.5.diff (24.2 KB) - added by ryelle 5 months ago.
header.svg (11.4 KB) - added by ryelle 5 months ago.
Capture d’écran 2020-03-18 à 17.45.00.png (211.1 KB) - added by audrasjb 5 months ago.
Vertical overflow issue on small height viewports
49295.6.diff (24.3 KB) - added by audrasjb 5 months ago.
Fix SVG image vertical overflow on small height viewports
screencapture-localhost-8888-wordpress-dev-GIT-wordpress-develop-build-wp-admin-credits-php-2020-03-18-17_46_42.png (305.7 KB) - added by audrasjb 5 months ago.
Vertical margin issue on credits screen (not addressed in 49265.6.diff)
49295.7.diff (680 bytes) - added by garrett-eclipse 5 months ago.
Updated link to Field Guide now that it's published
49295.8.diff (861 bytes) - added by ixkaito 5 months ago.
49295.9.diff (5.5 KB) - added by sabernhardt 5 months ago.
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
about-rtl-ar-firefox.png (60.8 KB) - added by sabernhardt 5 months ago.
Arabic header section, in Firefox 74
about-firefox-640-viewport-width.png (41.0 KB) - added by sabernhardt 5 months ago.
Header image overlap at 640 pixels wide, in Firefox
about-ie-1366-window-250-zoom.png (49.1 KB) - added by sabernhardt 5 months ago.
IE11 at 1366 pixels wide, with 250% zoom
about-ie-560-viewport-width.png (43.1 KB) - added by sabernhardt 5 months ago.
IE11 at 560 pixels wide
49295-heading-changes.diff (5.8 KB) - added by ryelle 5 months ago.
49295-no-heading-changes.diff (1.2 KB) - added by ryelle 5 months ago.
49295.10.diff (5.3 KB) - added by audrasjb 5 months ago.
About page: remove text rotation on WordPress version and useless <em> tag as per accessibility team meeting statements
Capture d’écran 2020-03-27 à 18.31.07.png (116.9 KB) - added by audrasjb 5 months ago.
49295.10.diff
about-page-heading-font-size.png (111.4 KB) - added by davidbaumwald 5 months ago.
Heading Font Size in .10.diff Patch
49295.11.diff (6.9 KB) - added by ryelle 5 months ago.
49295.12.diff (7.7 KB) - added by SergeyBiryukov 5 months ago.
49295.12.overlapping.png (68.0 KB) - added by SergeyBiryukov 5 months ago.
49295.13.diff (8.0 KB) - added by SergeyBiryukov 5 months ago.
Remove leftover writing-mode and transform properties
49295.14.diff (8.2 KB) - added by SergeyBiryukov 5 months ago.
header-diagonal.svg (11.6 KB) - added by ryelle 5 months ago.
New header SVG for wp.org
49295.15.diff (9.9 KB) - added by ryelle 5 months ago.
49295.16.diff (10.1 KB) - added by ryelle 5 months ago.
header-diagonal.2.svg (11.6 KB) - added by ryelle 5 months ago.
New header SVG for wp.org (final.final 😅)
header-diagonal-rtl.svg (11.6 KB) - added by ryelle 5 months ago.
RTL header SVG for wp.org
Capture d’écran 2020-03-28 à 00.15.36.png (113.1 KB) - added by audrasjb 5 months ago.
Diagonal SVG

Change History (128)

#1 @SergeyBiryukov
7 months ago

  • Milestone changed from Awaiting Review to 5.4

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 months ago

@marybaum
5 months ago

Strings patch for aout.php

#5 @marybaum
5 months ago

  • Keywords has-patch needs-patch-review added; needs-patch removed

#6 @birgire
5 months ago

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?

#7 @audrasjb
5 months ago

  • Keywords needs-patch added; has-patch needs-patch-review removed

Hi @marybaum,

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

#8 @francina
5 months ago

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!

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


5 months ago

@audrasjb
5 months ago

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

@audrasjb
5 months ago

About Page: Introduce translation strings for WP 5.4 RC 1

@melchoyce
5 months ago

Rough first draft.

#10 @audrasjb
5 months ago

  • Keywords has-patch needs-refresh added; needs-patch removed

@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?

#11 @melchoyce
5 months ago

@marybaum What are your thoughts?

#12 @marybaum
5 months ago

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.

#13 @melchoyce
5 months ago

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

#14 @karmatosed
5 months ago

  • Description modified (diff)

#15 @SergeyBiryukov
5 months ago

In 47422:

Help/About: Add strings for 5.4 About page.

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

@garrett-eclipse
5 months ago

Minor string changes for the privacy portion

#16 @garrett-eclipse
5 months ago

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

#17 follow-up: @audrasjb
5 months ago

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… 😬

#18 in reply to: ↑ 17 @SergeyBiryukov
5 months ago

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 :)

#19 @garrett-eclipse
5 months ago

  • Keywords i18n-change dev-feedback commit added

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.

#20 @SergeyBiryukov
5 months ago

@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
5 months ago

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

#21 @Ipstenu
5 months ago

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.

#22 follow-up: @ocean90
5 months ago

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 &mdash; was used to make translating strings with dashes easier. Same for apostrophes, we should have been the &#8217; 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.

#23 in reply to: ↑ 22 @SergeyBiryukov
5 months ago

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
5 months ago

Combined patch to update privacy strings, fix period placement, update to use &#8217; and &mdash; (removing surrounding spacing) and drop line concerning Composer.

#24 @garrett-eclipse
5 months ago

  • Keywords needs-refresh removed

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 &#8217; entity
  • Updated dashes to &mdash; 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
5 months ago

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

#25 @ocean90
5 months ago

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.

#26 @ocean90
5 months ago

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

This ticket was mentioned in Slack in #core by ocean90. View the logs.


5 months ago

#28 @SergeyBiryukov
5 months ago

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.

#29 @SergeyBiryukov
5 months ago

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 months ago

#31 @afercia
5 months ago

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.

#32 @francina
5 months ago

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

#33 @melchoyce
5 months ago

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:

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
5 months ago

New top block.

#34 @marybaum
5 months ago

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.

Last edited 5 months ago by marybaum (previous) (diff)

#35 follow-up: @La Geek
5 months ago

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.

#36 in reply to: ↑ 35 ; follow-up: @audrasjb
5 months ago

  • Keywords commit removed

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

#37 in reply to: ↑ 36 ; follow-up: @La Geek
5 months ago

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

#38 in reply to: ↑ 37 @audrasjb
5 months ago

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 :)

#39 @sabernhardt
5 months ago

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

@melchoyce
5 months ago

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

@ryelle
5 months ago

@ryelle
5 months ago

#40 follow-up: @ryelle
5 months ago

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
5 months ago

Vertical overflow issue on small height viewports

@audrasjb
5 months ago

Fix SVG image vertical overflow on small height viewports

#41 @audrasjb
5 months ago

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
5 months ago

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

#42 @ryelle
5 months ago

@audrasjb what OS & browser is that?

#43 @audrasjb
5 months ago

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

This ticket was mentioned in Slack in #core by karmatosed. View the logs.


5 months ago

#45 @ryelle
5 months ago

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

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


5 months ago

#47 @audrasjb
5 months ago

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

#48 @SergeyBiryukov
5 months ago

In 47475:

Help/About: Add design for 5.4 About page.

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

#49 in reply to: ↑ 40 @SergeyBiryukov
5 months ago

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.

#50 @SergeyBiryukov
5 months ago

In 47476:

Coding Standards: Fix WPCS issue in [47475].

See #49295.

#51 @SergeyBiryukov
5 months ago

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
5 months ago

Updated link to Field Guide now that it's published

#52 @garrett-eclipse
5 months ago

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?

#53 follow-ups: @garrett-eclipse
5 months ago

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
5 months ago

#54 @ixkaito
5 months ago

49295.8.diff fixes a typo in the about page.

Last edited 5 months ago by ixkaito (previous) (diff)

#56 @SergeyBiryukov
5 months ago

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.

#57 in reply to: ↑ 53 @melchoyce
5 months ago

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.

#58 in reply to: ↑ 53 @SergeyBiryukov
5 months ago

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].

#59 @garrett-eclipse
5 months ago

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
5 months ago

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
5 months ago

Arabic header section, in Firefox 74

@sabernhardt
5 months ago

Header image overlap at 640 pixels wide, in Firefox

@sabernhardt
5 months ago

IE11 at 1366 pixels wide, with 250% zoom

@sabernhardt
5 months ago

IE11 at 560 pixels wide

#60 @sabernhardt
5 months ago

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.

  1. 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.)
  1. 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.
  1. Again for IE11, -ms-writing-mode needed lr-tb (and rl-tb) instead of initial. It also includes the direction property.
  1. The RTL-specific styles remove the 180-degree rotation to align the text to the outer edge.

#61 @sabernhardt
5 months ago

  • Keywords needs-testing added

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.)

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


5 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 months ago

#64 @karmatosed
5 months ago

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:

http://cldup.com/UOFvHaKfSo.png

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.

#65 @ryelle
5 months ago

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.

#66 @ryelle
5 months ago

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
5 months ago

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

#67 @audrasjb
5 months ago

  • Keywords i18n-change removed

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!

#68 @davidbaumwald
5 months ago

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
5 months ago

Heading Font Size in .10.diff Patch

@ryelle
5 months ago

#69 @ryelle
5 months ago

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.

#70 @davidbaumwald
5 months ago

@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!

#71 @ryelle
5 months ago

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

#72 @SergeyBiryukov
5 months ago

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.

Last edited 5 months ago by SergeyBiryukov (previous) (diff)

#73 @audrasjb
5 months ago

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 🙂

#74 @audrasjb
5 months ago

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.

Last edited 5 months ago by audrasjb (previous) (diff)

@SergeyBiryukov
5 months ago

Remove leftover writing-mode and transform properties

#75 @audrasjb
5 months ago

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?

#76 @sabernhardt
5 months ago

.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

Last edited 5 months ago by sabernhardt (previous) (diff)

#77 @ryelle
5 months ago

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.

#78 @SergeyBiryukov
5 months ago

.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.

#79 @ryelle
5 months ago

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

@ryelle
5 months ago

New header SVG for wp.org

@ryelle
5 months ago

#80 @ryelle
5 months ago

Nevermind that patch, doesn't work with RTL 😑

@ryelle
5 months ago

@ryelle
5 months ago

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

@ryelle
5 months ago

RTL header SVG for wp.org

#81 follow-up: @ryelle
5 months ago

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.

#82 @audrasjb
5 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

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

#83 @audrasjb
5 months ago

  • Owner changed from audrasjb to karmatosed

Sorry, I took ownership by mistake :D

#84 in reply to: ↑ 81 @SergeyBiryukov
5 months ago

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! :)

#85 @SergeyBiryukov
5 months ago

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.

#86 @SergeyBiryukov
5 months ago

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.

#87 @SergeyBiryukov
4 months ago

In 47532:

Help/About: Use CDN URLs for 5.4 About page header images.

See #49295.

#88 @desrosj
4 months ago

  • Keywords commit added

@SergeyBiryukov [47532] looks good to backport.

#89 @SergeyBiryukov
4 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 47533:

Help/About: Use CDN URLs for 5.4 About page header images.

Reviewed by desrosj, SergeyBiryukov.
Merges [47532] to the 5.4 branch.
Fixes #49295.

Note: See TracTickets for help on using tickets.