WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 6 months ago

#46161 closed task (blessed) (fixed)

5.1 About page

Reported by: peterwilsoncc Owned by: pento
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: fixed-major
Focuses: Cc:

Description

The about page needs some design and copy for WordPress 5.1.

This ticket blocks #46029.

Attachments (19)

3.7-about-3.png (461.8 KB) - added by mcsf 6 months ago.
46161.1.diff (24.2 KB) - added by mcsf 6 months ago.
46161.2.diff (27.2 KB) - added by mcsf 6 months ago.
46161.diff (27.3 KB) - added by noisysocks 6 months ago.
46161.3.diff (30.8 KB) - added by noisysocks 6 months ago.
46161.4.diff (4.0 KB) - added by peterwilsoncc 6 months ago.
5.1 About Page v1.png (502.8 KB) - added by melchoyce 6 months ago.
5.1 About Page v2.png (501.7 KB) - added by melchoyce 6 months ago.
5.1 About Page v3.png (421.6 KB) - added by melchoyce 6 months ago.
Stetoscope.jpg (11.0 KB) - added by paaljoachim 6 months ago.
heart.png (26.8 KB) - added by melchoyce 6 months ago.
Alternative to the stethoscope, based on Slack convo: https://wordpress.slack.com/archives/C02S78ZAL/p1550110018211800
5.1-About-Page-v2-with-heart.jpg (343.8 KB) - added by paaljoachim 6 months ago.
With heart instead of the stethoscope.
5.1 About Page v5.png (463.8 KB) - added by melchoyce 6 months ago.
46161.5.diff (17.7 KB) - added by ryelle 6 months ago.
5.1-editor-performance.svg (18.1 KB) - added by ryelle 6 months ago.
5.1-site-health.svg (31.0 KB) - added by ryelle 6 months ago.
5.1-under-the-hood.svg (193.3 KB) - added by ryelle 6 months ago.
5.1-update.svg (86.0 KB) - added by ryelle 6 months ago.
46161.6.diff (19.2 KB) - added by pento 6 months ago.

Change History (70)

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


7 months ago

#2 follow-up: @melchoyce
7 months ago

What major and minor features should be highlighted in 5.1?

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


7 months ago

#4 follow-up: @azaozz
6 months ago

Are we keeping the "Classic Editor" section:

https://core.trac.wordpress.org/raw-attachment/ticket/45178/classic.png

If yes, should we fix/update the text there to be aware if the plugin is installed but not activated? See https://core.trac.wordpress.org/attachment/ticket/45178/45178.21.diff.

Last edited 6 months ago by azaozz (previous) (diff)

#5 in reply to: ↑ 2 @mcsf
6 months ago

Replying to melchoyce:

What major and minor features should be highlighted in 5.1?

  • It seems the major features are the developments on the Servehappy and Site Health fronts, as well as Gutenberg 4.8, which is mostly about many performance improvements. Am I missing something? Performance improvements are easy to explain, but I'll take all the help I can get to explain the remaining highlights to a user.
  • Among the minor features, I can only find developer-oriented ones: Multisite Metadata, Cron API, New JS Build Process, Updated Styles and Strings. What else?

High-level thoughts and questions:

  • If the minor improvements are indeed all dev-oriented, we can just be clear about that.
  • As a data point, 4.8—which was also a smaller release—had the following messaging: An Update with You in Mind | WordPress 4.8 adds some great new features. Gear up for a more intuitive WordPress! | Though some updates seem minor, they’ve been built by hundreds of contributors with you in mind.
  • 5.1 is overall a smaller release, eclipsed by 5.0, so we could take some inspiration from 4.8. However, the intention is to keep momentum in the release cycle, so these incremental releases—smaller but more frequent—are to be expected. Can we just convey this?
  • There was a significant shift in the overall appearance of the About page in 5.0, in order to both introduce the new editor, but also to play with the concept of blocks. 5.0 is arguably still fresh in people's minds; does it make sense to retain the overall look? There aren't a lot of illustrations for the highlights, which is an important factor.

#6 in reply to: ↑ 4 @mcsf
6 months ago

Replying to azaozz:

Are we keeping the "Classic Editor" section:

This is a good question. I think it comes down to whether the overall page is made to paint 5.1 as an iteration of 5.0, in which case it should retain a good deal of information around the Block Editor. In that context, we should keep the bit about Classic and apply your patch, @azaozz.

@melchoyce, what does your gut tell you on whether to keep a small about page focused on 5.1 vs. something building from 5.0?

This ticket was mentioned in Slack in #core-php by mcsf. View the logs.


6 months ago

#8 follow-up: @melchoyce
6 months ago

Whether we focus on new 5.1 features or spin it as an iteration on 5.0, I definitely think we should keep it small and succinct. 4. The 3.7 page is a good source of inspiration — that was another dev-focused release.

Are any of the changes in 5.1 super exciting for either new users, power users, or developers? If it's a bunch of helpful stuff, but nothing to rave about, we should focus on communicating that it's a small iterative release building on 5.0. (We can definitely highlight the biggest code improvements as well towards the bottom of the page.)

@mcsf
6 months ago

#10 in reply to: ↑ 8 @mcsf
6 months ago

Replying to melchoyce:

Whether we focus on new 5.1 features or spin it as an iteration on 5.0, I definitely think we should keep it small and succinct. 4. The 3.7 page is a good source of inspiration — that was another dev-focused release.

Sounds great. For reference, I've attached a screenshot of 3.7's About page.

Are any of the changes in 5.1 super exciting for either new users, power users, or developers? If it's a bunch of helpful stuff, but nothing to rave about, we should focus on communicating that it's a small iterative release building on 5.0. (We can definitely highlight the biggest code improvements as well towards the bottom of the page.)

I don't think any of it will be super exciting yet: the best of Site Health is yet to come, as is the best of performance in the Block Editor (Gutenberg 4.9 and onwards). Still, for some users the current benefits in performance may already be felt and welcome. As for the miscellaneous dev improvements, I'd say certain items on that list may individually be exciting for given people, but that's it.

#11 in reply to: ↑ 9 ; follow-up: @mcsf
6 months ago

Replying to afragen:

@mcsf this is a good place to start for the Servehappy stuff that's merged for 5.1
https://core.trac.wordpress.org/query?status=closed&keywords=~servehappy&resolution=fixed&col=id&col=summary&col=status&col=owner&col=type&col=priority&col=milestone&order=priority

Thanks, @afragen. If I'm parsing that list correctly, the improvements can be grouped into:

  • New dashboard widget to inform administrators about outdated PHP versions. A yellow warning colour is used when the current PHP version is outdated, a red error color is used when it is also insecure.
  • Honour plugins' minimum required PHP version. This is achieved by conditionally disabling the Install plugin button and showing the required PHP version more prominently (in the details view of a plugin).

#12 in reply to: ↑ 11 ; follow-up: @afragen
6 months ago

Replying to mcsf:

  • New dashboard widget to inform administrators about outdated PHP versions. A yellow warning colour is used when the current PHP version is outdated, a red error color is used when it is also insecure.

I believe this is correct.

  • Honour plugins' minimum required PHP version. This is achieved by conditionally disabling the Install plugin button and showing the required PHP version more prominently (in the details view of a plugin).

This honors the minimum version requirements for both WordPress and PHP. This data is taken from the plugin's readme.txt file. Any plugin that does not specify a version requirement will be allowed to install. This is the current default behavior. These actions require passing both requirements. Currently this is only for the Install Plugin.

In 5.2 the plans are for this to be honored for plugin updates and plugin activation.

@flixos90 @schlessera does this sound correct to you?

#13 in reply to: ↑ 12 ; follow-up: @mcsf
6 months ago

Replying to afragen:

Good points. Meanwhile, I got this nice summary from @jeffpaul:

WordPress 5.1 includes portions from the from the Servehappy and Site Health projects so that it will start showing notices to administrators of sites that run on long outdated PHP versions and will start honoring plugin PHP version requirements.

#14 @JeffPaul
6 months ago

@mcsf @afragen looks like a double "from the" in the text I provided, you'll want to remove that (I've done that to the Field Guide draft just now).

#15 in reply to: ↑ 13 @afragen
6 months ago

Replying to mcsf:

Replying to afragen:

Good points. Meanwhile, I got this nice summary from @jeffpaul:

WordPress 5.1 includes portions from the Servehappy and Site Health projects so that it will start showing notices to administrators of sites that run on long outdated PHP versions and will start honoring plugin PHP version requirements.

Perfect. Short and to the point.

Last edited 6 months ago by afragen (previous) (diff)

#16 follow-up: @mcsf
6 months ago

In the same vein as 3.7, here's how this could look, with a three-segment structure:

  1. Welcome / The release in a nutshell / Some illustration?
  2. The two highlights: Servehappy and Block Editor improvements.
  3. The miscellaneous improvements for developers.

First draft:


# A little better every day

Following WordPress 5.0—a major release which introduced the new Block Editor—5.1 focuses on polish, in particular by improving overall performance of the editor. In addition, this release paves the way for a better, faster and more secure WordPress with some essential tools for developers.

## Site Health

In a continuous effort to keep the Web secure and fast, WordPress is betting on the Servehappy and Site Health projects. This is why WordPress will start showing notices to administrators of sites that run on long outdated PHP versions, and why it will start honoring plugin PHP version requirements.

## Block Editor

The new block editor has kept improving since its introduction in WordPress 5.0. Most significantly, WordPress 5.1 includes solid performance improvements within the editor. The editor should feel a little quicker to start, and typing should feel smoother. Nevertheless, expect more performance improvements in the next releases.

## Developer happiness

[Things to highlight:]

  • Multisite Metadata
  • Cron API
  • New JS Build Process
  • Updated Styles and Strings
  • Other Developer Goodness

#17 in reply to: ↑ 16 @afragen
6 months ago

Replying to mcsf:

## Site Health

In a continuous effort to keep the Web secure and fast, WordPress is betting on the Servehappy and Site Health projects. This is why WordPress will start showing notices to administrators of sites that run on long outdated PHP versions, and why it will start honoring plugin PHP version requirements.

This should be "honoring plugin WordPress and PHP version requirements."

#18 follow-up: @melchoyce
6 months ago

Anything more we can do to explain what Servehappy and Health Check are for people unfamiliar with the projects?

@mcsf
6 months ago

#19 in reply to: ↑ 18 @afragen
6 months ago

Replying to melchoyce:

Anything more we can do to explain what Servehappy and Health Check are for people unfamiliar with the projects?

Hmm. I think a way to describe it is something like the following.

Servehappy and Health Check are part of WordPress' ongoing efforts to promote the use of more secure versions of PHP while attempting to mitigate potential issues when updating PHP.

#20 @mcsf
6 months ago

Bear with me: 46161.1.diff looks quite horrible! I am hoping we can start from here and adapt the style to something that makes sense. There aren't a lot of visual changes in 5.1, so IMO we should move away from the illustration-heavy layout.

Servehappy and Health Check are part of WordPress' ongoing efforts to promote the use of more secure versions of PHP while attempting to mitigate potential issues when updating PHP.

That sounds good. Is there a good reference for interested users to follow? I see some Make/Core posts, but they seem too technical or tactical.

#21 @afragen
6 months ago

I think most of it is in https://make.wordpress.org/core/2019/01/14/php-site-health-mechanisms-in-5-1/ but so is lots of other stuff.

I did a quick search and I don't see a specific, simple description.

https://make.wordpress.org/core/2019/01/11/site-health-check-project-review-at-wcus/

Last edited 6 months ago by afragen (previous) (diff)

#22 @afragen
6 months ago

From https://make.wordpress.org/core/2018/07/17/servehappy-roadmap-update-and-priorities/

While the general long-term goals of the project are clear and available in the project’s roadmap, the discussion briefly involved clarifying priorities and short-term goals.

  • Increase adoption of modern PHP versions by being more active and vocal about the necessity of those.
  • Encourage users in a positive manner to update and stay updated.
  • Make the process of updating as seamless as possible.
  • Release a first iteration of the project that warns administrators of sites running PHP 5.2.

#23 follow-ups: @peterwilsoncc
6 months ago

As site health is user focused, I've attempted to write up some less deverloper-focused copy. I've removed ServeHappy as that was a working title that proved to be unclear for users.

I imagine it all needs an edit for clarity, particularly the final paragraph.

## Site Health

In a continuous effort to keep the Web secure and fast, WordPress has introduced site health features. WordPress will start showing notices to administrators of sites that run on long outdated PHP versions.

PHP is the programming language used to build and maintain WordPress.

(if out of date)
WordPress has detected your site is running an outdated version of PHP. You will see this notice on your dashboard with instructions for contacting your host.

[dashboard widget]
(end: if out of date)

WordPress's site health features will also check if a plugin specifies it requires a version of PHP incompatible with your site. WordPress checks this information and will prevent you from installing an incompatible plugin.

@mcsf
6 months ago

#24 in reply to: ↑ 23 @mcsf
6 months ago

Replying to peterwilsoncc:

Thanks for the input! I've incorporated your suggestions and adapted them in 46161.2.diff.

Let me know what you think—or rather let us know, as it's getting pretty late here and I'll log out soon.

#25 @afragen
6 months ago

For clarification, WP 5.1 will not be able to install a plugin if it doesn’t meet the posted requirements for either WordPress or PHP.

#26 in reply to: ↑ 23 @andreamiddleton
6 months ago

Replying to peterwilsoncc:

Some great improvements here, especially this:

In a continuous effort to keep the Web secure and fast, WordPress has introduced site health features. WordPress will start showing notices to administrators of sites that run on long outdated PHP versions.

Kudos! Nice and clear. (Though I personally would hyphenate "long-outdated" but that might just be me.)

What if we edit the last paragraph a little bit (as you mentioned @peterwilsoncc), so:

WordPress's site health features will also check if a plugin requires a version of PHP that is incompatible with your site, and prevent the installation of an incompatible plugin.

#27 @peterwilsoncc
6 months ago

Thanks @andreamiddleton, that's much better.

I'd like to replace requires with specifies a miniumum as the feature relies on the plugin author setting the version in the readme. I may be over thinking this though.

WordPress's site health features will also check if a plugin specifies a minimum version of PHP that is incompatible with your site, and prevent the installation of an incompatible plugin.

#28 @noisysocks
6 months ago

There's some issues with the screenshots we're using:

  • The 'PHP Update Required' screenshot is non-retina and shows an outdated design of the 'PHP Update Required' message. I'm also not totally convinced it's the strongest image to lead with.
  • The Classic Editor screenshot says 'WordPress 5.0' in it instead of 'WordPress 5.1'.

I'd suggest that we:

  • Update the 'PHP Update Required' screenshot to be retina and show the newest design.
  • Move the 'PHP Update required' screenshot to below 'Site Health' where we describe the feature.
  • Add a screenshot of the block editor to below 'Editor Performance'.
  • Update the Classic Editor screenshot to say 'WordPress 5.1'.
  • Come up with a new image to lead with underneath 'A Little Better Every Day', or remove it entirely.

Changes to the images can be made after the RC is packaged so none of this is blocking.

@noisysocks
6 months ago

#29 @noisysocks
6 months ago

46161.diff contains some minor copy changes courtesy of @andreamiddleton.

#30 @pento
6 months ago

  • Keywords needs-patch removed
  • Owner set to pento
  • Status changed from new to assigned

#31 @pento
6 months ago

In 44733:

Admin: Initial version of the WordPress 5.1 About page.

This includes the final strings, the design will continue to iterate.

Props mcsf, noisysocks, melchoyce, azaozz, afragen, JeffPaul, peterwilsoncc, andreamiddleton.
See #46161.

#32 @pento
6 months ago

In 44734:

Admin: Fix code formatting issues in the About page.

See #46161.

@noisysocks
6 months ago

#33 @noisysocks
6 months ago

46161.3.diff:

  • Replaces if ( true ) check in wp-admin/about.php with correct wp_check_php_version() check
  • Moves wp_check_php_version() from wp-admin/dashboard.php to wp-admin/includes/misc.php
  • Fixes some lint errors in wp-admin/about.php
Last edited 6 months ago by noisysocks (previous) (diff)

#34 @peterwilsoncc
6 months ago

In 44735:

Admin: Improve logic of PHP version check on about page.

Props noisysocks, peterwilsoncc.
See #46161.

This ticket was mentioned in Slack in #core-php by schlessera. View the logs.


6 months ago

#36 @melchoyce
6 months ago

Added three different ideas. I'm leaning towards 2, but I'd love to get some feedback on which of these folks thinks works best.

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


6 months ago

#38 follow-up: @noisysocks
6 months ago

Do you think that users might mistake the 'PHP Update Required' screenshot for the real thing and accidentally click on 'Learn more about updating PHP'?

#39 @paaljoachim
6 months ago

An alternative to the stethoscope graphic.
I took image from here: https://www.ecosia.org/images?q=stethoscope+graphic+image#id=C6E5601FB2E4E0C8447AE5DAF61C93888149D6C3
Then adjusted it in Photoshop.

#40 @melchoyce
6 months ago

@paaljoachim Do you know if that site has a usage license specified somewhere?

@noisysocks Possibly yeah — I can try to tweak it to make it look less like it's interactive.

@melchoyce
6 months ago

Alternative to the stethoscope, based on Slack convo: https://wordpress.slack.com/archives/C02S78ZAL/p1550110018211800

#41 follow-up: @karmatosed
6 months ago

I like the heart as an option. 2 feels my preference, however, is the 'update PHP' an image? I ask because the primary button in it makes me want to click.

#42 @paaljoachim
6 months ago

Hey @melchoyce

The image https://clipground.com/images/stethoscope-clip-art-free-vector-19.jpg
came from this web site:
https://clipground.com/
License information is mentioned as: DOWNLOAD CLIPART, IMAGES, WEB ART AND GRAPHICS
FOR FREE UNDER THE CREATIVE COMMONS LICENSE.
https://creativecommons.org/licenses/by/4.0/
So the above license seems to indicate one has to give attribute and notice if it has been changed.

I did another search this time on images in the public domain.
https://www.ecosia.org/images?q=free+to+use+and+modify+image+stetoscope&license=public#id=088D5F0557EDCA2A8081BAD7558ED1F3B42EB7B3

I am now looking for another suitable image to use.

#43 in reply to: ↑ 41 @melchoyce
6 months ago

Replying to karmatosed:

I like the heart as an option. 2 feels my preference, however, is the 'update PHP' an image? I ask because the primary button in it makes me want to click.

Yeah, @noisysocks mentioned that too — I'm going to see if there's something I can do to make the image less interactionable, and if that fails, do another illustration.

@paaljoachim
6 months ago

With heart instead of the stethoscope.

#44 @andreamiddleton
6 months ago

I like the heart graphic more than the stethoscope graphic; the heart feels positive, warm, and indicative-of-health, whereas the stethoscope feels more "doctor-y" and indicative-of-illness.

#45 in reply to: ↑ 38 @peterwilsoncc
6 months ago

Replying to noisysocks:

Do you think that users might mistake the 'PHP Update Required' screenshot for the real thing and accidentally click on 'Learn more about updating PHP'?

This concerns me a little too, thus my preference for including the live widget on the page rather than a screen shot.

The widget functions aren't available to the about page so it might be necessary to recreate it or move the widget code. My preference is to recreate.

No new strings are required as they have been included in the dashboard widget.

#46 @melchoyce
6 months ago

Unless anyone has additional feedback, I'm going to say 5.1 About Page v5.png is the layout and illustration direction I'd like to go in. @ryelle has kindly volunteered to code it up over the weekend.

@ryelle
6 months ago

@ryelle
6 months ago

#47 @ryelle
6 months ago

46161.5.diff updates the page to match @melchoyce's design. There shouldn't be any content changes. I also removed all the floating-header-section references, and the JS code that ran to set those up. The images have also been uploaded to this ticket. Don't mind the temporary URLs, I needed a place to host SVGs (it's my site).

I was only able to browser test on Mac/Chrome & Mac/Firefox, so I'd appreciate some help checking other browsers.

@pento
6 months ago

#48 @pento
6 months ago

Thank you for building this, @melchoyce and @ryelle!

In 46161.6.diff:

  • Images are now on the s.w.org CDN.
  • The "Gutenberg has been deactivated" warning is removed, since upgrading no longer deactivates Gutenberg.
  • The "Learn how to keep using the old editor" info link at the top is removed, but I kept the details at the bottom.
  • The "Learn more about updating PHP" button now links to the correct URL.

I've tested in Safari on macOS, as well as iPhone 5/iPhone XR/iPad Pro simulator, it all looks good there.

#49 @pento
6 months ago

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

In 44749:

Admin: Update the About page design to match mockups.

This commit also moves the images to s.w.org, removes the old "Gutenberg has been deactivated" warning, as well as removing some old JS from About pages of years gone past.

Props melchoyce, ryelle, paaljoachim, karmatosed, pento.
Fixes #46161.

#50 @pento
6 months ago

  • Keywords fixed-major added; needs-design removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

#51 @pento
6 months ago

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

In 44752:

Admin: Update the About page design to match mockups.

This commit also moves the images to s.w.org, removes the old "Gutenberg has been deactivated" warning, as well as removing some old JS from About pages of years gone past.

Merges [44749] to the 5.1 branch.

Props melchoyce, ryelle, paaljoachim, karmatosed, pento.
Fixes #46161.

Note: See TracTickets for help on using tickets.