Foodie Pro

  • Recipes
    • Breakfast
    • Lunch
    • Supper
  • FAQ
  • Contact
  • Subscribe
menu icon
go to homepage
  • Recipes
    • Breakfast
    • Lunch
    • Supper
  • FAQ
  • Contact
  • Subscribe
subscribe
search icon
Homepage link
  • Recipes
    • Breakfast
    • Lunch
    • Supper
  • FAQ
  • Contact
  • Subscribe
×
Home → Recipes → Breakfast

Example Post Showing Block Editor ("Gutenberg") Styling

Modified: Apr 30, 2025 · Published: Dec 11, 2019 by Feast Design Co. · This post may contain affiliate links · 2 Comments

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

Here is some bold text.

Here is some italic text.

Here is some underlined text.

Jump to:
  • This is an H2
  • Simple Image Block
  • Search
  • Find what you're Looking For:
  • New Gallery Block
  • Columns
  • Process shots
  • Fractions
  • Acronyms
  • Unordered List
  • Ordered List
  • Top Tip
  • Featured review block
  • Quotes
  • Recipe
  • Beef Pho Recipe
  • Image
  • Buttons
  • FAQ
  • Modern Previous + Next
  • 💬 Comments

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

We do not recommend using image captions.

Search

Find what you're Looking For:

Browse full recipe index →

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.

Process shots

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:

Here's an example that's not stacked on mobile:

paleo category image

Instruction #3

gluten free category image

Instruction #4

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

2-columns:

  • This is an unordered list block
  • This is the second item in the list
  • This is the third item in the list
  • This is the fourth item in the list
  • This only shows on desktop
  • Mobile becomes single-column

3-columns:

  • This is an unordered list block
  • This is the second item in the list
  • This is the third item in the list
  • This is the fourth item in the list
  • This only shows on desktop
  • Mobile becomes single-column

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

2-columns:

  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
  4. This is a 2-column layout for ordered lists, on desktop only

Top Tip

If you're going to make this recipe, make sure to follow this top tip!

Inline heading

Showcase a featured tip or suggestion using the Inline Heading style for group blocks!

Featured review block

I got so many compliments from this!!

Quotes

Default theme style block quote.

Left bar style block quote

TXT Message style block quote

TXT Message style block quote, this alternates on the right side

Foodie Pro style block quote

Cook'd Pro style block quote

Seasoned Pro style block quote

I loved this recipe!

- client

I loved this recipe! The tip to let it sit for 20 minutes before cooking made all the difference!

Amanda

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

Recipe

pho ingredients on a wood cutting board

Beef Pho Recipe

This recipe is made using WP Recipe Maker, not included with theme purchase. 

5 from 1 vote
Print Recipe
Pin Recipe

Prep Time 25 minutes mins
Cook Time 30 minutes mins
Total Time 55 minutes mins

Cuisine Vietnamese

Servings 2 people
Calories 683 kcal

Ingredients

  

  • 200 g Steak flat iron
  • 3 stalks Green Onion
  • 24 g Beef Pho Concentrate
  • 1 Lime
  • ¼ cup Basil fresh
  • 1 cup Cilantro
  • 1 Chilli Pepper
  • 454 g Bean Sprouts
  • 200 g Vermicelli brown rice
  • 14 g Sriracha Sauce
  • 14 g Hoisin Sauce

Instructions

 

  • Plastic wrap the flat iron steak and stick it in the freezer to harden up (it shouldn't freeze) and make it easier to slice
  • Thinly slice the green onions and chili pepper, cut lime into wedges, and roughly chip the cilantro and basil
  • Prepare the broth by combining the pho concentrate with 4 cups of water and bringing the mixture to boil, then reducing to simmer
  • Remove the flat iron steak from the freeze and cut into thin slices, following the grain. Add steak slices to serving bowl.
  • Bring another pot of water to boil, add vermicelli and cook for 3 minutes (or until tender), then strain.
  • Add the noodles to the serving bowl with beef, top with bean sprouts, and pour the simmering hot broth on top of everything. The beef should cook within a few minutes, and will be done when it's no longer red.
  • Add the green onions, chili pepper, basil and cilantro as desired, and add lime. 
  • The soup can then be flavored with as much or as little sriracha and hoisin sauce as desired.

Notes

Traditionally, the broth is made from beef bone marrow, but to save time we'll use a concentrate.

The time it takes to cook the vermicelli depends on whether you're using thin or thick, but will generally by 3-5 minutes and can be done right at the end.

Image

Polaroid style:

Book cover style:

Buttons

This is a button with no underline
This is a button with an underline

FAQ

The Yoast FAQ block is useful for formatting reader questions

This is a text Question

This is an answer.

This is a question

This is an answer

Another question

Another answer

Modern Previous + Next

The Modern Previous + Next showcases your posts that are in the same parent category as the current post:

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

Comments

  1. Skylar Bowker says

    March 04, 2020 at 6:03 am

    This is a comment

    Log in to Reply
    • Skylar Bowker says

      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.

headshot of Shay Bocks

Welcome, Y'all!

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

HTML5 Markup + Mobile Responsive!

theme sale, click to view offer

We recommend:

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

Popular

  • Example Post Showing Block Editor ("Gutenberg") Styling
  • Get the Garnish Intensive Discovery Workshop!
  • Put Your Best "Food" Forward with A Great Theme
  • Download Your Free Checklist Right Here!

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.

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