WordPress.org/news post on Site Editor tools

[annezazu]

Comment

As part of helping folks get comfortable with and excited about the Site Editor, I wanted to kick off a wordpress.org/news post that goes over at a high level some site editor "tools" with links for folks to dig in further and quick featurette style videos. These features add up quickly, especially over the course of a couple of releases, and it's wise for us to group them together so folks can see all they can do from time to time outside of release related announcements.

Here's a VERY early draft of the content in an outline form as I begin filling things in: https://docs.google.com/document/d/1IpWzhendgS6QzGF3yl8IbS_fOUlLUqqUn9DRMfxnu_I/edit?usp=sharing

I can likely make some decent videos or can pull from prior resources but expect I'll need some design assistance and can track that down.

Let me know what you all think and what might be needed! I'd love to do more of these product style posts in the future building on my experience of writing these Core Editor Improvement posts in order to bring the information to a larger audience.

[annezazu]

Video Assets

Done

• Command Palette. Reuse from this post.
• Patterns. Reuse from the 6.4 featurettes (will just need to crop it/edit it).

Need to create

We have prior videos for this but don't have them in a screen studio format so we'll need to create. I'll edit this comment as I create them hopefully today/tomorrow:

• Shortcuts for applying styles

styling.options.mp4

• Style Book

Style.Book.mp4

• Distraction free mode + preview different sizes

Site.Editor.with.distraction.free.and.preview.mp4

[annezazu]

Messaging some designers who worked on 6.4 assets for a review of the above. For now, I'll focus on finalizing copy! Help welcomed.

[annezazu]

Copy is also in a place for a review at this stage 💥 I added a few additional ideas below but am not sold on them being included for now. Would love to know what folks think.

[annezazu]

Got amazing feedback from Joen who I DM-ed for help and to get into the nitty gritty. Passing it on here:

Some notes on the videos:

• Looks like there’s a 1px gray border on top of most of these. You can use the crop tool to maybe crop one more pixel from the top to omit the browser.
• The “desktop background” is good and minimalist, but it could be even more minimalist. Yet it’s still contrasty enough to grab some attention rather than fade into the background.
• An easy fix is to either use a neutral gray color, or even a darker version of the dominant color in the video itself. For example you might use a darker blueberry for the first video.
• Be careful with the zooming so it isn’t disorienting. In general I find that the automated zooms are nearly always insufficient, and I always replace them with manual zooms.
• Try to have a zoom action tied to, and in sync with, a mouse cursor movement. That is, sync to when the cursor moves to a particular interface you want to highlight, zoom in.
• Syncing the zoom to the cursor movement is relevant also around 13s, where instead of “zoom on menu” then cursor move, you could have both at the same time.
• Specifically in the first video, around the 3s mark, you zoom in first on the inspector, then down the inspector to the typography panel. This is a bit disorienting (I’ve got some motion sickness so it’s keenly on my mind). What you could do is a manual zoom to the top right corner, have it locked there, and have no panning. You might just need to not zoom in that much, maybe a 150% zoom rather than 200% zoom.
• In general don’t zoom in too much. Around 36s, you zoom in and make a padding change, but the padding change in the canvas is invisible because we only see the inspector. This may be a case where you just don’t zoom.
• Related to padding, the padding visualization is blue, and therefore hard to see on the dark blueberry background you have. If padding is something you want to show, it’d be useful to have a different content color.

Careful with the cursor. I find that the default cursor size is HUGE at 3x. I only show it at 2x.

• Set its speed to “Rapid”, lest there will be cases where the hover style of buttons in the interface become out of sync with the cursor movement.
• In general, I wouldn’t use the cursor to highlight areas of the interface, like you do at around 9s — through zooms, and through the clicks you make in the typography panel, the relationship to what you’re doing becomes implied.

Some content specifics.

• At the end of the styling video, you zoom out after having applied the styles globally. Presumably this is to see the snackbar in the bottom left corner that affirms those styles are now global. But unfortunately that snackkbar is hard to see because the content below the dark blueberry is black and it blends in. Outside of changing the colors, or even zooming to the snackbar, you may just want to end the video with clicking that button, keeping the zoomed in view, and just letting that be the bookend of the video.
• In the style book video, looks like there’s a GIF or video playing at the start in the bottom left. Initially I wasn’t sure if this was some weird screen recording mirror effect bug. You can maybe start the video zoomed in.
• Related to the synced zooming, you could maybe start the zoom out at the exact moment when you click the style book button, so that the zoom out feels a direct result of that click. Or you could do a pan left — so instead of a zoom out, to then zoom in again on the tabs, you stay at the same zoom level, now we’re just looking at a different part of the screen. This is again to avoid motion sickness from too much zooming.
• In the last video, occasionally you’re typing some things, but the typing is obscured by the cursor. A smaller cursor will help, but just for future videos it may be useful to select the text then move the cursor away, and then start typing.
• At 29s I’m assuming you press ⌘I to make the text italic. Be sure to enable Screen Studio’s “shortcut visualization” feature, so the shortcut keys are shown in an overlay.
• Similar zooming feedback round 59s — start the zoom out to show the mobile effect at the same time as the click, don’t wait to zoom out.
• In general, shorter is better, if you can keep the videos around 30s or at least under one minute, I find them to be overall more digestible.

None of this feedback is meant to be blocking. IMO these can go out, and hopefully the feedback above can serve for future videos. Hope this was helpful. Thanks Anne!

I am so stoked to have this kind of granular feedback and am going to take some time to tweak rather than re-record as nearly all of this can be done within Screen Studio, the software I'm using. Stay tuned for updates. It might be next week at this rate as I'm getting roped into helping my mom :)

[thetinyl]

Nice piece, @annezazu! I've made some suggested edits and added thoughts and comments for your consideration. (All are directly in the doc.)

[annezazu]

New videos based on the feedback above! What do you all think?

Shortcuts for applying styles

Changes:

• Fixed border around the top by cropping in more.
• Added more manual zooms to better frame the flow.
• Left the final zoom in on the "apply globally" button to finish the clip out.
• Changed background color to have it stand out less (darker version of the blueberry color on screen).
• Added in keyboard shortcuts to show the changes made.

Styling.options.take.2.mp4

Style Book
Changes:

• Fixed border around the top by cropping in more.
• Added more manual zooms to better frame the flow.
• Changed background color to have it stand out less and match the ending dark grey.

Style.book.take.2.mp4

Distraction free mode + preview different sizes

Changes:

• Fixed border around the top by cropping in more.
• Added more manual zooms to better frame the flow.
• Changed background color to have it stand out less and match the style book video.
• Added in keyboard shortcuts to show the changes made.
• Sped up the first part of the video to save time (1.4x speed).

Distraction.free.and.preview.take.2.mp4

[annezazu]

This post is feeling 95% of the way there. I added in more title options, finished the new videos, resolved all feedback, and added in a List View section. The remaining things to do are:

• Finalize any additional text changes (feedback still welcome).
• Finalize the title of the post. I'm leaning towards "Quick Guide to Site Editor Tools".
• Get the post into WP.org/news!

Here's the featured image I think we should use (if we agree with the title):

I need help at this point to move forward on the above, in particular getting the post into WP.org/news, including the videos. Let me know how I can best help with this (happy to put things in a public google drive account, DM folks the videos, etc).

For now, I'll switch focus to pushing forward this next post #341 cc @eidolonnight

[annezazu]

Shared in slack but public preview link for the post is here: https://wordpress.org/news/?p=16658&preview=1&_ppp=37426c60d9

Thanks to quick thinking by Nicholas, going with the following title and featured image:

I forgot I had access to WordPress.org/news 🤦🏼 Coordinating a bit with social to figure out when makes sense to push this out. Sounds like a push can be lined up for Friday and Saturday!

[annezazu]

And it's live: https://wordpress.org/news/2023/12/leap-into-2024-with-these-site-editor-tools/

Amplification issue now opened: #342

Thanks for the help, folks ❤️‍🔥