Block Editor Tutorials

The block editor isn't a seamless experience, but it's approaching stable and we expect it to be fully usable by the end of 2020. Come 2021, we expect to see developments that make it a must-use.

Note: you don't need to use the block editor site-wide. You can use it on a page-by-page basis. Go into Admin > Settings > Writing

Customers of the Feast Plugin are free to request tutorials for how to do things in the block editor, and we'll begin adding them here.

IMPORTANT: You do not need the "Gutenberg" plugin and should not have it installed. You also don't need to "Classic Editor" plugin - your posts will be edited using the built-in "classic editor block" until you use the "Convert to blocks" function.

For each topic, we'll create a short video and list out the main points below it.

Converting to the block editor

• convert a classic editor post to the block editor
• convert the "classic editor" block into individual block editor blocks

Edit as HTML

• Edit an individual block as HTML
• Edit the post as HTML
• Add rel="nofollow" tag to links

Post settings

• Post settings including permalinks, featured images, categories, Yoast and WP Rocket
• When no block is selected, you have access to the post settings, similar to the classic editor
• Note that the sidebar changes to a block settings sidebar, when you've selected a block
• Avoid editing blocks using the sidebar whenever possible - any changes down the road would have to be done manually
• Make site-wide changes via the "Additional CSS" instead of visually modifying individual blocks on individual posts

Additional settings sidebars

• There are additional sidebars for plugin/application-specific settings
• We do not recommend editing post settings post-by-post using the block editor sidebar
• You can disable the breadcrumbs and footer on a post-by-post basis for specific pages (eg. homepage, recipe index, about, contact, landing/sales page) if needed, in the Genesis settings sidebar

Applying theme styling to the block editor

Video TBD.

• Use the Feast Plugin to add block editor styling to more closely match the theme
• Currently testing importing + using Google Fonts to match the front-end
• The customizer settings are built for the front-end only and are not compatible with the block editor - we'll release block-editor compatible settings to the Feast Plugin

Resolving broken images

• If thumbnails are changed or deleted, the image in the block editor can appear broken
• The image should still appear on the front-end of the website thanks to the srcset attribute
• To fix this, select the image block and select "Full Size" from the right-side attributes for the image block
• As a best practice, insert images at full size and let the browser load whatever image it deems best from the srcset

Reusable Blocks

Video TBD.

• Reusable blocks should be used whenever you have the same piece of content repeated across many posts
• Updating the reusable block changes that piece of content across all posts that contain that block
• This makes it easy to delete a piece of content across all your posts if it requires removal at some point
• Great use for this is the feast_advanced_jump_to shortcode

Changing the page layout

• We only recommend using the content-sidebar layout, with this being the default
• As a best practice, don't change the page layout on a per-post basis

Styling

• Visually changing the styling of elements should be done exclusively using CSS so that it applies site-wide
• This is because when (not if) you need to update styling to comply with future best practices, you will need to go into each and every single post and manually remove/update that styling
• Having inconsistent styling within a post, and between posts, is unprofessional
• Do not edit styling using the right-hand side menu

Styling with Custom Classess

• If applying styling to multiple posts/pages, it's better to create a custom CSS class than to edit each individual element's attributes
• To do this:
  1. select a block and assign a class to it
  2. go to the "Additional CSS" and apply the styling
• If you're only creating this styling for a specific page (instead of repeatedly across the site) like the Modern Homepage, Recipe Index or "About Me" page, you can use the block editor's inline styling editor

Display Trending Posts

• Create a category named "trending" or "popular" and on the category page, set Yoast > Advanced > Allow search engines to show this Category in search results? to No
• In Google Search Console, show the last 30 days pages sorted by clicks
• Open the top 10 pages individually, and assign them to the "trending" category
• Remove any pages that are no longer in the top 10
• Use FSRI shortcode to display them on the homepage: fsri category="trending" posts_per_page="8"

Yoast block editor tutorials

Yoast has a number of free block editor tutorials available as well.