Previous Post Block

Go back to the list of Blocks

Use the Previous Post block to display a Previous link which automatically points to the previous post or page to the one currently being viewed.

Previous Post block on the editor

Click the (+) icon to open the block inserter pop-up window and search for the Previous Post blocks.

A demonstration to add the previous post block

You can also use the keyboard shortcut /previous-post to quickly add the Previous Post block.

Detailed instructions on adding blocks can be found here.

Block toolbar

To view the block toolbar, click on the block, and the toolbar will be displayed.

Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.

The Previous Post block shows seven buttons in the block toolbar:

Previous post block toolbar
  • Transform to
  • Drag
  • Move up/down
  • Change text alignment
  • Bold
  • Italic
  • Options

Transform to

Previous post block transform options

Click on the Transform button to convert the Previous Post block into a Columns or Group block.

Drag icon

Drag icon on the previous post block toolbar

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag it to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move arrows

Move arrows on the previous post block toolbar

The up and down arrow icons can be used to move the block up and down on the page.

Detailed instructions on moving a block within the editor can be found here.

Change text alignment

Change text alignment on the previous post block toolbar

Use the change text alignment tool to change the text alignment for the Previous Post block. The following is a list of the block width options:

  • Align text left
  • Align text center
  • Align text right

Bold

Bold option on the previous post block toolbar

You can select the text in the Previous Post block and use the Bold option or Ctrl+b or Cmd+b on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

Italic option on the previous post block toolbar

You can select any text inside the Previous Post block and use the Italic option or Ctrl+i or Cmd+b on your keyboard to italicize it, which usually appears slanted to the right.

Options

The More Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.

Read about these and other settings.

Block settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon below the block description, in the sidebar.

Block settings for the previous post block

Click Display the title as a link to use the previous post/page title as link text. If you activate this toggle, another toggle Include the label as part of the link appears, allowing you to include in the link the custom label (if you have specified one).

Under the Arrow section you can select between three options:

  • None no arrow is displayed beside the link.
  • Arrow displays a left-headed arrow () to the left of the link.
  • Chevron displays a chevron («) to the left of the link.

Advanced

The Advanced section lets you add HTML anchor and CSS class(es) to your block. This will allow you to write custom CSS and styles for the block.

Advanced section on the previous post block settings

Block styles

Colors

The Previous Post block provides color settings options to change the text, link, and background colors.
Specifically:

  • Text color applies to the arrow (if any)
  • Link color applies to the link to the previous post
  • Background color applies to the whole block

For details, refer to this support article: Color settings overview

Typography

The Previous Post block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.

For details, refer to this support article: Typography settings overview

Changelog

  • Created 2023-06-02

Was this article helpful? How could it be improved?

First published

Last updated