Latest Posts Block

The Latest Posts Block displays a list of your site’s most recent posts …

For a white label version of this tutorial visit WPTrainingManual.com.

WordPress Block Editor – Latest Posts Block

WordPress Block Editor - Latest Posts Block

This tutorial is part of our series WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users.

***

Latest Posts Block – Description

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

Latest Posts block.
Display your latest posts using the Latest Posts block.

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…

Add Block tool - Latest Posts block.
Use the Add Block tool to insert a Latest Posts block into your content.

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

Inserter tool - Latest Posts block.
Add a Latest Posts block to your content using the Inserter tool.

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

Latest Posts block.
Latest Posts block added to the 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.

Latest Posts block - Change Alignment.
Change the alignment of your Latest Posts block.

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.
Latest Posts block - Post content and meta settings.
Configure your Latest Posts block by changing its content, meta, and featured image settings.

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.
Latest Posts block - Sorting and Filtering.
Display your latest posts using various sorting and filtering options.

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…

Latest Posts block - Featured image settings.
Sample post with Latest Posts block. Grid view selected and 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…

Latest Posts block - various image settings applied with grid view.
Sample post with Latest Posts block. Grid view selected and various image settings applied (3 columns).

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

Latest Posts block - various image settings applied with grid view.
Sample post with Latest Posts block. Grid view selected and various image settings applied (4 columns).

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

Latest Posts block: Featured image settings - Display featured image on.
Sample post with Latest Posts block. List view selected, left-aligned featured image, and various other image settings applied.

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

Latest Posts block - List view.
Latest Posts block with List view and default settings.

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.
Latest Posts block: More Options - Remove block.
Use the More Options menu to remove the Latest Posts block from your content.

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

Latest Posts block editor.
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
  • 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.
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:

Latest Posts block - Change block type or style.
Change the Latest Posts block into other block types.

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

Sample post with Latest Posts blocks.
Display your latest posts anywhere on your site using the Latest Posts block.

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

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

For a white label version of this tutorial visit WPTrainingManual.com.
Originally published as Latest Posts Block.