Tutorial - Command Palette

[courtneyr-dev]

Topic Description

This short video tutorial provides an overview of the command palette feature in WordPress 6.3. It demonstrates how to access the command palette, explores its benefits, and showcases the available commands. Participants will learn how to use the command palette to enhance their workflow in the Site Editor.

Related Resources

• https://make.wordpress.org/core/2023/05/17/command-center-request-for-feedback/

To see the most up-to-date list, please view the files here. Of note, there is a current conflict as this keyboard shortcut is already in use so, depending on what’s in focus, the Command Palette may not be invoked.

Visuals: image, video demo.

Adoption approach: You can add your own commands to the interface with documentation available here.

Key Make Posts/GitHub/Trac Issue(s): Discussion on “Command Center” naming (50925), Command Center: Quick search for jumping to other pages or templates in the editor (48457), Mapping contextual commands (50407), Developer Note for 6.3

Guidelines

Review the team guidelines.

Tutorial Development Checklist

• Vetted by instructional designers for content idea
• Provide feedback of the idea
• Gather links to Support and Developer Docs
• Review any related material on Learn
• Define several SEO keywords to use in the article and where they should be prominently used
• Description and Objectives finalized
• Tutorial created and announced to the team for Q/A review
• Tutorial reviewed and ready to publish
• Tutorial submitted and published to WPTV
• Tutorial published on WPTV
• Tutorial captioned
• Tutorial created on Learn.WordPress.org
• Tutorial post reviewed for grammar, spelling, etc.
• Tutorial published on Learn.WordPress.org
• Tutorial announced to Marketing Team for promotion

[courtneyr-dev]

Suggested script:

[Opening scene: Visual of a WordPress website being edited in the Site Editor]

Narrator: "Welcome to this comprehensive video tutorial on the command palette in WordPress 6.3. In this 5-minute video, we'll explore the command palette in depth and discover how it can revolutionize your Site Editor experience."

[Transition: Show the command palette interface]

Narrator: "To access the command palette, simply open the Site Editor and use the keyboard shortcut Cmd+k on Mac or Ctrl+k on Windows. You can also find it in the sidebar of the Site View by clicking on the search icon or in the Title Bar of the Edit View."

[Transition: Explore the interface and commands]

Narrator: "Once you open the command palette, you'll see a list of available commands. Let's dive into some of the useful commands you can find in the palette."

"Open Styles: This command allows you to quickly open the Style editing interface, where you can customize the styles of your website. From colors to typography, easily tweak the visual aspects of your site."

"View template parts: With this command, you can easily access a list of all template parts used in your website. Template parts are reusable components, and this command enables you to manage and modify them conveniently."

"Add Custom CSS: If you want to directly open the CSS field in Styles, this command provides a shortcut to do so. It's perfect for those moments when you need to apply specific customizations to your site's design."

"Add a new page: Need to create a new page quickly? This command allows you to do just that. With a few keystrokes, you can set up a new page and start adding content right away."

[Transition: Highlight the time-saving benefits]

Narrator: "Now let's talk about the benefits of the command palette. By providing quick access to frequently used actions, the command palette streamlines your workflow in the Site Editor. Instead of navigating through multiple menus and settings, you can execute commands with a few simple keystrokes, saving you valuable time and effort."

[Transition: Demonstrate the efficiency in action]

Narrator: "Let's see how the command palette works in practice. Imagine you're editing a page in the Site Editor, and you want to apply a custom CSS rule. Instead of searching through various menus, you can simply open the command palette, type 'Add Custom CSS,' and hit enter. The CSS field in Styles will open instantly, allowing you to add your custom code without any unnecessary steps."

[Transition: Show additional commands and their functionality]

Narrator: "In addition to the commands we've discussed, the command palette offers a wide range of actions to enhance your editing experience. Here are a few more notable commands you can explore:

Toggle settings sidebar: Quickly show or hide the settings sidebar to maximize your workspace.
Toggle block inspector: Easily enable or disable the block inspector to inspect and manage individual blocks.
Toggle spotlight mode: Focus on a specific element or block by dimming the rest of the interface.
Toggle top toolbar: Show or hide the top toolbar for quick access to frequently used features.
Toggle code editor: Switch between the visual editor and the code editor for more advanced customization options.

Feel free to experiment with these commands and discover how they can further streamline your editing process."

[Closing scene: Recap the key points]

Narrator: "In conclusion, the command palette in WordPress 6.3 is a game-changer for the Site Editor. With its quick access to frequently used actions and commands, it empowers you to work more efficiently and save valuable time. Take advantage of the command palette to customize styles, manage template parts, add custom CSS, create pages, and so much more."

[End screen: Show the WordPress logo and relevant links for more information]

Narrator: "For more information and resources on the command palette, check out the links provided in the description below. Thank you for watching!"

[End of video]

[westnz]

I would like to pick this up. I have deleted the duplicate copy I accidentally created.

[westnz]

Resource: https://make.wordpress.org/core/2023/09/12/core-editor-improvement-commanding-the-command-palette/

[westnz]

Thank you for the helpful script you added, Courtney!

[westnz]

Command.palette.mp4

[github-actions]

This content is ready to be reviewed. Please follow the steps listed under Guidelines for reviewing content. Thank you for your contribution! ✨

[courtneyr-dev]

6.4 Visuals: before and after design visual, demo of new commands.
Adoption approach: N/A
Key Make Posts/GitHub/Trac Issue(s): Core Editor Improvement: Commanding the Command Palette

[TinaCollier]

Hiya @westnz ,

Thank you for sharing this tutorial. I think this review of the command palette will be extremely helpful to a lot of users and provide them the opportunity to be more efficient in their work. I like that you reviewed several commands, such as "toggle", "preview", and "css", saving the user time on finding the related tabs in the sidebars. Your visuals matched well with your script and the video was easy to follow. Some thoughts I had during the tutorial:

1. I would've liked to see Objectives at the beginning of the video like the other tutorials. The objectives could look something like:

• What is the command palette
• How to access the command palette
• Command palette uses and capabilities
• Benefits of the command palette

2. You talk about the keyboard shortcuts at the end of the tutorial. It might be prudent to mention this earlier in the tutorial as it is an important resource.

I like that this is a quickly digestible tutorial. Thank you for sharing it!

Tina

[westnz]

Hey @TinaCollier

Thank you for the feedback! I will add those objectives 👍 I will check to see if I can add the keyboard shortcuts earlier in the tutorial.

[quitevisible]

Great tut as usual @westnz . Wish I'd seen this a few weeks ago!

• The only issue I saw was that the word 'frequently' was misspelled on the card around the 2:30 mark.

• Also, I'm assuming there's no central list of commands anywhere in dev docs, since it looks like this feature is dynamic and changes/grows constantly?

Good info and nice little trick that needs to get worked into my toolbox.

[westnz]

Thank you @quitevisible! It's definitely a feature I will be using a lot as well!

[peiraisotta]

Tutorial Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• min 2:32 in the slide we read frueqently instead of frequently
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

[catederosia]

Tutorial Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• just "fruequently" at 2:31
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Leave an additional comment below with feedback. You can also share what you liked about this Tutorial.

[westnz]

Thank you very much, @catederosia and @peiraisotta

@catederosia, are you still in the process of ticking off the checklist?

[catederosia]

@westnz Just finished. All good, spelling issue aside.

[priyanshi-vijay]

@westnz I've checked out the tutorial you mentioned, and I found it really helpful. The only thing I noticed is a spelling mistake at 2:29 in one of the slides where "frequently" is misspelled.

[westnz]

Many thanks @priyanshi-vijay

[westnz]

This tutorial will be ready for publication once 6.4 is released.

[westnz]

Published: https://learn.wordpress.org/tutorial/working-faster-with-the-command-palette/