WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#36173 closed task (blessed) (fixed)

4.5 About Page

Reported by: melchoyce Owned by: mikeschroder
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.6
Component: Help/About Keywords:
Focuses: accessibility, administration Cc:

Description

Placeholder for when we start working on it.

Attachments (28)

36173.diff (13.1 KB) - added by mikeschroder 4 years ago.
36173.2.diff (13.5 KB) - added by melchoyce 4 years ago.
about-page.png (353.4 KB) - added by ocean90 4 years ago.
With 36173.2.diff
36173.3.diff (13.5 KB) - added by mikeschroder 4 years ago.
about-page.2.png (345.1 KB) - added by ocean90 4 years ago.
With 36173.3.diff
36173.4.diff (14.1 KB) - added by mikeschroder 4 years ago.
36173.5.diff (17.9 KB) - added by ryelle 4 years ago.
36173.6.diff (17.9 KB) - added by melchoyce 4 years ago.
36173.7.diff (18.0 KB) - added by mikeschroder 4 years ago.
36173.8.diff (19.1 KB) - added by jeremyfelt 4 years ago.
36173.9.diff (19.2 KB) - added by Ipstenu 4 years ago.
Jeremy's patch with translations
36173.10.diff (19.6 KB) - added by Ipstenu 4 years ago.
36173.11.diff (19.6 KB) - added by Ipstenu 4 years ago.
36173.12.diff (19.6 KB) - added by mikeschroder 4 years ago.
36173.13.diff (20.1 KB) - added by celloexpressions 4 years ago.
Improves customizer link handling.
36173.14.diff (20.1 KB) - added by celloexpressions 4 years ago.
Check for partial refresh support for widgets if showing the widgets link.
36173.15.diff (20.1 KB) - added by mikeschroder 4 years ago.
Takes leading spaces out of translatable text.
36173.16.diff (20.2 KB) - added by DrewAPicture 4 years ago.
Improved selective refresh and script loader strings
36173.17.diff (8.6 KB) - added by ocean90 4 years ago.
36173.17.2.diff (2.4 KB) - added by afercia 4 years ago.
missing alt attributes
36173.18.diff (605 bytes) - added by ramiy 4 years ago.
remove () function, it's not a translation string
36173.19.diff (3.4 KB) - added by afercia 4 years ago.
better headings hierarchy
36173.20.diff (11.3 KB) - added by mikeschroder 4 years ago.
Combined patches, added titles.
36173.21.diff (11.4 KB) - added by mikeschroder 4 years ago.
Duplicated string to avoid lone translatable "customizer" string as link.
36173.21.2.diff (1.3 KB) - added by dimadin 4 years ago.
36173.22.diff (11.4 KB) - added by mikeschroder 4 years ago.
Changed 'link' to 'URL' in comment
about-images.zip (269.2 KB) - added by joemcgill 4 years ago.
36173.23.diff (3.1 KB) - added by joemcgill 4 years ago.

Download all attachments as: .zip

Change History (89)

#1 @jorbin
4 years ago

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

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

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


4 years ago

#3 @mikeschroder
4 years ago

  • Type changed from defect (bug) to task (blessed)

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


4 years ago

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


4 years ago

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


4 years ago

@mikeschroder
4 years ago

#7 @mikeschroder
4 years ago

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

#8 @celloexpressions
4 years ago

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.

#9 @melchoyce
4 years ago

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

@melchoyce
4 years ago

#10 @melchoyce
4 years ago

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.

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


4 years ago

@ocean90
4 years ago

With 36173.2.diff

#12 @mikeschroder
4 years ago

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

#13 @mikeschroder
4 years ago

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?

@mikeschroder
4 years ago

#14 @mikeschroder
4 years ago

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

#15 @helen
4 years ago

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.

#16 @ramiy
4 years ago

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.

#17 @ramiy
4 years ago

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

#18 @ramiy
4 years ago

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

#19 @ramiy
4 years ago

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

@ocean90
4 years ago

With 36173.3.diff

#20 follow-up: @helen
4 years ago

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?

#21 @melchoyce
4 years ago

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

#22 @iseulde
4 years ago

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

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


4 years ago

@mikeschroder
4 years ago

#24 @mikeschroder
4 years ago

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
4 years ago

#25 @ryelle
4 years ago

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.

#26 in reply to: ↑ 20 @celloexpressions
4 years ago

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
4 years ago

#27 @melchoyce
4 years ago

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.

@mikeschroder
4 years ago

#28 @mikeschroder
4 years ago

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
4 years ago

#29 follow-up: @jeremyfelt
4 years ago

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?

#30 in reply to: ↑ 29 @celloexpressions
4 years ago

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
4 years ago

Jeremy's patch with translations

#31 @Ipstenu
4 years ago

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

The same as @jeremyfelt's only with translation functions

@Ipstenu
4 years ago

#32 @Ipstenu
4 years ago

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

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

@Ipstenu
4 years ago

#33 @mikeschroder
4 years ago

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.
Last edited 4 years ago by mikeschroder (previous) (diff)

@celloexpressions
4 years ago

Improves customizer link handling.

#34 @celloexpressions
4 years ago

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

@celloexpressions
4 years ago

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

@mikeschroder
4 years ago

Takes leading spaces out of translatable text.

#35 @mikeschroder
4 years ago

  • Keywords has-patch needs-testing added

@DrewAPicture
4 years ago

Improved selective refresh and script loader strings

#36 @DrewAPicture
4 years ago

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.

#37 @azaozz
4 years ago

In 37169:

4.5 About screen.

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

@ocean90
4 years ago

@afercia
4 years ago

missing alt attributes

#38 @ocean90
4 years ago

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

#39 @afercia
4 years ago

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

#40 @afercia
4 years ago

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

https://cldup.com/debvp0w5k4.png

#41 @afercia
4 years ago

  • Focuses accessibility added

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


4 years ago

@ramiy
4 years ago

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

#43 @ramiy
4 years ago

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

#44 @azaozz
4 years ago

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

#45 @afercia
4 years ago

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
4 years ago

better headings hierarchy

#46 @afercia
4 years ago

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:

https://cldup.com/Lk6hvGcSs1.png

@mikeschroder
4 years ago

Combined patches, added titles.

#47 @mikeschroder
4 years ago

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.

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

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


4 years ago

@mikeschroder
4 years ago

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

#49 follow-up: @mikeschroder
4 years ago

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
4 years ago

#50 in reply to: ↑ 49 @dimadin
4 years ago

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

#51 @azaozz
4 years ago

  • Keywords commit added; needs-testing removed

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

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


4 years ago

#53 @ocean90
4 years ago

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.

@mikeschroder
4 years ago

Changed 'link' to 'URL' in comment

#54 @mikeschroder
4 years ago

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

#55 @jeremyfelt
4 years ago

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.

#56 @mikeschroder
4 years ago

  • Keywords has-patch commit removed

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

Otherwise, should be complete.

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


4 years ago

@joemcgill
4 years ago

#58 @joemcgill
4 years ago

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

#59 @melchoyce
4 years ago

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.

#60 @ocean90
4 years ago

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

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.

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


4 years ago

Note: See TracTickets for help on using tickets.