Tracking issue: 6.4 Microsite

[annezazu]

Due date: Nov 7

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 microsite. This is a new effort, first started in 6.3, and consists as a landing page on the wordpress.org site. Here's the example from 6.3: https://wordpress.org/releases/6-3 Visually, it should be closer to the wider and existing WordPress.org design language rather than unique to the release itself to ensure maintainability and simplicity. To that end, an easy starting point is to duplicate the 6.3 page and go from there, content wise, ensuring consistency with the About page efforts. Let's use this issue to collaborate and share progress.

[annezazu]

Quick note that the Font Library has been punted from 6.4 and is now slated for 6.5. Please adjust the assets accordingly. In particular, I'd pay attention to the highlight grid work as the priority features to emphasize and aim to get into more detail of features like writing flow improvements: https://make.wordpress.org/core/2023/10/05/core-editor-improvement-ensuring-excellence-in-the-writing-experience/

[marko-srb]

👋

I had time to draft first test for the microsite. Things I considered with this test:

• reusing of previous 6.3 microsite elements, so the build is fairly easy and doesn't require too much rethinking
• keeping wp.org style/design system, while applying light colors here and there, so it fits with the overall release branding and TT4 theme
• flow of the page*

*Flow of the page/sections is done so it is interesting to the viewer, breaking the unified pattern and not having everything the same. This means, I was trying to establish an engaging flow, regardless of which features end up where. Therefore keep in mind that features themselves need to be added, changed, but the flow itself is what I believe works very well.

Looking forward to your input, tests and thoughts. It goes without saying that you are free to iterate on this as you see fit as well, while I hope this is a great first step/iteration.

It could be found here:
https://www.figma.com/file/jTjcQf8NF551cxunoAIOeC/About-Page-6.4?type=design&node-id=818%3A2&mode=design&t=Kzo3AQAyJDFwoYHA-1

[annezazu]

Wow! This is gorgeous. Very much enjoying this direction and style. Great job incorporating inspiration for the overall About page design and TT4.

Let us know how we can help move this forward (for example, any content needs).

[jasmussen]

Content-wise, I suspect we'll want to try and reuse from the About page as a baseline, with local adjustments if need be.

[rmartinezduque]

This looks really nice, Marko! Thank you for working on this. Are we also considering using some of the featurettes on the site?

Content-wise, I suspect we'll want to try and reuse from the About page as a baseline

That was also my suspicion :) Here's the About page content for reference. Some adjustments/tweaks will likely need to be made. Happy to help edit or review the copy as needed.

[jameskoster]

After a couple of adjustments to Marko's original design to focus on Twenty Twenty-Four and take more cues from the About page (kudos @SaxonF), here's the state of the microsite draft so far:

microsite.mp4

We still need to polish the design a bit (the "Writing flow" section in particular), and it might be nice to replace some of the images with featurettes if possible. Obviously the highlight grid will be updated with the final version when that's ready too.

In terms of content, it would be good to get suggestions for:

• The "Crafted with precision" section at the bottom of the Twenty Twenty-Four details. Perhaps highlighting the use of latest features, responsiveness, performance, patterns?
• The three bullets in the Command Palette section.
• Anything else that stands out!

[annezazu]

Coming along quite nicely! Can you share a link or paste the text here? Right now, it's honestly a pita to try to view this video and give content feedback when I can't see the whole page.

[jameskoster]

The draft should be visible here. It doesn't have the correct template applied yet because I don't have template-changing privileges 🙈

Otherwise here's the text:

6.4

A release with style 6.4 introduces a new theme, new features and upgrades to your site editing, design, and writing experience allow your ideas to take shape seamlessly.

Download

Say hello to Twenty Twenty-Four
Experience the latest advancements in site editing with Twenty Twenty-Four. Built with three distinct use cases in mind, the versatility of the new default theme makes it an ideal choice for almost any type of website.

Download theme

Writing
Creating a unique blog is easy thanks to a collection of patterns that have been designed for the site homepage, single posts, and archive templates.

View demo

Portfolio
Work with a variety of portfolio, testimonial, and team patterns to create a beautiful portfolio site.

View demo

Bundled with 45 beautifully crafted patterns. Use the included library of patterns to quickly compose pages of any kind.

View patterns

Crafted with precision
Experience the latest advancements in site editing with Twenty Twenty-Four. Built with three distinct use cases in mind, the versatility of the new default theme makes it an ideal choice for almost any type of website.

Feature
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Feature
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Feature
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Writing flow
New enhancements ensure your content creation journey is smooth.

Revamped toolbar
Blocks inside Navigation, List, and Quotes are now easier to work with.

Keyboard shortcuts
Push ⌘⇧D (ctrl⇧D on Windows) to duplicate blocks in List View

Smart List merging
Removing blocks between two Lists now results in a single List instead of two.

Upgraded 

Command Palette
Enjoy a refreshed design and more commands to find what you’re looking for, perform tasks efficiently, and save time as you create.

• Refreshed design
• Take block-specific actions
• Clearer command labelling

Get creative with new background images in Group blocks

Add a lightbox effect to images
Turn lightbox functionality on for interactive, full-screen images with a simple click. Apply it globally or to specific images to customize the viewing experience.

Try it out on the images below

Introducing
Block hooks
Block Hooks is a new powerful feature that enables plugins to auto-insert blocks into content relative to another block. Think of it as recommendations to make your work with blocks more intuitive. A new “Plugins” panel gives you complete control to match them to your needs—add, dismiss, and rearrange Block Hooks as desired.

Much much more

Rename Group blocks
Set custom names for Group blocks to easily organize and differentiate parts of your content. These names will be visible in the List View.

Navigation buttons
Creating more diverse navigation menu designs just got easier – Button blocks can now be inserted alongside Links.

Image previews in List View
New media previews for Gallery and Image blocks in List View let you visualize and locate at a glance where images on your content are.

Placeholder aspect ratio
Establish more consistent use by applying aspect ratios to Image blocks in your wireframe patterns.

Categorize & filter patterns
Organize your synced and unsynced patterns with categories. Explore advanced filtering in the Patterns section of the inserter to find them all more intuitively.

Share patterns across sites
Need to use your custom patterns on another site? It’s simple! Import and export them as JSON files from the Site Editor’s patterns view.

Performance
WordPress 6.4 includes more than 100 performance updates for a faster and more efficient experience. Enhancements focus on template loading performance for Block Themes and Classic Themes, usage of the script loading strategies “defer” and “async” in core, blocks, and themes, and optimization of autoloaded options.

Accessibility
Every release is committed to making WordPress accessible to everyone. 6.4 brings List View improvements and aria-label support for the Navigation block, among other highlights. The admin user interface (UI) includes enhancements to button placements, “Add New” menu items context, and Site Health spoken messages.

[annezazu]

A quick review at the airport before I go off work for two weeks (will need others to see this through! keep checking other resources, like the About page for consistency):

Placeholder aspect ratio
Establish more consistent use by applying aspect ratios to Image blocks in your wireframe patterns.

This feels like a bit of a mouthful. Perhaps something like this:

"Ensure design consistency with images with aspect ratio controls added to the Image block placeholder."

Navigation buttons
Creating more diverse navigation menu designs just got easier – Button blocks can now be inserted alongside Links.

"Creating more advanced navigation menu designs" rather than diverse.

Block Hooks is a new powerful feature that enables plugins to auto-insert blocks into content relative to another block. Think of it as recommendations to make your work with blocks more intuitive. A new “Plugins” panel gives you complete control to match them to your needs—add, dismiss, and rearrange Block Hooks as desired.

This line feels a bit off to me "Think of it as recommendations to make your work with blocks more intuitive." It's less recommendations and more that it gets added in and you then have access to remove/customize. I also might touch on the fact that it won't impact situations where content has been modified already by a user. Here's the source of truth section on the feature in case it helps.

[jameskoster]

Thanks Anne.

Block hooks is a little tricky. Does the "only if the template / template part hasn't been customised" caveat make it sound a bit underwhelming, and less clear in general? 🤔 I wonder if that detail could be implied with a shorter overall description, something simpler like:

Block Hooks is a new powerful feature that enables plugins to auto-insert blocks into theme templates.

[rmartinezduque]

@jameskoster, thank you so much for all the work on the microsite! This is looking great! ✨

Here are some suggestions for the copy. My intention with them is to correct some typos, avoid repeated content, and complete some sections where copy is still missing. Also, to enhance some of the existing messages.

6.4 revised copy

A release with style
WordPress 6.4 introduces a multi-purpose default theme, new features, and a sharp focus on details to empower every step of your creation journey.

Alternative: Let your ideas take shape seamlessly with WordPress 6.4. Discover a new multi-purpose theme and multiple upgrades designed to empower every step of your creation experience—from writing and design to site editing.

Download WordPress 6.4

Say hello to Twenty Twenty-Four
Twenty Twenty-Four is a versatile theme designed with distinct use cases in mind—covering a diverse range of creative and small business needs. Whether you're a writer, an artist, or an entrepreneur, the new default theme is the perfect choice to bring your next project to life.

Alternative: Twenty Twenty-Four is an elegant and versatile theme designed with three distinct use cases in mind, from writers and artists to entrepreneurs. Its remarkable flexibility ensures an ideal fit for a diverse range of creative and small business needs.

Download theme

Kick-start your writing venture
Twenty Twenty-Four features a collection of patterns for the homepage, single posts, and archive templates to help you create a unique blog and tailor it to your style.

View demo

Showcase your work
Save time and effort with a variety of pre-designed portfolio, testimonial, and team patterns to spotlight your creative projects and inspire your potential clients.

View demo

Bundled with 45 beautifully crafted patterns
Take advantage of the theme’s extensive library of patterns to quickly compose pages of any kind and simplify your site-building process.

Explore patterns

Experience ultimate site editing features
The Twenty Twenty-Four theme brings together the latest and greatest of WordPress to help you build beautiful and functional websites with the unmatched flexibility of blocks.

Fully customizable: Adjust colors, typography, and templates to make the theme uniquely yours.
Speed optimized: Twenty Twenty-Four has been meticulously optimized for performance.
Responsive design: The theme ensures your site looks great on desktops, tablets, and phones.

Writing flow
New enhancements ensure your content creation experience is smooth.

Revamped toolbar
Blocks inside Navigation, List, and Quotes are easier to work with.

Keyboard shortcuts
Duplicate blocks in List View with ⌘⇧D (ctrl⇧D on Windows).

Smart list merging
Removing blocks between two lists now results in a single list.

Alternative (this would require turning the separate features into a paragraph): New enhancements ensure your content creation experience is smooth, including new keyboard shortcuts, smarter list merging, and enhanced control over your link settings. A revamped toolbar experience for Navigation, List, and Quote blocks ensures cohesive and organized access to the tooling options you work with.

Command Palette just got better
Quickly find what you need, perform tasks efficiently, and speed up your site-building workflows with a more powerful Command Palette.

Enjoy a refreshed Command Palette look
Perform multiple block-specific actions
Benefit from more intuitive command labeling

Get creative with new background images in Group blocks

Make your images stand out
Turn lightbox functionality on for interactive, full-screen images with a simple click. Customize the viewing experience by applying it globally or to specific images.

Try it out on the images below

Introducing Block Hooks
With Block Hooks, developers can automatically insert blocks at their chosen content locations, enriching the extensibility of block themes through plugins. While developer-centric, this new feature enhances your overall building experience by giving you full control to add, dismiss, and customize Block Hooks to your needs.

And much more

Rename Group blocks
Set custom names for Group blocks to easily organize and differentiate parts of your content. These names will be visible in the List View.

Alternative if we want something shorter: Set custom names for Group blocks to organize and distinguish areas of your content easily.

Add navigation buttons
Drive your visitors to a call-to-action by incorporating buttons into your site’s navigation menu—now possible without custom CSS.

Alternative if we want something shorter: Drive your visitors to a call-to-action by incorporating buttons into your site’s navigation menu.

Preview images in List View
Locate your content's images at a glance with new gallery and image previews in List View.

Set placeholder aspect ratios
Maintain consistent dimensions and layouts with new aspect ratios for image placeholders.

Categorize and filter patterns
Organize patterns with your own custom categories. Find them all more intuitively with advanced filtering in the Patterns section of the inserter.

Share patterns across sites
Need to use your custom patterns on another site? It’s simple! Import and export them as JSON files from the Site Editor’s patterns view.

I understand that the copy has to fit the current layout, and this may require further tweaks. Let me know if there is anything else I can help with. Ideally, I would like to think of a better title for "Writing flow" and review the performance and accessibility sections.

[annezazu]

With Block Hooks, developers can automatically insert blocks at their chosen content locations, enriching the extensibility of block themes through plugins. While developer-centric, this new feature enhances your overall building experience by giving you full control to add, dismiss, and customize Block Hooks to your needs.

This is minor but important: this only works with dynamic blocks currently so we should indicate that. We can also link to these docs to help encourage adoption: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#block-hooks-optional

Nice to see this being iterated upon!

[rmartinezduque]

Thanks, @annezazu. Would something like this help make that point clearer? Does it feel accurate?

With Block Hooks, developers can automatically insert dynamic blocks at their chosen content locations, enriching the extensibility of block themes through plugins. While developer-centric, this new feature enhances your overall building experience by giving you complete control to add, dismiss, and customize Block Hooks to your needs.

Since this feature is a bit tricky to explain in a concise way for both users and developers, I like the idea of providing a link for more info. Instead of the link to the docs, do you think this dev note would help understand Block Hooks better?

On a separate note, I just made some additional tweaks to the TT4 section, especially to emphasize the importance of patterns and improve the "experience ultimate site editing features" paragraph. Here's the updated version:

TT4 updated copy

Say hello to Twenty Twenty-Four
Twenty Twenty-Four is a versatile theme designed with distinct use cases in mind—covering a wide range of creative and small business needs. Explore a multitude of patterns and templates to bring your next project to life with ease. Unlock numerous creative possibilities to match your brand with just a few tweaks.

Alternative: Twenty Twenty-Four is an elegant and versatile theme designed with three distinct use cases in mind, from writers and artists to entrepreneurs. Its extensive collection of block patterns and remarkable flexibility ensure an ideal fit for a diverse range of creative and business needs.

Download theme

Kick-start your writing venture
Twenty Twenty-Four features a collection of patterns for the homepage, single posts, and archive templates to help you create a unique blog and tailor it to your style.

View demo

Showcase your work
Save time and effort with a variety of pre-designed portfolio, testimonials, and team patterns to highlight your creative projects and inspire your potential clients.

View demo

Bundled with 45 beautifully crafted patterns
Take advantage of the theme’s extensive library of patterns to quickly compose pages of any kind and simplify your site-building process.

Explore patterns

Experience ultimate site editing features
The Twenty Twenty-Four theme brings together the greatest of WordPress. Tap into the latest design tools and the unmatched flexibility of blocks to craft beautiful and functional websites.

Fully customizable: Adjust colors, typography, and templates to make the theme uniquely yours.
Speed optimized: Twenty Twenty-Four has been meticulously optimized for performance.
Responsive design: Ensure your site looks great on desktops, tablets, and phones.

[jameskoster]

Thanks @rmartinezduque I've updated the draft. For the "Writing flow" section I tried the single paragraph approach which fits a bit better. When we replace the graphic with the featurette I think it will work well. What do you think?

[rmartinezduque]

Thanks, @jameskoster. I'm not able to see the updated draft here. 😅 Unless you want to record another video, I can wait until I have access (already asked for it) to review the changes.

[richtabor]

Left comments/suggestions on the doc. 👍

[rmartinezduque]

I made minor updates to correct a few typos, refine the copy based on feedback, avoid orphans, etc. The latest changes should be visible on the 6.4 page, but below is the updated copy for reference.

@richtabor, I tried to incorporate your feedback as much as possible. Feel free to double-check everything. I am aware that there was preference for some titles like "Experience site editing as its finest," but eventually, I had to make some adjustments to avoid redundancy with the rest of the updated copy.

Microsite copy v2

A release with style
Let your ideas take shape seamlessly with WordPress 6.4. Explore a new multi-faceted default theme and a suite of upgrades to empower every step of your creative journey—from writing and design to site editing.
Download WordPress 6.4

Say hello to Twenty Twenty-Four
Twenty Twenty-Four is an elegant, versatile default theme designed with distinct use cases in mind, from writers and artists to entrepreneurs. Its extensive library of patterns and flexibility make it the ideal choice for a wide range of creative and business needs.
Download theme

Start your writing venture
Explore Twenty Twenty-Four’s collection of patterns for the homepage, single posts, and archive templates. Use them as a starting point to create a unique blog tailored to your style.
View demo

Showcase your work
Save time and effort with a variety of curated portfolio, testimonial, and team patterns to highlight your projects and inspire your potential clients.
View demo

Discover 45 finely crafted patterns
Take advantage of the theme’s diverse library of patterns and templates to compose pages of any kind—and streamline your site-building process.
Explore patterns

Experience site editing at its best
The Twenty Twenty-Four theme combines the latest Site Editor capabilities and design tools. Tap into the unmatched flexibility of building with blocks to bring your next project to life.
Fully customizable: Adjust colors, typography, and templates to make the theme uniquely yours.
Fast and efficient: Twenty Twenty-Four has been meticulously optimized for performance.
Responsive design: Ensure your site looks great on every device.

Let your writing flow
New enhancements ensure your content creation experience is smooth, including new keyboard shortcuts, smarter lists, and enhanced control over your link settings. A cohesive toolbar experience for Navigation, List, and Quote blocks ensures organized access to the tooling options you work with.

Get more done with the Command Palette
Quickly find what you need, perform tasks efficiently, and speed up your building workflow with a more powerful Command Palette.
Enjoy a refreshed look
Perform block-specific actions
Benefit from improved command labeling

Play with new background images in Group blocks for unique designs

Make your images stand out
Enable lightbox functionality to let your site visitors enjoy full-screen, interactive images on click. Apply it to all images throughout your site or to specific ones to customize the viewing experience.
Try it out by clicking on the images below

Introducing Block Hooks
With Block Hooks, developers can automatically insert dynamic blocks at specific content locations, enriching the extensibility of block themes through plugins. While developer-focused, this feature is geared to respect your preferences and gives you complete control to add, dismiss, and customize auto-inserted blocks to your needs.

And much more

Rename Group blocks
Set custom names for Group blocks to organize and distinguish areas of your content easily.

Add navigation buttons
Incorporate buttons into your navigation menu without code to drive visitors to a call-to-action.

Preview images in List View
See your page’s images at a glance with new gallery and image previews in List View.

Set placeholder aspect ratios
Maintain consistent dimensions and layouts with new aspect ratios for image placeholders.

Categorize and filter patterns
Organize your patterns with custom categories. Explore advanced filtering in the Patterns section of the inserter to find them all more intuitively.

Share patterns across sites
Need to use your custom patterns on another site? Import and export them as JSON files from the Site Editor’s patterns view.

Performance
WordPress 6.4 includes more than 100 performance updates for a faster and more efficient experience. Notable enhancements focus on template loading performance for themes, usage of the script loading strategies “defer” and “async” in core, blocks, and themes, and new functions to optimize autoloaded options.

Accessibility
Every release is committed to making WordPress accessible to everyone. 6.4 brings List View improvements and aria-label support for the Navigation block, among other highlights. The admin user interface (UI) includes enhancements to button placements, “Add New” menu items context, and Site Health spoken messages.

@jameskoster, As far as I can see, there are still missing links in the CTAs and alt text for images. Is this correct? Is there still more to add? And how can I help? Thanks!

[richtabor]

A couple minor notes:

Should we include the number here?

The bigger text on the left here is the only text on the page styled like this. I think it should be probably be the same font size as the other text:

And perhaps we can replace that image, with this:

Here's the figma if needed.

[rmartinezduque]

Thanks for taking the time to double-check, @richtabor. 🙏

Should we include the number here?

I'm not sure if I'm following you. Are you suggesting not to include the number of patterns in this section? Or to include it in the description or the CTA? If the latter, I don't think it's necessary to repeat it, IMO. But happy to hear other thoughts.

[richtabor]

We also need to apply some tweaks so that it looks nice on mobile. Currently, the content is pushed up against the device viewport.

[richtabor]

I'm not sure if I'm following you. Are you suggesting not to include the number of patterns in this section?

Perhaps 35+ (along those lines) instead of a hard number.

[rmartinezduque]

Perhaps 35+ (along those lines) instead of a hard number.

Yes, perfect. 👍 I checked with Maggie, and we agreed that it's safer to say 35+ patterns. I updated the copy on the page.

We also need to apply some tweaks so that it looks nice on mobile. Currently, the content is pushed up against the
device viewport.

Indeed. The page currently does not look 100% good on mobile.

[jameskoster]

@rmartinezduque please feel free to tweak as you see fit, especially details like missing links or alt text. I added some earlier today, but we're still missing a download link for the theme. That might be a bit tricky because download links on the theme repository include the version number which can obviously change over time. It might be simpler to link to the theme details page instead, IE https://en-gb.wordpress.org/themes/twentytwentyfour/. What do you think?

I've replaced the Command Palette image with Rich's suggestion and am working through some optimisations for mobile now.

[rmartinezduque]

@rmartinezduque please feel free to tweak as you see fit, especially details like missing links or alt text. I added some earlier today, but we're still missing a download link for the theme.

Thanks, Jay! I made some additional tweaks to the copy to better fit the latest layout changes, added links, and missing alt text for images. I also updated the number of contributors. I'll keep an eye on tomorrow because we might need to adjust the number again before shipping.

[rmartinezduque]

The microsite is now live: https://wordpress.org/download/releases/6-4/. Thank you everyone!

[richtabor]

@rmartinezduque should we close these asset issues?

[rmartinezduque]

Yes, thanks @richtabor! I'm still waiting for one of the social media assets (the celebratory video) to be completed, but the rest of the issues can be closed (I don't have access to close them).