Posts Block

Display a collection of post types in a customizable layout.

The Posts Block for Gutenberg showcases post types throughout your website. Feature relevant blog articles articles! Display a preview of your most recent posts on the home page!

Latest Version 2.4
WordPress Version 5.2+

The Posts Block is available in the Organic Blocks Bundle. It displays posts from a selected post type in a blog style layout. Blocks may be added to any page or post using the WordPress 5+ Gutenberg editor. Additionally, several options are provided for modifying the layout, style, colors, and more.

Getting Started

To get started, add the Posts Block to any page or post using the WordPress 5+ block editor. Search “Organic” or “Posts” within your list of available blocks. Once you’ve added the block, select your post type and taxonomy. Then, click the “Done” button. You will then see the posts rendered within the editor. Block options are available on the right to modify the settings and style.

The Posts Block displays the featured image, post date, title, excerpt, and a “Read More” link for each post. Additionally, it requires published content on your WordPress site in order to display properly. If you’re using a fresh installation of WordPress, we recommend publishing a post and applying a category before using this block.

Posts Block Options

Each instance of the Posts Block contains several options to change the appearance of your posts. The options have been divided into categories, and a description of each option is provided below.

General Settings
  • Style: Choose from a list of per-defined styles for the block.
  • Heading: Change the HTML heading of the post title.
  • Orientation: Choose to display posts in a vertical or horizontal layout.
  • Order: Choose the order in which to display posts.
Display Settings
  • Image: Toggle the display of the post featured image.
  • Date: Toggle the display of the post date.
  • Title: Toggle the display of the post title.
  • Excerpt: Toggle the display of post excerpt/summary.
  • Link: Toggle the display of the post permalink button.
  • Pagination: Toggle the pagination for posts.
  • Background: Toggle the display of the post background card.
Layout Settings:
  • Masonry Layout: Toggle the Masonry.js layout. Masonry displays posts is a fluid grid in which posts fits together like pieces of a puzzle.
  • Columns: Change the number of columns. The range increases to a maximum of 6 columns.
  • Gutter Width: Change the spacing in pixels between each post. The default spacing is 24 pixels.
Color Settings:
  • Title Color: Change the color of the post title.
  • Text Color: Change the color of the post excerpt.
  • Background: Change the background color of posts.
  • Button Color: Change the permalink button color.

Posts Block Requirements

All WordPress blocks, including Organic Blocks, require WordPress 5+ and the Gutenberg editor. Additionally, the Organic Blocks Bundle requires that your server is using PHP 7+ in order to work properly. Please Note: These are standard requirements for running WordPress 5+ on any web server.

Posts Block Example
Vertical 3-column layout example.