White Horse Inn Modern Reformation

Welcome to the Block editor for WordPress. With the Block Editor, you can put together a bunch of Blocks into any layout you choose. This page has a many blocks on it, and if you edit the ‘How-To’ page in the back-end of WordPress, you will be able to see them. This drop cap was added with the Block Editor: nifty!

Check out WordPress’ help pages for the Block Editor:

WPBeginner has an excellent beginner’s course:

Or, read on for a basic overview of how the system works!

A screenshot inside the Block editor.
Headings and Paragraphs (This is an H5)

I’m a Heading

Notice that what you see in the back-end matches what you’ll get in the front-end. Colors, fonts, and sizes have all been set to match your site.

I’m a Smaller Heading

You can change headings between H1, H2, H3, H4, H5, and H6.

I’m a still smaller heading. Ooh, I’m left-aligned.

In between these headings are simple paragraph blocks. You can change the color of these blocks, from your own predefined color palette. Just click ‘color settings’ in the Block tab to change the text color. If you select a bad color combination, WordPress will warn you that it may be hard for people to read.

Button Blocks

You can add buttons to your page:

You can choose between Solid, Quiet, Invisible, and Text. Since all of these can be added with no coding experience, you can create your own layouts nicely. Most blocks have pre-defined styles, but you can also set custom backgrounds on some blocks. For example:

You can select text and background styles for certain blocks in the Color Settings section of the Block tab.

Accordion Blocks

Accordions can be added, too

This is an Accordion Item Title

Expanded Content

This is a second Item Title

Expanded content

Blockquotes

This is a test quote with a tweetable button.

This is a test blockquote (without a tweetable button)

Bob Jones

This is a pullquote that offsets from the rest of the text.

The citation below is optional.

Bob Jones

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut blandit dolor. Proin sed leo lorem. Aenean cursus, magna ac auctor venenatis, lectus quam ultrices mauris, id suscipit diam turpis vel velit. Integer ornare nisl in mi viverra, dictum euismod elit suscipit. Sed tempus lacus nunc, sed dapibus ipsum cursus in. Duis gravida congue finibus. Donec eu sollicitudin lorem. Integer ac dui interdum, tincidunt felis non, scelerisque nulla.

Aliquam tempor, tortor quis suscipit tempor, sem ex feugiat mi, eget pharetra lorem ligula sit amet nulla. Fusce eget orci mi. Suspendisse in facilisis urna. Proin sollicitudin, enim in malesuada lobortis, nisi metus aliquet arcu, quis blandit nunc ex fringilla libero. Vivamus at orci malesuada, congue nisi at, condimentum erat. Quisque finibus at ligula sit amet sodales. Cras leo erat, lacinia eu ante sed, posuere tincidunt nulla. Sed interdum non ligula et finibus. Donec bibendum, erat ac euismod accumsan, justo tellus bibendum libero, at fringilla justo metus vitae eros. Donec finibus, mauris eu cursus rutrum, enim tortor sagittis erat, quis ornare nisi magna quis erat. Nulla auctor tortor id quam dapibus, in posuere nisi fringilla. Vivamus cursus volutpat magna, gravida luctus elit dignissim nec. In nunc risus, faucibus a convallis ut, elementum ut massa. Morbi non feugiat lectus, in fermentum metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi a orci a metus sagittis condimentum nec a odio.

Tweaking Block Layouts

There are a few tools at your disposal for making complex layouts. First, the columns block:

I am column one.

I am column two.

Once you’ve created columns, you can fill them with any sort of block, so you can put anything next to anything!

Groups can be started from scratch, or you can make a group out of a selection of blocks. Once you have a group, you can set width and background options:

Wide width block. This block will show a little wider than the rest of the column. Notice that it has a blue background, too: this was set in the Color Settings of the Block tab.

Groups can hold arbitrary blocks, not just paragraphs — like this weird Monkey video!

Full-width block — these will not work so well on pages that display a sidebar. Note that with any group we can set a background image.

Highlight & File Blocks

Use the file block for downloads, instead of just a plain link. It will display the filename and a download link, like this:

The highlight block lets you highlight text. By default, it’s a pale yellow text.

But you can set any of your colors in there, too.

Adding Blocks

When you are editing a page, click the blue plus that appears between blocks to add a new block, or click the plus in the upper-left of the page. If you want to be really speedy, type Enter and then the / character. This will bring up an autocomplete menu for your typed selection. For example, /accordion will bring up the Accordion block, like so:

Here’s a full list of blocks that you may find useful, and can call with the / autocomplete shortcut:

Text Blocks
  • Paragraph
  • Heading
  • List
  • Quote
  • Pullquote
  • Accordion
  • Buttons
  • Highlight
Media Blocks
  • Image
  • Click to Tweet (souped-up Quote)
  • File
  • Audio (for uploaded audio)
  • Video (for uploaded video)
  • YouTube, Vimeo
  • Many embed services (see the ‘Embeds’ section under the add block button)
Layout Blocks
  • Columns
  • Row
  • Spacer
  • Separator
  • Hero (used to introduce a large splash page, such as the homepage or about page)

Note: the ‘CoBlocks’ addon adds several more blocks — unless the block is listed on this list, it has not necessarily been optimized for your site and may not perform correctly!

Editing your work

You can highlight and select blocks to cut and paste them around your page. Or, you can use the arrows and grip bar that show up on the left-hand side when you hover over each block to move them.

Setting Custom Page Features

After the Block Editor, scrolling down in the edit post screen brings you to the Tagline and Description fields. These can be set on interior pages to show some sort of sub-heading or description text. You can see those fields in action on this page, in the header.

If you would like to feature a different title than is used in the navigation, you can use the ‘Swap Headline and Title’ option to use the Page Title in menus, and the page Tagline as the actual, visually-emphasized ‘title’ that’s shown at the top of the page.

Some plugins will also add their own content below the page editor. Plugins like SEOPress will often add fields that let you configure extra settings for individual pages.


Third-Party Plugins

A custom Mere website comes with several third-party plugins. Here are a few of our commonly-used plugins and links to their support and documentation.

SEOPress

Every page on the site can be edited for SEO using the SEOPress plugin. There are a million features here, but SEOPress has their own great support center for how to use that section.

SearchWP

SearchWP is a powerful search plugin that lets you weight results and show visitors exactly what is most relevant to them. Here is their support and documentation:

WooCommerce

If you sell products on your website, you are almost certainly running on WooCommerce, which is the most powerful eCommerce plugin out there for WordPress.

Gravity Forms

All your forms on this site are built with Gravity Forms. Get help with their product at this link:

SearchWP

We use The Events Calendar to build and manage events and month view calendars. They have an extensive documentation section for help with their product:

Google Site Kit

Site Kit helps to manage all things Google on your site: Google Analytics, map API keys, and more. Their documentation can be found here: