Epic: 6.5 Microsite

[thetinyl]

What is this?

This tracking issue will cover the work needed for the 6.5 release microsite. The microsite is a landing page on WordPress.org that showcases all the highlighted features and enhancements for a particular release. Contrary to the About page, its audience includes folks who may not already be using WordPress.

Aesthetically, the design for this microsite has followed general WordPress branding instead of the unique flavor of any particular release.

Examples of previous highlight grids for reference:

• 6.4 microsite
• 6.3 microsite

Timing*

• [x] Copy draft: February 21
• [x] Initial design: March 7
• [ ] Final design: March 21

*Proposed dates are flexible.

Content

The content can follow what's being included in the About page, but should also be mindful of a broader audience. Once About page content is ready, we'll share it here for reference.

[thetinyl]

@jasmussen @richtabor For awareness.

I don't have permission to add any kind of tags or assignees, so want to make sure this doesn't get lost.

[thetinyl]

@richtabor @jasmussen Not sure who else is available to help with the microsite, but the About page content might help kick things off. It's not 100% final, but it's close (based on the level of feedback received).

[jasmussen]

I'll be there to help, I've also been working on other aspects of the wp.org site.

That's also a note that design-wise, this page doesn't follow release-branding as the highlight grid and about pages do, it follows the wp.org design, even if the content inside follows release branding. Depending on bandwidth as we near the release, I would love to also ask @jameskoster and/or @SaxonF for help here.

[SaxonF]

Only just started looking at this so nothing to share just yet. A fun idea we can explore is introducing some interactive aspect / easter egg across each section of the page using the interactivity API.

I'm starting with wireframes here. Will keep going with this on Monday.

[jameskoster]

I begun sketching yesterday as well. @SaxonF how do you feel about collating all the microsites in a single file?

[thetinyl]

A fun idea we can explore is introducing some interactive aspect / easter egg across each section of the page using the interactivity API.

I had a similar thought! Perhaps something using reactions, so folks can actively ❤️ or 👍 as they parse through the features.

[BenjaminZekavica]

@thetinyl Can we start to design the Microsite? Or we have to wait for the final feature list for 6.5? I hope that the Font Manager is included in the next release.

[jameskoster]

@BenjaminZekavica we've begun exploring design in the Figma linked above.

[hanneslsm]

Is there an specific issue for the About Page? I couldn't find it. There is a small typo on the About page → Credits that might go unnoticed:

Core Contributors to WordPress 6.4

[thetinyl]

@hanneslsm Thanks for pointing that out. The Credits page is updated dynamically later in the RC cycle of the release, so that should switch on its own. If you notice anything else though, you can share that in this Trac ticket—it's where the About page work is being managed. This issue is just for the standalone microsite. 😄

[BenjaminZekavica]

@SaxonF Thank you for your contribution :) It look nice 👍

Do you can give @richtabor and me permissions to edit as well?
My e-mail: info@benjamin-zekavica.de

[jasmussen]

I want to restate/repeat that there really isn't much design work to be done for the microsite, it should be thought of as a loose copy of the About page but in the WordPress.org website with an inherited-from-that design language. So colors, fonts, layout, those are inherited from previous microsites, and it's mostly a matter of arranging the images in the block editor, instead of the rigid layout of the zip-file-bundled About page.

[BenjaminZekavica]

@jasmussen Yes, that's true. Rich and me decided to choose the Design from previous 6.4 Release. We only will change some colors and images. One question in our Figma File the Microsite was deleted :/ I can't find it. Do you can restore this or?

[jasmussen]

One question in our Figma File the Microsite was deleted :/ I can't find it. Do you can restore this or?

There's still this from 6.4. But we should be working in this one now no?

[BenjaminZekavica]

@jasmussen Thank you :) Can you give me an access to edit the file ? https://www.figma.com/file/8TjGue8UK7sn6qaiXdjJWK/Microsites?type=design&node-id=116%3A5594&mode=design&t=WZbNz6eziwcsWkYO-1

[jasmussen]

Actually I cannot, I think @SaxonF needs to give access. Though please don't delete anything from the file.

[BenjaminZekavica]

@jasmussen @thetinyl I added one design now. I reused all components from the About Page. Here is the Figma File – I have now premission to edit this file as well.

@richtabor and me decided to reuse the Design from 6.4 with our compontens.

[jasmussen]

Thanks for the effort. There's a big of divergence from past microsites, however, in terms of typography, font sizes, font weights, and colors. This is related to what I mentioned around the wp.org design language. This feedback also applies to the sketch that existed already in the Figma file. To that end, I think we'll need to get much closer to the 6.4 version.

The nuance here, to go even further, is that we are building a section of the website. So it should look like the website. That means we only ever use preset colors, preset font sizes, preset shadows, etc. They should all look the same, give or take a hero image. Finally, there are some featurettes now that we can include as videos on the page, this is something that isn't possible in the bundled about page. I'll see if I can't find an opportunity to visualize what I mean.

[jasmussen]

Today I took a stab at combining your work, @BenjaminZekavica with the first effort by @jameskoster and @SaxonF, but also working across all of those through the constraint of the wp.org design language, as far as the colors, font sizes, and metrics we inherit with that. The biggest change is leveraging the existing page layout from the 6.4 page, and interspersing the content above with the featurettes that have since been produced. As a result, the following layout can come together in the block editor in minutes:

Aside from your feedback, a few notes on the above:

• The text could use updates
• The highlight grid is the old version, it will need to use the new version being worked on

Let us know your thoughts.

[BenjaminZekavica]

@jasmussen It looks good for me, but we have to remove the section with the pattern override feature.

[thetinyl]

I think this looks fine from a layout perspective. Since edits can be made in the Editor, I'm comfortable doing copy/content updates directly there to not hold things up.

I'm mostly curious about one bit of rationale for now: What prompted moving the Interactivity API further up?

[annezazu]

The 2x, 4x, 6x feels very duplicated here and a bit confusing, as if it's referring to different features. I might have the highlight grid more towards the bottom or at the top in that case but with enough space away from those very distinct numbers.

Agreed with Lauren on the text/copy updates ✨ and not wanting to hold things up there. The font section at the very top feels duplicative for example.

[jasmussen]

Okay, I've built out the first iteration of the page. Edit | Preview. It came together fairly well, and I think we're off to a good start. Lauren feel free to edit directly.

A few problems/knowns:

• The highlight grid is a placeholder.
• I wasn't able to upload the new video featurettes, I hit a size limitation. I'll investigate in more depth and get that working. This also allows any last feedback to land for those, separately.
• The idea outlined previously around showing the interactivity API in practice using a query loop I could not get to work, since that loop isn't actually able to access the news posts. We could theoretically create some dummy posts on the particular install that's used for the microsite, but I'm not sure that's the right approach. I'll investigate as well.

I'm mostly curious about one bit of rationale for now: What prompted moving the Interactivity API further up?

The point may be moot since we perhaps won't be able to do the thing I'd hoped for, regardless. But the motivation was in part that it's one of the big features of this release, be nice to celebrate. It was also to include some of the work Jay and Saxon did earlier on.

The 2x, 4x, 6x feels very duplicated here and a bit confusing, as if it's referring to different features. I might have the highlight grid more towards the bottom or at the top in that case but with enough space away from those very distinct numbers.

Omitted those. Have a look at the above, let me know. It's super easy to edit and move around. Let me know, hopefully this gets us moving.

[thetinyl]

Woohoo! Thanks for throwing that together @jasmussen.

I've started making content edits. For the most part, I think we can use what's on the About page with only a few exceptions... so that makes things simple enough.

What's been done:

• Updated the hero headline and tweaked the intro paragraph slightly
• Updated the Font Library section: related to what @annezazu pointed out in terms fo repetitiveness... I think we can mitigate that by making that second paragraph feel more connected to the first. I've made the header an H3 there, but I feel like there's something more that can be done. I think the issue is treating them at the same level (info hierarchy-wise) when one's just building on the same feature.
• Updated the shadow/background section
• Highlighted the final contributor number... mostly as a personal reminder that that needs to be updated. I'm not trying to claim that fluorescent green is a better look (promise! that's so 6.2, anyways)

What's outstanding:

• I'm not sure how to solve for the Interactivity conundrum. It's too bad if we can't show something in action. For now, I've left that as is. If we're moving it up, we'll also need to replace it in the section at the bottom with something else. Unless there's a different layout we could use... maybe a 3-column? Might be too much copy there for that.

[jasmussen]

Nice updates!

I think if we have to omit the interactivity API section, we'll handle that, this page benefits from being easily updated. But in case there's a chance, I've sent a ping to @ryelle, she might be able to help. If not, that's okay too. I've also had word that it should now be possible upload the videos. I have to work on some other things today, and there are some video updates I need to do, so I'll revisit on Monday.

[BenjaminZekavica]

@jasmussen Do you can give me access to see the Page in WP-Admin I can't see the preview link? My WP Username: Benjamin_Zekavica

[jasmussen]

I am not permitted to give edit access to the WP.org site, but here's a screenshot of the work in progress:

[jasmussen]

I've tentatively removed the interactivity API section, and uploaded the latest videos to the page. Let me know how this feels @thetinyl

[annezazu]

Noting this shift in the performance improvements mentioned by Ella here https://github.com/WordPress/gutenberg/issues/58028#issuecomment-2005183785 after updating this previous tracking issue on performance improvements for 6.5 . Let's get this updated for the microsite too! TLDR: 5x faster typing processing & 2x faster editor loading for both site and post editors.

[jasmussen]

Gave this a quick edit, but @thetinyl feel free to update the perf section too.

[thetinyl]

Thanks for the updates both!

@jasmussen Overall, I think removing the big Interactivity API section makes sense since we have it covered down below. How can we avoid the big charcoal squares of the videos on the page? Can we control what the thumbnail shows?

I'm going to have to take a pass at the copy again tomorrow, as there are likely some other revisions to the general announcement post that could impact the microsite. Want to make sure they're all covered/vetted.

[jasmussen]

How can we avoid the big charcoal squares of the videos on the page? Can we control what the thumbnail shows?

Good call, we can, yes. Should I create square cards that feature the title of each, or do you have recommendations? Should be fast to do.

[thetinyl]

If there's a particular screen in each demo that might be good to screenshot and use as the thumbnails, I think that could work nicely. I'm hesitant to use the titles as that will get repetitious with the existing headlines on the page—and be less visually interesting.

What do you think @jasmussen?

[jasmussen]

Good call, done! Works well!

[thetinyl]

Woohoo! Looks fine to me.

The last bits of copy editing have also been done.

@annezazu Not sure what your to-do list is like, but if you'd be interested in taking another look here you are most welcome.

[BenjaminZekavica]

@jasmussen Thank you :) For me it looks fine too 👍

[ndiego]

@thetinyl @jasmussen @BenjaminZekavica what are the next steps here? When should the microsite be deployed on WordPress.org? cc @ryelle

For the next release, can we make sure there is a corresponding issue created in wporg-main-2022. Even though the design is created in the Editor, it actually gets converted into a pattern by the Meta team and stored in this repo for the main WordPress.org theme.

[thetinyl]

what are the next steps here? When should the microsite be deployed on WordPress.org?

Good questions, @ndiego! The content is all set to go. We might need to update the contributor number, but it doesn't look likely and we won't know for sure until Mon/Tues next week.

I believe—@jasmussen can jump in if this isn't the case—that the design is also ready.

I think we're ready to deploy as soon as someone can!

For the next release, can we make sure there is a corresponding issue created in wporg-main-2022.

Absolutely! I'll make sure this goes into the MarComms release documentation. For this time around, I believe the desire was to create a companion issue there, is that still the case?

[ndiego]

Absolutely! I'll make sure this goes into the MarComms release documentation. For this time around, I believe the desire was to create a companion issue there, is that still the case?

Yes, if you could create a simple companion issue there to let Meta know when it's ready to deploy, that would be great. They can then reference that issue when deploying the microsite.

[thetinyl]

@ndiego Done!

[BenjaminZekavica]

@thetinyl I updated the Highlight Grid. Please export it and re-upload it to the Media Library :) Thank you

[jasmussen]

@BenjaminZekavica Can you send me a deep Figma link to the precise grid to export? Then I'll handle it, thanks.

[BenjaminZekavica]

@jasmussen Thank you so much :) Here is the link: https://www.figma.com/file/IGwRMs64Hzr9busD7EkbEm/About-Page-6.5?type=design&node-id=5645%3A11260&mode=design&t=B862F570YCZCVDge-1

[jasmussen]

Done!