WordPress Block Editor – Latest Posts Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks

***

Latest Posts Block – Description

The Latest Posts block lets you display a list of your site’s most recent posts in your content.

The Latest Posts block also makes it easier for visitors to see what’s new on your blog.

How To Use The Latest Posts Block

In this section, we’ll cover:

• How to add a Latest Posts block to your content.
• How to edit and configure your Latest Post block and block settings.
• How to remove the Latest block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Latest Posts Block

To add a Latest Posts block:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Latest Posts block (in Most Used or Widgets section),
  • Add the Latest Posts block in the Content Area.
• Use the tools in the Latest Posts Block Editor or Block Settings section to align and configure your Latest Posts content.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select a Latest Posts block…

Or, select a Latest Posts block using the Inserter tool in the Content Area.

Either of the above methods will add a Latest Posts block to your content.

After adding a Latest Posts block to your content, you can:

• Edit and configure block settings,
• Save, publish, or update your post or page.

How To Edit A Latest Posts Block

To edit a Latest Posts block:

• Click inside the Latest Posts block to select it.
• Use the Block Editor tools to:
  • Change the alignment of the block.
  • Change the layout of the block (list or grid view).
• Use the Block Settings to configure block settings.

Let’s go through some of the things you can do with this block:

First, you can change the alignment of the block in your content using the Alignment options.

Next, you can configure your Latest Post block’s settings to customize its layout and display.

For example, you can:

• Display your latest posts as a List or in a Grid.
• Display the post content as an excerpt (and set the maximum number of words to display in the excerpt) or as a full post.
• Display the post author’s name.
• Display the post date.
• Display a featured image with each post entry, and adjust image sizes and dimensions.

You can also display your latest posts using different sorting and filtering options, such as:

• Order posts chronologically or alphabetically (and reverse-wise).
• Filter posts by categories.
• Filter posts by author.
• Filter posts by number of items.

If you choose to have featured images display with your posts, you can specify additional settings, such as:

• Select image size – thumbnail, medium, large.
• Specify image dimensions – enter dimensions for width and height into the value fields, or select preset percentage values.
• Specify image alignment (left, center, right).
• Specify the number of columns (if Grid view is selected).
• Add a link from the featured image to the post.

When combined, the above settings give you a wide range of display options for the Latest Posts block.

For example, here is a sample post with a grid view selected, and the featured image settings turned on…

Here is the same post with additional options like post author, post date, and post excerpt turned on, and 3 columns selected in the Sorting and Filtering settings…

Here is the same post with the exact same settings as above and a 4-column layout…

Here is the same post with the list view selected and a left-aligned featured thumbnail image…

And here is the same post with list view selected and most block settings turned off…

Remember to update and publish your post or page to save your settings.

How To Remove A Latest Posts Block

To delete or remove a Latest Posts block from your content:

• Click inside the Latest Posts block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Latest Posts block from your content or widget.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
• You can also convert the Latest Posts block into a Reusable block.

Latest Posts Block Tools, Options & Settings

The Latest Posts block includes tools, options, and settings for:

• Latest Posts Block Editor
• Latest Posts Block Settings

Latest Posts Block Editor

The Latest Posts Block Editor includes tools that let you perform the following operations:

• Display Block Type (See ‘Latest Posts Block – Additional Info’ section below.)
• Drag & Drop Tool
• Move Up and Down Tool
• Change Alignment
  • Align left
  • Align center
  • Align right
  • Wide width – makes the block stick out on either side of regular content.
  • Full width – makes the block stretch over the entire width of the browser window (regular content remains within margins on either side).
• Display
  • List view
  • Grid view
• More Options – See How To Use Blocks to learn how to use this section.

Latest Posts Block Settings

Latest Posts Block settings include:

• Block description area
• Posts content settings
  • Post content – display content in addition to the post title:
    • Show Excerpt
      • Max number of words in excerpt – use the slider or enter a value (maximum 100 words)
    • Show Full Post
• Posts meta settings
  • Display author name (on/off)
  • Display post date (on/off)
• Featured image settings
  • Display featured image (on/off). If ‘on’:
    • Image size
      • Thumbnail
      • Medium
      • Large
    • Image dimensions
      • Width / height – enter values in the fields.
      • Presets – Select a preset value: 25%, 50%, 75%, 100%.
        • Reset – Click to restore the featured image to its original size.
    • Image alignment – This aligns the featured image within the list or grid view:
      • Left align
      • Center align
      • Right align
• Sorting and Filtering
  • Order By
    • Newest To Oldest
    • Oldest To Newest
    • A -> Z
    • Z -> A
  • Categories – Displays only posts assigned to specific categories.
  • Author – Displays only posts assigned to a specific author.
  • Number of items – Specify the number of posts to display in the block (minimum = 1, maximum = 100 posts)
    • Slide to increase or decrease the number.
    • Type in the number.
    • Click the up or down buttons inside the number field to increase or decrease the number.
  • Number of Columns – If Grid view is selected, you can specify the number of columns to display in the grid (1-6).
• Advanced Settings
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Latest Posts Block – Additional Info

You can convert a Latest Posts block into the following block types:

• Columns block
• Group block
• Reusable block

Installing plugins or themes on your site may also add new functionality, options, or settings to the Latest Posts block.

Congratulations! Now you know how to use the WordPress content editor’s Latest Posts block.

• To learn more about using widgets, go here: WordPress Widgets Explained
• To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024