4.7 About Page

[helen]

It's never too early to start thinking about this. About page should be string-complete by November 29 to give translators a week before release; first drafts of potential inclusions should start, well, now. :) The ​beta 1 post might help get started.

[johnbillion]

A few items which were covered in dev notes weren't included in the beta 1 post; might be worth including on the Under The Hood section. ​https://make.wordpress.org/core/tag/dev-notes/

[celloexpressions]

There are a lot of major customizer changes in 4.7, many of which have user-facing elements. It would be nice to highlight each of the significant user-facing items without clumping everything together generically. Some of these should be grouped, but many deserve dedicated sections with visuals (video would work well for several). We can also include a button or two that loads the customizer to demonstrate them. We can rig up a button to try out Twenty Seventeen in the customizer with: /wp-admin/customize.php?theme=twentyseventeen or a button to browse themes in the customizer with /wp-admin/customize.php?autofocus[panel]=themes, for example.

Here is the initial proposed text (from a recent make/core update) for each of the customize feature projects (can be expanded for items that get their own section):

• A new experience for themes in the customizer – #37661

Browse, install, and preview themes with a unified interface in the customizer.

• Create pages within live preview during site setup – #34923, #38013, #38164

Add new pages while building menus and setting a static front page; outline your site directly in the customizer.

• Code-editing gateways, via CSS – #35395

Fine-tune your site and take your theme customizations to the next level with custom css in the customizer.

• Improving sliding panels UI – #34391, #34343, #29158

Customizer navigation is now faster, smoother, and more accessible.

• Customize changesets (transactions) – #30937

Browse your site and switch themes more seamlessly within the customizer, as your changes automatically persist in the background.

We also have several smaller customizer-related changes that would be worthy of mentioning. For edit shortcuts, here's a rough first pass:

Visualize editable sections of your site within the customizer preview, with edit shortcuts that bring you right to the controls for making changes.

For Twenty Seventeen, I'd suggest borrowing some or all of the theme's description. It's already been carefully considered to market the theme within the context of the goals for 4.7 and to minimize its use of buzzwords. The current text is (reverting the change that removed header video):

Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.

[lukecavanagh]

I think a mention of the WP REST API endpoints. Along with a basic explanation of why the WP REST API being in WP core is a big deal as well as what it could be used for.

[petya]

Agree on the mention of the REST API endpoints. Should that go to "Under the hood" or should they get a more prominent place in the page? From a development point of view, that's one of the most anticipated features. Perhaps we can include a short explanation for users in the main section and then specific information for devs in "Under the hood"?

[francina]

I would recommend avoiding terms like "streamline", slang or colloquial terms.
Take into consideration that many languages have very different constructs from English: sometimes they need 3-4 words where English uses one. This, paired with the speed of the video, can make translating the subtitles challenging.

[petya]

Here's some text for the REST API that sounds really nice and highlights the feature, who it is for and what it will change. The text is borrowed from the ​merge proposal with some minor edits to fit our purpose here.

WordPress 4.7 is complete with REST API endpoints for posts, comments, terms, users, meta, and settings. These endpoints provide machine-readable external access to your WordPress site allowing new and innovative apps to interact with it.

The contend endpoints will allow developers to enhance themes with interactivity, create powerful plugin interfaces, and provide alternative authoring experiences.

[lukecavanagh]

@petya

The copy about the REST API endpoints reads very well.

[Presskopp]

For me it reads not so well (from a user/translator perspective). I tell you why:

"WordPress 4.7 is complete with REST API endpoints..."

You could read that as WordPress would be not complete without those mysterious endpoints like in:
"A man's life is not complete without a woman ..." :)

..or you could read it as "WordPress is now complete" like in "No more updates needed"

and then those "new and innovative apps" - where and what are they?

So I conclude this better belongs in the dev section. To make it a little prominent, it would be enough something like "REST API integration improved, Developers see Details below"

[lukecavanagh]

@Presskopp

WordPress does have a pretty wide range of user skill levels and users. I think users would be existed about the endpoints being in core, for how they will be of use to them, even if it is future plugins they might be using which fully use the WP REST API in interesting ways.

[melchoyce]

Rough mockup uploaded! @helen's working on an initial patch with strings.

[helen]

38616.diff​ has all the strings, most without _e() just yet but if we're feeling good can make them available for translation. The only one I don't really like it "Even More Features!" - suggestions welcome.

[helen]

Worked through this with @michaelarestad, @nacin, and @jorbin, the latter of whom also signs off on 38616.2.diff​.

[helen]

In 39420:

About page: Add strings for 4.7 and make available for translation.

It doesn't look very pretty; design changes still to come.

props helen, michaelarestad, samuelsidler, jbpaul17, jorbin, nacin, melchoyce.
see #38616.

[ocean90]

In 39432:

About page: Restore the double % in a printf() call which has been removed in [39420].

We need this to escape the percent symbol for "100%".

See #38616.

[ocean90]

In 39433:

About page: Don't wrap URLs with <code> tags.

See #38616.

[ocean90]

[39420], [39432] and [39433] need to be merged to the branch to make them available for translators.

I think should also remove the emoji from the translatable string, see 38616.3.diff​. We did that in 4.2 too.

[petya]

One concern here regarding the four thumbnails below Starter content and specifically the "Smoother Nav Menu Building" title - that title will break the layout on a huge number of translated pages due to the fact there is no way to keep "Smoother Nav Menu Building" in one line when translated. Where English uses 25 symbols Bulgarian will need 45 for this title to make sense and the same is valid for most of the Slavic languages. I can run this through a couple of other translators as well, but I think it would be better to make sure the length of the string doesn't affect the layout.

Suggestion - change the title to two lines and introduce a two line title for "Custom CSS" to even the layout out.

[ramiy]

We should avoid using <a> tags in the following translation strings:

• '<a href="%s">Post Type Templates</a>'
• '<a href="%s">Custom Bulk Actions</a>'
• '<a href="%s">Customize Changesets</a>'

The link should be outside the translation string. See the attached patch.

[helen]

In 39442:

About page: Remove emoji from translatable string.

props ocean90.
see #38616.

[pento]

:thumbs-up: for 38616.4.patch​.

[helen]

In 39443:

About page: Remove link tags from inside translatable strings.

props ramiy.
see #38616.

[helen]

In 39445:

About page: Add strings for 4.7 and make available for translation.

It doesn't look very pretty; design changes still to come.

merges [39420], [39432], [39433], [39442], [39443] to the 4.7 branch.

props helen, michaelarestad, samuelsidler, jbpaul17, jorbin, nacin, melchoyce, ocean90, ramiy.
see #38616.

[helen]

Replying to petya:

Suggestion - change the title to two lines and introduce a two line title for "Custom CSS" to even the layout out.

It ended up being "Smoother Menu Building" but probably still long-ish, will talk to @melchoyce about whether we'd want to switch to an alternating text next to video layout for each item instead of two-ups. Not sure what else we can call it and don't really want to artificially lengthen "Custom CSS" to something else. Anyway, will explore options.

[melchoyce]

Replying to helen:

Replying to petya:

Suggestion - change the title to two lines and introduce a two line title for "Custom CSS" to even the layout out.

It ended up being "Smoother Menu Building" but probably still long-ish, will talk to @melchoyce about whether we'd want to switch to an alternating text next to video layout for each item instead of two-ups. Not sure what else we can call it and don't really want to artificially lengthen "Custom CSS" to something else. Anyway, will explore options.

I'm also okay with the grid being a little uneven, or using something like Flexbox to align the header to the bottom of a container so it sits right above the screenshot (like ​https://cloudup.com/chDsYJeBEM8).

[melchoyce]

Uploaded twenty-seventeen.jpg​. Can we do some art direction via responsive images for smaller screens? :)

[melchoyce]

Also as an FYI — that's not final (I want to change the copy inside the mockups to be more curated), just want to get some images in to start being able to adjust in-browser.

[melchoyce]

Added an updated mockup (about_4-7_v2.jpg​). Edit Shortcuts/Video Headers are both video screenshots. Helen's working on a video for Theme Starter Content. I've started adding the images to ​https://cloudup.com/cb-AesHFTM5 (all at 2x right now).

[helen]

In 39512:

About page: Imagery and beautification.

Still to come: responsive images, optimized videos, and CDN URLs.

props melchoyce, helen, ramiabraham.
see #38616.

[helen]

In 39513:

About page: Imagery and beautification.

Still to come: responsive images, optimized videos, and CDN URLs.

merges [39512] to the 4.7 branch.
props melchoyce, helen, ramiabraham.
see #38616.

[joemcgill]

38616.4.diff​ adds responsive image markup for all the images on the about page, including art direction of the Twenty Seventeen image using <picture> to show the mobile image on smaller screens and the full image on larger screens. For now, I've uploaded all of the sized images to ​https://cloudup.com/cOkHMIOMC_I, but they should all be uploaded to the w.org CDN and have the URLs replaced before we ship.

The images were generated using ​http://www.responsivebreakpoints.com/, which determines image sizes based on the content of each image, in order to optimize for file savings between each size.

One other note: in all srcset lists, the URL from the src has been listed first to work around a neat iOS 8 bug where the first source in the srcset list always gets chosen when w descriptors are used. See #35030 for the backstory.

[joemcgill]

38616.6.diff​ is an update using the s.w.org CDN and updates the video shortcodes as well. Note to future adventurers, wp_video_shortcode() does not like videos URLs with a query variable on the end.

[joemcgill]

In 39514:

About page: Resposive images and CDN media URLs.

This adds srcset and sizes to the about page images, including
art direction, via <picture> for the lead Twenty Seventeen image.

This also replaces URLs for all images and feature videos to their
CDN locations on s.w.org.

Props helen, pento, joemcgill.
Fixes #38616.

[joemcgill]

In 39515:

About page: Resposive images and CDN media URLs.

This adds srcset and sizes to the about page images, including
art direction, via <picture> for the lead Twenty Seventeen image.

This also replaces URLs for all images and feature videos to their
CDN locations on s.w.org.

Props helen, pento, joemcgill.
Fixes #38616 for 4.7.

[helen]

In 39517:

About page: Bump image versions because CDN caching.

props pento.
see #38616.

[helen]

In 39518:

About page: Bump image versions because CDN caching.

props pento.
see #38616 for the 4.7 branch.

[helen]

In 39522:

About page: Update video and REST API reference URLs.

props ocean90, kadamwhite, coffee2code.
see #38616.

[helen]

In 39523:

About page: Update video and REST API reference URLs.

props ocean90, kadamwhite, coffee2code.
see #38616 for the 4.7 branch.