• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home

    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

    default editor: classic editor and allow users to switch: yes
    These settings from the classic editor plugin allow you to change posts to the block editor one by one. See: converting to the block editor

    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.

    Jump to:
    • Converting to the block editor
    • Edit as HTML
    • Post settings
    • Additional settings sidebars
    • Applying theme styling to the block editor
    • Resolving broken images
    • Reusable Blocks
    • Changing the page layout
    • Styling
    • Styling with Custom Classess
    • Display Trending Posts
    • Yoast block editor tutorials

    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.

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.