{"id":16282234,"date":"2022-12-12T19:40:02","date_gmt":"2022-12-12T19:40:02","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=16282234"},"modified":"2024-06-08T17:51:34","modified_gmt":"2024-06-08T17:51:34","slug":"pagination-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/pagination-block\/","title":{"rendered":"Pagination block"},"content":{"rendered":"\n

Go back to the list of Blocks<\/strong><\/a><\/p>\n\n\n\n

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

\"Pagination<\/figure>\n\n\n\n

A Pagination<\/strong> 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.<\/p>\n\n\n\n

Click the add block<\/strong> (+<\/strong>) icon inside the Query Loop block to open the block inserter<\/strong> pop-up window and search for the Pagination<\/strong> block.<\/p>\n\n\n\n

You can also use the keyboard shortcut \/pagination<\/kbd> in a new paragraph block followed by enter<\/code> to insert a block quickly.<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Detailed instructions on adding blocks can be found here<\/a>.<\/p>\n\n\n\n

Block toolbar<\/h2>\n\n\n\n
\"Block<\/figure>\n\n\n\n

The block toolbar contains the tools to customize each block. The Pagination<\/strong> block\u2019s toolbar consists of the following tools:<\/p>\n\n\n\n

Transform to<\/h3>\n\n\n\n
\"Transform<\/figure>\n\n\n\n

You can transform a Pagination<\/strong> block into a Columns, or a Group block. <\/p>\n\n\n\n

Block-moving tools<\/h3>\n\n\n\n
\"Block<\/figure>\n\n\n\n

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<\/strong> 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.<\/p>\n\n\n\n

Change items justification<\/h3>\n\n\n\n
\"Change<\/figure>\n\n\n\n

The Change items justification<\/strong> tool lets you change the horizontal placement of the items inside the Pagination<\/strong> block. There are four options to choose from:<\/p>\n\n\n\n

    \n
  1. Justify items left<\/strong> will move the items toward the left side of the block.<\/li>\n\n\n\n
  2. Justify items center <\/strong>will move the items toward the center of the block.<\/li>\n\n\n\n
  3. Justify items right<\/strong> will move the items toward the right side of the block.<\/li>\n\n\n\n
  4. Space between items <\/strong>will distribute all items across the block and automatically adjust the space between them.<\/li>\n<\/ol>\n\n\n\n

    Change vertical alignment<\/h3>\n\n\n\n
    \"Change<\/figure>\n\n\n\n

    The Change vertical alignment <\/strong>tool lets you choose the vertical position of the items inside the Pagination<\/strong> block. You can choose between top, middle, and bottom vertical alignment.<\/p>\n\n\n\n

    Change alignment<\/h3>\n\n\n\n
    \"Change<\/figure>\n\n\n\n

    Unlike the previous alignment tools, the Change alignment<\/strong> tool is used for the Pagination<\/strong> block\u2019s position inside the Query Loop block. Choose one of the following block alignment options:<\/p>\n\n\n\n

      \n
    1. None<\/li>\n\n\n\n
    2. Wide width <\/li>\n\n\n\n
    3. Full width<\/li>\n\n\n\n
    4. Align left<\/li>\n\n\n\n
    5. Align center<\/li>\n\n\n\n
    6. Align right<\/li>\n<\/ol>\n\n\n\n

      More options<\/h3>\n\n\n\n
      \"More<\/figure>\n\n\n\n

      Click on the three dots icon to show more block options. A drop-down menu with these actions will appear:<\/p>\n\n\n\n

      Details about More options<\/strong> can be found in this support article<\/a>.<\/p>\n\n\n\n

      Block settings<\/h2>\n\n\n\n

      Layout<\/h2>\n\n\n\n

      The Pagination <\/strong>block <\/em>provides Layout settings options to change the justification or orientation of the text and to wrap to multiple lines.<\/p>\n\n\n\n

      For details, refer to this support article: Layout settings overview<\/a><\/p>\n\n\n\n

      Settings<\/h3>\n\n\n\n

      The settings<\/strong> tab lets you change the decorative arrow appended to the next and previous page links. You can choose between None<\/strong>, Arrow, <\/strong>and Chevron<\/strong> icons. You can also choose whether to display or hide the label text based on what you prefer.<\/p>\n\n\n\n

      \"Pagination<\/figure>\n\n\n\n

      Color<\/h3>\n\n\n\n

      The Pagination<\/strong><\/strong><\/strong> block provides color settings options to change the text, background, and link colors. It can be found in the Styles tab.<\/p>\n\n\n\n

      \"Color<\/figure>\n\n\n\n

      For details refer to this support article: Color settings overview<\/a><\/p>\n\n\n\n

      Typography<\/h3>\n\n\n\n

      The Pagination <\/strong><\/strong>block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size. This can be found in the Styles tab.<\/p>\n\n\n\n

      For details refer to this support article: Typography settings overview<\/a><\/p>\n\n\n\n

      Advanced<\/h3>\n\n\n\n

      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.<\/p>\n\n\n\n

      \"Advanced
      Advanced option in the Pagination Block<\/figcaption><\/figure>\n\n\n\n

      Pagination inner blocks <\/h2>\n\n\n\n

      The Pagination<\/strong> block consists of the following three inner blocks (which can\u2019t be inserted on their own):<\/p>\n\n\n\n