• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Foodie Pro
  • FAQ
  • Bloggers
  • Layouts
  • Recipes
  • Contact
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Bloggers
  • Recipes
  • FAQ
  • Contact
  • Subscribe
    • Terms & Conditions
    • Privacy policy
    • Disclaimer
    • Facebook
    • Instagram
    • Twitter
  • subscribe
    search icon
    Homepage link
    • Bloggers
    • Recipes
    • FAQ
    • Contact
    • Subscribe
      • Terms & Conditions
      • Privacy policy
      • Disclaimer
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » Breakfast

    Example Post Showing Block Editor ("Gutenberg") Styling

    Published: Dec 11, 2019 · Updated: Jun 9, 2022 by Feast Design Co. · This post may contain affiliate links · 2 Comments

    Paleo

    This is a demo post exploring the different styles in the block editor (codenamed "Gutenberg"). This is just a development post - we haven't yet released this publicly.

    Here is some bold text.

    Here is some italic text.

    Here is some underlined text.

    Jump to:
    • This is an H2
    • Simple Image Block
    • New Gallery Block
    • Columns
    • Fractions
    • Acronyms
    • Unordered List
    • Ordered List
    • Quotes
    • Overlay Block

    Learn the best practices for optimizing images!

    This is an H2

    Most of your content should be contained in H2 subheadings.

    In version 4.0.0 and later, body font-sizes have been standardized across all themes at 16px. Headings have been standardized using "em", meaning a multiple of the 16px body-font size.

    For more details, see this blog post.

    This is an H3

    H3 can be used to sub-categorize your content under H2 headings. You typically won't use these when making recipes posts.

    This is an H4

    H4 is relatively uncommon, except in technical documentation. As a food blogger, anything you consider using for H4 should be either bumped up to H3, or simple paragraph text.

    This is an H5

    No real application for this outside of technical and legal documents.

    This is an H6

    Why even bother at this point?

    Simple Image Block

    Image captions are tied to images themselves, adding context for search engines and your visitors!

    New Gallery Block

    We don't recommend using the gallery block due to poor accessibility support.

    This is an image caption
    Add captions is simple!
    You can annotate your images here

    Instead, use the WordPress-core "columns" block and insert normal images into the columns:

    Columns

    inserting a column block in the WordPress editor

    When inserting columns, you'll be given the choice of different default column widths.

    For a similar mobile and desktop experience, use 50/50 for normal page layouts (720 / 2 = 360), and 33/33/33 for full-width page layouts (1080 / 3 = 360).

    Mobile is the most important, making up approximately 75% of pageviews for most food blogs in 2018 and on.

    For process shots, you can stack an image and text:

    Instruction #1

    Instruction #2

    paleo category image

    Instruction #3

    gluten free category image

    Instruction #4

    Make sure to leave "stack on mobile" enabled in the columns block:

    Fractions

    The Feast Plugin contains an enhancement to convert text-based characters to fractions, so that you get ½ instead of 1 / 2 and ¼ instead of 1 / 4.

    • ½
    • ⅓
    • ¼
    • ⅔
    • ¾
    • ⅕
    • ⅖
    • ⅗
    • ⅘
    • ⅙
    • ⅚
    • ⅞
    • ⅛
    • ⅜
    • ⅝

    Acronyms

    The Feast Plugin contains an enhancement to convert recipe acronyms to improve screen reader accessibility, so that it reads the word teaspoon instead of "tee ess pee" and tablespoon instead of "tee bee ess pee".

    Unordered List

    • This is an unordered list block
    • This is the second item in the list
    • Use unordered lists to create lists in which the sequence isn't important

    Ordered List

    1. This is an ordered list block
    2. It's good to itemize sequential steps or items in an ordered list
    3. Using lists to break up your content and make it easier to parse is a good user-experience practice

    Quotes

    Blockquotes are a great way to emphasize an important piece of your content.

    This is a pullquote

    You can also turn the blockquote into a citation by providing a "citation". This is a great way to reference content on another site.

    Edgar Allan Poe

    Overlay Block

    This is a "cover" block - an image block with text overlay

    More Breakfast Recipes

    • Get the Garnish Intensive Discovery Workshop!
    • Put Your Best "Food" Forward with A Great Theme
    • Download Your Free Checklist Right Here!
    • Designed for recipe sites

    Reader Interactions

    Comments

    1. Skylar Bowker

      March 04, 2020 at 6:03 am

      This is a comment

      Log in to Reply
      • Skylar Bowker

        March 04, 2020 at 6:03 am

        This is a reply

        Log in to Reply

    Leave a Reply Cancel reply

    You must be logged in to post a comment.

    Primary Sidebar

    We also have the full width modern homepage demo.

    Welcome, Y'all!

    headshot of Shay Bocks

    You've got a divine gift designed to serve the world. It's a special something – small and mighty – that merges passion with purpose, and purpose with joy.

    This simple yet powerful belief is why I've built my design business out of a desire to serve, and why I feel most alive when I'm taking your business, blog, or product to places that soar.

    More about me →

    This demo site has enhanced customizations from the Feast Plugin that are not included in the theme. For a demo site that doesn't use the Feast Plugin, visit FoodieProClassic.com

    FEATURES

    Genesis 3.3 + HTML5 Markup + Mobile Responsive! Customizer options for color & typography, Recipe card styling, Widgetized Home & Recipe pages, Upload your own custom background, Upload your own header design, Create your own custom menus, Featured Images, Fixed width design

    theme sale, click to view offer

    We recommend:

    • Hosting from WPEngine or Bigscoots
    • Domains from NameCheap
    • Recipe Plugin from WP Recipe Maker or Tasty Recipes

    Popular

    • Get the Garnish Intensive Discovery Workshop!
    • Put Your Best "Food" Forward with A Great Theme
    • Download Your Free Checklist Right Here!
    • Recipe Plugin Makes Recipe Publishing Easy (see inside!)

    You can duplicate your homepage's trending recipes section in the sidebar to reinforce the internal linking.

    We no longer recommend using a search bar, newsletter form or category drop-down menu in the sidebar. See the Modern Sidebar post for details.

    If the block editor is not narrower than usual, simply save the page and refresh it.

    Footer

    ↑ back to top

    About

    • Privacy Policy
    • Disclaimer
    • Terms & Conditions
    • Accessibility Policy
    • Tutorials
    • Customization

    Newsletter

    • Sign Up! for emails and updates

    Contact

    • Contact
    • Services
    • Media Kit
    • FAQ

    Brand + web designer. I’ve built my design business out of a desire to serve, and why I feel most alive when I’m taking your business, blog, or product to places that soar. 

    Let's dig in →

    Copyright © 2023 Foodie Pro on the Foodie Pro Theme with the Feast Plugin