6.7 release highlight grid (visual asset)

[jasmussen]

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.7 highlight grid. Past example: #58028.

Timing-wise, ideally this asset has a solid draft between beta 1 and beta 2, and is ready around beta 2 or 3 (Oct 8-15) or shortly after. This timeline is flexible.

Content

The grid should be focused and clear, show around 10-12 features. The story will likely revolve around the new Twenty Twenty-Five default theme, as well as touch in improvements around zoom out mode, contentOnly editing improvements, media improvements (heic, etc), background tools, and lots of polish pieces. These are pulled from the road map, and the source of truth.

Tentative list:

• Twenty Twenty-Five
• Zoom out mode + contentOnly editing + toolbar improvements.
• Media improvements (heic, etc)
• Global Styles: Background tools
• Additional improvements & polish
  • Query loop polish
  • Refined data views
  • Metaboxes / iframed post editor
  • Consolidation of design tools
  • Edit font size presets
  • Template registration API
  • Preview options API
  • Interactivity API improvements
  • UI for managing block bindings

Extra notes

• This will need copy input.
• This list isn't final, it's open to conversation.

[jasmussen]

Here is a work in progress draft. Hopefully this can inspire discussion about the content, the text, the order, and so on:

Emphasis: first iteration. There's no design yet, the images are placeholder, as is the text. This is mainly a process of building out the "puzzle-pieces".

[jasmussen]

Minor progress:

[jasmussen]

A bit more progress. I think this is all the ingredients.

Your thoughts are welcome.

[ndiego]

Looks lovely. One suggestion on the font size presets image. The font field is disabled because I'm assuming that the "Custom fluid values" toggle was selected but can't be seen in the image. What about turning off that toggle and showing the editable field? It looks more colorful and shows that the font can be edited. Something like

[jasmussen]

Looks lovely. One suggestion on the font size presets image. The font field is disabled because I'm assuming that the "Custom fluid values" toggle was selected but can't be seen in the image. What about turning off that toggle and showing the editable field? It looks more colorful and shows that the font can be edited.

Good notes, keep more coming like this.

Note also that every "screenshot" in this Figma is actually a Figma component, intentionally to make it easy to make adjustments like that.

[annezazu]

Quick feedback on my end:

• "Add site background": feels difficult to read or understand. The circle to set the focus also feels oddly placed when compared to the background icon (think it could be balanced more).
• "Zoom out": I don't think the visual reflects what changes there. I may even rely more on the icon to help folks understand the new option than try to show a zoomed out view. If we do show a zoomed out view, I think it should be of the canvas and not the inserter.
• "Iframed post editor": this doesn't communicate the change around metaboxes enough to me. I think we should emphasize the metaboxes pieces.

Higher level, I wonder if we could group the plugin/extender oriented changes more? Might make it visually and conceptually easier to grasp.

[ndiego]

"Zoom out": I don't think the visual reflects what changes there. I may even rely more on the icon to help folks understand the new option than try to show a zoomed out view. If we do show a zoomed out view, I think it should be of the canvas and not the inserter.

Good point. Maybe the focus should be on the right side of the screen to highlight the new button.

[jasmussen]

Great feedback both. Here's the latest:

Addressed here:

• Site background updates
• Zoom updates
• Emphasizing resizable metaboxes
• Grouping plugin/extender related items together, now the right most column is dedicated to it

I had a different more straight screenshot-esque take on the font size presets, here in Figma, but as I worked on grouping plugin/extender items, it occurred to me that we have a lot of white boxes with features in them, which while true to the spirit, simply makes it a bit harder for the eye to "read". So I tried my way with an abstracted cell, just for this one. Let me know your thoughts.

I believe that the About page and Microsite contents can follow relatively easily once the visuals for this grid are solidified. For that reason, I appreciate your prompt feedback!

[annezazu]

Minor notes:

• "Zoom out to edit at a broader level" is a mouthful and implies you can't edit otherwise. Let's go with something like "Zoom out and create with patterns".
• "Extend the dropdown preview" has some text cut off in the image used there. It's a bit distracting visually.
• "Expanded design tools" makes it seem like border controls are new when the changes are more that more blocks are getting more controls. I might make that part of the short list without visuals and instead show the "Streamlined Query Loop block" with the new controls.
• "Resizable metabox tray" still doesn't quite do it for me but I don't have any better thoughts here :D Will keep thinking but just noting for now in case others have better ideas.
• "Edit font size presets" -- I'd say "Edit and create font size presets" as it involves both.
• "Refined page views" should probably be "Refined Pages view" as it's more about refining the Pages view rather than "page views" which sounds SEO-y.

[ndiego]

"Resizable metabox tray" still doesn't quite do it for me but I don't have any better thoughts here :D Will keep thinking but just noting for now in case others have better ideas.

It's hard without context. We don't really have space, but an image would sell it for me.

[jasmussen]

Noting that I still consider all of this work in progress, especially as far as design, thank you both for the suggestions. Hopefully we can get the contents and text right, and then I might dive into a visual-only sprint to elevate all the pieces after the fact.

Addressed here, text suggesions overall, and moving pieces around.

Note, I changed "Streamlined Query Loop block" with "Streamlined Query Loops". Not the best, still noodling on this.

I also omitted entirely the Resizable metabox tray feature. I think it can have a spot in the microsite, perhaps the About page, where we can show additional text to explain what the change really is. But for this grid I want to be extra careful, and really lean into the spirit of the grid, showing only features that we can easily explain in just a few words. What do you think?

[mtias]

I think HEIC image support should take the place of the "extend preview dropdown" card.

[jasmussen]

I like showing HEIC with emphasis. The visual I came up with below, I'm not really feeling it:

I have to shift gears for a bit, but wanted to share an update so far, and will come back to it.

[jasmussen]

Here's a new take on it, which takes a bit of a different approach to the overall layout:

• In an effort to let the features themselves speak louder, I've used neutral tones except for the headline feature.
• There's some added whitespace.
• Because of the uniform grid (stepped sizes 1, 2 and 3 in height), the hope is to create a simpler rhythm.

While still being a single image to share on social media, the uniform-width 4 columns carries with itself the benefit that it can be clipped into 4 columns in the columns block, and thus collapse neatly to mobile on the microsite. Related.

Lay your thoughts on me.

[ndiego]

I like that we can use the Columns block for this on the microsite 👌

I do miss the little background icon and the focal picker. I messed around with a small iteration here.

[jasmussen]

Looks great! Happy to go that way. Would love additional design input if anyone has it.

[ndiego]

Here are my tweaks based on previous iterations in the Figma file. I liked the background icon and the focal picker and felt that the HEIC should be more visible. In doing so, I made the background color on the version number lighter and added a bit more space between the logo and 6.7. Food for thought...

[jasmussen]

Love it. One thought is that these are too monochrome. I personally like that, because it lets twenty Twenty-Five stand out. But just to explore the space, here are two remixes of yours, that add two levels of color. Slightly more color:

Lots more color:

[jasmussen]

Another update with some text improvements:

[annezazu]

Whew, looking gorgeous. The only note I have is around alignment of these items (heading + image/visual) as my eye was immediately drawn to the inconsistency:

Might be totally fine to have to switch it up but wanted to note either way.

[jasmussen]

Good note, though I found it hard to really address this. If I center the text, suddenly everything seems a bit floaty. If I left align the images, whitespace starts to look off.

[jasmussen]

Now that 6.7 is out in the world, I can close this one as wrapped!

We ended up not including the grid in the microsite, however the asset still exists for use in social media posts and the like (CC: @eidolonnight), this one:

Kudos @fcoveram @sfougnier.

[Marc-pi]

yep, thanks @jasmussen anyway, needed it, found it there :-)