Epic: 6.5 release highlight grid (visual asset)

[thetinyl]

What is this?

The release highlight grid is meant to graphically showcase some of the release's top-of-mind features and enhancements. It's a nice and concise snapshot of the main features coming to a release. As a marketing-related asset, it's also been used to actively promote the release.

This is a tracking issue to manage the work needed on the 6.5 highlight grid. (Inspired by the 6.4 tracking issue.)

Examples of previous highlight grids for reference:

• 6.4 grid
• 6.3 grid
• 6.2 grid

Timing*

• Initial design: February 1
• Final design: February 13

*Proposed dates are flexible. Ideally this will be ready around Beta 1/Beta 2.

Content

To keep the highlight grid focused and clear, I'd like to suggest keeping it to ~10 main features. In discussion with @annezazu, the story that seems to connect a lot of this release centers around the idea of "make it your own." From styles to workflows, it's empowering folks to be the owners of their entire WP experience, including the foundational pieces that make that possible (along with many other things, of course).

With this in mind, these are the features that seem the most appropriate to include based on where things are at (this list has been updated as of Jan 26):

• Font Library
• Data Views
• Pattern Overrides
• Robust revisions: style revision improvements, new template and template part revisions
• Block Effects (aka Interactivity API placeholder name)
• Adoption pathways for classic themes: appearance tools and Pattern management
• Performance: Focus on speed (4x typing, 2x Editor load, faster block selection, Site Editor navigation, pattern previews)
• Custom Fields API
• Block Connections

Extra notes

• This isn't suggested copy. I'll circle back to that ASAP with suggestions, just wanted to get the ball rolling on the "what".
• We're not obligated to have 10, less is fine as long as the grid doesn't look empty. More is also fine, too, if it's manageable and there's a case for more.
• This list isn't final yet, please do share thoughts or additional considerations.

[DanSoschin]

A lot of this feels like further tightening up the site editing experience... but that theme has been used in prior builds, so I do like the idea of empowering site builders with more control and fine-tuning... as well as improving the site building experience (performance, usability, efficiency, etc.) So I think you are on to something good here... and there's likely plenty to talk about.

[annezazu]

upgraded pattern experience

I completely got this wrong and it's not going to be an upgraded experience. Let's remove and de-emphasize! Thanks for kicking this off.

[DanSoschin]

I view the 6.5 "stuff" as an amorphous blob of tickets that slowly takes shape and accelerates as Beta 1 approaches, so there are no worries about things getting added or removed. We're used to that, and the most important thing is discovering that info and bringing it to the front, which you did - so we're all good. Don't sweat the small stuff!

[thetinyl]

Noting that the features list above has been updated.

Font Library
Data Views
Pattern Overrides
Robust revisions: style revision improvements, new template and template part revisions
Block Effects (aka Interactivity API placeholder name)
Adoption pathways for classic themes: appearance tools and Pattern management
Performance: Focus on speed (4x typing, 2x Editor load, faster block selection, Site Editor navigation, pattern previews)
Custom Fields API
Block Connections

[thetinyl]

@jasmussen An FYI that @richtabor has mentioned LinkControls as something to consider. Perhaps as a replacement for Color Sets?

[annezazu]

@jasmussen An FYI that @richtabor has mentioned LinkControls as something to consider. Perhaps as a replacement for Color Sets?

Yes! Color sets has been pulled at this stage. Let's swap that out for now.

[jasmussen]

@thetinyl @annezazu Here's some initial work on a highlight grid:

For the time being, I've created cells for the suggested features, the version number, and done some initial illustration work for the main features. Besides the obviously missing pieces of the puzzle, feel free to comment on this as an initial draft, anything from wording over emphasis to what to demo. Notably I'd love your thoughts on what to demo for the Block Effects and Custom Fields APIs.

Figma.

[annezazu]

Thanks so much for kicking this off! Some quick thoughts:

• I think we need to drop the API part of the Block Effects portion.
• Change "Classic Theme Appearance Tools" to "Enable appearance tools in Classic themes" or "Enable appearance tools in all theme"
• Pattern Overrides & Partially synced patterns needs to just be "Pattern Overrides".
• Style and Template revisions doesn't include Template Part.

Notably I'd love your thoughts on what to demo for the Block Effects and Custom Fields APIs.

Custom Fields is going to be tricky since it's UI-less. I might show a snippet of code. For Block Effects, I wish we could make this a GIF or a short video :D to show something moving. Since we're making it public and it already powers a fair amount, some imagery around going public or maybe even a view of the dev docs might work to represent it as stable. I'll keep thinking. We also want it to be compelling!

[jasmussen]

Great feedback. Here's an iteration that also includes first-draft visuals for the remaining pieces:

A few notes:

• "Enable appearance tools in all themes" is not super clear, I wonder if we should go longer to be clearer? I also wonder if we want a visual, e.g. a checkbox next to the text. This would make it wrap on two lines, though.
• "Block Effects" is pretty tricky. What I put in there, the three corners, was just one quick experiment to add flair, which isn't really working. Technically we can animate, but it's a slightly bigger lift, and comes with tradeoffs that it cannot auto-play on the microsite.
• I added a codesnippet for the Custom Fields API, consider this also a placeholder pending better ideas.
• The Link UI I'm not super feeling, and would like a gut-check from @richtabor on whether the UI is correct to what'll be shipping.

In any case, let me know!

[thetinyl]

"Enable appearance tools in all themes" is not super clear, I wonder if we should go longer to be clearer? I also wonder if we want a visual, e.g. a checkbox next to the text. This would make it wrap on two lines, though.

I can think about this one and get back to you tomorrow.

Technically we can animate, but it's a slightly bigger lift, and comes with tradeoffs that it cannot auto-play on the microsite.

I think we did an animated highlight grid before, but it definitely was a bigger lift and I'm not sure what kind of impact it made since it was pretty subtle.

@jasmussen Just to clarify: Is Block Connections in reference to Block Binding API? Or this project in particular connecting it to the custom fields API?

I'm also wondering if Font Library is considered a central feature of this release? It feels pretty substantial to me, but I've also heard that Pattern Overrides is pretty significant as well. Thinking about what's taking that middle spot.

[annezazu]

I'm also wondering if Font Library is considered a central feature of this release? It feels pretty substantial to me, but I've also heard that Pattern Overrides is pretty significant as well. Thinking about what's taking that middle spot.

Font Library definitely will impact more folks than Pattern Overrides so I think it makes sense to have that as the central feature right now.

"Enable appearance tools in all themes" is not super clear, I wonder if we should go longer to be clearer? I also wonder if we want a visual, e.g. a checkbox next to the text. This would make it wrap on two lines, though.

Would be curious what Rich thinks here too. I think we'll have to go abstract here for the visual obviously. We could go more general "More design tools for Classic Themes" or "Add design tools to Classic Themes". Appearance tools doesn't feel very clear and ultimately they are for helping unlock design options.

"Block Effects" is pretty tricky. What I put in there, the three corners, was just one quick experiment to add flair, which isn't really working. Technically we can animate, but it's a slightly bigger lift, and comes with tradeoffs that it cannot auto-play on the microsite.

Totally makes sense with animating. Just had to mention it/throw it out there. What's there right now is okay but could be more compelling. Maybe something like this?

Be advised I hacked this together in the notes app of my iphone and drew the borders with my fingertips.

I added a codesnippet for the Custom Fields API, consider this also a placeholder pending better ideas.

We could play off of the 🔗 imagery that's in place in the original github overview issue: #51373

[jasmussen]

Be advised I hacked this together in the notes app of my iphone and drew the borders with my fingertips.

I dig your sketching skills 👌

Good notes, all. I would love and welcome @richtabor's instincts here as well, hopefully the pieces I put together in the Figma above can act as a boost, even if we end up completely remixing things.

[ellatrix]

Should we change "faster typing" to maybe "faster input processing" or "typing processing"? Just "faster typing" sounds a bit odd?

[jasmussen]

Yes, we definitely need a better term there. In another iteration currently only in the Figma file, I changed it to "faster editing". The idea being; this is mainly visible on long documents, and in that case you'r really in the editing flow. But very open to suggestions.

[thetinyl]

Oh, thanks @BenjaminZekavica! Looks like @jasmussen has already supplied some feedback in the Figma. I do think there's a lot of blue going on there, which feels very on-brand, but also somehow makes the content harder to focus on.

"Add design tools to Classic Themes"

@annezazu I think this is pretty straightforward. I understand that "Appearance" is Classic Themes-specific language, but the goal is to make Block design tooling available in the Classic Theme context. Thinking about it as being Block Theme design tools first, and ready to be adopted into Classic Themes.

I changed it to "faster editing". The idea being; this is mainly visible on long documents, and in that case you'r really in the editing flow. But very open to suggestions.

I think Faster Editing could work. I do wonder if that could be misconstrued as editing in general: writing & site editing. This may be erring on the over-cautious though, so not a strong opinion. Based on @ellatrix's thoughts above, a couple other options that came to mind: "faster word processing" (it's ew and too long, but sometimes these things need to surface) or "faster text input".

[richtabor]

Here's an iteration a bit less reliant on blue (other than interface elements). Thoughts on this direction?

[DanSoschin]

I like it!

…

On Mon, Feb 5, 2024 at 4:44 PM Rich Tabor ***@***.***> wrote: Here's an iteration a bit less reliant on blue (other than interface elements). Thoughts on this direction? rich-i4.png (view on web) <https://github.com/WordPress/gutenberg/assets/1813435/c816f654-cef7-4078-a153-7b6380d7c5b3> — Reply to this email directly, view it on GitHub <#58028 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMV2M4HRLH5UHLTPBZ32NNDYSFHCRAVCNFSM6AAAAABCCO2W7KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRYGE2DQMRSGE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Dan Soschin | Marketing .org Division +1 813.731.6078 Tampa, Florida, USA @DanSoschin

[jasmussen]

I left some comments in the Figma as well, so I won't duplicate it all here. I think the cells feel a bit less organized, and as noted a couple of times, we should really avoid that brush from "Appearance tools", and use a modern WordPress icon instead. The link editing, template screenshots, fluid drag and drop, and data view layout screenshos all feel stronger, though, and the 2x, 4x, 6x numbers look strong too.

[annezazu]

I'm getting a bit overwhelmed about which direction we're going in and where to give feedback on these different directions. Can we pull things together design wise so I can give targeted feedback on a specific iteration and we can start marching forward a bit more? Right now, in the above design, I can see a number of things I'd update text wise but it seems to be more about the coloring rather than the text.

[richtabor]

I can see a number of things I'd update text wise but it seems to be more about the coloring rather than the text.

Na, open to all feedback. Let's tweak the headings as we see fit.

[annezazu]

Okay! Here's a rundown for your version (again not sure which we're going with and really don't want to duplicate work at this intense stage of the release 😅):

• I don't understand why there are two mentions of the data views: "New templates data view" and "Data view layouts". Both don't sound compelling. In the source of truth I say "New powerful views for pages, patterns, templates, and template parts". Could keep it to just "New powerful views with filters in the Site Editor" (this is also rough but sharing for the sake of iteration!) or "New powerful views to make your own" to hint at the filtering piece.
• The visual for "Data view layouts" feels clunky rather than smooth. I'd use something else.
• "Robust revisions for styles, templates, and template parts" is a mouthful. I'd just keep it short "Robust revisions across the Site Editor".
• As mentioned above, "Appearance tools in classic themes" doesn't really work. I suggested "Add design tools to Classic Themes" there and recommend the same here.
• "Fluid drag and drop in list view" I worry about using fluid here when we use fluid typography. I'd say "More intuitive drag and drop"
• "Pattern Overrides". As you and I have been talking about elsewhere, let's not emphasize this as a separate new feature but as a capability of synced patterns. I'd say "Override content in synced patterns" or "Add the option to override content in synced patterns" if we want to go more descriptive.
• "New link editing controls". These controls aren't new. They are updated. I'd say "Updated link editing controls" or "Reimagined link editing".

[richtabor]

I don't understand why there are two mentions of the data views: "New templates data view" and "Data view layouts".

The thinking is that the data views for templates is on of the key areas it's used, and would be nice to add some nuance to what data views are; some familiarity. And layout wise, that's a really interesting part of data views that help "sell" the feature for others to leverage. It's much more interesting than the data views proper cell, but I do think both are nice.

The visual for "Data view layouts" feels clunky rather than smooth. I'd use something else.

That's the V2 dropdown look 😅

"Robust revisions for styles, templates, and template parts" is a mouthful. I'd just keep it short "Robust revisions across the Site Editor".

I did have something of the sort, but I wanted to help highlight what's different, because it doesn't seem like much difference from the previous release really. The UI is nearly identical.

#58028 (comment), "Appearance tools in classic themes" doesn't really work. I suggested "Add design tools to Classic Themes" there and recommend the same here.

The one drawback to swap "Appearance" with "Design" is that appearance has some connotation with the technical implications here, whereas "Design tools" is much more generic. I'm ok with the change, but that's the reason I didn't originally go with it.

"New link editing controls". These controls aren't new. They are updated. I'd say "Updated link editing controls" or "Reimagined link editing".

They look new though. It went from first, to second (below). I don't mind using "Updated" but it does kind of loose it's kick.

[BenjaminZekavica]

@thetinyl @annezazu @ellatrix @jasmussen

Thank you for your feedback :) I added all feedbacks to my final design.
New Update in Figma is available and I hope that you can approve.

I hope your like it :)

[ellatrix]

I like "input processing" 👍

Worth noting that's indeed not only typing that is 4x faster but generally any input that changes block attributes. It's just the most noticeable for typing because people type fast 🙂 Another place you might notice is on sliders/pickers if you drag over a range of options or a colour picker, which may change block attributes at a high rate.

[jasmussen]

Nice work everyone, thanks for all the energy Benjamin, Rich. We're running out of time, and some of the feedback I had (colors, and letting the content speak the most) I've struggled to communicate well, sorry about that. In order to take a final stab and see if I could tie the room together. I tried to combine the best pieces of Benjamin's work (I really dig the 2x, 4x numbers, the block effects, the design tools in classic themes slider, and the directional shadow you added), and some of Rich's layout choices, I landed on the following:

I wish for this to be an amalgam of the both of your work, but at the same time address some of the feedback I shared myself, notably about letting the features themselves speak. I hope I did it justice.

[ellatrix]

Should it not be "faster editor loading" instead of "faster editor"?

[BenjaminZekavica]

@thetinyl I hope this looks better :D

[jasmussen]

Can work. Be mindful of the inner padding on all the cells, so that it feels uniform.

• In the background cell, vertically center the text, or align it with the top text in the "smoother drag and drop" cell.
  • Ensure the padding above and to the right of image is the same, right now the right-most padding is smaller than the padding left and above.
  • The background picture is different from the one in the About page, not sure why, but if that's a strong opinion be sure it's public domain/CC0 licensed. The previous image was.
  • I find Figma auto-layout helps a lot with ensuring things line up across cells, and paddings are uniform.
  • The border radius of the image should probably be the same as it is for the cover block aspect ratio image, and the demo material in the Font Library cell. It's a bit larger here.
• In the aspect ratio cell, same with the padding. Ensure that it's the same across top/right/left.
  • I realize it's offset to the right a little bit to fit the aspect ratio control over it. But it doesn't look intentional enough, so maybe scale it down and move it more to the right, so it's clearer that it's offset.
  • The window frame looks a bit taller than it needs to, you could maybe fit the whole windowframe inside the cell, i.e. have space below it as well.

Let me know if you'd like me to dive in and collab in the Figma on this. Nice work.

[BenjaminZekavica]

@jasmussen Thank you for your feedback :) I fixed this now. I think you idea with the full column background is really good 👍

[jasmussen]

This looks close, nice work. If @richtabor has a chance to chime in, I'll defer to him.

[BenjaminZekavica]

This looks close, nice work. If @richtabor has a chance to chime in, I'll defer to him.

@jasmussen Perfect thank you. I think we are ready. @richtabor Do you can agree or you have something to change?

[ellatrix]

Hello! I'm checking the latest comparison with 6.4 and it looks like the typing improvement is actually a 5x! Will there be time to change the assets? I'll calculate the averages after a few more runs today.

[DanSoschin]

Wow, that's amazing. I will defer to you all if you are confident in the improvement, it seems like we should be able to update the graphic. We'll need to leverage the graphic for social, the About Page, and the GA release post.

[ellatrix]

Yes, I'm confident, I did 4 performance runs here: #57935 (comment)
I updated the table in the description

[DanSoschin]

that's awesome! what a great win!

[BenjaminZekavica]

@ellatrix That's amazing :) If you confirm it, than I will update the design and we have to change the Text on the About Page.

[thetinyl]

it looks like the typing improvement is actually a 5x!

Nice! We should actually be fine with the About page, as it gives a range for all the performance boosts vs. calling out each specifically:

Loading, input processing, and Site Editor navigation each see an increase in speed between two to six times faster than before.

[ellatrix]

Why not be specific there? It seems wrong to mislead people into thinking load could be 6 times faster? 🤔

[ellatrix]

And yes it's confirmed

[ellatrix]

So @youknowriad just told me that the "Site Editor navigation" metric was actually a false positive. It turns out the work done was just moved to a different event handler. The metric was adjusted and the number is now back to where it was before (https://www.codevitals.run/project/gutenberg). So let's remove this particular metric from the highlight grid and notes.

However, the load and input processing metrics are real and confirmed and imo should be mentioned separately (2x for load and 5x for input processing). This improvement was done both in the post AND site editors.

[BenjaminZekavica]

@ellatrix @thetinyl Here a new version

[jasmussen]

Updated the microsite to include that.

[thetinyl]

Thanks @BenjaminZekavica!

I hate to be that person, but it just needs a small copy edit. The drag and drop card should read: Smoother drag-and-drop (you can use the microsite for reference here).

Otherwise, looks good.

[BenjaminZekavica]

@thetinyl That's no problem :) Text was changed 👍

[DanSoschin]

This is great. I will be using the graphic in social posts about the release, so if there are any further changes, just make sure we note them here and/or ping me so I have the latest and greatest. Nice work on this!

[jasmussen]

Updated on the microsite.

[BenjaminZekavica]

@jasmussen Thank you

[ellatrix]

I now think of something: "faster editor loading" should actually be "faster editor content loading" because the editor without content was already fast 🙂

[BenjaminZekavica]

@thetinyl @ellatrix I updated the Highlight Grid :)