New page: 6.6 release page

[annezazu]

Per a request on https://github.com/WordPress/gutenberg/issues/62631, creating a duplicate issue to track and share efforts around the 6.6 microsite. Examples of previous highlight grids for reference:

• 6.5 microsite
• 6.4 microsite
• 6.3 microsite

Here's the figma file in process and a google doc with a content outline

[ryelle]

I see @jasmussen already created this page as a draft. I've added the page-6-6 template to the site & page so that it can be edited and previewed correctly (fixing the width issues).

Once the content is ready for review, the page should be published so that the syncing method can work. No content will appear live yet. Publishing the page will create a new content update PR in this repo, and we can review the work there.

Once that is final, we can merge it & deploy the page. Based on conversations in #core, we're going to respect the RC1 about page string freeze, so the page should be deployed on/by EOD tuesday. We're not tied to the RC1 release cutoff since this page is not bundled.

After the RC1/page is deployed, we should avoid any string changes unless they're corrections.

[annezazu]

Awesome! Thank you. Chiming in here to say the microsite copy is finalized as per this update. The two biggest changes I expect to the About page are the visuals for the main features (quick preview for pages and styling sections of blocks were swapped) and final accessibility numbers which I've asked for help with. .

Here's a figma export for good measure of the current standing: Note I can see some [orphans and widows](https://fonts.google.com/knowledge/glossary/widows_orphans) we'll need to address.

[ryelle]

Thanks for flagging the other comment, but this ticket isn't about the About page :( Just the release page. I'm actually about to comment on the other issue, so I'll see you there :)

[annezazu]

🤦🏼 So sorry. Moving too fast in too many places. Thank you.

[ryelle]

Checking in here again re: timing— we should have this page ready for sync & deployment by EOD tomorrow to honor the core string freeze and make sure that translators know about/have enough time to translate this page.

Can we clarify who will be building out the page? I think @jasmussen's been working on it so far?

[jasmussen]

I will build out the page today, based on the latest, it'll be ready.

That being said, I was not aware that the site version was now under the same string-freeze restrictions as the About page. I can understand a desire to not diverge, but somehow I missed this.

[jasmussen]

I've now built out the page to have the same strings as are in the figma file. Results:

Desktop	Mobile

As you can see, the mobile view needs a little love on some of the paddings, and we need to find a good solution to the left/right alternating images when the column setup stacks. Any ideas there?

I'll proceed to work on featurettes now.

[ryelle]

As you can see, the mobile view needs a little love on some of the paddings,

I'm not sure what issues you're seeing, so if you can identify those I could try to help.

we need to find a good solution to the left/right alternating images when the column setup stacks.

The stack behavior matches source-order, so this is technically correct. Maybe you could add a styled separator or something between them? These images don't have alt text and are not interactive, right? (they won't be videos, or anything) — if so, we could probably switch the order around with CSS without negatively impacting accessibility. If they are going to be videos/interactive, then we can't change the order as it would cause page jumps when navigating through.

That being said, I was not aware that the site version was now under the same string-freeze restrictions as the About page. I can understand a desire to not diverge, but somehow I missed this.

It's less about not diverging, and more about giving the translators time to translate this page too. Since the page is linked off from the About page, it should also be translated at release time.

[ryelle]

I've now built out the page to have the same strings as are in the figma file.

Did you update the figma with the latest from the google doc? There were a few changes done yesterday, so that was the source of truth for the About page.

[jasmussen]

I'm not sure what issues you're seeing, so if you can identify those I could try to help.

On tablet breakpoint, the highlights look like this:

In mobile, they stack, and the alternating pattern results in 2 images in sequence:

Perhaps that's okay? I understand the source order matters, and it isn't clear there's a good fix here other than either finding a solution that does not stack, or even hiding features on mobile, which wouldn't be great either. 3 of the 4 will be videos with a static thumbnail.

[jasmussen]

Did you update the figma with the latest from the google doc? There were a few changes done yesterday, so that was the source of truth for the About page.

I did not, though I'll go ahead and double check that now, both for the figma file and the release page.

[jasmussen]

Release page updated from Docs outline.

[jasmussen]

Figma updated from Docs outline.

[ryelle]

I've merged the content PR & deployed it, so the page is live at https://wordpress.org/download/releases/6-6/ now. (wordpress.org/6.6 & wordpress.org/6-6 will redirect). I'll notify polyglots with a post when the strings sync to glotpress.

On tablet breakpoint, the highlights look like this:

I'm still not sure what padding issues you're seeing here.

In mobile, they stack, and the alternating pattern results in 2 images in sequence:

In my previous comment, I made a few suggestions. But since they will be interactive (videos), we can't change from the source order, so my only relevant suggestion is a styled separator to break it up. Feel free to try different layouts, just be careful not to change the strings (I'll check for this if a new PR is created, too).

[jasmussen]

I'm still not sure what padding issues you're seeing here.

The padding above and below cells is different from edge padding, which causes a slightly stuttery reading experience. It's subtle, not a big issue, and I believe I can fix that in the editor, when I update the images as well.

I'd love other thoughts on what we might be able to do on the alternating images on mobile, maybe @richptabor has thoughts? Regardless, I think I may be able to fix it, while maintaining source order, with some custom CSS. Where would I add this custom CSS; okay to add a helper class in global styles like I did for the intro heading, and then you can move it to the stylesheet? Or something else?

[ryelle]

Noting here that based on this reply I've enabled the "hide from search engines" for this page, we will need to disable that before release.

[ryelle]

Where would I add this custom CSS; okay to add a helper class in global styles like I did for the intro heading, and then you can move it to the stylesheet?

@jasmussen That's fine, just let me know it's there so I can review & copy it over.

[jasmussen]

Shared an update on the trac ticket as well, but as of writing, the release microsite should now be in a decent spot as far as layout, imagery, behavior, etc. The only thing missing, depending on feedback, is that I need to still complete the final featurette work, but the images that are in the 3 major highlight sections will be used as poster images when we swap out the image blocks with video blocks.

As far as the alternating images on the page, I ended up adding a mobile-only separator, like so:

It's not ideal, but let's explore alternatives in the future. That means I added a bit of custom CSS to the site editor, that you can port over.

[tobifjellner]

Typo in 6.6 about page. In one place "Windows" is referred in all lowercase. As a proper name it should have a capital W.