Separator Block

Go back to the list of Blocks

If you would like to separate two blocks of content by a linem the separator block is what you are looking for. 

In order to add a separator block, click on the Block Inserter icon.

You can also type /separator and hit enter in a new paragraph block to add one quickly.

Detailed instructions on adding blocks can be found here.

Block Interface Block Interface

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The separator block is pretty straightforward so it only has the convert block type and more options control. 

Top ↑

Block Settings Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.

Top ↑

Styles Styles

On this tab, you can select one of the three separator styles: short line, wide line (take the full content width) and dots.  

Separator Block Styles
Separator Block Styles

Top ↑

Advanced Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. When selecting one of the three styles available, this field is pre-populated with the CSS class that targets the chosen style.

Separator CSS Class
Separator CSS Class

Changelog

  • Updated 2020-08-23
    • Updated images to WP 5.5
  • Updated 2020-08-10
    • Added link to the list of blocks
    • Added changlog box
  • Created 2019-03-07