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.

[ndiego]

I added copy for the Accessibility and Performance sections, so the copy for the About page should be good to go, pending final review.

[annezazu]

With content for those sections, I think we’re all set! The others have been reviewed already with editorial help.

[jasmussen]

I went ahead and updated this draft with the latest text from Figma. It still needs design. But hopefully the highlight grid an be "wrapped" today, so that I can extract graphics for the about page from it.

[jasmussen]

Paired up with an update to the About page, and the highlight grid, I took a stab at including the material from the grid in the microsite too:

We still need an effort on the overall art direction, and especially the release logline and header feature.

[jasmussen]

Took another stab:

This includes an attempt at the hero/banner/introduction, which I've reduced to "Refine the detail". I'm not sure that's the right opener, previously noting that Twenty Twenty-Five is the headline feature of the release. But since the theme is mentioned both in the intro paragraph, and the first feature highlight that comes with a video, I kept the moniker under the guise of an abstract indication of the overall story, paired with the black and white close-up of a plant stalk—one of the pictures bundled with the theme.

[jasmussen]

Following up on this feedback, with the latest iterations on the grid, it can now be split into 4 columns, and thus stack on mobile:

[ndiego]

I love it!

[ryelle]

Following up on #506 (comment), with the latest iterations on the grid, it can now be split into 4 columns, and thus stack on mobile:

Looks great! I think we're on track (and maybe this is obvious), but I did just want to mention that since these individual images will need alt text, that counts as strings for the freeze deadline. So the images in this section will need to be finalized by RC1 so that the alt text will be correct. The rest of the images don't use alt text (they reflect the directly-adjacent text) so they can change through RC.

[ndiego]

Looks great! I think we're on track (and maybe this is obvious), but I did just want to mention that since these individual images will need alt text, that counts as strings for the freeze deadline.

Great reminder!

[jasmussen]

Updated the microsite draft with the latest copy, including adding alt text. Here's a GIF:

A few notes:

• This is still a work in progress. It will need some layout/style tweaking, both to work on super wide screens (perhaps a max-width), and on mobile.
• Fixed a typo in the accessibility section, it should be "labelling" not "labeling" (right?)
• Added alt text for all the images, except the separator and the icons.
• I haven't yet sliced up and included the Highlight Grid in the columns block as discussed. That's next on my agenda. Later today, or tomorrow. Question about that, do we need a single image for each cell, or is it enough to slice in 4 images, one per each column?
• Depending on visual styles, it might be nice to apply the dark header and footer on this page. But we can go with the light one if need be.

Feel free to edit, if you have access.

When it's necessary to publish this for the sake of freezing the strings and allowing translation, like last time let's be sure to keep a "coming soon" banner in place on the frontend until the Nov 5th launch.

[ndiego]

Fixed a typo in the accessibility section, it should be "labelling" not "labeling" (right?)

Two l's is British English, whereas one l is American. According to the WP style guide, American is the way to go. You can see Grammarly yelling at me below. 😅

Question about that, do we need a single image for each cell, or is it enough to slice in 4 images, one per each column?

I think we could slice them up and then set the block gap and column gap to the same value, and everything should work. This will also allow us to have Alt text for each image, which is ideal.

[jasmussen]

Oh! Good note, glad I asked. I'll re-correct it back to single l!

[ryelle]

Added alt text for all the images, except the separator and the icons.

Only the highlight grid images need alt text, it's repetitive on the images in content — especially for the HEIC image. The others are better, but I don't know if it's necessary. It would be good to get someone from the a11y team to review, but I don't know the best way since we don't want the page public yet. Open to ideas 🙂

do we need a single image for each cell, or is it enough to slice in 4 images, one per each column?

I think we could slice them up and then set the block gap and column gap to the same value, and everything should work. This will also allow us to have Alt text for each image, which is ideal.

Exactly this.

Depending on visual styles, it might be nice to apply the dark header and footer on this page. But we can go with the light one if need be.

Sure, let me know which background color you want (or which page to copy if you're not sure).

When it's necessary to publish this for the sake of freezing the strings and allowing translation, like last time let's be sure to keep a "coming soon" banner in place on the frontend until the Nov 5th launch.

Yes, it will need to be published (and finalized) on Monday, which is when I'll add the real page template with whatever header/footer you pick, and it'll use the "in progress" placeholder.

[jasmussen]

Good notes. I've now gone ahead and added the highlight grid plus alt text. I've not yet deleted any alt text, feel free to go ahead and do that, otherwise I'll come back to this tomorrow and wrap up remaining pieces.

[ndiego]

Only the highlight grid images need alt text, it's repetitive on the images in content — especially for the HEIC image. The others are better, but I don't know if it's necessary.

I removed the HEIC one, but based on my googling, it seems like the others can have alt text. While they are visual representations of the content below, they do showcase UI elements that are not completely captured in the visual text. I expanded on a few of them.

[ryelle]

The page has been published with the placeholder pattern (see https://wordpress.org/download/releases/6-7/), and the content has been added to the theme for translation syncing. I'll drop a note (tomorrow) to polyglots sharing that this page exists and is ready for translating (like this 6.6 post).

[ryelle]

Any further edits to the page will create a content sync PR, so if you're updating the page, come back to this repo in ~5-10min after saving to add a note to the PR. You'll find it in the Pull Requests tab, it will be called "Content updates from Page Editor".

[annezazu]

Thank you so much!

[ryelle]

I assume some layout work is still ongoing for this page, but just in case - the main section's text overlaps with the image, which causes contrast issues (this is at 1280px wide, but it starts to overlap when you go below 1500px). Perhaps a background color on the text, and a filled button?

[jasmussen]

A small update, we got some wonderful color contributions from @fcoveram and @sfougnier (who we can add to the props list), resulting in this:

microsite-nov-7.mp4

It should now have the final videos, thumbnails, etc.

[ryelle]

I've merged the content PR since there are string changes, merging now gets them into GlotPress ASAP. I also added the video CSS.

I noticed the line-height on the italic text is a bit large when it wraps on mid-sized screens, and the video section is quite tall on small screens.

[fcoveram]

Italic text

For sentence in serif italic, I tried 1.2 line-height in Figma, and it works well.

Stack sections

For the vertical alignment of sections, I noticed in the editor that all videos have side and top margins in the intro frame. To use that as white space, is it possible to set the current left and right padding for the top, but 0 for padding bottom?

[jasmussen]

1.2 lineheight looks great, let me do that update when I get a moment. I'll also take a look at the margins. Thanks all!

[fcoveram]

Oh great. I don't know why I thought that edition in the editor was in some frozen state. Thanks for doing it.

[jasmussen]

Great feedback, and thanks. There's a PR here with the updates discussed here.

• Updated the lineheight of the italic text
• Adjusted spacings, paddings, to better collapse items on mobile (see screenshot above)
• Uploaded versions of the videos without an intro

[ryelle]

The page is now live at https://wordpress.org/download/releases/6-7/

There's still the video aspect-ratio issue: the video and poster images need to have the same aspect ratio. Currently the images are square, and the video is 16:9; which means in Firefox the poster images are cut off, and on Chrome, the image loads square but if you click play it resizes to the video size. See the video in this comment #512 (comment)

Changing the aspect-ratio on the videos resulted in cut-off videos instead (screenshot #512 (comment)).

From #512:

@ryelle: I still think it would make more sense to update the poster image with the correct video aspect-ratio (or re-render the videos as squares, but I imagine that's a bigger task).
@jasmussen: I may need to apply the aspect ratio to a containing group instead of the video block directly.

So I'll leave that for design to either figure out a workaround or make new assets.

[jasmussen]

Indeed, the feature to add aspect ratio to the video block is being added to Gutenberg. Whether we can wait for that PR to land and find its way to the plugin, unclear, but the missing piece in the code snippet I shared yesterday, was object-fit: contain;.

In other words, if we add the helper class has-1-1-aspect-ratio to the Video blocks, and then add the following counterpart CSS:

.has-1-1-aspect-ratio video {
	aspect-ratio: 1/1;
	object-fit: contain;
}

—everything should work as intended, with no need to re-render videos, or change images.

I tested the PR in progress, and it shows me this in Firefox and Chrome both:

That comes with this inline style: aspect-ratio:1;height:100%;width:100%;object-fit:contain;