4.5 About Page

[melchoyce]

Placeholder for when we start working on it.

[jorbin]

Assigning to 4.5 release lead @mikeschroder, he can delegate as he sees fit.

[kirasong]

First patch​. @melchoyce put together the design with temporary inline styles and is working on the images that are missing. Video is in progress.

The "Under the Hood" section is the most rough. Feel free to suggest re-wording, or changes there. I'm not certain that script changes should be -- and if they are, we should probably give the exact information on what changed. Also wondering if a general link to the field guide at the top of that section might make sense.

I removed one of the "Under the Hood" items, making it 5 items -- so guessing @melchoyce will probably want to change how the second row is laid out.

Contributions for copy so far from @helen, @mattfelten, & @melchoyce, with some initial inspiration from @jorbin (if I missed you, please comment here).

[celloexpressions]

It might be better to put device preview before custom logo since everyone can use it whereas custom logo is only available for certain themes (and won't ever be available for all themes, including Twenty Fourteen). For both of those, it could be cool to include a customizer-loading button so that users can get right there to try it out (logo could be deep-linked). Using the .load-customize class on the element will also open it right inline over the current page (see from the dashboard, <a class="button button-primary button-hero load-customize hide-if-no-customize" href="<?php admin_url( 'customize.php' ); ?>" ... ).

I would definitely use a single animated gif for the device preview image.

[melchoyce]

Design in that patch is already outdated. Will have something with images and videos up some time today.

[melchoyce]

New pass in 36173.2.diff​. After some experimenting I decided to split the features into two sections: editing improvements and customization improvements. While I was experimenting I shot some demo videos and took screenshots. However, I discovered the features don't make for great screenshots, and since the release video includes video demos, I decided to go a little more abstract and illustrative for each feature section. I also pruned the text a bit to make everything a bit more even and succinct.

Patch is still a "prototype." If the design direction seems good, I can pass off to @ryelle to code up properly, then work with her to tweak any rough patches.

[ocean90]

With 36173.2.diff

[kirasong]

About Page current draft tagline: "WordPress 4.5 streamlines your workflow, whether you’re writing or building."

[kirasong]

Few notes:

• I like the direction. I'm a fan of GIFs illustrative power, but don't mind the simpler route being taken.
• The Responsive Preview graphic I'm a bit hesitant about. I don't think the image is entirely clear as to what it is. If we go with this imagery, is it intentional that there seems to be more spacing between the "desktop" icon than between the other two?

[kirasong]

@helen ran through the text in #core with a group of us -- thanks to you and everyone who helped out there. :)

Attached patch from after our chat​.

Still needs list of versions of libraries updated, and mentions of other dependencies if we want to talk about all of them.

Could mention one more thing "under the hood" if anyone has suggestions as to what to highlight.

[helen]

Aside from the text itself, let's be sure that special characters are there are HTML entities - single curly apostrophe is in there a few times.

[ramiy]

The editor shortcuts image is misleading. I Couldn't understand why I see the WP_Site class in the shortcuts image. Just replace it with <code> or some other html tag.

[ramiy]

Embed templates - I think it should include the newly introduced embed.php template file. Very important feature that effect tent of thousand theme developers.

[ramiy]

Under the hood - currently it has 5 features. I think we should add another important one. The locally secret keys and salts generator, instead of relying on the WordPress.org API. #35290

[ramiy]

The sixth "under the hood" feature can also be the newly introduced WP_SITE class.

[ocean90]

With 36173.3.diff

[helen]

Further thoughts:

• Custom Logos

"Themes can now support logos for your business or brand."

Chop out the "choose to". I wonder if there's a better word than "support" - use? implement? consistently add?

I think we could probably make the second sentence conditional, one for if the current theme supports a custom logo and one if they don't. Perhaps:

Your theme supports custom logos; try it out right now in the Site Identity section of the customizer.

With "Site Identity section" deep-linked. Without support:

The Twenty Fifteen and Twenty Sixteen themes have been updated to support custom logos, which can be found in the Site Identity section of the customizer.

• A sixth Under the Hood item could actually be Custom Logos again, linking off to the dev post for theme authors.
• Starting the Formatting Shortcuts blurb with "Enjoy" reads a little funny, perhaps "Do you enjoy..."
• "Inline Linking" is still kind of a weird thing to call it, not sure what the alternatives are at this point, though.
• Are these the final images?

[melchoyce]

@ryelle is going to work on making a "real" patch tonight.

Are these the final images?

Formatting Shortcuts is changing to this: ​https://cloudup.com/ix2L6JwvJ-z but the other images are final.

[iseulde]

"Inline Linking" is still kind of a weird thing to call it, not sure what the alternatives are at this point, though.

Easier/smoother/simpler/polished linking (experience)? Something like that? Not sure either, but again, I'd stay away from "inline" when presenting it to a user.

[kirasong]

In 36173.4.diff​:

Replying to helen:

Further thoughts:
Chop out the "choose to". I wonder if there's a better word than "support" - use? implement? consistently add?

Done.

I think we could probably make the second sentence conditional, one for if the current theme supports a custom logo and one if they don't.

I like this idea and will dig into it if I have the time. Open to patches if someone else has a chance.

• A sixth Under the Hood item could actually be Custom Logos again, linking off to the dev post for theme authors.

Will think about this. Might look a bit strange, at least in the layout close to the other mention.

• Starting the Formatting Shortcuts blurb with "Enjoy" reads a little funny, perhaps "Do you enjoy..."

Done.

• "Inline Linking" is still kind of a weird thing to call it, not sure what the alternatives are at this point, though.

Definitely willing to go with different wording here, but I can't think of another thing to call it. We could go more descriptive "Simplified Linking" or something similar. Probably not streamlined, since that's in the tagline.

Aside from the text itself, let's be sure that special characters are there are HTML entities - single curly apostrophe is in there a few times.

This should be done. Let me know if you notice any I missed.

Still need to:

• Add the versions of the libraries, and planning to add jQuery and jQuery Migrate to the list along with versions.
• Link the rest of the Under the Hood items.

[ryelle]

36173.5.diff​ moves Mel's mocked up styles into the proper CSS, and removes a few styles that no longer apply. This also includes the changes from Mike in 36173.4.diff.

[celloexpressions]

Replying to helen:

I think we could probably make the second sentence conditional, one for if the current theme supports a custom logo and one if they don't. Perhaps:

Your theme supports custom logos; try it out right now in the Site Identity section of the customizer.

With "Site Identity section" deep-linked. Without support:

The Twenty Fifteen and Twenty Sixteen themes have been updated to support custom logos, which can be found in the Site Identity section of the customizer.

And as I mentioned previously that link should have the .load-customize class; and really, this whole section should potentially be wrapped in a .hide-if-no-customize. Would also be nice to provide a generic customizer link for device previews, since the admin toolbar doesn't link to the customizer in the admin yet, so there isn't a fast way to get there. A lot of users still aren't aware of the customizer, so we can't assume they will find it themselves or understand how to use the new feature without a bit more direction.

[melchoyce]

Tweaked the margins for h2s in 36173.6.diff​ and swapped out the formatting shortcuts image.

I think we should commit what we have now and make edits as needed.

[kirasong]

36173.7.diff​ adds the library versions and links to dev articles for the other Under the Hood sections.

We could still use a better tagline.

"WordPress 4.5, for a more streamlined experience." or "WordPress 4.5 simplifies your workflow for a more streamlined experience." would match with video still, and are a bit less awkward than what we have now.

Regardless, agree with @melchoyce that a commit makes sense. Should we be splitting the strings/adding context at this point? Looking at the last time around for context -- but not sure if that gets done last, or should be there in a first commit.

[jeremyfelt]

36173.8.diff​:

• Enqueue customize-loader script if the current user can customize.
• Link "customizer" text in device preview section if the current user can customize.
• Deep link "Site Identity" text in custom logo section if custom logos are supported and the current user can customize.

I used the suggested text from comment:20 for the custom logos area and left it without translation functions.

Does the text read right for a user who does not have customizer capabilities or should we account for that as a 3rd scenario?

[celloexpressions]

Replying to jeremyfelt:

Does the text read right for a user who does not have customizer capabilities or should we account for that as a 3rd scenario?

I think it's okay as-is. There are often features like this that are only available to certain users (typically admins) that remain on the about page. The link text does need to be made translatable in the patch, though (looks like many of these aren't yet).

[Ipstenu]

Jeremy's patch with translations

[Ipstenu]

https://core.trac.wordpress.org/attachment/ticket/36173/36173.9.diff

The same as @jeremyfelt's only with translation functions

[Ipstenu]

36173.11.diff

Per chat in #core

• fixed current user can check for customizer
• Changed deep link URLs to use add_query_arg
• Added 'See it in action ...' for Selective Refresh with links
• Wording tweaks with @celloexpressions and @mikeschroder

Please ignore .10 where I goofed spaces and tabs and I'm going to have words with VI for a moment...

[kirasong]

In 36173.12.diff​:

• Fixed whitespace issue and restored feature-section class placement
• Fixes "customize" check which was keeping the custom logo customizer link section from appearing.
• Changed tagline to "WordPress 4.5 streamlines your workflow, whether you’re writing or building your site." -- I'm wondering if going even simpler with "WordPress 4.5: A more streamlined experience." is even better.

[celloexpressions]

Improves customizer link handling.

[celloexpressions]

36173.13.diff​ cleans up the customize links and their conditionals - I think this part is good to go now.

[celloexpressions]

Check for partial refresh support for widgets if showing the widgets link.

[kirasong]

Takes leading spaces out of translatable text.

[DrewAPicture]

Improved selective refresh and script loader strings

[DrewAPicture]

Reviewed .15 at @mikeschroder's request. I've improved the Selective Refresh and Script Loader descriptions to better follow description style for the About page, and to actually have subjects. The selective refresh string doesn't extend beyond 4 lines and the the script loader string doesn't extend beyond 2.

See 36173.16.diff​.

Selective Refresh

The customizer now supports a comprehensive framework for rendering parts of the preview without rewriting your PHP code in JavaScript. See it in action with Menus or Widgets.

Script Loader Improvements

Better support has been added for script header/footer dependencies. New wp_add_inline_script() enables adding extra code to registered scripts.

[azaozz]

In 37169:

4.5 About screen.

Props mikeschroder, melchoyce, ocean90, ryelle, jeremyfelt, Ipstenu, celloexpressions, DrewAPicture.
See #36173.

[afercia]

missing alt attributes

[ocean90]

36173.17.diff​:

• Add translators comments
• Fix typo, Customizer -> customizer
• Fix use of add_query_arg(), see [31427]
• Escape late
• Copy tagline to credits.php and freedom.php
• Move wp_add_inline_script() out of translatable string

[afercia]

Uh we uploaded a patch in the same exact moment? @ocean90 :) Anyways, the four images in the screen are just "decorative" images, no need to describe their content but they would need at least an empty alt attribute. See 36173.17.2.diff​

[afercia]

The headings would need some love, looks like they're used for visual purposes. The result is the "Under the Hood" heading and its sub-headings are hierarchically below "Customization Improvements". Two possible options:

• change all the headings highlighed in the screenshot and move them one level up
• or change all the other headings (except Welcome and What's New) moving them one level down

[ramiy]

remove () function, it's not a translation string

[ramiy]

36173.18.diff​: Removing unneeded i18n __() function.

[azaozz]

All three patches: 36173.17.diff, 36173.17.2.diff, and 36173.18.diff look good.

[afercia]

For clarity, 36173.17.diff and 36173.17.2.diff are unrelated. It just happened they were renamed this way because they were uploaded in the exact, same, time.

[afercia]

better headings hierarchy

[afercia]

Patch 36173.19.diff​ changes the level of the headings inside the .changelog section, adjusting CSS accordingly so there are no visual changes. This way, the headings hierarchy is a bit improved and reflects the 3 main groups on the screen, see screenshot:

[kirasong]

Combined patches, added titles.

[kirasong]

Attached 36173.20.diff​, which combines 36173.17.diff, 36173.17.2.diff, 36173.18.diff, and 36173.19.diff for easy review. It also adds two titles for translation, so that we can get the strings in before freeze.

Noticed that "It's really cool." does not have the period linked, even though the whole sentence is otherwise linked. I'm pretty ¯\_(ツ)_/¯ about whether it should be (and fine with it as it is, for consistency), but if someone thinks it should, feel free to say so.

[kirasong]

Duplicated string to avoid lone translatable "customizer" string as link.

[kirasong]

Per feedback from @boonebgorges and @obenland, 36173.21.diff​ changes "Preview mobile, tablet, and desktop views directly in the customizer." to be two strings -- one with a link, and one without.

Tried to have this match up with the way this is done for Site Identity.

[dimadin]

Replying to mikeschroder:
Just now I was translating and wanted to propose this change as well. Good timing. :)

[azaozz]

Just to confirm, the merged patch 36173.21.diff is good to go here.

[ocean90]

From an i18n point of view I support the change from comment:49. I'd only change "link" to "URL" in the comment.
Reading 36173.21.diff​ and it looks good so far. Can't apply and verify the header changes because I'm mobile.

[kirasong]

Changed 'link' to 'URL' in comment

[kirasong]

Per @ocean90's suggestion, 36173.22.diff​ is the same, but with "link" changed to "URL" in the translator's comment.

[jeremyfelt]

In 37170:

4.5 About Page, second round.

• Adjust text.
• Improve headings hierarchy.
• Add translation functions and translator comments throughout.

Props ocean90, afercia, ramiy, mikeschroder, mattfelten, helen.
See #36173.

[kirasong]

This needs to have the images responsified + CDN'd and the final video in, which happens just before release.

Otherwise, should be complete.

[joemcgill]

36173.23.diff​ sets up the feature images with srcset and sizes attributes. I created smaller sizes from the original 1000px versions and compressed them using ImageOptim. The whole set of file sizes can be found in about-images.zip​.

The image sizes included are: 280px, 400px, 560px, 680px, 800px, and 1000px.

These will need to be uploaded to the wp.com CDN and then all of the placeholder URLs in the src and srcset will need to be replaced with the actual URLs.

Some considerations I included in the implementation:

• I've included the 560px version in the src, which is slightly larger than the largest 1x width needed. I'm assuming that most retina devices are capable of displaying images from the srcset. Otherwise, we will display a smaller image, and since we're not using a polyfill, we don't need to worry about any double download issues by including both a src and a srcset attribute.

• I've listed the 1000px resource first in the srcset to ensure that older versions of iOS Safari get crisp images due to a bug that cause them to always load the first source in a srcset attribute when using an unrecognized descriptor (see #35030).

[melchoyce]

Super thorough. From what I can tell it looks good, but I get Fatal error: Cannot read property 'statusCode' of undefined if I try to apply the patch.

[ocean90]

In 37175:

About Page: Use srcset and the w.org CDN for images.

Also, flip the "Selective Refresh" and "Smart Image Resizing" section and remove script enqueues which are no longer used.

Props joemcgill, melchoyce, ocean90.
Fixes #36173.