• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Layouts
    • Content/Sidebar
    • Full Width Content
    • Column Classes
  • Recipes
  • Bloggers
  • FAQ
  • Contact

Brunch Pro

menu icon
go to homepage
  • Bloggers
  • Recipes
  • FAQ
  • Sample
  • Subscribe
    • Facebook
    • Instagram
    • Pinterest
    • Twitter
  • search icon
    Homepage link
    • Bloggers
    • Recipes
    • FAQ
    • Sample
    • Subscribe
    • Facebook
    • Instagram
    • Pinterest
    • Twitter
  • ×

    Home » Brunch

    Published: Dec 11, 2018 · Modified: Mar 21, 2023 by Skylar Bowker · This post may contain affiliate links · 3 Comments

    Block Editor (Gutenberg) Styling

    Jump to Recipe Print Recipe

    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.

    Jump to:
    • This is an H2
    • Simple Image Block
    • New Gallery Block
    • Columns Block
    • Lists
    • Quick and Easy French Toast
    • Unordered List
    • Ordered List
    • Fractions
    • Acronyms
    • Group block
    • Quotes
    • Overlay Block

    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 need to 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

    New Gallery Block

    We do not recommend or support the use of galleries due to questionable implementation that seems to be changing regularly.

    Columns Block

    The columns block is the correct solution to process shots, as it uses standard images and paragraphs:

    This is description #1

    This is description #2

    Lists

    Here's some custom list styling from the Feast Plugin:

    • Item 1
    • Item 2
    • Item 3

    Testing will be needed to see what sizes are loaded for various devices (desktop, tablet, mobile). Mobile is the most important, making up approximately 75% of pageviews for most food blogs in 2018 and on.

    Too many images won't slow down your page.

    Print Pin
    5 from 1 vote

    Quick and Easy French Toast

    Calories 99kcal

    Ingredients

    • 1 egg
    • 1 teaspoon pure vanilla extract
    • ½ teaspoon cinnamon ground
    • ¼ cup milk
    • 4 slices of bread

    Instructions

    • Beat egg, vanilla and cinnamon in shallow dish.  Stir in milk.
    • Dip bread in egg mixture, turning to coat both sides evenly.
    • Cook bread slices on lightly greased nonstick griddle or skillet on medium heat until browned on both sides.

    Notes

    Be sure to heat up your pan before adding the bread.  If your pan is too cold, the bread will cook too slowly and will be heavy.

    Nutrition

    Serving: 1slice | Calories: 99kcal | Carbohydrates: 14g | Protein: 4g | Fat: 3g | Sodium: 158mg | Fiber: 1g

    Unordered List

    Unordered lists helps you list out items in no particular order, such as when listing ingredients.

    • 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

    Order lists are used to list out a sequence of items, such as instructions.

    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

    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".

    Group block

    You can group blocks together into a group block!

    Quotes

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

    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 Brunch

    • coffee and notepad on a marble table
      Change Colors & Fonts with the Customizer
    • whole and halved lemons on a marble table
      Brought to you from the makers of Foodie Pro
    • plant in a wicker basket
      Pagespeed Optimization Ready
    • Sample Post with Threaded Comments

    Reader Interactions

    Comments

    1. Skylar Bowker says

      March 04, 2020 at 10:31 am

      This is a comment.

      Log in to Reply
      • Skylar Bowker says

        March 04, 2020 at 10:31 am

        This is a reply.

        Log in to Reply
    2. Susan says

      February 17, 2022 at 10:13 pm

      5 stars
      Testing the comments section

      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.

    Shay Bocks is a brand + web designer creating clear, compelling sites for food & lifestyle bloggers taking the leap from blog-to-business! Learn more...

    We recommend:

    • Hosting from BigScoots
    • Domains from NameCheap
    • Recipe Plugin from WP Recipe Maker, or Create

    This demo site has enhanced customizations from the Feast Plugin that are not included in the theme.

    • Block Editor (Gutenberg) Styling
    • Check out what Brunch Pro can do!
    • Sample Post With an Unordered List
    • coffee and notepad on a marble table
      Sample Post With an Ordered List

    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

    As an Amazon Associate I earn from qualifying purchases.

    Copyright © 2023 Brunch Pro on the Brunch Pro Theme with upgrades from the Feast Plugin