6.7 Video Featurettes

[jasmussen]

What is this?

This is a tracking issue to help facilitate work being done for the 6.7 release video featurettes. Based on the highlighted features being outlined in #65775 and the About page tracking issue, these are short videos meant to focus on one feature or flow improvement. They can be high-quality screen recordings and should be able to stand alone. Ideally, they will be 30-60 seconds in length. They will mostly be used across marketing channels, including social media, though are commonly also included in the microsite (#65776), where the About page uses static images. Past example: #58578.

There will be a text-lead-in for each featurette. Example from the 6.6 release:

6-6-color-and-typography.mp4

Examples of 6.4's featurettes can be found here #54810

Timingwise, these are best to start recording after a story and primary features have been chosen as part of the About page and highlight grid work. Since they will not be included in the About page, they can be uploaded in the days before the final release, November 5th, but drafts for review would be good to have around the RCs at the latest (Oct 22/29).

[annezazu]

Ideas for featurettes pulled from top list and thinking about what's visual:

• Query Loop refinements (mainly the changes shown in the video here)
• Data views refinements (changing grid density, new UI for more advanced filtering/changing views, change column order, etc).
• TT5
• Edit font site presets
• Block bindings UI
• Zoom out
• Template registration API (if we can??)

[jasmussen]

I'd love to reduce these formal featurettes to at most 5. Possibly we can combine a few together in the name of flows, but some of that is likely best decided based on contents of the About page/microsite too. I.e. potentially query improvements, block bindings, and template registration pieces can be bundled in a devex video? Not making promises as I need to manage bandwidth, but it's an idea.

[annezazu]

I think that’s a great idea. If we do that, I think we could do a split of devex video and then a UX video as there are a number of those we can pull together too rather than an isolated video just on something like zoom out. I could see both featuring TT5 too. That would make three videos total (maybe even two if they show TT5 right). Food for thought. Thanks for kicking this off.

[jasmussen]

Here's a first take on a "devex" video, which touches on:

• Template registration API
• Data views improvements (just showing the density slider)
• Query loop improvements

6-7-dev-improvements.mp4

Your feedback at this point is extremely valuable. It's non-trivial to come up with a "story" that weaves those three things together into something that feels coherent and compelling, ideally there's a point to the query changes you're making, the template you're registering, etc.

[ndiego]

One quick note while it's top of mind, the name of the registration functions for block templates has changed and are now no longer prefixed with wp_, which they are at the start of the video above.

[jasmussen]

Following up on the above, and having built out solid drafts of highlight grid, about page, and microsites, our 4 headline features for the moment look to be:

• Introducing TT5
• Get the big picture with zoom out
• Connect blocks to custom fields
• Embrace your inner font nerd

In both About page and Microsite, those 4 headline features are the first 4 items on the page. Specifically on the microsite, those were also the 4 items that had featurettes attached, with the About page graphic used as the thumbnail.

Now that's not how it has to be, 6.3 was different. But there's something simple about this format that is useful, especially since the About page is string-freezing today.

With that in mind, I outlined some script ideas to match those. TT5 could show creating a new page by using a full-page pattern, applying section styles, and then ⌘Tabbing/scrolling through the demo sites built for it (1, 2, 3). CC: @beafialho for awareness.

The zoom out featurette could be creating a blank page, then zooming out/inserting patterns, rearranging.

Connecting blocks to custom fields would use sample code to connect an Image block to a random image source.

That leaves the inner font nerd one. Which is tricky, is this enough for a featurette? And what about the devex video above? I tried combining them into something that could be titled: style and developer improvements, perhaps, which goes through styles, then font preset editing, then template registration, then the custom query loop:

6-7-font-styles-templates-i1.mp4

Let me know your thoughts.

I'll proceed with a TT5 video test for now.

[annezazu]

Looking really solid. The transition at 30-31s from editing font presents to code is pretty jarring. Can we just let it sit for 1 second longer before switching over? I don't want a re-record as that would be too much effort.

At 45s, one of the query loop block patterns is really rough:

Otherwise, this looks good!

[jasmussen]

Good notes. Through a pausing, and some hopefully clever trimming, I think I managed to save this one.

6-7-font-styles-templates-i2.mp4

[jasmussen]

Here's a first draft of a Twenty Twenty-Five video.

6-7-tt5-i0.mp4

Not totally feeling it, so probably will have to re-record, but any ideas you might have, would appreciate it!

[jasmussen]

CC: @beafialho

[jasmussen]

Recorded a tentative video for zoom out:

6-7-zoom-out-i0.mp4

It's worth noting that for the 4 videos we are thinking of here, I'll eventually add intro/outro segments to these, so we'll need some small text snippets. Tentatively thinking they can match their relative sections on the microsite, which would make them:

• Introducing TT5
• Get the big picture with zoom out
• Connect blocks to custom fields
• Embrace your inner font nerd

[beafialho]

@jasmussen very exciting to see these demos! Here are some impressions:

• In the second video, is the large Site Title intentional? It's bigger than the default
• When you insert the full page patterns, perhaps you want to select the "Page No Title" template, instead of the "Pages" one
• The first video probably has too many small zoom ins and outs, perhaps remove some of those animations and just show the static recording
• Maybe to show the sections styles colors you add a single section pattern (like "Contact location and link") instead of a full page one?
• I really like that square flower image with the title below, so much white space 🥹

[jasmussen]

Excellent notes Bea, changes are probably not intentional. I'll fix in re-recordings.

Here's a tentative 4th video, for block bindings:

6-7-bindings-i0.mp4

[annezazu]

These are all looking great to me 🔥

[jasmussen]

Adding intro/outros, and doing last edits. Here's block bindings:

6-7-bindings-i0-comp.mp4

[jasmussen]

Here's one for zoom out:

6-7-zoom-out-i0-comp.mp4

[jasmussen]

Here's one for font and template improvements. Note, I tweaked the intro title here, since the other statement ("Embrace your inner font nerd") only covers half the content of the video. Suggestions welcome.

6-7-font-styles-templates-i2-comp.mp4

[annezazu]

Quick notes on this last one:

• Spend less time at the beginning styling the site (maybe just click through one or two and move on OR speed that section up).
• The transition at 39-41 seconds is rough, mainly because you end up seeing a cut off view of the screen.

Overall, I don't feel like these two go well together. Template registration API is more for plugin devs. The font changes are more for builders and block themers. The only tie in I can think of is to go with something like: "Do more with block themes" where it's talking about block theme capabilities expanding (bad title but you get the gist).

[jasmussen]

Good notes. Just to entertain whether we can still have such a combined video, here's one, for now sans intro/outro, to see if it might work:

6-7-font-styles-templates-i3.mp4

Per your notes, I also tried an alt, just the styles and font sizes:

6-7-font-styles-i1-comp.mp4

That last piece is a bit shorter, and doesn't include the query loop improvements. But it may be more focused as a result.

[jasmussen]

Here's an iteration of the TT5 video, that takes into account this feedback.

6-7-tt5-i3-comp.mp4

Following this one, I'll do a re-recording of zoom-out, to address other bits of feedback.

[jasmussen]

And here's a new slightly more polished, and up-to-date version of zooming.

6-7-zoom-out-i2-comp.mp4

[annezazu]

That last piece is a bit shorter, and doesn't include the query loop improvements. But it may be more focused as a result.

I think it makes sense to split this one out. I'd also again shorten the styling at the top of it since it would focus on Fonts. The one with the template registration API + query loop improvements just feels mishmashed.

TT5 looks good. An aside but I do think this is where we would be well served by having a voice over as a lot is being shown there without context.

For zoom out, this looks good! The only thing we're missing there is shuffling between patterns but I think that's okay for an intro vid and I don't want to spend too much time iterating on these with the release so close.

[jasmussen]

I'd also again shorten the styling at the top of it since it would focus on Fonts.

I snipped another 3 seconds off the fonts video:

6-7-font-styles-i3-comp.mp4

[jasmussen]

TT5 looks good. An aside but I do think this is where we would be well served by having a voice over as a lot is being shown there without context.

Agreed. It's on my radar to generally think about how we can elevate this further, while still doing so in a sustainable way. For the moment, there's a lot of business across many topics of work.

[sfougnier]

@jasmussen and I reviewed the 6.7 landing page in the editor, and I propose we remove the intro/outros from the videos on the 6.7 landing page.

The intros and outros are great for embedding videos on external channels, such as social media. However, when we embed the same videos on the landing page, they feel redundant since the surrounding copy already provides that context.

cc @annezazu

[annezazu]

Great call. I think that makes a lot of sense.

[jasmussen]

I quite liked the outro, so I've tentatively kept that as a nice endcap to say "the video is done". Putting the last touches here, WordPress/wporg-main-2022#506, but great points, I removed the intro text. Let me know how that sounds!

[jasmussen]

Closing as wrapped!