• 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
search icon
Homepage link
  • Bloggers
  • Recipes
  • FAQ
  • Sample
  • Subscribe
×
Home » Brunch

Published: Dec 11, 2018 · Modified: Jan 31, 2024 by Skylar Bowker · This post may contain affiliate links · 3 Comments

Block Editor (Gutenberg) Styling

↓ Jump to 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.

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

Roundup word.

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
    WordPress Recipe Post
  • 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

Hey, I'm Skylar!

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

About me

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
  • coffee and notepad on a marble table
    WordPress Recipe Post
  • 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

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 © 2025 Brunch Pro on the Brunch Pro Theme with upgrades from the Feast Plugin