6.7 Microsite

[jasmussen]

What is this?

This tracking issue will cover the work needed for the 6.7 release microsite. The microsite is a landing page on WordPress.org that showcases all the highlighted features and enhancements for a particular release. Aesthetically, the design for this microsite has followed general WordPress branding instead of the unique flavor of any particular release. Related: WordPress/gutenberg#58577.

Examples of previous highlight grids for reference:

• 6.6 microsite
• 6.5 microsite

Timingwise, the copy of this page and the initial design can start now, and ideally the design is close to final (to respect a string freeze around RC1, October 22nd), there will still be wiggleroom to update the layout and images until the release date, November 5th.

Content

The content can follow what's being included in the About page, but should also be mindful of a broader audience.

[jasmussen]

The following is a placeholder. The design will change, perhaps drastically, so the following is not created to engender design feedback. It is shared here as a first draft of the content. Although the content overall, text, etc, is also placeholder, it should include the main pieces of the puzzle. Hopefully this can serve as a more easy way to actually update the text content.

Figma.

[annezazu]

Asked to edit so I can dive in on the copy a bit 💥 Thanks for kicking this off.

[ryelle]

Can this issue be transferred to WordPress/wporg-main-2022, since that's where this work needs to happen? Creating two issues last release made it hard to keep track of what's happening, I kept having to check multiple places and double-post comments.

Transferring is easy 🙂

[jasmussen]

Done! Thank you @ryelle. I'll proceed to draft the first iteration of the page now. It'll still need a little design, but it'll be useful to have the text and overall structure there.

[jasmussen]

Here's the first draft of the page. Noting again that much of the text is placeholder, as are the images, and the whole thing needs some design tweaks, it's nevertheless good to get the text there so we can shore it up to the appropriate incoming freeze dates.

[ryelle]

I wanted to flag this issue from the last release page - the accessibility of the highlight grid image. Specifically, this is a big image with a lot of text and information, with no text alternative for screen reader users.

From the issue:

Ideally, that panel would be a grid format with text & accompanying images. However, lacking that, there needs to be a bulleted list that provides all of the feature points on the page in simple text. Right now, it's clearly not an equal experience.

I wonder if we can try something more accessible by default for this page, and stick to using the single highlight-grid image for social media? (I mean, it still needs alt text there too, but this page is more the source of truth).

[annezazu]

Went through the About draft with the help of the lovely @provenself and have a more finalized copy 🔥 LMK what you all think.

[jasmussen]

I wonder if we can try something more accessible by default for this page, and stick to using the single highlight-grid image for social media? (I mean, it still needs alt text there too, but this page is more the source of truth).

It was my desire to replace the highlight grid, at least on the microsite, with an actual HTML version built using CSS-grid. However the block is limited in capabilities, so this was not possible in the current timeframe. So it remains on the radar.

Would it be possible to include the bulleted list in a details block below the image? There will be a lot of duplicate information since the grid is a summary of the entire page, though I understand that for a non-sighted reader, this context is not going to be clear otherwise. The alternative, to omit the grid, would be a bummer.

[ryelle]

Would it be possible to include the bulleted list in a details block below the image?

This would work technically, but it would be nice to think about alternatives to the image itself, or some compromise — for (a very quick) example, we could have a columns block with 25-50-25 display with the site background, twenty twenty-five, and zoom images so that they could each get alt text.

[jasmussen]

we could have a columns block with 25-50-25 display with the site background, twenty twenty-five, and zoom images so that they could each get alt text.

Interesting, an old-style image slice? I guess using "Stack on mobile", it could work responsively. I'll do a quick test.

[jasmussen]

Gave it a shot with columns.

The fact that "Stack on mobile" is built in, means we can do things. But it would require a bit of a different design, one that has equal column widths, rather than a big center cell.

I'm going to give that a shot from the design side, this certainly works here.

Also gave it a shot with the grid block. Auto:

Manual:

In both cases, we are missing controls on width, and height, stacking, etc. Auto and Manual are nuclear opposites, with the latter being best in most cases, though just simply lacking any kind of responsiveness.

[jasmussen]

Here's a test that puts the grid cells in 4 uniform columnsm and would thus work: WordPress/gutenberg#65775 (comment)

It'll still be subject to visual feedback, but potentially that offers a path forward.