WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 16 hours ago

Last modified 4 hours ago

#41316 closed task (blessed) (fixed)

Introduce "Try Gutenberg" callout

Reported by: melchoyce Owned by: pento
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch commit
Focuses: administration Cc:

Description

At the WordPress Community Summit, we talked about getting more eyes on Gutenberg early by introducing it as a beta feature for folks to test out before being officially released. This could be some kind of pointer or notice in your dashboard with a link to install the plugin, and also a link to https://make.wordpress.org/test/handbook/call-for-testing/gutenberg-testing/ (or similar site).

cc @matveb and @joen

Attachments (26)

gutenberg-plugin-card-2017-07-30.png (17.7 KB) - added by celloexpressions 3 months ago.
Current plugin card for Gutenberg, showing very mixed reviews and a warning not to use it on real sites.
41316.diff (9.0 KB) - added by pento 2 weeks ago.
41316.2.diff (9.1 KB) - added by pento 8 days ago.
41316.3.diff (9.1 KB) - added by pento 8 days ago.
Desktop.png (1.2 MB) - added by pento 8 days ago.
iPad Pro.png (750.6 KB) - added by pento 8 days ago.
iPad.png (932.5 KB) - added by pento 8 days ago.
iPhone 6P.png (258.5 KB) - added by pento 8 days ago.
iPhone 4.png (161.5 KB) - added by pento 8 days ago.
iPad Pro without image.png (602.7 KB) - added by pento 7 days ago.
iPad without image.png (290.0 KB) - added by pento 7 days ago.
41316.4.diff (9.3 KB) - added by pento 7 days ago.
41316.5.diff (9.2 KB) - added by Joen 7 days ago.
Patch to polish up the verbiage, and add a new GIF
wide.png (179.9 KB) - added by Joen 7 days ago.
Patch .5 desktop breakpoint
mobile.png (65.7 KB) - added by Joen 7 days ago.
Patch .5 mobile breakpoint
41316.6.diff (14.3 KB) - added by pento 7 days ago.
41316.7.diff (15.4 KB) - added by pento 6 days ago.
contributor.png (868.6 KB) - added by pento 6 days ago.
Gutenberg Callout Gif 2 Col.png (493.8 KB) - added by melchoyce 6 days ago.
41316.8.diff (17.8 KB) - added by pento 6 days ago.
3 column - Desktop.png (701.1 KB) - added by pento 6 days ago.
3 column - iPad Pro.png (624.9 KB) - added by pento 6 days ago.
3 column - iPad.png (258.5 KB) - added by pento 6 days ago.
3 column - iPhone 6P.png (248.4 KB) - added by pento 6 days ago.
3 column - iPhone 4.png (78.4 KB) - added by pento 6 days ago.
41316.9.diff (17.8 KB) - added by pento 39 hours ago.

Change History (66)

This ticket was mentioned in Slack in #core-editor by melchoyce. View the logs.


3 months ago

#2 @netweb
3 months ago

Related/Previously: #29631 The 'Beta Testing' tab should be first in plugin installer

If you're running a development build, we append a 'Beta Testing' tab where we list plugins which are features in development (#28513). We should make this tab primary for the purposes of discovery.

This is still the case, currently Gutenberg appears in the list of plugins from the Add plugin dashboard panel
:
https://cldup.com/CxycUtCUyd.png

#3 @afercia
3 months ago

@netweb I think the 'Beta Testing' tab appears only on trunk, not on stable?

#4 follow-up: @melchoyce
3 months ago

@joen Is it too soon to include this in 4.8.1?

#5 in reply to: ↑ 4 @Joen
3 months ago

Replying to melchoyce:

@joen Is it too soon to include this in 4.8.1?

I do feel like we are already receiving a large amount of feedback, more than we can react to quickly. It'd be nice to at least reach 1.0 in 4ish weeks time, before we widen the circle. But I've no _strong_ objection.

#6 @celloexpressions
3 months ago

Without being actively involved in Gutenberg development, it seems like it is nowhere near a state where we should actively encourage users to try it out on live sites (which we do by adding any information in core for non-development builds). Before we can do that, it should at minimum be presented as the primary editing experience when the plugin is active.

More importantly, we cannot encourage people to use it on live sites until development is at a stage where core (not just the Gutenberg team) can commit to 100% backwards compatibility moving forward. Without that, any content created with Gutenberg is at some risk of being degraded over time, and therefore, it cannot be used on live sites.

I'm not sure what the 1.0 version is intended to signify (it would be great if a roadmap of some sort were publicly communicated via make/core and other means), but my passing observation is that that seems to still be pre-beta based on the current state of activity and progress. That's good, and the project deserves time to mature, but it realistically should not be promoted as an encouraged plugin to install on every live site until it's at more of a "release candidate" stage ready for final feedback and core merge consideration. I'd think that being more successful as a regular plugin in terms of reviews and being able to promote itself for use on real sites would be a good prerequisite to anything in core to promote more-widespread testing (see attached).

@celloexpressions
3 months ago

Current plugin card for Gutenberg, showing very mixed reviews and a warning not to use it on real sites.

#7 @melchoyce
3 months ago

From some Slack convos, it sounds like @Joen doesn't want to show this until 4.9 at the earliest, to address some of those issues 👍

This ticket was mentioned in Slack in #core-editor by melchoyce. View the logs.


3 weeks ago

#9 @melchoyce
3 weeks ago

  • Milestone changed from Future Release to 4.9

#10 @karmatosed
3 weeks ago

Here are 2 suggestions of placement and some initial content. I would advise that content should be worked on once we have the placing decided.

https://cldup.com/5MXfhLr7Cy.png

https://cldup.com/H5QJ5Va66X.png

#11 @karmatosed
3 weeks ago

Thanks to @melchoyce, I have a few more suggestions design wise.

These would have animated gifs ideally:

https://cldup.com/Az_OKjR1pg.png

https://cldup.com/Pp0mYiA5HO.png

This is simpler without an animated gif:

https://cldup.com/gNopI3IPV2.png

#12 @celloexpressions
3 weeks ago

A secondary button, or even a link (depending on what the action is, auto-installing the plugin would be nice) would be more appropriate than introducing another primary button here. When a new user lands on the dashboard, they should still see the "welcome" panel first, and it should have primary visual hierarchy as that's the starting point for working on their site. Maybe the Gutenberg section should be more minimal here, with a way to expand to show more information and other graphics, or emphasize a primary flow that links out to a marketing page. If this is in core, it can't be easily changed without a core release.

An alternative idea would be to promote Gutenberg as the next major focus for core at the end of the 4.9 about page. That's a more appropriate place for this sort of information, and the users that see that would tend to be the ones that would be responsible for installing the plugin on their site.

Also, it still feels a bit premature to introduce this as "Gutenberg" and "The new editing experience for WordPress" within core before a merge proposal is published. And as I stated previously:

We cannot encourage people to use it on live sites until development is at a stage where core (not just the Gutenberg team) can commit to 100% backwards compatibility moving forward. Without that, any content created with Gutenberg is at some risk of being degraded over time, and therefore, it cannot be used on live sites.

Hopefully the core team can make that commitment before 4.9 is released, but if not, it doesn't seem appropriate to encourage its use on live sites.

@pento
2 weeks ago

#13 @pento
2 weeks ago

  • Keywords has-patch added

41316.diff is a first pass at implementing this mockup. (It doesn't look quite right, it was more about making sure the shiny updates code could be used on the dashboard.)

#14 @melchoyce
2 weeks ago

An alternative idea would be to promote Gutenberg as the next major focus for core at the end of the 4.9 about page. That's a more appropriate place for this sort of information, and the users that see that would tend to be the ones that would be responsible for installing the plugin on their site.

We're going to do this regardless 👍

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


2 weeks ago

This ticket was mentioned in Slack in #core-editor by melchoyce. View the logs.


8 days ago

#17 @karmatosed
8 days ago

I have a few iterations to suggestion:

https://cldup.com/eZz5h9c5Ur.png

As rightly pointed out by @melchoyce and @helen, calling it Gutenberg means nothing to users. This hopefully resolves that but keeps the name there for those that may associate already.

I'll also think about a video for this.

Last edited 8 days ago by karmatosed (previous) (diff)

#18 follow-up: @Joen
8 days ago

Is it kosher to reference a hosted image that we can change as we go, so the image doesn't quickly become dated as we continue to refine the UI?

#19 @iseulde
8 days ago

@Joen It could be hosted on w.org, it is done for e.g. the about page and emoji.

#20 in reply to: ↑ 18 @pento
8 days ago

Replying to Joen:

Is it kosher to reference a hosted image that we can change as we go, so the image doesn't quickly become dated as we continue to refine the UI?

Yep, as @iseulde suggested, we can put this on the w.org CDN. So we don't need to worry about updating the filename, lets use date( 'Ymd' ) as a cache buster, so the image will be outdated for 24 hours at most.

#21 @jorbin
8 days ago

Something to consider with an image updating is that the ALT text won't be updating.

@pento
8 days ago

@pento
8 days ago

@pento
8 days ago

@pento
8 days ago

@pento
8 days ago

@pento
8 days ago

@pento
8 days ago

#22 @pento
8 days ago

Who loves screenshots? Look at all them screenshots! ☝🏻

In 41316.3.diff, I changed the following:

  • Updated the text, per @karmatosed's suggestion.
  • Added a cache buster for the image.
  • Added an empty alt attribute for the image.
  • Tweaked the layout a bit on different screen sizes.

I'm not wild about some of the sizes, particularly iPad.png. Also, something about larger layouts feels a bit off when viewed next to the "Welcome to WordPress" box, but that may just be me staring at it for too long.

Should we have alternative images to show on desktop/tablet/mobile views? Showing the desktop screenshot on an iPhone 4 looks... weird. 🙂

Replying to jorbin:

Something to consider with an image updating is that the ALT text won't be updating.

I was viewing the screenshot as being similar to what we do for screenshots on about.php - no alt text. A generic alt text feels like it wouldn't be particularly useful here, and as you said, there's no way to update a specific alt text when the image updates.

#23 @jorbin
8 days ago

1) Those images seem HUGE once we collapse the sidebar menu
2) Should the images shown on mobile and tablet be what Gutenberg looks like on mobile and tablet?

Is the image really only for decorative purposes? That's what an empty alt attribute signifies.

#24 @karmatosed
7 days ago

Because mobile has enough to deal with, can we remove the images on mobile/tablets and just have the text? Maybe we can add in a small icon, but I'm all for the image only appearing on desktop. Those big images are not great.

@pento
7 days ago

#25 @pento
7 days ago

41316.4.diff removes the image from phone and mobile sized devices.

It definitely looks a lot better on mobile, and on iPad size, but iPad Pro size is looking a little bare. (See screenshots ☝🏻.)

Speaking of big images, the current image is ~4MB. We should probably make it a little smaller. 😉

@Joen
7 days ago

Patch to polish up the verbiage, and add a new GIF

@Joen
7 days ago

Patch .5 desktop breakpoint

@Joen
7 days ago

Patch .5 mobile breakpoint

#26 @Joen
7 days ago

Took a stab at some small tweaks in https://core.trac.wordpress.org/attachment/ticket/41316/41316.5.diff:

  • Tightned verbiage
  • Titlecase in buttons
  • New recorded GIF that's better compressed

Note that the GIF is still 2.9mb — that's after a roundtrip to ImageOptim, but that's the full resolution version. I have also recorded medium and small versions, and included the mp4 if anyone wants to make the recording smaller. All files are here: https://cloudup.com/c9TIU69YFzl

The direct link to cloudup as a host is temporary, we should host this on s.wordpress.org.

Note, it's been a while since I did patches in SVN, I may be rusty, hope this works as intended! :fingerscrossed:

@pento
7 days ago

#27 @pento
7 days ago

Looking good, @Joen!

In 41316.6.diff:

  • As much as I'm a fan of making people read things, I guess we should make the "Dismiss" button actually work. Now it does.
  • Add a "New Editor" option to the Screen Options panel on the Dashboard.
  • Tweak the Shiny Install behaviour, so that activating redirects to the Gutenberg Demo page.

Speaking of shiny installs, should the install button read "Download Today", or "Install Today"? It seems the latter is more accurate.

#28 follow-up: @Joen
6 days ago

Speaking of shiny installs, should the install button read "Download Today", or "Install Today"? It seems the latter is more accurate.

Latter sounds good — though there appeared to be some logic in the code that would display three different messages depending on your user rights.

#29 in reply to: ↑ 28 @pento
6 days ago

Replying to Joen:

Latter sounds good — though there appeared to be some logic in the code that would display three different messages depending on your user rights.

Yep, there are 3 cases:

  • If Gutenberg is not installed, and the user can install plugins, show the Install Today button.
  • If Gutenberg is installed but not activated, and the user can install plugins, show the Activate Today button.
  • If Gutenberg is installed and activated, and the user can edit posts, show the Try Today button.

For any other cases (ie, Gutenberg isn't installed, and the user can't install plugins; the user can't edit posts), the button is hidden.

@pento
6 days ago

@pento
6 days ago

#30 @pento
6 days ago

In 41316.7.diff:

  • Change the "Download Today" button text to "Install Today".
  • Fix a bug where the box wasn't shown when a new user logged in (and fixed the same bug with the Welcome box).
  • Check that the plugin is active before offering the "Try Today" button.

Also, see the screenshot ☝🏻 for an example of how it looks without the button. Any thoughts on putting extra text in there?

#31 @melchoyce
6 days ago

Two ideas:

  1. I think we should probably have a light border around the gif.
  2. What if we tried breaking up the content into two columns on wide screens, to better use space? See attached mockup.

@pento
6 days ago

@pento
6 days ago

#32 @pento
6 days ago

41316.8.diff implements the 3 column layout, see screenshots ☝🏻.

#33 follow-up: @celloexpressions
4 days ago

What are the usability implications of putting a large screenshot of wp-admin at the top of the dashboard? At first glance this seems confusing and disorienting for new users especially.

What is the status of guaranteeing backwards and forward compatibility for content created while the plugin is active and continues to be evolve? Any change to the integrity of published content and its formatting that results from changes during continued development and evolution would be unacceptable from the point that we encourage users this directly to install it on live sites. On the other hand, this could require core to take on significant technical debt to maintain compatibility for earlier iterations of the editor as a plugin. There should be a make/core post addressing this issue, at a minimum, along with a compatibility plan for the next stage of development as a plugin. Before core encourages millions of sites to use the plugin and rely on it functioning a certain way.

Is it appropriate to refer to this as "gutenberg" in code, or in database fields (as user meta)? Note that 41316.8.diff still uses "Gutenberg" in some user-facing text. From a core perspective, this word is unlikely to ever mean anything once it's eventually merged - should it be described that way now?

Why is there an @since 4.9.9 in 41316.8.diff?

@pento
39 hours ago

#34 in reply to: ↑ 33 @pento
39 hours ago

Replying to celloexpressions:

What are the usability implications of putting a large screenshot of wp-admin at the top of the dashboard? At first glance this seems confusing and disorienting for new users especially.

The design leads of Gutenberg and the 4.9 release are cool with it, I'm going with their recommendations. We'll also be updating the screenshot regularly.

What is the status of guaranteeing backwards and forward compatibility for content created while the plugin is active and continues to be evolve?

Backwards compatibility already works. The format can be easily changed in a backward compatible way, and can be versioned if it doesn't. Similarly, it can be forward compatible if we add versioning to Gutenberg now, but it's not a high priority.

There should be a make/core post addressing this issue

That's part of a post I'm in the middle of writing.

Is it appropriate to refer to this as "gutenberg" in code, or in database fields (as user meta)? Note that 41316.8.diff still uses "Gutenberg" in some user-facing text. From a core perspective, this word is unlikely to ever mean anything once it's eventually merged - should it be described that way now?

It's fine to call it Gutenberg, because that's what it's referred to everywhere - the plugin name, the repo name, news articles. Changing it to something more generic is unnecessarily confusing.

Why is there an @since 4.9.9 in 41316.8.diff?

Well, I was going to leave that function out until WordPress 4.9.9, but I guess we can put it in 4.9, instead. 😉

#35 @melchoyce
17 hours ago

  • Keywords commit added; needs-design removed

#36 @pento
16 hours ago

  • Owner set to pento
  • Resolution set to fixed
  • Status changed from new to closed

In 41895:

Dashboard: Introduce a "Try Gutenberg" callout.

To encourage more people to try Gutenberg, this new Dashboard box allows site users to easily install and try out Gutenberg.

Props pento, melchoyce, joen, karmatosed.
Fixes #41316.

#37 @pento
14 hours ago

In 41896:

Dashboard: Remove a rogue comma introduced in [41895].

See #41316.

#38 @pento
11 hours ago

In 41900:

Dashboard: Ensure the "Dismiss" button on the Gutenberg callout is clickable.

Who likes z-index? We like z-index!

Props joemcgill.
See #41316.

#39 @afercia
6 hours ago

Just a little concern about the "autoplaying" GIF, accessibility wise: it's a GIF so it can't be stopped. But I guess the ability to dismiss the meta box entirely is enough, although not exactly the same thing. /cc @joedolson

#40 @SergeyBiryukov
4 hours ago

In 41931:

Dashboard: Add missing URL to "Help with testing" link in Gutenberg callout.

See #41316.

Note: See TracTickets for help on using tickets.