Tracking issue: 6.4 Featurettes

[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 featurettes. Pulling from the highlight grid work being tracked here #54808, these are short and sweet videos focused in depth on one feature rather than an entire release video. Here's an example from the last release looking at a reimagined Site Editor experience. They should ideally be 30s to 60s, square in format so they work for reels and social media, and focus on no more than one feature, unless there's a feature set that might work well to show 1-3 items quickly. Let's use this issue to collaborate and share progress.

[jasmussen]

For these featurettes, and so that they work across social media and potentially the microsite, I spent a little time using Screen Studio to try and put together a concept for how these could look, here:

designtools.mp4

• The videos are high resolution, and can be subsequently optimized with ffmpeg when we're happy with them.
• The videos are square, but feature some zooming for clarity on particular aspects of a feature. This works well for social media, and for reels, but can also work embedded on a website
• The browser inside is recorded in a 4:3 aspect ratio.

Note that the video content shown here is meant as an example, I'd like to take a stab with a new script that puts a bit less emphasis on the footnote block support, and perhaps more on the group background support.

But as a format for the collection of featurettes in this round, I think this can work.

[jasmussen]

Here's a new version of the Design Tools featurette. Barring any feedback, content-wise I think this one is done, since it captures all the new stuff from Group backgrounds over footnote support and aspect ratio for placeholders.

design.tools.i2.take.2.mp4

I'll move on to writing flow next.

[jasmussen]

Here's a tentative featurette for Writing Flow. Give or take any feedback, I think this one is pretty solid too.

writing.flow.i1.mp4

[richtabor]

Perhaps reducing the speed of zoom will keep it smooth/less jumpy.

[jasmussen]

Ah, good notes! I will take a pass at that for both.

[rmartinezduque]

They look great, @jasmussen! I agree with Rich on making the zoom a bit smoother if possible. In the second video (writing flow), particularly at the 0:20 mark, I also noticed the pause feels a bit longer than usual (not sure if this is on purpose). As for the last improvement highlighted (the ability to merge consecutive lists), I wonder if there would be a way to make it more obvious. I was not sure whether to look at List View or the lists themselves in the content, and struggled a bit to quickly realize that they had been merged.

[annezazu]

Looks solid to me for writing improvements. The only thing that might be fun to sneak in is the Link Control: Add “Open in new tab” control into the link preview, making it easier to turn on and off that option. It's a big part of writing flow experiences and I know has gotten a fair amount of feedback in the last release cycle.

[jasmussen]

Good feedback all around. I managed to find the zoom speed and set it as slow as I could, and that works well enough. I also recorded again, to include the "open in new tab" feature — I actually meant to include that yesterday but forgot, so that's on me!

writing.flow.i2.mp4

Here's slightly more edited, and zoom-slowed version of the design tools as well:

design.tools.i3.mp4

I'm uploading this one, plus the Screen Studio source file, as well as a zoom-updated version of the Design Tools featurette to the Google Drive as well, in a new "Featurettes" subfolder.

[annezazu]

@jasmussen this is very minor and I nearly missed it had I not tested but the duplicating blocks shortcut is new for use within List View! You're demo-ing it outside of List View which is a slight difference (and which was already available at least in testing 6.3.1). If we don't want to show that as it might be perceived as too minor (I still think it's rad), you could demo this: #48708 (comment)

[jasmussen]

Good catch, here's a new one:

writing.flow.i3.mp4

[annezazu]

Quick note that the Font Library has been punted from 6.4 and is now slated for 6.5. Please remove this from the list of featurettes to complete.

[jasmussen]

Here's a new one for TT4:

tt4.i3.mp4

@jameskoster is looking at a Workflow Upgrades.

I'll see if I can demo Lightbox primarily from the front-end perspective. Anything else you'd like to see?

In addition to this, next I'll add title and outro cards to these.

[annezazu]

Thank you for yet another update! The zoom feels a bit off in the TT4 one at times. In particular, some notes:

• Slow down the jump up at 8 seconds. It's sudden and stands out compared to the rest of the video.
• Zooming in at 10-11 seconds feels a bit off and you miss the lightbox (I am guessing that's what's going on).
• 24 seconds, I'd zoom in on the category link rather than zooming in on the category title after and stay zoomed out through 28 seconds to see the full category page before zooming in again when you click at 29 seconds.
• I'm not sure why we're zoomed in at 33 seconds, especially when we get into the architecture photo. It makes it hard to see.
• At the very end, I might just zoom all the way into "Designed with WordPress".

As for another possible video, I think it would be advantageous to have one around the number of patterns in TT4, using a few, and swapping out templates. I think the swapping templates piece in particular is a big part of this theme and it's wise to demo.

[jameskoster]

Here's an initial take on the workflow featurette:

workflow.mp4

Included:

• Command palette enhancements (contextual block commands).
• Creating patterns with categorisation.
• Renaming Group blocks.
• Image thumbnails in list view.

[jasmussen]

Nice, thanks for doing that Jay! Looks good, I think the quality is perhaps a bit low, we'll just need to remember to export at a high fidelity for the final one. Which, by the way, can you put it in this Gdrive folder? Please include the .screenstudio file, I'd like to try and tinker with a few things!

Some specific feedback: not sure why we're seeing the "Move" cursor at the beginning. Perhaps start with the cursor outside the browser, and then move in?

In general I find it useful to do primarily manual zooms, that way I can move the focus point to either corner of the recording, so the clearance is uniform, e.g. above and to the left, or bottom and to the left:

At the 9s mark, it's unclear what you are selecting, it all looks black. It could be due to compression artifacts. But the scripted part is pretty good, selecting something, then invoking the command palette to "insert before". Perhaps it can be a lighter background and have some content inside? Perhaps you can select a spacer? In any case, something to make it clearer what is being selected. And it's nice to see the ⌘K shortcut! 👍 👍

I wonder if instead of pasting something in, you could search for a pattern, or open a pattern to insert? Otherwise you could paste in the existing pattern that was created for the demo site:

In any case, that would feel a bit more at home than the safari pictures.

The zooms around 20s in could benefit from either no zoom, or a manual zoom so it doesn't move horizontally into the modal.

At the 29s mark, it would be nice to perfectly sync the zoom out to the click, so that the zoomout starts at the same time as the click.

The subsequent navigate to a different page could maybe work fine without the zoom — at that point it's might flow naturally, suggesting the command palette can be second nature as part of the flow.

Similar notes on the zooms around the 52s mark, I find the less things can move, the better, so a manual zoom here might be good.

Subsequently around the 1:03 mark, showcasing those gallery thumbnails is nice, and might be good to zoom way in on.

At the 1.08 mark, for some reason the command palette flickers quite a lot, not quite sure what happened there. I.e. whatever the cause should be fixed in the software, but if the bug is present we might need to record something else, or polish this in the editor with a little editing magic. I.e. you might want to open the command palette, pause, not move the cursor, type out the full thing, pause, and then cut out all the flickering in the in-between.

I'd also just press Enter on the Project Overview item, rather than click it.

It would be good to end on a punchline of sorts. Perhaps that's zooming in on the final pattern, and perhaps panning there with a glide:

Nice work. I'm happy to help with the screen studio edits btw.

[jasmussen]

Good notes, Anne! I'll take a stab at some edits now.

As for another possible video, I think it would be advantageous to have one around the number of patterns in TT4, using a few, and swapping out templates. I think the swapping templates piece in particular is a big part of this theme and it's wise to demo.

I wonder if that can actually be part of the workflow updates? Otherwise I'll see if I can put something together. I know that @beafialho also recorded a slew of smaller TT4 videos we might want to include in the mix here.

[jasmussen]

How about this one Anne?

tt4.i6.mp4

I feel like I can tinker endlessly with these and trim and adjust the pacing here and there, but I want to start adding title and outro cards to these and have that pipeline up and running so we have something. I'm also running into limitations of Screen Studio, it only has basic editing, so I can't cut to a zoomed in version easily, all zooms except the first and last ones will be eased in both directions. Nevertheless, let me know your thoughts on this one, and I'll see what I can do.

[jasmussen]

Based on Jay's content and script, and my own notes here, I took a stab at recording a version of the Workflow featurette here:

workflow.upgrades.i1.mp4

I think the script is pretty solid, and it was quick to record, so it was mainly about adjusting the "Team" pattern a bit, and tuning the screen studio transitions. Let me know what you think, Jay and Anne!

[beafialho]

I know that @beafialho also recorded a slew of smaller TT4 videos we might want to include in the mix here.

Sharing my TT4 videos here:

tt4_entrepreneur_faqs.mp4

tt4_post_details.mp4

tt4_writer_tags.mp4

tt4_entrepreneur.mp4

[jasmussen]

Took a stab at adding intro/outro cards to these, and have "final" versions to share of the four featurettes. Design tools:

design.tools.with.titles.i1.mp4

TT4:

tt4.with.titles.i1.mp4

Writing Flow:

writing.flow.with.titles.i1.mp4

Workflow upgrades:

workflow.upgrades.with.titles.i1.mp4

I'd love your "final" feedback on this.

I had on my ToDo to record a lightbox one as well, but given some recent flux on this I'm holding off on doing this for now.

[rmartinezduque]

Thank you for this update, @jasmussen! These look beautiful!

For the title of the intro cards, I suggest keeping some consistency. That is, if we want to include titles, it would be good to have them in all the featurettes. Some ideas for titles if needed:

• Get creative with more design tools
• Meet Twenty Twenty-Four
• Enjoy new writing improvements
• Work smoothly with upgraded tools

cc @annezazu to ensure this feels aligned.

A few more notes:

• The "Built by WordPress" tagline may be a bit confusing; I'd suggest "Built with WordPress" instead.
• It would be great to include a call to action or a URL for more information in the outro card, like wordpress.org/6-4/ to point folks to the microsite. Since wordpress.org/6-3/ redirects to the 6.3 microsite, I assume the suggested URL could work for 6.4 as well.
• The outro card of the workflow upgrades video seems darker than the rest.

[annezazu]

cc @annezazu to ensure this feels aligned.

These sound good and have enough alignment with the About page.

For the videos, I have a few items of feedback.

Design tools:

• the background image feels a bit lackluster in that it isn't distinguished much from a cover block. This is way too long of a video but shows a bit more depth and more group block specific features perhaps.

TT4:

• the jump at 20-21s to a new page feels odd/rushed without a transition or click
• the pause at 25-26s feels too long.

Writing Flow:

• the keyboard shortcut isn't visible when duplicating in list view at 25-26 seconds.

Workflow upgrades:

• the initial command visible when you pull up command palette is a bit odd in between 10-11s + again at 35s ("edit template: wp custom...").
• the jump to the pattern modal at 20-21 seconds could be refined.
• might want to end the video by showing the details view of the team pattern rather than going all the way through the save (doesn't add much).

Hit enter too soon!

[jameskoster]

Nice work @jasmussen, massive improvement :) I've made an i2 for the workflow vid and added to GDrive:

workflow.updates.i2.mp4

Obviously it doesn't have the intro, hopefully that's easy to add that?

Edit: I'm not sure why the quality is still poor, I'm exporting at 1080p, 50fps, for social media 🤔

the initial command visible when you pull up command palette is a bit odd in between 10-11s + again at 35s ("edit template: wp custom...").

The visibility of this command is accurate, so I don't think we should hide it. I sped up those sections a bit though – it was particularly glaring at the 35s mark.

I also omitted the first couple of steps where the page details are navigated to. I find the sped-up animation a little jarring and I don't think that section really adds anything.

[jasmussen]

the background image feels a bit lackluster in that it isn't distinguished much from a cover block. This is way too long of a video but shows a bit more depth and more group block specific features perhaps.

In very soft pushback I want to suggest that the group block background is very equivalent to the Cover block, the latter may just be a slightly quicker way to accomplish the same. So I intentionally didn't dwell that much on it, especially since we're still lacking a fair bit as far as tiling, scaling tools, etc.

That said in full transparency this soft pushback is also because re-recording just that part of the video is slightly non-trivial. I'll put it on my list and see if I can stitch this in, after I do the other changes 😅

the initial command visible when you pull up command palette is a bit odd in between 10-11s + again at 35s ("edit template: wp custom...").

Also somewhat tricky to fix, and (note to self) in general showing suggested actions by default in the command palette is something we need to be smarter about. Showing just one, already selected, adds undue prominence.

Good notes in general, I'll dive in.

[jasmussen]

Oh I see Jay already addressed some of those notes in his i2, fantastic!

Obviously it doesn't have the intro, hopefully that's easy to add that?

It is, now that I have the hang of it, yes!

Edit: I'm not sure why the quality is still poor, I'm exporting at 1080p, 50fps, for social media 🤔

For the final pass I'm re-exporting them in 4K, and then After Effects will do the final compression, that'll likely help. That said, good note, I hadn't noted the FPS counter, and I'll be sure to sync that up with the FPS I have set in AE, they should b e the same.

[jasmussen]

It would be great to include a call to action or a URL for more information in the outro card, like wordpress.org/6-4/ to point folks to the microsite. Since wordpress.org/6-3/ redirects to the 6.3 microsite, I assume the suggested URL could work for 6.4 as well.

I'm a little reluctant to include the URL in the video itself, for a few reasons:

• The URL might change, although unlikely, but if that were to happen it would instantly make the video obsolete. We can make URL redirects, but even then I personally find it clunky having to remember and then type in a short-URL, I'd much rather tap or click an actual link.
• Since these videos are primarily meant for social media, presumably we'll attach an actual link in the prose that goes with it.

What do you think?

[jasmussen]

Thanks for all the great feedback. I regret that I can't always respond in full depth to every detail but rest assured that I'm still on this, and still ready to respond to feedback. Hopefully with each iteration we'll get a little bit closer.

Design tools i4:

design.tools.i4.mp4

TT4 i2:

TT4.i2.mp4

Writing Flow i2:

writing.flow.i2.mp4

Workflow Upgrades i3:

workflow.upgrades.i3.mp4

[annezazu]

Ship it! Looks much smoother. Thank you for the continued iterations.

[jameskoster]

Agree these are looking good! A couple of tiny points:

• Design tools: The first few seconds where you navigate into a page doesn't add a lot, and the zoom kind of suggests its part of the showcase. Wondering if we could skip straight to the Editor and save a few seconds? Alternatively; remove the zoom and speed that section up – similar to the other featurettes.
• Writing flow: at 48s it's not super obvious that the Lists get combined, or how that is initiated.

[jasmussen]

Good feedback both. I did some small tweaks (trimmed the design tools intro, and rested a bit longer at 48s in writing flow) and will send them by a friend to help get some of the title card easings just right, will post back when I have something.

[jasmussen]

Here are what I would call the final featurettes:

design.tools.i6.-.small.mp4

tt4.i9.-.small.mp4

workflow.upgrades.i4.-.small.mp4

writing.flow.i6.-.small.mp4

Thank you to Adam Wiltgen for finessing timings!

[richtabor]

Very nice!

[rmartinezduque]

@jasmussen, is there any folder with the 6.4 featurettes or should I download them directly from GitHub?

[jasmussen]

I've sent you a link to higher res versions, so you have something to choose from!

[annezazu]

Closing this as complete. Excellent work all!