Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tracking issue: 6.4 Highlight grid #54808

Closed
annezazu opened this issue Sep 26, 2023 · 36 comments
Closed

Tracking issue: 6.4 Highlight grid #54808

annezazu opened this issue Sep 26, 2023 · 36 comments
Labels
Needs Design Needs design efforts. [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.

Comments

@annezazu
Copy link
Contributor

annezazu commented Sep 26, 2023

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!

@annezazu annezazu added the Needs Design Needs design efforts. label Sep 26, 2023
@annezazu annezazu moved this to Needs Design in WordPress 6.4 Editor Tasks Sep 26, 2023
@annezazu annezazu added the [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. label Sep 26, 2023
@jasmussen
Copy link
Contributor

Here's a first draft:

i1

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
Copy link

rmartinezduque commented Sep 27, 2023

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
Copy link
Contributor

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
Copy link
Contributor

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

i4

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
Copy link
Contributor

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
Copy link
Contributor Author

annezazu commented Oct 2, 2023

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)
highlight-grid

  • 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
Copy link
Contributor Author

annezazu commented Oct 2, 2023

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
Copy link
Contributor Author

annezazu commented Oct 5, 2023

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
Copy link

rmartinezduque commented Oct 10, 2023

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
Copy link
Contributor

jasmussen commented Oct 16, 2023

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:

i5a

i5b:

i5b

i5c:

i5c

I personally like i5c. Let me know your thoughts!

@richtabor
Copy link
Member

richtabor commented Oct 16, 2023

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

i5d

or i5E:

i5e

@jasmussen
Copy link
Contributor

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
Copy link
Member

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

@annezazu
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Member

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
Copy link
Member

gziolo commented Oct 18, 2023

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
Copy link
Member

@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
Copy link

rmartinezduque commented Oct 18, 2023

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
Copy link
Contributor

ockham commented Oct 18, 2023

@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
Copy link
Member

@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
Copy link
Member

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
Copy link
Contributor

ockham commented Oct 18, 2023

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Contributor

ockham commented Oct 18, 2023

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

@jasmussen
Copy link
Contributor

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:

highlight-grid-i6

@jasmussen
Copy link
Contributor

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
Copy link

@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
Copy link
Contributor Author

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
Copy link
Member

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
Copy link
Contributor

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
highlight grid i7

@annezazu
Copy link
Contributor Author

annezazu commented Oct 26, 2023

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
Copy link

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
Copy link
Contributor Author

Fantastic. Let's close this out then 🥳

@github-project-automation github-project-automation bot moved this from Needs Design to Done in WordPress 6.4 Editor Tasks Oct 26, 2023
@jasmussen
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Needs design efforts. [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Projects
No open projects
Status: Done
Development

No branches or pull requests

8 participants