Gutenberg offers more flexibility, creativity, and efficiency in content creation. This guide aims to support the editorial team as we transition, helping you become comfortable and proficient with the Gutenberg editor.
1. Key Differences Between Classic and Gutenberg Editors
Block Structure: Gutenberg uses blocks, whereas the Classic Editor is one continuous text area. Think of blocks as individual building pieces you can move, edit, or delete independently. Customization: Gutenberg makes it easy to customize your layout. For example, you can easily add columns, buttons, and tables without using custom HTML or shortcodes. Reusable Blocks: If you frequently repeat a particular content structure, you can save it as a reusable block to streamline your workflow.
2. Understanding the Basics of Gutenberg
Gutenberg introduces the concept of "blocks." Each part of your post is a block -- whether it's a paragraph, image, list, or even a button. Here are some of the core blocks you'll use frequently:
Heading Block: To add headings and structure your content. Paragraph Block: For standard text content. List Block: To create bullet points or numbered lists, making content easy to read. Image Block: To add and format images. Quote Block: This is for emphasizing quotes within your content. Embed Block: To embed external media like YouTube videos or tweets.
3. How to Create a Post in Gutenberg: Step-by-Step
Step 1: Create a New Post: Navigate to Posts > Add New (With Gutenberg). This will open the Gutenberg editor. Step 2: Start Adding Blocks: Click the "+" button in the top left corner to add a block. You can search for the type of block you need, such as a paragraph, image, or list. You can also type "/" in any paragraph block to quickly add a specific block type. Step 3: Rearrange Blocks: To rearrange your content, you can move blocks up or down using the arrow controls or drag-and-drop them.
4. How to Use Zype Embeds with Shortcodes
Zype is a powerful video content management and we often need to embed Zype videos into our posts. In Gutenberg, you can easily add Zype embeds using shortcodes. Here's how to do it:
Step 1: Add a Shortcode Block: Click the "+" button to add a block, then search for "Shortcode." Select the Shortcode block. Step 2: Insert the Zype Embed Code: In the Shortcode block, paste the Zype embed code provided for the video you want to embed. The shortcode should look like this: . Step 3: Preview the Embed: Preview the post once the shortcode is added to see how the embedded video will appear. Note that the video may not render in the editor preview, but it will display correctly on the front end when published.
5. Required Publishing Checklist
Before publishing a post, it's essential to complete a few key steps to ensure consistency and quality across our content:
Select a Content Category (Required): Every post must have an appropriate content category selected. This helps organize our content and makes it easier for readers to find related posts. Fill Out Yoast Meta Data (Recommended): To optimize the post for search engines, it is highly recommended that you fill out Yoast Meta Data. Ensure the SEO title, meta description, and focus keyword are filled out correctly. Yoast will also provide recommendations to help you improve the post's SEO. Select a Featured Image (Recommended): Every post should have a featured image. This image will represent the post across the site, including on the homepage and category pages. Make sure to edit the image in the thumbnail editor to ensure it is high quality.
6. Tips for a Smooth Transition
Keyboard Shortcuts: Gutenberg has several keyboard shortcuts that can make your editing experience faster and more efficient. For example, typing "/" in a new block allows you to quickly choose a block type. Transforming Blocks: You can easily change one type of block into another. For example, you can turn a Paragraph block into a Heading block. Select the block you want to change and click the transformation option (a square icon with arrows) to choose a new block type. Practice in a Draft Environment: Experiment in a draft post without worrying about publishing. This will help you get comfortable with Gutenberg's interface. Use Reusable Blocks: Save time by creating reusable blocks for frequently appearing content, such as author bios or calls to action.
7. Additional Resources
Gutenberg Demo: https://wordpress.org/gutenberg/ Office Hours: We'll host office hours every Thursday to answer questions and provide hands-on support during this transition.
Transitioning to Gutenberg is an exciting opportunity to enhance our content capabilities. By embracing the block editor, we'll be able to create more dynamic, engaging posts that resonate with our audience. Remember, this is a learning process -- take your time, ask questions, and practice.