Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#50416 closed task (blessed) (fixed)

5.5 About Page

Reported by: davidbaumwald's profile davidbaumwald Owned by: marybaum's profile marybaum
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: i18n-change needs-patch commit dev-reviewed
Focuses: ui, accessibility, administration, ui-copy Cc:

Description (last modified by SergeyBiryukov)

This is where discussion and work will take place during 5.5 for the About page.

Attachments (18)

About WordPress 5.5.html (17.2 KB) - added by marybaum 4 years ago.
First draft of copy
50416.diff (22.9 KB) - added by audrasjb 4 years ago.
Tried to put together the copy in the current 5.4 about page, for copy review
About Page 5.5 - Draft.png (978.0 KB) - added by estelaris 4 years ago.
About Page 5.5.png (617.7 KB) - added by estelaris 4 years ago.
50416.2.diff (1.3 KB) - added by ocean90 4 years ago.
50416.3.diff (1.3 KB) - added by ocean90 4 years ago.
Clarify category vs. custom taxonomy
Screen Shot 2020-07-31 at 11.46.36 AM.png (175.7 KB) - added by ryelle 4 years ago.
Security section with video for reference
wp55-about-page-security-section.mp4 (590.8 KB) - added by audrasjb 4 years ago.
New video for autoupdates sections
50416.4.diff (1.2 KB) - added by whyisjake 4 years ago.
50416.5.diff (854 bytes) - added by SergeyBiryukov 4 years ago.
50416.6.diff (599 bytes) - added by ryelle 4 years ago.
Fix for CSS after musician name removal
image editor.mp4 (2.3 MB) - added by marybaum 4 years ago.
New image-editor video.
wp55-about-page-security-section.2.mp4 (590.8 KB) - added by marybaum 4 years ago.
New security video.
block patterns.mp4 (1.1 MB) - added by marybaum 4 years ago.
New block-patterns video
small-videos.png (218.1 KB) - added by ryelle 4 years ago.
screenshot with latest videos
About Page 5.5.2.png (526.0 KB) - added by estelaris 4 years ago.
@ryelle and @desrosj here is the last design update
50416.7.diff (5.8 KB) - added by ryelle 4 years ago.
Screen Shot 2020-08-07 at 6.32.59 PM.png (140.6 KB) - added by ryelle 4 years ago.

Change History (170)

#1 @davidbaumwald
4 years ago

  • Milestone changed from Awaiting Review to 5.5

#2 @marybaum
4 years ago

  • Owner set to marybaum
  • Status changed from new to assigned

#3 @marybaum
4 years ago

  • Keywords needs-strategy-brief needs-copy added

5.5 About Page team, for matcher: @yvettesonneveld, @michelebutcher-jones, @estelaris, @metalandcoffee, @melchoyce, @marktimemedia, @abhanonstopnewsuk, @elmastudio Welcome aboard and props to all for taking this journey!

Last edited 4 years ago by marybaum (previous) (diff)

#4 @marybaum
4 years ago

Props @davidbaumwald for opening this ticket!

#5 in reply to: ↑ description @marybaum
4 years ago

Adding links here to #49295 for reference and @SergeyBiryukov's ticket #50372.

We can certainly fix the contrast on the upgrade notices in 5.5 and going forward!

Replying to davidbaumwald:

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

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


4 years ago

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


4 years ago

@marybaum
4 years ago

First draft of copy

#8 @davidbaumwald
4 years ago

@marybaum Thanks! Can you submit the beginnings of a patch for this so others can begin contributing to the work?

Last edited 4 years ago by davidbaumwald (previous) (diff)

#9 @marybaum
4 years ago

  • Focuses ui-copy added
  • Keywords has-strategy-brief has-first-copy needs-layout added; needs-patch needs-design needs-strategy-brief needs-copy removed

This html file is a first go at the copy, based largely on this message strategy (https://docs.google.com/document/d/1Bw4aTbtoqAdYLxuXiZjKIYVnePzLt772qlud83imTx8/edit#heading=h.dulxln433j2l)

I learned to use message strategies at my first good agency job, in 1983. They were a requirement on every project and had come to the place I was working by way of Ted Bates & Company, a Chicago ad agency whose philosophy was "It's not creative unless it sells."

Contemporary agencies sometimes call these creative briefs; it doesn't really matter what we call them, as long as we're aware that our purpose is to communicate with our users and help them celebrate everything great about this new software they've just downloaded -- and for FREE!

Rough layouts to come shortly.

#10 @davidbaumwald
4 years ago

  • Keywords needs-design needs-patch needs-copy-review added; has-strategy-brief has-first-copy needs-layout removed

Updating tags to standard Trac workflow.

@audrasjb
4 years ago

Tried to put together the copy in the current 5.4 about page, for copy review

#11 follow-up: @audrasjb
4 years ago

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

Thanks @marybaum, it's good to see the copy one month ahead of the release day :)

In 50416.diff, I tried to put together the HTML blob into the current 5.4 about page screen as it could help to copy review what @marybaum wrote.

Please don't run WPCS linting! 😂 I tried to minimized the amount of semantics issues but I didn't run the coding standards tools.

I also fixed some typos.

I'll add a complete review of the issues I found on the copy later :)

#12 in reply to: ↑ 11 @marybaum
4 years ago

Have no fear! I won't be running this copy near any sort of linting! This is advertising, not editorial, ui or software. Read it out loud and see if you can catch the cadences -- there are places where the text repeats itself for effect, as you might see in poetry or music.

The paragraph breaks are intentional -- I break rules in this kind of copy. Those are not mistakes. They're decisions.

Remember that my degree is in Make it look intentional.

Replying to audrasjb:

Thanks @marybaum, it's good to see the copy one month ahead of the release day :)

In 50416.diff, I tried to put together the HTML blob into the current 5.4 about page screen as it could help to copy review what @marybaum wrote.

Please don't run WPCS linting! 😂 I tried to minimized the amount of semantics issues but I didn't run the coding standards tools.

I also fixed some typos.

I'll add a complete review of the issues I found on the copy later :)

#14 follow-up: @ryelle
4 years ago

The PR linked above iterates on the previous patch — it cleans up some of the links & HTML in the strings, and tweaks how the content is currently displayed so it can be readable until we get a proper layout (I'm happy to collaborate with any designers to go over what framework we have, what we can easily do, what we can stretch…). I also added a screenshot of the current content.

There are still more than a few places with html tags in strings. For example,

<strong>Inline image editing</strong> - Crop, rotate, and zoom your photos right from the image block. If you do a lot of work with images, this alone could save you hours every week!

We try to avoid this usually, but splitting these strings up would mean more fragmented translations. Should these be tweaked to remove the extra HTML? Is this use of HTML not an issue? some translator input would be good here.

The list of gutenberg release tags is a lot — is there a single make post, or maybe a tag, that we could link to instead? If not, we'll want to figure out some way to make those more descriptive for link navigation (ex, screen readers).

For accessibility (since headings came up late last release), the current heading outline is:

1. Welcome to WordPress 5.5.
	2. Speed
	2. Search
	2. Security
	2. Speed. Search. Security. The power of three big improvements, all packed into WordPress 5.5.
	2. Highlights from the block editor
	2. Wait! There’s more!
		3. Better accessibility
	2. Just for developers
		3. Lazy-loading images
		3. PHPMailer
		3. Other changes for developers

#15 in reply to: ↑ description @marybaum
4 years ago

We have a layout! Huge props @estelaris.

https://www.figma.com/file/6DYWCgcbVKUYY2fcgC9LsX/About-page-5.5?node-id=40%3A127

See yall at devchat for show n tell! Yes, I'll add that to the agenda 😜

Replying to davidbaumwald:

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

#16 @audrasjb
4 years ago

  • Keywords has-patch removed

Looks like this Figma file is not publicly accessible @marybaum @estelaris :)

#17 @estelaris
4 years ago

  • Keywords needs-design-feedback added; needs-design removed

#18 @audrasjb
4 years ago

Great! Thanks @estelaris and everyone who worked on this! 😃

I took a look on the proposal and here is what I noted on my side:

Header and Main navigation

  • Shouldn't we use the official WordPress font/style for the upper right "WordPress" text + logo?
  • The image banner is pretty big, in my opinion, it would be nice to reduce it a little (but that's just a personal thought)
  • More importantly, the colors used doesn't meet accessibility guidelines: #87BA22 / #fff
  • We'll need styles for navigation items hover/focus (must be something else than just color change)
  • I’m still unable to understand why we need/want to put "5.5" above "WordPress" in the main title, but that was already the case with 5.4 and 5.3 ;)

Editorial sections

what's the idea to manage column’s content?

  • "Dynamically" via CSS so columns auto-adapt themselves according to their content. Pros: columns will always have quite the same height on all languages. Cons: we can't ensure it will looks like that everywhere (for example the text "As of right now, you're finally done." will probably appear on the second column in many cases)

The "Highlights from block editor" section, doesn't use the good bullet style (according to the rest of the page). It shouldn't be "disc" but the "dot" used in the accessibility section as "disc" appear to be used for level two items (like in "Other changes for developers" section".

We'll need to add links styles to section’s content. At least two cases: links in regular sections (normal + focus/hover styles) and links contained in the green "For developers" box (normal + hover/focus styles).

Last edited 4 years ago by audrasjb (previous) (diff)

#19 @ryelle
4 years ago

Re columns, in the About page dev documentation, we have the has-2-columns helper class. It's not dynamic css, but we usually want headings at the top of each column. For the a11y section, we could probably bring back a dynamic column helper class.

I can build this up in the current about page framework to see what else it needs, while we wait for the updated nav & link styles - i'll update my PR before the core chat I saw there's copy & design discussion, so holding off on this for now.

Last edited 4 years ago by ryelle (previous) (diff)

This ticket was mentioned in Slack in #design by estelaris. View the logs.


4 years ago

#21 @afercia
4 years ago

More importantly, the colors used doesn't meet accessibility guidelines: #87BA22 / #fff

Yep, not sure that's the exact shade of green but worth reminding any text/background contrast must pass the 4.5:1 threshold.

Couple more initial considerations:

1
The all-uppercase WORDPRESS at the top right doesn't meet the WordPress logo usage guidelines. I think I already mentioned this for the previous release 5.4 but it wasn't changed. If it's okay for the projects leads, no objections from me.

2
The copy:

And that redundant Error: prefix in error notices? Gone.

Needs to be removed. That change was reverted in [48115].

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


4 years ago

#23 @cbringmann
4 years ago

Thanks to all who have worked on this so far. I think it is looking great! A couple of comments and suggestions:

Refined drag-and-drop

Capitalize the r

I wonder if shifting the tone to be neutral and features-focused would engage a larger audience? Question for feedback as I am new to the release process and am curious what tone has worked well in the past.

#24 @audrasjb
4 years ago

I wonder if shifting the tone to be neutral and features-focused would engage a larger audience?

I'd second that @cbringmann. I'm personally more comfortable with neutral tone and as General Translation Editor for a localized version of WordPress, it would be easier to translate.
But if most of the core team members are happy with that tone, I'm fine with the proposal. Not a big deal for me :)

Last edited 4 years ago by audrasjb (previous) (diff)

#25 in reply to: ↑ description ; follow-up: @marybaum
4 years ago

The design is certainly a work in progress, and we have a lot to work through. We're all open to any refinements, particularly from an accessibility point of view.

In terms of the copy, it's tempting to think that a neutral tone and dispassionste listing of features would appeal -- but that doesn't even work in training materials. All that does is bore people. (Wonder why so many Americans never read their email? That's a big part of it -- in uni, a lot of us get taught to write in a way that makes us sound smart but does nothing to communicate with the actual human beings on the other side of the screen.)

The only people who get any training at all in how to connect with a human are journalists (often, just sportswriters) and novelists. And then we advertising and direct-marketing people have to retrain copywriters all over again.

But this is the closest we come to advertising. And in advertising, we remember two things: we are always and only ever talking to one person at a time, and we talk to the emotions -- to the benefits.

Nearly a century's worth of data has shown that time and again, people buy what they want (never what they need) and they buy from people who understand them -- who have walked miles and miles in their shoes.

Abha, Yvette and I have pinned several books and a few ads to both the 5.5 and 5.6 chats that teach this point -- And I'll leave you with the barest hint of a story to make my point that this is true at every level of society.

Want to know why so many Americans carry phones from AT&T Wireless? Especially when, at the dawn of the iPhone's history, the company Apple made the deal with was called Cingular, and it had the best reputation across US wireless companies? Well, I'm in a position to know that the first thing that happened in a long process was that the CEO of Cingular Wireless was rejected from a certain country club here in St. Louis, Mo. I kid you knot -- and it started a chain reaction that over the next many years led to the configuration of wireless tech companies we see today.

Of course there were many steps in the process -- but that was the trigger.

So, no -- all a neutral tone does is confirm a reader's fear that a given piece of copy is for someone other than the only person they ever want to read about: Me. Or, to us, You -- with occasional mentions of a supporting cast whose first names are all Your: Your friends, your family, your boss -- and more.

I've spent just about forty years studying this, and I don't consider myself all that good at it (yet) but any time I've deviated from the drama we all live in, called Life, and tried to talk down to or over the head of a reader, or to more than one person at a time, the only audience I've ever reached was (back when we printed things) a couple of fruit flies on the banana peel in the kitchen trash, where my group's copy ended up. And not one of them had any money ...

"I wonder if shifting the tone to be neutral and features-focused would engage a larger audience?"

#26 in reply to: ↑ description ; follow-up: @marybaum
4 years ago

There's a later version of the layout with considerably shorter, tighter copy here:

https://www.figma.com/file/D4tVZ0mJDcaRdODjk7XYTv/About-page-5.5-(Copy)?node-id=0%3A1

#27 follow-up: @audrasjb
4 years ago

Thanks @marybaum for elaborating. To be clear, I'm fine with the current copy if everyone if ok with that.

I’d just point out that the general aim you described for this page looks (culturally) very US-centric to me, but it is something each Locale can probably adapt on their side.

Last edited 4 years ago by audrasjb (previous) (diff)

#28 in reply to: ↑ 25 @marybaum
4 years ago

  • Description modified (diff)

Replying to marybaum:

The design is certainly a work in progress, and we have a lot to work through. We're all open to any refinements, particularly from an accessibility point of view.

In terms of the copy, it's tempting to think that a neutral tone and dispassionste listing of features would appeal -- but that doesn't even work in training materials. All that does is bore people. (Wonder why so many Americans never read their email? That's a big part of it -- in uni, a lot of us get taught to write in a way that makes us sound smart but does nothing to communicate with the actual human beings on the other side of the screen.)

The only people who get any training at all in how to connect with a human are journalists (often, just sportswriters) and novelists. And then we advertising and direct-marketing people have to retrain copywriters all over again.

But this is the closest we come to advertising. And in advertising, we remember two things: we are always and only ever talking to one person at a time, and we talk to the emotions -- to the benefits.

Nearly a century's worth of data has shown that time and again, people buy what they want (never what they need) and they buy from people who understand them -- who have walked miles and miles in their shoes.

Abha, Yvette and I have pinned several books and a few ads to both the 5.5 and 5.6 chats that teach this point -- And I'll leave you with the barest hint of a story to make my point that this is true at every level of society.

Want to know why so many Americans carry phones from AT&T Wireless? Especially when, at the dawn of the iPhone's history, the company Apple made the deal with was called Cingular, and it had the best reputation across US wireless companies? Well, I'm in a position to know that the first thing that happened in a long process was that the CEO of Cingular Wireless was rejected from a certain country club here in St. Louis, Mo. I kid you knot -- and it started a chain reaction that over the next many years led to the configuration of wireless tech companies we see today.

Of course there were many steps in the process -- but that was the trigger.

So, no -- all a neutral tone does is confirm a reader's fear that a given piece of copy is for someone other than the only person they ever want to read about: Me. Or, to us, You -- with occasional mentions of a supporting cast whose first names are all Your: Your friends, your family, your boss -- and more.

I've spent just about forty years studying this, and I don't consider myself all that good at it (yet) but any time I've deviated from the drama we all live in, called Life, and tried to talk down to or over the head of a reader, or to more than one person at a time, the only audience I've ever reached was (back when we printed things) a couple of fruit flies on the banana peel in the kitchen trash, where my group's copy ended up. And not one of them had any money ...

"I wonder if shifting the tone to be neutral and features-focused would engage a larger audience?"

#29 @davidbaumwald
4 years ago

  • Description modified (diff)

#30 in reply to: ↑ 27 @marybaum
4 years ago

  • Description modified (diff)

Replying to audrasjb:

Thanks @marybaum for elaborating. To be clear, I'm fine with the current copy if everyone if ok with that.

I’d just point out that the general aim you described for this page looks (culturally) very US-centric to me, but it is something each Locale can probably adapt on their side.

I'll concede that any fantasies I ever had of living en France ended with "How would I write decent copy in French?" ...

When we get to 5.6, the Marketing team will start building actual personae we can write to, so there will be some actual data around the concerns we can address. And it will be a good thing to keep in mind that talking to one person in copy, and commiserating over a given frustration in a given part of the UX, doesn't mean we're always talking to a 50-year-old baseball fan in Missouri.

A couple people have caught expressions that are too US-centric already, and we should definitely keep looking for those and making the experiences they represent readable -- feelable! -- across the common experience we all have as WP admin users.

That's one thing I like about You -- each of us is You if the experience is relatable.

Last edited 4 years ago by marybaum (previous) (diff)

#31 follow-up: @davidbaumwald
4 years ago

  • Description modified (diff)

@marybaum Can you not edit the ticket description when commenting. I think the ticket description should be meaningful and descriptive of the process taking place here. Resetting the description again to the original.

Last edited 4 years ago by davidbaumwald (previous) (diff)

#32 in reply to: ↑ 31 @marybaum
4 years ago

Oh pardon me -- of course.

Replying to davidbaumwald:

@marybaum Can you not edit the ticket description when commenting. I think the ticket description should be meaningful and descriptive of the process taking place here. Resetting the description again to the original.

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


4 years ago

ryelle commented on PR #403:


4 years ago
#34

About page
https://user-images.githubusercontent.com/541093/87802849-c69de780-c81f-11ea-8aef-552c4ee893a2.png

Credits page
https://user-images.githubusercontent.com/541093/87802855-c9004180-c81f-11ea-81dd-ac46b1eb111b.png

Freedoms page
https://user-images.githubusercontent.com/541093/87802867-cc93c880-c81f-11ea-8180-0eecc5b50cb6.png

#35 @ryelle
4 years ago

I updated the PR with the current copy from Figma, and applied the current colors & basic layout to the page, so we can see it "in practice". I attached some screenshots to the PR, it also shows how these styles apply to the other pages in this section (credits & freedoms, privacy is simple enough). I think we'll want to change the "subtle background" green color (behind contributor photos, behind freedom header). Maybe a color from the navigation updates can be used here?

Once the design is more settled, can I get the SVGs for the header & rope-bars? I can only extract PNGs from the Figma.

Again, for accessibility review, the current heading hierarchy is:

1. Welcome to WordPress 5.5.
	2. Speed
	2. Search
	2. Security
	2. Highlights from the block editor
		3. Inline image editing
		3. Block patterns
		3. Device previews
		3. A better, smoother editing experience with (to name a few):
		3. More design tools, for better control. For starters:
	2. Wait! There’s more!
	2. Just for developers
		3. Lazy-loading images
		3. PHPMailer
		3. Other changes for developers
		3. Check the Field Guide for more!

#36 in reply to: ↑ 26 ; follow-up: @andreamiddleton
4 years ago

Replying to marybaum:

There's a later version of the layout with considerably shorter, tighter copy here:

https://www.figma.com/file/D4tVZ0mJDcaRdODjk7XYTv/About-page-5.5-(Copy)?node-id=0%3A1

I'm not certain that I see the shorter, tighter copy in the link you shared, @marybaum -- is it in "WP Admin Wrapper"? (Ack! I might be Figma-challenged!)

I agree that neutral language is not the goal here, but I don't agree that the About page should be treated as advertising copy. This page always conveys the release team's enthusiasm for the features they're bringing to WordPress, but the intended audience is already using WordPress. To ensure readability and easy translation, the copy should be friendly and somewhat casual, but also concise.

I think a little additional copy editing is in order, to bring this closer to the WordPress voice. Happy to help with that in the same way that Josepha has in the past, but I want to make sure I'm working from the most recent draft. :)

#37 @cbringmann
4 years ago

Thanks for your response @marybaum and for your additional input @andreamiddleton. The term, WordPress voice, is exactly what I intended when I used the word neutral. Apologies for the misunderstanding. It is exciting to see this take shape!

#38 in reply to: ↑ 36 @marybaum
4 years ago

Replying to andreamiddleton:

Replying to marybaum:

There's a later version of the layout with considerably shorter, tighter copy here:

https://www.figma.com/file/D4tVZ0mJDcaRdODjk7XYTv/About-page-5.5-(Copy)?node-id=0%3A1

I'm not certain that I see the shorter, tighter copy in the link you shared, @marybaum -- is it in "WP Admin Wrapper"? (Ack! I might be Figma-challenged!)

I agree that neutral language is not the goal here, but I don't agree that the About page should be treated as advertising copy. This page always conveys the release team's enthusiasm for the features they're bringing to WordPress, but the intended audience is already using WordPress. To ensure readability and easy translation, the copy should be friendly and somewhat casual, but also concise.

I think a little additional copy editing is in order, to bring this closer to the WordPress voice. Happy to help with that in the same way that Josepha has in the past, but I want to make sure I'm working from the most recent draft. :)

Our 5.5 team spent a good part of the afternoon/evening (time zones ... ) working on the copy today in a Google doc here:

https://docs.google.com/document/d/12Ag6CHVRIsX0DuGeQD9eniZCLJSNf_7rJamZfmxgZoI/edit

And I agree that the people seeing this are already users. I may be overstating the case when I say it's advertising, exactly, though that's my background, and I've always thought of great ad copy as poetic and inspiring. When Josepha and I did the final edit for 5.4, I joked that I thought we were writing our version of a Lexus ad. And we got to a final version in about 45 minutes.

I don't imagine that we're necessarily done, but the good news is we're farther along in the process, earlier, than I've been aware of in recent years. As long as we have a draft that talks to the reader as a single person, from the viewpoint of a fellow traveler and not as a hero announcing things from on high, and as long as we bring some energy to the process, I'm happy.

#39 @afercia
4 years ago

I'd agree with @audrasjb that sounds like there's something a bit too much (culturally) US-centric not only in the tone of the copy but also in the tone of some comments on this ticket.

I'd like to kindly ask to please refrain to refer to a specific cultural background. WordPress is a global project. The number of downloads from non-US countries surpassed the one from the US many years ago :) While I do realize referring to our own cultural background is a natural mindset for all of us, I do also think it should be avoided as much as possible.

Some of the most US-centric sayings used above makes me feel a bit uncomfortable, also because I don't understand them. They're way too "local" and, de facto, they exclude me from a full understanding. They're not inclusive. Thank you.

#40 @desrosj
4 years ago

For some reason, I am not receiving email notifications for this ticket. That's a me problem though. I am going to have some feedback today!

I do love the design and layout. I agree with the need to adjust the tone as @andreamiddleton @cbringmann, and @audrasjb expressed above.

I also think we have a lot more developer features to call out. Those are much more clear now and were not when the team started to create the copy, so not an oversight there at all.

@marybaum the latest Google Doc link is not public. Can you adjust that please? Also, is it best to make my suggestions there directly?

#41 @desrosj
4 years ago

First, here is a link to the latest document that is being used: https://docs.google.com/document/d/12Ag6CHVRIsX0DuGeQD9eniZCLJSNf_7rJamZfmxgZoI/edit?usp=sharing. The one above was not publicly available.

Overall, great work on this page so far! For me, reads very, very long and feels pretty wordy.

I went back and looked at a handful of the last releases for perspective and to confirm that it was a lot longer than usual. Here are some numbers that I found since (and including) 5.0:

  • An average of ~3430 characters.
  • An average of ~40 sentences.
  • An average of ~549 words.

Before suggestions were made, the current draft has:

  • 5243 characters.
  • 106 sentences.
  • 947 words.

With this context in mind, the current draft is roughly double the average size of the About page from the last 5 releases. I totally acknowledge that this release has a lot of great things to call out, so understand it's hard to get close to these averages, but I think those are great numbers to keep in mind as we trim the current draft down and refine. A user should be able to quickly gloss over the About page and be informed about the features that were just installed with the update.

With this in mind, I went through and made a large number of suggestions. I'll briefly summarize them here to illustrate my thinking.

First, the developer section was missing a large number of changes that landed later in the release cycle. I updated the list and suggested the following tickets be added to the Developer section as large call outs (ones that I do not feel strongly about having their own call out section have an *):

  • Defining environment types (#33161)
  • Server-side registered blocks in the REST API (#50263)
  • Passing data to template files (#21676)
  • Dashicons (#49913)*

Everything else was either removed, suggested to be removed, or shuffled down into the bulleted list with a shorter one sentence description.

If I were quickly skimming the page, it is not clear for some sections what exactly the new feature is. This was mainly true in the Security section. Without reading the entire section, you would not know that enabling auto-updates was now available. I made some suggestions to shorten that section, and I also feel fairly strongly that being able to update plugins/themes by uploading a ZIP file (#9757) should also be called out somewhere on this page (another late addition). I decided to suggest it be added to the Security section because it's related to keeping your site up to date, and also plugin/theme based.

The block editor was missing some big callouts. Mainly, the block directory. I added a suggestion for that section. I also suggested that "content templates" be replaced with the correct name, "block patterns" in the block pattern section and to also call out that Core has several default patterns, but plugin and theme authors will be adding their own.

The a11y section needs a bit of refinement. The current copy suggests that accessibility needs only correlate with age or injury, but that's not necessarily true.

And lastly, "Gutenberg" should be avoided whenever possible. "Block editor" is always the preferred way to refer to the editor in the context of Core. The only exception is if the plugin is being referenced, like this sentence on the 5.4 About page:

Of course, if you want to work with the very latest tools and features, install the Gutenberg plugin. You’ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!

#42 @afercia
4 years ago

@desrosj thanks for mentioning the a11y phrasing:

The a11y section needs a bit of refinement. The current copy suggests that accessibility needs only correlate with age or injury, but that's not necessarily true.

Definitely. Especially the phrase "But in fact most of us will face accessibility challenges as we age." isn't great. While that's certainly true, it would be disrespectful for younger persons with accessibility needs. In a way, it gets even worse with the following sentence:

"Even beforehand, we’re likely to appreciate accessibility features if we get injured or ill, or we become new parents."

which, honestly, I don't fully understand. I think it's best to underline a couple, simpler, concepts largely shared in the accessibility community:

  • the web is designed to grant universal access to everyone
  • we're all temporarily abled

As per the specific copy to put these concepts into words that everyone can understand, I'd definitely defer to the ones here with greater expertise in communication than me.

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


4 years ago

#44 @desrosj
4 years ago

The Google Doc is shaping up great! Thanks everyone for working hard to get through all of the feedback from various people.

One question I have is regarding the latest design mockup. I do not see any placeholder areas for imagery to be included. Was the thought to not include screenshots this release? Or are those just not placed in there yet?

I definitely think that the block directory and inline image editing could benefit from videos/gifs or screenshots accompanying them, and probably the plugin/theme auto-update/update by uploading a ZIP could

#45 @estelaris
4 years ago

@desrosj I am adding placeholders for screenshots but I have questions. Shall we discuss tomorrow during dev chat which screenshots are worth adding? or is preferable to discuss it here?

#46 follow-up: @desrosj
4 years ago

@estelaris I think here is fine. We could request thoughts during dev chat, but usually the more major features have screenshots. Looking at the list in order though:

  • XML Sitemaps: hard to screenshot (just a boring table of links)
  • Lazy-loading: This is also hard to illustrate in a compelling manner, unless an animation was created to simulate the images loading just before they enter the viewport.
  • Plugin/Theme auto-udates: could use a screenshot or two of the UI elements so users know where to find and interact with the feature.
  • Block editor - inline image editing: Very visual, easy to show with a GIF.
  • Block editor - block patterns: Also visual, easy to show with a GIF.

Developer features have never really been accompanied by images. That gives us 1/3 of the top features that we could have imagery for, and 2/2 of the called out block editor features, which seems like it would be sufficient to break up the text!

#47 in reply to: ↑ 46 ; follow-up: @estelaris
4 years ago

Replying to desrosj:

  • Plugin/Theme auto-updates: could use a screenshot or two of the UI elements so users know where to find and interact with the feature.
  • Block editor - inline image editing: Very visual, easy to show with a GIF.
  • Block editor - block patterns: Also visual, easy to show with a GIF.

Can you provide the gifs/videos/screenshots? I don't have access to 5.5

On another note, are there any links we are missing? As far I know the only link we have is to the Field Guide (which I am still missing BTW)

#48 in reply to: ↑ 47 @audrasjb
4 years ago

Replying to estelaris:

Can you provide the gifs/videos/screenshots? I don't have access to 5.5

Here is a draft I started to write for plugins & themes auto-updates HelpHub page (it's still a draft, please don't focus on eventual typos). You can get some screenshot from there.
https://wordpress.org/support/?p=13155027&post_type=helphub_article&preview=1&_ppp=c893d52c93

#49 @estelaris
4 years ago

  • Keywords needs-copy-review removed

This is the last review for design. The copy is final, please do not comment on copy.

I still need:

  1. Inline image edit gif
  2. block patterns gif

Anyone that can make them, please upload them here https://drive.google.com/drive/folders/10rpGap4BesCGwexJR_YxtS3Th0OEEiwR?usp=sharing

ryelle commented on PR #403:


4 years ago
#50

Refreshed the PR with the latest content, and worked in design elements from the figma file to create a layout. All text combos pass AA contrast. Notable I swapped the "5.5 WordPress" to "WordPress 5.5", since we've gotten accessibility feedback on that in the past.

Here's a screenshot. The light blue sections are optional placeholders for videos, images, abstract design elements, etc. Or they can be removed, and this can go back to full-width.

https://user-images.githubusercontent.com/541093/88463690-8cb58c80-ce82-11ea-8f47-9a8b90f948c6.png

The credits page will need a new design element, too. Also in this screenshot is the hover state for the nav, "Freedoms" is current hovered. (focus hasn't changed, still the same light blue outline).

https://user-images.githubusercontent.com/541093/88463688-8aebc900-ce82-11ea-9fe4-70b0b4c16d79.png

#51 @SergeyBiryukov
4 years ago

  • Description modified (diff)

#52 @whyisjake
4 years ago

#50792 was marked as a duplicate.

#53 in reply to: ↑ 14 @SergeyBiryukov
4 years ago

Replying to ryelle:

There are still more than a few places with html tags in strings. For example,

<strong>Inline image editing</strong> - Crop, rotate, and zoom your photos right from the image block. If you do a lot of work with images, this alone could save you hours every week!

We try to avoid this usually, but splitting these strings up would mean more fragmented translations. Should these be tweaked to remove the extra HTML? Is this use of HTML not an issue? some translator input would be good here.

Just confirming that this use of HTML is acceptable and is indeed not an issue. It's a better option than splitting a string into smaller chunks, as it provides better context for the sentence.

#54 @whyisjake
4 years ago

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

In 48675:

Help/About: WordPress 5.5 About Page.

Speed. Search. Security.

This is the start of the WordPress 5.5 about page.

Fixes #50416.
Props ryelle, marybaum, estelaris, yvettesonneveld, michelebutcher-jones, metalandcoffee, melchoyce, marktimemedia, abhanonstopnewsuk, elmastudio, davidbaumwald, audrasjb, afercia, cbringmann, andreamiddleton, desrosj, earnjam, SergeyBiryukov, whyisjake, elrae.

#55 @desrosj
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening to continue iterating.

@ocean90
4 years ago

#57 @audrasjb
4 years ago

Thanks @ocean90 for disambiguating the "Search" string 👍
Patch looks good to me.

#58 @audrasjb
4 years ago

  • Keywords i18n-change added

@ocean90
4 years ago

Clarify category vs. custom taxonomy

#59 @SergeyBiryukov
4 years ago

In 48686:

Help/About: Adjust two strings on the About page for better i18n.

Follow-up to [48675].

Props ocean90, audrasjb, kittmedia, nao.
See #50416.

#60 follow-up: @SergeyBiryukov
4 years ago

Just to clarify on the difference between 50416.2.diff and 50416.3.diff, there are two related tickets:

  • #43516: Allowing default category to be applied to all CPT associated to 'category' taxonomy
  • #43517: Adding support of default category term for custom taxonomies

The string appears to be about the former one, specifically the [48043] changeset, so seems correct as is.

#61 @SergeyBiryukov
4 years ago

  • Keywords dev-feedback added

[48686] should be backported to the 5.5 branch after a second committer's review.

#62 follow-up: @desrosj
4 years ago

  • Keywords commit dev-reviewed added; dev-feedback removed

[48686] looks good to me @SergeyBiryukov.

Thinking about it now though, the ability to support default terms for custom taxonomies seems like the change with the bigger potential impact. Not sure if it's worth changing this bullet point, or adding an additional one.

#63 in reply to: ↑ 60 @ocean90
4 years ago

Replying to SergeyBiryukov:

  • #43516: Allowing default category to be applied to all CPT associated to 'category' taxonomy
  • #43517: Adding support of default category term for custom taxonomies

The string appears to be about the former one, specifically the [48043] changeset, so seems correct as is.

Ah, I wasn't really sure what this line was highlighting and I only found #43517. And now I'm still not sure that "beyond “Uncategorized”" makes sense in the context of [48043].

#64 in reply to: ↑ 62 ; follow-up: @SergeyBiryukov
4 years ago

Replying to desrosj:

Thinking about it now though, the ability to support default terms for custom taxonomies seems like the change with the bigger potential impact. Not sure if it's worth changing this bullet point, or adding an additional one.

Yes, I tend to agree that maybe both changes should be highlighted. I'll see if I can come up with a new bullet point and clarify the existing one a bit, per @ocean90's comment above.

#65 @afercia
4 years ago

While I read on comment:50 that "All text combos pass AA contrast", I don't see a sufficient color contrast for various elements in what's is currently committed on trunk. Specifically, these elements don't have a minimum 4.5:1 contrast:

  • "Speed. Search. Security." at the top
  • the 4 links in the header: What’s New | Credits | Freedoms | Privacy
  • the red link "WordPress 5.5 Field Guide." on gray background at the bottom of the page
  • the red link issue applies also to all the other red links in the other pages: Credits | Freedoms | Privacy

Regarding the copy in the "Accessibility section":

and edit images in WordPress with your assistive device, as it can read you the instructions in the image editor.

I'm not sure this part is appropriate. There are no "instructions" being announced by screen readers. Instead, it's the admin notices that appear after a user action that are now announced. E.g. "Image saved" and the like. Those aren't "instructions". It's feedback about the success or failure of a user action.

Version 0, edited 4 years ago by afercia (next)

#66 @estelaris
4 years ago

  • Keywords needs-design-feedback removed

I am closing comments on the design as we are working on a couple of hiccups. The latest design is not yet committed to trunk, so it really makes no sense to comment on the placeholder we have there.

We will let you know when the final design is ready to commit.

This ticket was mentioned in PR #442 on WordPress/wordpress-develop by ryelle.


4 years ago
#67

The design is still being iterated on, specifically the images for the Security section.

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

ryelle commented on PR #442:


4 years ago
#68

Current screenshot:

https://i0.wp.com/user-images.githubusercontent.com/541093/88847091-89890c00-d1b4-11ea-8bb8-0bcea9087c19.png

#69 @ryelle
4 years ago

There are still open comments on the copy on this PR, though I've closed the PR itself since the patch was committed.

Color contrast for various elements in what is currently committed on trunk.

Apparently my color picker app doesn't pick the correct hex code, so what I was reading as a 5.0 ratio was incorrect. I tweaked the orange to be a bit darker, now using #b04329, which is has a 4.8 ratio against the off-white (and higher against the white & light grey)

I've started another PR for these iterations, but it's still in-progress as @estelaris mentioned above.

#70 @SergeyBiryukov
4 years ago

In 48691:

Help/About: Adjust two strings on the About page for better i18n.

Follow-up to [48675].

Props ocean90, audrasjb, kittmedia, nao.
Reviewed by desrosj, SergeyBiryukov.
Merges [48686] to the 5.5 branch.
See #50416.

#71 @SergeyBiryukov
4 years ago

  • Keywords commit dev-reviewed removed

#72 follow-up: @ryelle
4 years ago

This gallery has screenshots of the latest About page iteration from PR 442. There are some updated strings based on the feedback on the last PR, and some new strings for "video alt text".

For accessibility, is this figure/figcaption method the best way to add alt text to videos?

Asset-wise, we still need a video for "Update by uploading ZIP files," since that's not what this video shows. We also need a new image for the autoupdates section, it should be 1206px wide for retina screens. I can update the image, but would appreciate someone else recording the video.

Once I redo the theme image, I'll upload these to make/core so everyone can view them :)

#73 in reply to: ↑ 72 @audrasjb
4 years ago

Ok @ryelle I'll take care of the screenshots (I already made the screenshots and the existing video).

I can also record the second video… However, I don't understand where would this video appear in the layout 🤔

#74 @ryelle
4 years ago

Don't worry about the screenshot, I've already re-taken it 🙂

The video we need would go next to "Update by uploading ZIP files", replacing the video that's already there.

#75 @audrasjb
4 years ago

OK thanks. To be honest, I'm not 100% sure the ZIP Upgrade is better to show than the auto-updates screen. Ideed, it's basically just a zip upload on the Add new plugin screen :-)

#76 @audrasjb
4 years ago

By the way I can take a better video of the auto-update screen if you want, showing the animation when enabling auto-updates. Also, with a wider screen so there is no screen bug (see the search bar in my video)

#78 follow-up: @ryelle
4 years ago

To be honest, I'm not 100% sure the ZIP Upgrade is better to show than the auto-updates screen

Hm... we could use a screenshot of the update by zip upload process, instead, and use this video in place of the theme screenshot - what do you think? I just think the text should match the video/image content next to it.

#79 in reply to: ↑ 78 @estelaris
4 years ago

Replying to ryelle:

To be honest, I'm not 100% sure the ZIP Upgrade is better to show than the auto-updates screen

Hm... we could use a screenshot of the update by zip upload process, instead, and use this video in place of the theme screenshot - what do you think? I just think the text should match the video/image content next to it.

If the change illustrates better what we are trying to say, let's make it.

This ticket was mentioned in Slack in #design by estelaris. View the logs.


4 years ago

#81 @ryelle
4 years ago

Okay, a set of assets have been uploaded to make.w.org/core, so the latest PR can be tested without needing to replace assets locally.

@audrasjb that video is almost 7MB, could you record another that's shorter (less than 20 seconds), or trim this one down?

I've removed the video in the "Security" section for now, falling back to just the Theme update screenshot, and we can replace that with the shorter video once we have it— IMO this solves the issue of illustrating the Upload by Zip feature, and just looks better since the video is taller than the existing images.

@ryelle
4 years ago

Security section with video for reference

#82 @nrqsnchz
4 years ago

For accessibility, is this figure/figcaption method the best way to add alt text to videos?

I wasn't sure either and reached out to @joedolson for guidance.

[...] what matters is just that it's clear that the description of the video is associated with the video. figure/figcaption would probably suffice there. The figcaption should be connected to the figure using aria-labelledby; this is required to support IE11.

If the video has voice audio, a text equivalent needs to be provided. If the video just shows a flow or action being performed, then the process needs to be described in text.

Key thing is remembering the target audience for the description, and that they need to get the same level of information from the description as a sighted audience gets from watching.

#83 @audrasjb
4 years ago

@ryelle currently recording a shorter video

@audrasjb
4 years ago

New video for autoupdates sections

#84 @audrasjb
4 years ago

@ryelle new video uploaded. 605Ko

#85 @ryelle
4 years ago

New video is added to the PR, thanks @audrasjb!

Thanks for the accessibility feedback, @nrqsnchz. I've added the aria-labelledby connection to the figures. There is no audio on the videos, so no worry about captioning.

Key thing is remembering the target audience for the description, and that they need to get the same level of information from the description as a sighted audience gets from watching.

I don't think the current "alt text"s do this, they're more marketing than descriptive. Here are the two that are already written.

For the block patterns video:

New block patterns in WordPress 5.5 give you instant access to a variety of sophisticated layouts. Browse and choose the ones that tell your story, then style them to match your brand. All in real time, in one place, without ever looking away from your task in the block editor.

For the image editor video:

The image editor in WordPress 5.5 lets you choose, scale, crop and rotate images in real time, without leaving the block editor.

The autoupdates video still needs a description. If I were writing it, I'd probably go way more descriptive, like…

Installed plugin screen, which shows a new column, Automatic Updates. In this column are buttons that say "Enable auto-updates." When clicked, the auto-updates feature is turned on for that plugin, and the button switches to say "Disable auto-updates". Two plugins have updates, the updates are automatically queued up in 4 hours.

Thoughts or feedback on the copy in these descriptions would be much appreciated.

These strings have not been committed yet, but should be soon— so we can still change them, but this should be settled as soon as possible (before tomorrow's RC2).

One other thing— we don't usually add alt text for the images, since the copy descriptions cover the images. Would we consider the same for these videos?

#86 @nrqsnchz
4 years ago

Thoughts or feedback on the copy in these descriptions would be much appreciated.

My only feedback is that the last one (auto-updates) is describing what is happening in the video, while the previous two (image editor, block patterns) describe the feature.

I think we'd want to have both pieces of text for each video. What do you think of having the feature description as the figcaption and then the description of the video itself optional via a link that expands/collapses it?

we don't usually add alt text for the images, since the copy descriptions cover the images. Would we consider the same for these videos?

I think so, the figcaption should suffice.

#87 @ryelle
4 years ago

I think so, the figcaption should suffice.

Hm, by "the same" I meant removing the descriptions entirely. Since we don't describe images, do we need to describe the videos?

My only feedback is that the last one (auto-updates) is describing what is happening in the video, while the previous two (image editor, block patterns) describe the feature.

Yeah, I'm asking which style the description should be (and ideally some copywriter help for those in whichever style we pick).

#88 @nrqsnchz
4 years ago

Ah, sorry about the confusion, and thanks for clarifying.

Since we don't describe images, do we need to describe the videos?

I think we still want to describe what is happening in the videos, like the example you wrote for the auto-updates video.

So, if the accompanying copy describes the feature, we can then use the figcaption to describe the video?

#89 @ryelle
4 years ago

So, if the accompanying copy describes the feature, we can then use the figcaption to describe the video?

That makes sense to me.

So we need update descriptions for the Block Patterns & Image Editor videos.

Here's a draft for block patterns, but I'm stuck on how to describe the image editor video.

In the editor, the block inserter shows two tabs, Blocks and Patterns. The Patterns tab is selected. There are different block layouts in this tab. A section called "Button" has patterns for two buttons, three buttons. Next is a section called "Column", with two columns, two columns with images, three columns of text with buttons.

#90 follow-up: @audrasjb
4 years ago

Yes, I agree with you, and in my opinion, the auto-updates alt text is perfect.

In the editor, the block inserter shows two tabs, Blocks and Patterns. The Patterns tab is selected. There are different block layouts in this tab. A section called "Button" has patterns for two buttons, three buttons. Next is a section called "Column", with two columns, two columns with images, three columns of text with buttons.

@ryelle this is a +1 from me. Sounds perfect.

#91 in reply to: ↑ 90 @marybaum
4 years ago

Here's a description of the image editor:

In the new image editor, an image icon gets dragged and dropped into the space, which turns blue to accept the upload.
The image expands to fill the editor.
Dragging a handle (it’s actually a red dot) on the right side of the image widens it to scale and resizes the editor to fit.
Next the cursor moves to a text area below the image and clicks to bring up standard block text-editing tools and write a caption for the image.
Clicking in the image dismisses the text tools, and the cursor now moves to a toolbar at the top of the image space.
A click on the Crop icon reveals a dropdown set of common aspect ratios; lingering briefly on one choice demos the crop. Applying it requires a confirmation click in the toolbar.

Hope this is better than the marketing drivel I wrote the first time!

Replying to audrasjb:

Yes, I agree with you, and in my opinion, the auto-updates alt text is perfect.

In the editor, the block inserter shows two tabs, Blocks and Patterns. The Patterns tab is selected. There are different block layouts in this tab. A section called "Button" has patterns for two buttons, three buttons. Next is a section called "Column", with two columns, two columns with images, three columns of text with buttons.

@ryelle this is a +1 from me. Sounds perfect.

#92 @ryelle
4 years ago

Okay, I've pushed the updated descriptions to the PR — I also prefixed each with "Video", since in testing with VoiceOver it wasn't clear that we moved into an object description, but I can quickly remove that if that's a bad assumption on my part.

#93 follow-up: @spacedmonkey
4 years ago

I believe that #43941 could be part of this about page. It is an important change for developers.

#94 in reply to: ↑ 93 @estelaris
4 years ago

Replying to spacedmonkey:

I believe that #43941 could be part of this about page. It is an important change for developers.

Sorry @spacedmonkey but the content was defined 4 weeks ago and today, the About page will be committed. No more changes to it.

#95 @ryelle
4 years ago

  • Keywords has-patch added

@whyisjake
4 years ago

#96 @desrosj
4 years ago

  • Keywords commit dev-feedback added

@whyisjake Thanks for that! Looks good to commit and backport for me.

Just noting, this is a change to follow the spelling pest practices.

Props @davidbaumwald for spotting those hyphens.

#97 @ryelle
4 years ago

Does the commit tag here also include the changes in the PR? These also need to be in before RC2, since there's additional strings for video descriptions.

Would it be easier if I uploaded the changes here as a diff?

#98 @whyisjake
4 years ago

In 48721:

Help/About: String update for 5.5 release.

We don't use hyphens for the [block editor](https://make.wordpress.org/core/handbook/best-practices/spelling/).

See #50416.
Props davidbaumwald, marybaum, desrosj.

#99 @whyisjake
4 years ago

In 48723:

Help/About: String update for 5.5 release.

We don't use hyphens for the [block editor](https://make.wordpress.org/core/handbook/best-practices/spelling/).

See #50416.
Props davidbaumwald, marybaum, desrosj.

#100 in reply to: ↑ 64 ; follow-up: @SergeyBiryukov
4 years ago

Replying to SergeyBiryukov:

Yes, I tend to agree that maybe both changes should be highlighted. I'll see if I can come up with a new bullet point and clarify the existing one a bit, per @ocean90's comment above.

To follow up on comment:62, in 50416.5.diff:

  • Clarify an existing bullet point about custom post types associated with the category taxonomy.
  • Add a new one about custom taxonomies having a default term, as a potentially more important change.

#101 in reply to: ↑ 100 @desrosj
4 years ago

Replying to SergeyBiryukov:

To follow up on comment:62, in 50416.5.diff:

  • Clarify an existing bullet point about custom post types associated with the category taxonomy.
  • Add a new one about custom taxonomies having a default term, as a potentially more important change.

@ryelle sorry, I missed that there were outstanding changes in a PR. Can we make these changes to the developer section and then commit everything that's there at once?

  • Change "New filters let custom post types associated with the category taxonomy have a default term beyond “Uncategorized”." to "Custom post types associated with the category taxonomy can now opt-in to supporting the default term."
  • Below that point, add "Default terms can now be specified for custom taxonomies in register_taxonomy()."
  • Add "The REST API now officially supports specifying a default metadata values through register_meta()." above the last bullet point.
Last edited 4 years ago by desrosj (previous) (diff)

#102 @ryelle
4 years ago

@desrosj Okay, I've added those changes to the PR, it should be ready to go.

audrasjb commented on PR #442:


4 years ago
#103

Video prefix looks good to me 👍

#104 @audrasjb
4 years ago

Video prefix looks good to me, @ryelle, thanks 👍

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


4 years ago

#106 @desrosj
4 years ago

Thanks @ryelle! Looks good to me as well.

#107 @desrosj
4 years ago

In 48729:

Help/About: String updates and accessibility improvements to the 5.5 About page.

Props ryelle, nrqsnchz, desrosj, audrasjb, marybaum, spacedmonkey, SergeyBiryukov, estelaris, afercia, ocean90.
See #50416.

#108 @desrosj
4 years ago

In 48730:

Help/About: Remove “Musician Name” placeholder.

The musician name is traditionally not included on the About page due to i18n concerns regarding last minute changes.

Props audrasjb, SergeyBiryukov.
See #50416.

#109 @desrosj
4 years ago

I've removed the musician name placeholder from the page. Because of i18n concerns (the name would have to be committed at the very last moment), this is traditionally not included on the About page.

With that banner missing on the right, the vertical alignment of the top section may need to be tweaked a bit.

Other than that, [48729-48730] just needs a second committer sign off for backporting.

#110 @whyisjake
4 years ago

  • Keywords dev-reviewed added; dev-feedback removed

#111 @desrosj
4 years ago

In 48733:

Help/About: String updates and accessibility improvements to the 5.5 About page.

Merges [48729-48730] to the 5.5 branch.
Props audrasjb, SergeyBiryukov.
See #50416.

@ryelle
4 years ago

Fix for CSS after musician name removal

#112 @ryelle
4 years ago

Bummer about the musician name, I thought it'd been approved this time :)

50416.6.diff removes some unnecessary CSS, and fixed the header spacing on shorter screens.

#113 @whyisjake
4 years ago

  • Keywords dev-feedback added; dev-reviewed removed

Changes look good to me.

#114 @SergeyBiryukov
4 years ago

In 48736:

Help/About: Correct header spacing on shorter screens after removing the musician name.

Remove some unnecessary CSS.

Follow-up to [48730].

Props ryelle.
See #50416.

#115 @SergeyBiryukov
4 years ago

In 48737:

Help/About: Correct header spacing on shorter screens after removing the musician name.

Remove some unnecessary CSS.

Follow-up to [48730].

Props ryelle.
Reviewed by whyisjake, SergeyBiryukov.
Merges [48736] to the 5.5 branch.
See #50416.

#116 @SergeyBiryukov
4 years ago

  • Keywords commit dev-feedback removed

ryelle commented on PR #442:


4 years ago
#117

Merged in r48729

#118 @afercia
4 years ago

The videos don't play in Safari, at least for me. Can anyone confirm this please, when there's a chance?

#119 @desrosj
4 years ago

In 48740:

General: Add svn:mergeinfo missed in [48733].

Finishes merging [48729-48730] to the 5.5 branch.
See #50416.

@marybaum
4 years ago

New image-editor video.

@marybaum
4 years ago

New security video.

@marybaum
4 years ago

New block-patterns video

@ryelle
4 years ago

screenshot with latest videos

#120 follow-ups: @ryelle
4 years ago

For some reason the new videos are not automatically full-width in the video tag anymore. You can compare this small-videos.png to a previous screenshot: the Block Patterns video itself spans edge to edge and is taller. But both videos claim to be the same size (960x540).

Any ideas on how we can fix this? It seems like a video setting, not a CSS fix, but I can keep investigating CSS.

Last edited 4 years ago by ryelle (previous) (diff)

#121 in reply to: ↑ 120 @marybaum
4 years ago

Replying to ryelle:

I think so! I can re-export them at whatever size.

Do they play in Safari? If not, I can also export them with a setting for Apple devices.

For some reason the new videos are not automatically full-width in the video tag anymore. You can compare this small-videos.png to a previous screenshot: the Block Patterns video itself spans edge to edge and is taller. But both videos claim to be the same size (960x540).

Any ideas on how we can fix this? It seems like a video setting, not a CSS fix, but I can keep investigating CSS.

#122 in reply to: ↑ 120 @marybaum
4 years ago

Replying to ryelle:

Discussing new videos ...

For some reason the new videos are not automatically full-width in the video tag anymore. You can compare this small-videos.png to a previous screenshot: the Block Patterns video itself spans edge to edge and is taller. But both videos claim to be the same size (960x540).

Any ideas on how we can fix this? It seems like a video setting, not a CSS fix, but I can keep investigating CSS.

#123 @desrosj
4 years ago

I am also able to reproduce. Looking at previous screenshots, it appears the video was presented in a portrait orientation before.

If it's desired both videos be the same width and height, then the contents of the video should be captured to take up the whole width using the right aspect ratio. I believe the boxes are happening because the dimensions of the video were forced to 960x540 during whatever conversion was performed, and the canvas is being expanded.

As for the video file, an MP4 file should support Apple devices. I just did some testing, and I used Quicktime to screen record, and exported as a 1080p video. This creates a .mov file, but because a .mov is usually just an MP4 wrapped in a .mov mime type, changing the file extension seemed to work fine, and I couldn't reproduce the Safari issue above.

Side note, the video also does not appear to be super crisp. The last time a video appeared on the about page was 5.0.

I went back and checked out the video from 5.0 (found here). It had a ~2100 pixel wide resolution. The video files we use need to be a lot larger. This does cause the text to be not as crisp due to the downsizing, though. In 5.0, the video had a larger viewing area (~680 pixels). This did result in a small amount of distortion, but still looked good and could be brought to full-screen view without any clarity issues.

In 5.0, a WEBM file was also provided as a backup video source. The same should be done here.

To give the video a wider display area, could we maybe use the same layout as in the security section with the wider video on the side. Alternating the sides that the video is on perhaps?

#124 follow-up: @ryelle
4 years ago

If it's desired both videos be the same width and height, then the contents of the video should be captured to take up the whole width using the right aspect ratio. I believe the boxes are happening because the dimensions of the video were forced to 960x540 during whatever conversion was performed, and the canvas is being expanded.

No, we don't want the videos to be the same height— the content was "designed" to account for a portrait-style video for Block Patterns. It looks like I misread the info on the previous video, its dimensions were 1054 × 1240. So it does look like some downsizing happened after all.

Could the video be resized, but keep its aspect ratio, to 480 wide? (in general, most users will see this video at 436px wide, large phone sizes might see it up to 488px)

#125 @estelaris
4 years ago

I am reworking a new design for the block editor highlights section to see if the videos look better at full resolution

#126 in reply to: ↑ 124 @desrosj
4 years ago

Replying to ryelle:

No, we don't want the videos to be the same height— the content was "designed" to account for a portrait-style video for Block Patterns. It looks like I misread the info on the previous video, its dimensions were 1054 × 1240. So it does look like some downsizing happened after all.

Could the video be resized, but keep its aspect ratio, to 480 wide? (in general, most users will see this video at 436px wide, large phone sizes might see it up to 488px)

Gotcha. I was thinking a more landscape video would provide more context to the block patterns and could demonstrate modifying them after adding.

Regarding the size, I guess my main concern is when someone clicks full-screen. A 480px video would be distorted.

#127 @ryelle
4 years ago

Just noting that if we're changing the videos, we'll also need to update the video description strings.

when someone clicks full-screen.

That's a good point, but we want to balance file size too - I have no data besides my own experience but I've never thought to full-size these videos, so I wouldn't optimize for that personally.

I am reworking a new design for the block editor highlights section to see if the videos look better at full resolution

Okay. Just for your reference: the space for a full-width video is 936px wide, and for a wider 2 column layout is 602px.

#128 @desrosj
4 years ago

Before messing with optimizing and any downsizing, here is what I had in mind for a new video: https://cloudup.com/cfmWgibhXfK to show more context for block patterns. The resolution is 1920x1080, smaller than the one in 5.0 but not by much.

As far as file size goes, the 5.0 video was ~8MB. This one is ~11MB before optimizations. Not trying to say we shouldn't be aware of file sizes here, but just pointing out that a large video has shipped before.

Note: Cloudup downsizes the video so it's not the original quality. It was just a bit too large to upload to Trac.

Last edited 4 years ago by desrosj (previous) (diff)

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


4 years ago

@estelaris
4 years ago

@ryelle and @desrosj here is the last design update

#130 @ryelle
4 years ago

I don't see new videos uploaded in the google folder, but if we have landscape-mode videos (436 x 250, or an aspect ratio like that), it should look good.

https://cldup.com/u5mV44YQ9s.png

#131 @desrosj
4 years ago

I spoke with @joen today who gave some great tips for capturing screen recordings and hopefully minimizing issues with files/formats. Going to share them here for reference in the future:

This blog post has tips and software recommendations. The main technical callouts:

  • Record using Kap (this is different than the recommendation in the post but @joen recommended this instead of Screeny)
  • Convert .mov files to .mp4 using FFMPEG. Kap does appear to have the ability to export as MP4 and WebM though. Using that is preferable to converting if it works well.

I am going to recreate the videos using this flow and create WebM backup files for a last pass at the final media items.

Could someone grant me access to the Google folder so I can add the new recordings?

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


4 years ago

#133 @ryelle
4 years ago

Could someone grant me access to the Google folder so I can add the new recordings?

It looks like I've lost access, so maybe @marybaum or @estelaris can help with this? I'll need access back too once they're uploaded :)

#134 @desrosj
4 years ago

This is a public folder with new videos: https://drive.google.com/drive/folders/1DGS5EzwcQAj_I4_kVJGqEntZsBzc3ADn?usp=sharing

Inside you'll find large format screen captures with both MP4 and WebM formats. I did not recapture the image editing video because there is a bug where the crop icon is not properly aligned (see Gutenberg-24358). I believe that fix is planned to be backported before an additional RC on Monday morning. After that is merged the last video can be re-captured.

@ryelle
4 years ago

#135 @ryelle
4 years ago

50416.7.diff has the latest available videos, uploaded to the CDN early since there are issues with playing mp4 off the make.w.org sites.

The new large-format videos don't compress down well on my non-retina desktop (see Screen Shot 2020-08-07 at 6.32.59 PM.png, above). Same kind of issue on the patterns video. It's less jagged on my retina macbook, at least. I don't think there's anything to do, since we're aiming for larger videos, but I wanted to mention it in case it's more of an issue than I think.

#136 @SergeyBiryukov
4 years ago

In 48761:

Help/About: Update videos and their descriptions on the About page.

Follow-up to [48675], [48686], [48721], [48729], [48730], [48736].

Props ryelle, marybaum, estelaris, desrosj, joen, afercia.
See #50416.

#137 @SergeyBiryukov
4 years ago

  • Keywords commit dev-feedback added

Marking for a backport to the 5.5 branch.

#138 @jorbin
4 years ago

  • Keywords dev-reviewed added; dev-feedback removed

Looks good to backport

#139 @SergeyBiryukov
4 years ago

In 48763:

Help/About: Update videos and their descriptions on the About page.

Follow-up to [48675], [48686], [48721], [48729], [48730], [48736].

Props ryelle, marybaum, estelaris, desrosj, joen, afercia.
Reviewed by jorbin, SergeyBiryukov.
Merges [48761] to the 5.5 branch.
See #50416.

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


4 years ago

#141 @SergeyBiryukov
4 years ago

  • Keywords commit dev-reviewed removed

#142 @afercia
4 years ago

  • Keywords needs-patch added; has-patch removed

The third video image-editor.mp4 doesn't play on Safari, at least for me. Also, it misses the .webm alternate source.

Question: have the videos been tested on Windows on all supported browsers>

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


4 years ago

#144 @desrosj
4 years ago

Thanks @afercia. The third video has not been re-recorded since your last comment about that issue. There was a display bug with the aspect ratio icon when cropping an image using the inline image editing tools, so I did not want to re-record it.

That has been fixed, though, so I will get to that later today. Can you verify that the other two videos work correctly for you? I will follow the same process, so if those two work then this issue should fix itself when we replace that video with the new screen capture.

#145 @afercia
4 years ago

Thanks @desrosj. All videos play correctly for me on other browsers on macOS.

I took the time to test on Windows as well and everything works correctly with the browsers I can test with: latest Chrome, Firefox, Edge (Chromium), Opera, IE11. Couldn't test with old non-Chromium Edge.

#146 @man4toman
4 years ago

If it help, I've tested all videos on Microsoft Edge(non-Chromium Edge) on Windows, they played correctly.

#147 @desrosj
4 years ago

Since the display issue is now fixed with the aspect ratio icon, I've added the third video to the Google Drive folder. It will require the video description to be altered just a bit though as I removed the text editing parts of the video so only the inline image editing features are shown.

#148 @desrosj
4 years ago

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

In 48783:

Help/About: Final adjustments to the 5.5 About page.

  • Final CDN asset URLs.
  • Some minor color adjustments.

Props ryelle, marybaum, davidbaumwald, audrasjb, estelaris, afercia, cbringmann, andreamiddleton, desrosj, SergeyBiryukov, ocean90, nrqsnchz, spacedmonkey, whyisjake, man4toman.
Fixes #50416.

#149 @desrosj
4 years ago

  • Keywords commit dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backporting.

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


4 years ago

#151 @whyisjake
4 years ago

  • Keywords dev-reviewed added; dev-feedback removed

#152 @desrosj
4 years ago

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

In 48784:

Help/About: Final adjustments to the 5.5 About page.

  • Final CDN asset URLs.
  • Some minor color adjustments.

Props ryelle, marybaum, davidbaumwald, audrasjb, estelaris, afercia, cbringmann, andreamiddleton, desrosj, SergeyBiryukov, ocean90, nrqsnchz, spacedmonkey, whyisjake, man4toman.
Merges [48783] to the 5.5 branch.
Fixes #50416.

Note: See TracTickets for help on using tickets.