How to Use the Posts Block
The Stackable Posts block allows you to display your latest blog posts or specific blog articles using different layouts.
Note: The Posts block is a ready-to-use block that’s made for displaying posts/pages in different layouts. If you want more control over the design of each post in the loop, you may want to use the Native Query Loop block with Dynamic Content.
Before We Start: Create your Posts
To create the posts you will display on your page, just navigate to the Posts tab in the WordPress Dashboard sidebar. When you click on Posts, you will see your existing posts and the option to add a new post.
When you click on the Add New button, a new page will open which looks just like the editor when creating your pages. This is where you can populate your post/s with articles, images, etc.
Before publishing your post, you can assign a category or tag for it in the inspector. Just click on the Post tab, and scroll down to the Categories and Tags panels. Adding these will make it easier for you to filter your posts later on.
You will also see the Featured Image panel where you can upload an image which will be on display if you add the Posts block, and the Excerpt panel which will serve as the summary of your post. If you choose to leave the excerpt black, WordPress will automatically use the first 55 words of your post as the excerpt.
Once you have finished setting up your post and populating the content, you can click Publish.
Adding the Posts block to your Page
Now, let’s add a new page. Just simply add the Posts block, and you will see the layout picker which will prompt you to select a layout for your posts. Afterwards, it will automatically load the posts you created, starting with the latest post you published.
Once you’ve added the Posts block, you are offered various styling options in the inspector such as the following:
- Display Specific Posts or Categories
- Display Featured Image, Meta, Category, Title, Excerpt, Read More Link
- Order Content by Publish Date, Alphabetical Order, Last Modified, Menu Order or Randomly
- Transform & Transition Effects
- Motion Effects
and more.
Styling the Posts block
Aside from the usual block settings such as the block alignment, size & spacing, borders & shadows, etc., the Posts block offers more robust settings to further tweak your design.
Content Arrangement Option
In the Style tab under the General panel, you will see the Content Arrangement setting. You can rearrange the content of your Posts block by simply dragging them around.
Display Specific Posts or Categories
Under the Query panel, you can adjust the number of columns, the order of display of your posts (e.g. newest to oldest), the post type to display, and how you would like to filter your posts.
For example you want to only display posts of a certain category or tag, you can set this under the Filter by Taxonomy setting.
Afterwards, there will be a text field below wherein you can enter to categories/tags you want to include or exclude from your posts.
You also have the option to exclude or display specific Post IDs.
Display Featured Image, Meta, Category, Title, Excerpt, Read More Link
You will see a panel for each content of the Posts block under the Style tab in the inspector. You can simply toggle them on or off depending on which ones you want to display.
If you open each panel, you will be able to design each content specifically such as the typography, alignment, etc.
Adding the Load More Button and Pagination
If you are a Premium user, you can also add Pagination and the Load More Button to your Posts block. To do this, select the Posts block and you will see a black plus sign (+) button at the bottom of the block.
Click the button and you will find the option to add the Load More button or Pagination. Once you click on it, it will automatically be added to your Posts block, and you have the flexibility to design it any way you want to in the inspector.
