Tracking issue: 6.4 Highlight grid

[annezazu]

Due date: Beta 3/Oct 10

As part of efforts for the 6.4 release and related assets, this is a tracking issue to cover the work needed for the 6.4 highlighted grid. Here's an example of a previous highlight grid. The aim is to have a snapshot and visual look at the main features coming to the release. It should be no more than 10 or so items to keep the image compelling and clear. Let's use this issue to collaborate and share progress.

List of possible features:

• Introducing the Twenty Twenty-Four theme.
• Manage fonts with the Font Library.
• Add lightbox interactivity for your Images.
• See previews of your images and galleries in List View.
• Introducing Block Hooks.
• Explore new design tools (background image in Group block, Aspect ratios for image placeholders, Button and heading color customization in Group and Columns blocks, more block supports).
• Writing flow improvements (likely focus on captured toolbars for the List block, Navigation block, and Quote block).
• Rename Group blocks for improved organization.
• Enjoy Command Palette refinements (new design, more commands, more contextual functionality).

If we want to consolidate, I recommend the following:

• Introducing the Twenty Twenty-Four theme.
• Manage fonts with the Font Library.
• Add lightbox interactivity for your Images.
• Introducing Block Hooks.
• Explore new design tools (background image in Group block, Aspect ratios for image placeholders, Button and heading color customization in Group and Columns blocks, more block supports).
• Writing flow improvements (likely focus on captured toolbars for the List block, Navigation block, and Quote block).
• Workflow upgrades (Command palette improvements, pattern categories, see previews of your images and galleries in List View, etc)

Of note, what I'm listing in parenthesis indicates what we could visually show in the highlight grid to represent the section!

[jasmussen]

Here's a first draft:

For the moment, I am focusing on creating the visuals to go in each box of the bento, I expect the number and the size of the cells to shift a lot in both amount, position, and size, as I get all of the material gathered.

[rmartinezduque]

Thanks for opening this issue, Anne!

I know that the highlight grid is aligned with the priority items of the source of truth and other release content, such as Beta 1 and the About page. But I wonder if we have some flexibility on the displayed features. I'm a little concerned that some of them, like the captured toolbars for certain blocks, are particularly difficult to show or at least understand what's new (even having the small text) in a static image. I also think that some enhancements to the design tools, such as the new option to have buttons in the Navigation block, may fit in nicely with the formatting.

I just wanted to share this feedback. Either way, I'm glad to see this taking shape and excited to see how it evolves. ✨

[jasmussen]

But I wonder if we have some flexibility on the displayed features. I'm a little concerned that some of them, like the captured toolbars for certain blocks, are particularly difficult to show or at least understand what's new (even having the small text) in a static image

From past experience with these, there absolutely is, where initially we go back and forth on what to include, how much to include, what to combine, the phrasing, etc. right up until the end. Captured toolbars really kind of needs animation, so on that note I share your instincts that for writing flow improvements we'll want to be careful with how we display this. I hope to circle back to the highlight grid tomorrow and see if I can fill out more boxes in the bento, then hopefully the ones that don't read well will stick out.

[jasmussen]

Here's an update on the highlight grid. At this point, all the cells are filled in:

It seems time here to start arranging, polishing, re-phrasing, and deciding on prominence and the visualization of each of these concepts. I would greatly appreciate your feedback at this point.

From the suggestions listed, I've include the following:

Features:

• Introducing the Twenty Twenty-Four theme.
• Manage fonts with the Font Library.
• Add lightbox interactivity for your Images.
• See previews of your images and galleries in List View.
• Introducing Block Hooks.
• Group block backgrounds
• Aspect ratios for image placeholders
• More block supports
• ⌘ Shift D for Duplicate
• Rename Group blocks for improved organization.
• Improvements to pattern management for classic themes.

I did not include this one, as it's both hard to visualize or even describe the changes, and we included the command center in 6.3. But happy to hear suggestions:

• Enjoy Command Palette refinements (new design, more commands, more contextual functionality).

[jameskoster]

A tiny nitpick – should we use a different example for group renaming to avoid any overlap with template parts.

One example might be a root level "Musicians" block, which could have children "Lionel", "Dolphy", and so on.

[annezazu]

Loving the progress! Thanks for your efforts here. I definitely wrote out "full" titles for clarity so let's not be tied to them and try to make the phrasing more concise, partially pulling from this previous highlight grid (particularly with a new default theme)

• Twenty Twenty-Four.
• Manage fonts with the Font Library. Shorter alternatives: Manage fonts, Easy font management.
• Enhance images with a lightbox effect.
• Preview images and galleries in List View.
• Introducing Block Hooks.
• Maintain layouts with aspect ratio in placeholders(more descriptive of the feature). Slightly shorter alternative: Maintain layouts with placeholder aspect ratios.
• New block supports
• New shortcut
• Set custom Group block names (more descriptive of the feature).
• Improved pattern experience in classic themes (note that I am following up on this as currently it's not merged)

Some of these are a bit longer and more descriptive and some shorter. If we end up not making the last item, I think we should just leave more room for the ones listed above.

[annezazu]

Improved pattern experience for classic themes has been removed for 6.4 and punted. I stand by using the additional room to highlight the other features but am happy to provide additional highlights if that’s preferred!

[annezazu]

Quick note that the Font Library has been punted from 6.4 and is now slated for 6.5. Let's adjust once more. IMO, we should emphasize adding categories to patterns in the highlight grid.

[rmartinezduque]

Checking in on the status of the highlight grid. How can I help here? I'd be happy to suggest/review copy once there's more clarity on the highlighted features.

One thing I missed in the latest list @annezazu shared is the pattern management improvements (categories, new filter options). Any thoughts on this?

Update: I just realized Anne actually mentioned this in the previous comment. :)

[jasmussen]

As an update, here are three directions on the highlight grid in what I would describe as the "final state". That is, the pieces should be in place, and I've added color.

i5a:

i5b:

i5c:

I personally like i5c. Let me know your thoughts!

[richtabor]

I like i5c as well, what do you think of i5D? I think I lean this way.

or i5E:

[jasmussen]

If we use the colorful number, which could be good connective tissue, I'd go with the light-gray background. I'm reminded by earlier feedback that ultimately these grids are about showcasing the features and changes of the release, not showcasing the brand work for a particular release. To that end, the more minimal, but with the version number connective tissue, is a good balance. It lets the colors of patterns (which serendipitously match the release branding) stand out. The brown version looks too boxy to me.

[richtabor]

Agreed on all accounts. We don't have to use the colorful number, but I like the consistent lighter background either way.

[annezazu]

Agreed on a consistent lighter background that @richtabor has there. Nice job all around. This is really coming together! My only piece of feedback, which has come up before, is the sheer number of words. I'm not sure if we can blur some of the words? In any case, I say ship!

[jasmussen]

the sheer number of words. I'm not sure if we can blur some of the words? In any case, I say ship!

Can you expand a bit on this? Too many words of text in the descriptions or titles? too many words in screenshots like the list views etc?

Also while I'm here, under "New Block Supports", I wrote "Footnotes, Vertical text". Is that technically correct?

[fabiankaegy]

One quick feedback I wanted to give here is that I sadly think the image used for block hooks is misleading.

Yes in theory the ability to automatically inject the mini cart into a navigation menu was specifically one of the goals of the API, because of the fact that the navigation block stores the ID of a navigation menu it can never exist in an unmodified header template part and therefore that example is not possible with the state of the API in 6.4.

Just wanted to call that out because I think the examples we provide in the advertising for a release should only contain things that are actually possible with the features :)

CC: @gziolo to correct me if I misunderstood anything about the limitation of how block hooks can interact with the navigation block at this point :)

[gziolo]

Yes in theory the ability to automatically inject the mini cart into a navigation menu was specifically one of the goals of the API, because of the fact that the navigation block stores the ID of a navigation menu it can never exist in an unmodified header template part and therefore that example is not possible with the state of the API in 6.4.

I can only respond to what I see for the Twenty Twenty-Four theme that embeds the Navigation block in the following way:

https://github.com/WordPress/wordpress-develop/blob/c9ff475e1fe63de1356bc6a3792e6fd836a8c587/src/wp-content/themes/twentytwentyfour/parts/header.html#L18C217-L18C217

<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->

I assume the ref gets injected dynamically to this block. It doesn't have any inner blocks stored in the template, so there is no way to hook a block inside using firstChild and lastChild positions. It doesn't mean you can't achieve the same goal as in the banner using different approaches, but they might be less straightforward.

[fabiankaegy]

@gziolo the ref gets added as soon as you go into the site editor and select which navigation menu you want to display there. And as soon as you do that it will no longer inject the hook because the template part now gets served from the DB.

[rmartinezduque]

Love the design directions on this! Some suggestions for the copy if we want to lean towards shorter descriptions (especially to avoid some redundancies and correct capitalization):

• Twenty Twenty-Four theme
• Enable lightbox functionality
• Placeholder aspect ratio
• Background images in Group blocks
• Previews in List View
• Rename Group blocks
• Block Hooks, add blocks automatically via plugins
• Categorize custom patterns
• New block supports
• Shortcuts in List View

In terms of marketing, it makes more sense to highlight the Command Palette improvements rather than the block supports because of their impact, IMO. Also, because it's a fairly recent feature and it's good to keep raising awareness about it. Could we use an image similar to the one on the About page? For the description, we can say something along the lines of "A refreshed Command Palette." The word "refreshed" can imply several things, including a better interface or appearance and improved functionality. Given the improvements of this feature (new design, more commands, more contextual functionality), I feel that could be accurate.

If the visual representation of Block Hooks does not seem 100% accurate, I would also suggest changing it if possible (which should also be done on the About page).

[ockham]

@fabiankaegy It's indeed tricky to insert a hooked block as a child block of the Navigation block, but I've had success inserting it after the Navigation block. So it seems like it could still be a viable example?

[fabiankaegy]

@ockham i would love to learn more about how you were able to do so.

Because as far as I can tell as soon as you choose a navigation menu the template / template part / pattern now gets served from the DB instead of the file so it would no longer get the hooks applied 🤔

So the only way in which it would apply is if you activated the plugin before you actually configured your theme. 🤔

[fabiankaegy]

Anyways, I don't want to block this at all or make it more difficult than it is :)

If we think this is the best way to get the idea of the feature across then so be it :)

[ockham]

I'm on mobile right now, so I can't unfortunately re-run my scenario. But shouldn't an unmodified Navigation block (as found in a theme's header template) default to showing a page list (i.e. a menu item for each page found on the site)?

[fabiankaegy]

Yeah that is correct :)

But I think we can agree that that default page list is not something that's really feasible to use in most if not all cases. Especially when we are talking about a shop here. The amount of pages generated automatically when you install a WooCommerce install for example is quite large.

So in reality we will only really encounter navigations that are actually setup. And those cannot get targeted with hooks since the templates containing them always are modified.

(Again sorry for blowing up this conversation here :) I doubt it will make too much of a difference in the end what we show in the tile here.)

[annezazu]

Can you expand a bit on this? Too many words of text in the descriptions or titles? too many words in screenshots like the list views etc?

Bringing back to the original thing, too many words in the screenshots. It takes away a bit from the titles but this is minor feedback and I know it's come up in prior highlight grids.

[ockham]

@fabiankaegy I replied over at #54904 (comment) to keep that discussion separate 😊

[jasmussen]

Bringing back to the original thing, too many words in the screenshots. It takes away a bit from the titles but this is minor feedback and I know it's come up in prior highlight grids.

I tried reducing further, no with no "help-text" at all:

[jasmussen]

Per the above iteration, I just want to be sure I'm not oversimplifying the text; footnotes were already in 6.3, right? It's the block supports that's new, right? Similarly with vertical text, correct? Would appreciate advice on the phrasing 🙏

[rmartinezduque]

@jasmussen, this looks great! I left some suggestions for the copy and would love it if they could be taken into account. Let me reshare them again below. The "Add" wording is repeated quite a few times, and we can avoid that redundancy. 🙏

Twenty Twenty-Four theme
Enableightbox functionality
Placeholder aspect ratio
Background images in Group blocks
Previews in List View
Rename Group blocks
Block Hooks, add blocks automatically via plugins
Categorize custom patterns
New block supports
Shortcuts in List View

footnotes were already in 6.3, right? It's the block supports that's new, right?

Yes, I'll defer to @annezazu on the decision to include that, along with the vertical text support, but my suggestion would be to replace them with other highlights such as "Advanced pattern filtering" or "A refreshed Command Palette" that feel more aligned with the About page, featurettes content, etc.

Thanks again for all the work on this!

[annezazu]

Per the above iteration, I just want to be sure I'm not oversimplifying the text; footnotes were already in 6.3, right? It's the block supports that's new, right? Similarly with vertical text, correct? Would appreciate advice on the phrasing 🙏

That's correct! I agree with going with "New block supports" instead although I don't love how technical that sounds ("New block options").

Yes, I'll defer to @annezazu on the decision to include that, along with the vertical text support, but my suggestion would be to replace them with other highlights such as "Advanced pattern filtering" or "A refreshed Command Palette" that feel more aligned with the About page, featurettes content, etc.

Noting that Joen said above "I did not include this one, as it's both hard to visualize or even describe the changes, and we included the command center in 6.3. But happy to hear suggestions" for the Command Palette so I trust his sense there. However, since right now, that's just a text field, I think we could just swap that but add no visual. I'd rather have alignment and I do think that's a larger feature set/something we want to continue to raise awareness about.

TLDR: swap out "Footnotes, vertical text support" for "Enhanced Command Palette". I'd go with enhanced rather than refreshed as that better encompasses all of the changes.

[richtabor]

I'd go with enhanced rather than refreshed as that better encompasses all of the changes.

Agreed.

I think we could just swap that but add no visual.

The command palette looks just like list view (intentionally so), so visually it'd look like the "rename group blocks" and "list view images" grid items; text-only would probably work better.

[jasmussen]

Thanks for all the feedback and apologies for the delay, lots of things going on. I believe and hope that with the following iteration, I've captured it all, but let me know and I'll do another. Changed:

• Updated phrasings based on Reyes' suggestions
• Replaced the block supports cell with just the enhanced command palette

[annezazu]

Looks great! Thanks so much for all the iterations here. If folks agree, we can close this out.

Due date: Beta 3/Oct 10

Considering the timeline, let's plan to include this in social and in the final release post. Perhaps we can tease the release with this ahead of time?

[rmartinezduque]

Thank you so much, Joen! Looks beautiful!

Considering the timeline, let's plan to include this in social and in the final release post. Perhaps we can tease the release with this ahead of time?

The final release post usually includes the jazzer graphic and the assets about the different features, we can test once we have the draft to see if it's a good fit. And yes for social! We are already planning to use it ahead of the release.

[annezazu]

Fantastic. Let's close this out then 🥳

[jasmussen]

Just to put a bow on it, if you need to grab the highlight grid, you can either get it directly from the Figma linked, or from the attached zip file. It's best to not get it from GitHub here, as GitHub scales the images down a bit.

final highlight grid.zip