Pagination Block

Go back to the list of Blocks

The Pagination block displays paginated navigation to the next/previous set of posts, when applicable. This block is located inside a Query Loop block and lets you customize the layout and appearance of the navigation.

Pagination block

A Pagination block is included by default if you choose a correct pattern in a Query Loop block. That said, you can also insert it manually when needed.

Click the (+) icon inside the Query Loop block to open the block inserter pop-up window and search for the Pagination block.

You can also use the keyboard shortcut /pagination in a new paragraph block followed by enter to insert a block quickly.

How to quickly add a Pagination block using the slash command

Detailed instructions on adding blocks can be found here.

Block toolbar

Block toolbar in the Pagination block

The block toolbar contains the tools to customize each block. The Pagination block’s toolbar consists of the following tools:

Transform to

Transform to in the Pagination block

You can transform a Pagination block into a Columns, or a Group block. 

Block-moving tools

Block moving tools in the Pagination block

Use the block-moving tools to move the block up and down inside the editor. Use the six dots icon to drag and drop the Pagination block and reposition it anywhere on the editor. Alternatively, click on the up and down arrows to move the block up or down the editor.

Change items justification

Change items justification in the Pagination block

The Change items justification tool lets you change the horizontal placement of the items inside the Pagination block. There are four options to choose from:

  1. Justify items left will move the items toward the left side of the block.
  2. Justify items center will move the items toward the center of the block.
  3. Justify items right will move the items toward the right side of the block.
  4. Space between items will distribute all items across the block and automatically adjust the space between them.

Change vertical alignment

Change vertical alignment in the Pagination block

The Change vertical alignment tool lets you choose the vertical position of the items inside the Pagination block. You can choose between top, middle, and bottom vertical alignment.

Change alignment

Change alignment in the Pagination block

Unlike the previous alignment tools, the Change alignment tool is used for the Pagination block’s position inside the Query Loop block. Choose one of the following block alignment options:

  1. None
  2. Wide width 
  3. Full width
  4. Align left
  5. Align center
  6. Align right

More options

 

Click on the three dots icon to show more block options. A drop-down menu with these actions will appear:

More options in the Pagination block

Details about More options can be found in this support article.

Block settings

Layout

The Pagination block provides Layout settings options to change the justification or orientation of the text and to wrap to multiple lines.

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

Settings

The settings tab lets you change the decorative arrow appended to the next and previous page links. You can choose between None, Arrow, and Chevron icons.

Settings tab in the Pagination block

Color

The Pagination block provides color settings options to change the text, background, and link colors.

For details refer to this support article: Color settings overview

Typography

The Pagination 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

Advanced

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

Advanced tab with additional CSS
Advanced option in the Pagination Block

Pagination inner blocks

The Pagination block consists of the following three inner blocks (which can’t be inserted on their own):

  • Previous Page block
  • Page Numbers block
  • Next Page block

The Previous Page block displays the previous posts page link.

The Page Numbers block displays a list of page numbers for pagination.

The Next Page block displays the next posts page link.

All these blocks are located inside a Query Loop block and lets you customize the appearance of the Pagination for the query loop.

Pagination inner blocks-Previous Page, Page Numbers and Next Page

Block toolbar

Block toolbar in the pagination inner blocks

The block toolbar for all the Pagination inner blocks –Previous Page, Page Numbers and Next Page contains the tools to customize each block.

Block-moving tools

Block moving tool in the pagination inner blocks

Use the block-moving tools to move the block up and down inside the editor. Use the six dots icon to drag and drop the block and reposition it anywhere on the editor. Alternatively, click on the up and down arrows to move the block up or down the editor.

More options

 

Page Numbers, Next Page and Previous page blocks share the same functionality for more block options button. Click on the three dots icon to show More block options. A drop-down menu with these actions will appear:

More options in the pagination inner blocks

Details about More options can be found in this support article.

Block settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish or Update button.

Cog icon in the pagination inner blocks sidebar

Here are the options for the Pagination inner blocks:

Color

The Pagination inner blocks –Previous Page, Page Numbers and Next Page provides color settings option to add background color.

For details refer to this support article: Color settings overview

Typography

The Pagination inner blocks –Previous Page, Page Numbers and Next Page-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

Advanced

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

Advanced tab with additional CSS
Advanced option in the selected Block

Changelog

  • Created 2022-12-12

Was this article helpful? How could it be improved?

First published

Last updated