Once you have your Feast+ settings configured, it's time to start adding the new block patterns!
If you haven't been using Gutenberg editor or just need a refresh, we recommend reading through the WordPress block guide first.
Jump to:
- How to Use Block Patterns
- Grouping Blocks
- Homepage Setup
- Category Pages
- Recipe Index / Other Pages
- Posts
- Note: ads
- Applying your branded background
- Changing block background colors
- Removing the background color
- Feast+ Patterns
- Clickable Featured Recipe
- eBook Call To Action
- Top Tip
- Reader Review
- Table of Contents
- Custom List Styling
- Inline List
- Colored numbers
- Sidebar Author Bio
- Separator Styles
- Top 10 Styling
How to Use Block Patterns
You can find the Feast+ patterns in the block editor > [+] > Patterns > Feast Patterns section. Some of the patterns you'll find are:
- featured recipe
- full width search block
- about author
- tip box
- reader review
- instructions grid
We also have new pre-built pages to speed up the setup process! You can find the Feast+ pre-built pages in the block editor > [+] > Patterns > Feast+ Pre-built pages section. Some of the templates you'll find are:
- Homepage Layouts
- Recipe Index Layouts
- Link In Bio
- + more coming soon!
We recommend alternating between full width and non full width sections in order to visually break up the page.
Grouping Blocks
To take maximum advantage of Feast+, you'll need to group all your content into group blocks to define sections. This will create a cleaner layout, as well as allow you to apply the background color to any Feast+ pattern or pattern you create.
Note: Patterns you insert from the Feast+ library are already grouped. You do not need to regroup those unless you add a new element to them.
Selecting the group block provides you with styles that can be applied:
Homepage Setup
Note that for Feast+, you must use the full width homepage following the instructions here.
New! Two pre-built homepage options have been added to: block editor > [+] > Patterns > Feast+ Pre-built pages
Homepage H1
Your homepage H1 page title will inherit the background color you've assigned on the Feast+ Branding page. You can hide this banner by selecting "Hide page title (h1) in the editor sidebar.
Category Pages
To use the Feast+ patterns on category pages, you need to use the new Modern Categories.
We recommend using the "Before" option for the Modern Categories to make use of the full width layout blocks.
Recipe Index / Other Pages
You can use the Feast+ patterns on any full-width page you create! This includes pages like recipe index, about, contact, subscribe page, etc.
New! Two pre-built recipe index options have been added to: block editor > [+] > Patterns > Feast+ Pre-built pages
Make sure to use the Full-width layout option in the post editor.
Posts
While all Feast+ patterns "work" in posts, some patterns are designed more for the narrower width of posts than others. Here's a quick video on some tips and tricks when using blocks in posts.
Note: ads
Ad companies (should) exclude ads from being inserted within a group block. This is to provide control over where ads get inserted for content that shouldn't be split apart by ads.
However, this means that if you wrap large sections of content within a group block, you'll be preventing ads from being displayed and this will negatively impact your revenue.
Our designed used of the featured groups is for a single heading and paragraph, to draw attention to important information.
We do not recommend wrapping large sections of content within group blocks.
Applying your branded background
Depending on individual block design & its purpose, the background may or not be automatically applied.
If you would like to add a background to a Feast+ pattern that does not have one: Select the group block > Then select the Feast Full width style in the sidebar.
Note: You can use this background style on any group of blocks, whether a Feast+ pattern or your own set of grouped blocks. You just need to be using a group block in order for this Styles tab to appear.
Changing block background colors
You can now add your Feast+ branding palette to the editor color swatches by going into Feast+ Branding > Add my brand colors ot the block editor color palette.
Note that while these are "tied" to your branding swatches (meaning, they will change if you update your Feast+ color palette), you will be responsible for managing text accessibility when using these.
Removing the background color
To remove the background color, Select the group block > Then select the Default style in the sidebar.
Update April 2024: In light of the new Styles tab, we've depreciated the need to add manual classes to the Additional CSS field. If your backgrounds aren't removing, remove the feast-no-background or full-width-feature-wrapper class and use the Styles tab instead.
Feast+ Patterns
Now that you've learned the basics, this section will go over specific Feast+ patterns.
Featured Recipe Pattern
In the Block Editor > [+] > Patterns > Feast Patterns > Featured Recipe Pattern you'll find a pre-defined layout for featuring a specific recipe:
Clickable Featured Recipe
Once you insert the Featured Recipe Pattern, you can select the image and insert a hyperlink to the recipe:
Do not link to the media file or attachment page. Only link to your post.
eBook Call To Action
In the Block Editor > [+] > Patterns > Feast Patterns > eBook Call To Action Pattern you'll find a pre-defined layout for embedding a form.
NOTE: Different email providers will have different types of embed codes, so this may require some trial error. For Convertkit, we've found that their Inline > Clare style works well for this. To insert it, embed their HTML code. Note that form styling is not controlled by Feast+; you will need to use your email providers form styling to apply your branding colors.
Top Tip
In the Block Editor > [+] > Patterns > Feast Patterns > Top Tip Pattern you'll find a pre-defined layout for adding a tip box.
To change the icon, select the group block, then choose the icon you want to use on the side Styles panel!
Reader Review
In the Block Editor > [+] > Patterns > Feast Patterns > Featured Review Pattern you'll find a pre-defined layout for adding a reader review block.
I got so many compliments from this!!
- optional name of reviewer
Table of Contents
Feast+ styling is automatically applied to the Advanced Jump To block. The style is determined by the style you select under "Feature Styles" on the Feast+ Branding page.
Custom List Styling
The custom list icon that you set in Admin > Feast Plugin > Branding > Custom List Styling:
Gets applied by selecting the Feast+ List Icon style on the list block:
Inline List
Lists can also be transformed into inline lists by selecting the Feast+ Inline List style on the list block:
Note that this is only meant to be used in the flat footer layout (yet to be released).
Colored numbers
On the ordered list block (ie. numbered), you can now apply colored circles to the numbers to improve readability:
See the quick intro video:
A few notes:
- you must select the numbered / ordered list, not unordered list
- this appears in the style tab of the block, which is the half-white-half-black circle
- this does not work with reversed numbers
- list start numbers up to 10 are supported
- you must select the list block, not the individual list item
Sidebar Author Bio
In the Block Editor > [+] > Blocks > Sidebar Author Bio you'll find a pre-defined layout for adding a sidebar author box.
Separator Styles
We've added 4 custom separator styles to pages! These pull in your Feast+ Accent color.
Separators should only be used on pages, not on posts.
You can select any existing separator and change the style, or insert a new one through the Block Editor > [+] > Blocks > Separator > Block > Styles > Select your style
Separators are meant to help you create visual hierarchy amongst sections for your pages. We recommend using them to separate two white background blocks.
Top 10 Styling
We've added the ability to add fun numbers to any FSRI block. To enable, go into the FSRI block and enable "Top 10 List" styling.