WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 11 months ago

Last modified 11 months ago

#38616 closed task (blessed) (fixed)

4.7 About Page

Reported by: helen Owned by: melchoyce
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: has-patch
Focuses: Cc:

Description

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.

Attachments (14)

about_4-7.jpg (627.7 KB) - added by melchoyce 11 months ago.
38616.diff (19.0 KB) - added by helen 11 months ago.
38616.2.diff (19.2 KB) - added by helen 11 months ago.
38616.3.diff (556 bytes) - added by ocean90 11 months ago.
38616.4.patch (2.8 KB) - added by ramiy 11 months ago.
twenty-seventeen.jpg (250.7 KB) - added by melchoyce 11 months ago.
about_4-7_v2.jpg (1002.8 KB) - added by melchoyce 11 months ago.
38616.4.diff (6.5 KB) - added by joemcgill 11 months ago.
38616.5.diff (10.0 KB) - added by joemcgill 11 months ago.
38616.6.diff (9.9 KB) - added by joemcgill 11 months ago.
38616.7.diff (1.4 KB) - added by joemcgill 11 months ago.
38616.8.diff (738 bytes) - added by joemcgill 11 months ago.
38616.9.diff (1.3 KB) - added by ocean90 11 months ago.
38616.10.diff (1.9 KB) - added by helen 11 months ago.

Download all attachments as: .zip

Change History (57)

#1 @johnbillion
12 months ago

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/

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


12 months ago

#3 @jorbin
12 months ago

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

#4 @celloexpressions
12 months ago

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.

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.

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.

#5 @lukecavanagh
11 months ago

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.

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


11 months ago

This ticket was mentioned in Slack in #polyglots by francina. View the logs.


11 months ago

#8 @petya
11 months ago

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

#9 @francina
11 months ago

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.

Last edited 11 months ago by francina (previous) (diff)

#10 @petya
11 months ago

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.

Last edited 11 months ago by petya (previous) (diff)

#11 @lukecavanagh
11 months ago

@petya

The copy about the REST API endpoints reads very well.

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


11 months ago

This ticket was mentioned in Slack in #polyglots by francina. View the logs.


11 months ago

#14 @Presskopp
11 months ago

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"

#15 @lukecavanagh
11 months ago

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

#16 @melchoyce
11 months ago

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

@helen
11 months ago

#17 @helen
11 months ago

  • Keywords has-patch added

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.

#18 @helen
11 months ago

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

@helen
11 months ago

#19 @helen
11 months ago

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.

#20 @ocean90
11 months ago

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.

#21 @ocean90
11 months ago

In 39433:

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

See #38616.

@ocean90
11 months ago

#22 @ocean90
11 months ago

  • Component changed from General to Help/About

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

#23 follow-up: @petya
11 months ago

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.

#24 @ramiy
11 months ago

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.

@ramiy
11 months ago

#25 @helen
11 months ago

In 39442:

About page: Remove emoji from translatable string.

props ocean90.
see #38616.

#26 @pento
11 months ago

:thumbs-up: for 38616.4.patch.

#27 @helen
11 months ago

In 39443:

About page: Remove link tags from inside translatable strings.

props ramiy.
see #38616.

#28 @helen
11 months ago

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.

#29 in reply to: ↑ 23 ; follow-up: @helen
11 months ago

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.

#30 in reply to: ↑ 29 @melchoyce
11 months ago

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

#31 @melchoyce
11 months ago

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

#32 @melchoyce
11 months ago

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.

#33 @melchoyce
11 months ago

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

#34 @helen
11 months ago

In 39512:

About page: Imagery and beautification.

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

props melchoyce, helen, ramiabraham.
see #38616.

#35 @helen
11 months ago

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

#36 @joemcgill
11 months ago

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

@joemcgill
11 months ago

#37 @joemcgill
11 months ago

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.

#38 @joemcgill
11 months ago

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

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.

#39 @joemcgill
11 months ago

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.

#40 @helen
11 months ago

In 39517:

About page: Bump image versions because CDN caching.

props pento.
see #38616.

#41 @helen
11 months ago

In 39518:

About page: Bump image versions because CDN caching.

props pento.
see #38616 for the 4.7 branch.

@joemcgill
11 months ago

@joemcgill
11 months ago

@ocean90
11 months ago

@helen
11 months ago

#42 @helen
11 months ago

In 39522:

About page: Update video and REST API reference URLs.

props ocean90, kadamwhite, coffee2code.
see #38616.

#43 @helen
11 months ago

In 39523:

About page: Update video and REST API reference URLs.

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

Note: See TracTickets for help on using tickets.