• 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 » Productivity

    Block Editor Styling (Gutenberg)

    Published: Dec 2, 2019 · Modified: Aug 16, 2020 by Skylar · 2 Comments

    This tutorial features the Feast Plugin, which enhances and extends your theme to improve SEO, pagespeed, accessibility and user experience.

    The block editor styling makes the post writing experience match the output on the front-end more closely.

    As of August 2020, this is enabled automatically for all sites.

    Jump to:
    • Enabled
    • Disabling

    Enabled

    • styling for FSCI block
    • styling for FSRI block
    • styling for Advanced Jump To block
    • make the content width match the theme (720px)
    • make the footer page match the theme (1140px)
    • match the heading sizing in the theme
    • update the font size using the Feast Plugin's Edit Body Font Size
    • fix a content-flow issue in some browsers

    As of version 4.5.2 (August 2020), Block Editor Styling is automatically enabled. This is because the Simple Recipe Index block and Simple Category Index block require the styling to display properly. It also simplifies the plugin onboarding process.

    pre-updated
    after styling, the content is wider, font sizes more accurately reflected, and headings match the front-end

    Disabling

    The block editor styling can be disabled by creating a Code Snippet with the following:

    add_filter( 'feast_block_editor_styles_enabled', '__return_false' );

    More

    • Productivity
    • Linking
    • Before + After
    • Modern Previous + Next

    Reader Interactions

    Comments

    1. Vanessa Raymond says

      May 30, 2022 at 11:18 am

      If I want to place an image on the modern homepage and in the modern footer that is not a recipe, what are the dimensions I need to use in order for it to show clear?

      Reply
      • Skylar says

        May 30, 2022 at 11:51 am

        Generally, you'll want to upload at 720px and insert at 360px for mobile optimization, and make sure it's below the fold so that it lazyloads.

        For desktop optimization on a full-width homepage you want to upload at 1140px x 2 = 2280px, and insert at 50%, but this goes against our best practices and I wouldn't recommend it.

        Reply

    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.