The Homepage Posts Block allows you to insert a list or grid of up to 100 blog posts on any page. You can choose to show posts based on category, author, or tag, display featured images or excerpts, change the text color, and more!
Using the Homepage Posts block
To use the Homepage Posts block, follow these steps:
- Edit the post or page where you would like to add the block.
- Open the Gutenberg block selector and search for ‘Homepage’, or scroll down to the Newspack section of the dropdown and pick Homepage Posts block:
- You can also type
/homeand press Enter:
Block Toolbar
Clicking on the Homepage Posts block will bring up a toolbar that has a few different options to change the look of the block:
Block Styles
Clicking on the Homepage Posts icon, the first button in the block toolbar, will let you switch the block to use the Borders style, or switch it back to the Default.
The Borders style will add a horizontal border between the posts when they’re displayed in List View, or a vertical border between posts when they’re displayed in Grid View.
Block Width
Selecting the block width option will let you choose whether to show the block as Wide Width (wide but with padding on both sides) or Full Width (spanning the screen from edge to edge with no padding).
Text Alignment
The Homepage Posts block aligns text left by default, but you can use the Text Alignment option to align the text center or right:
Views
The block has an option to display posts in a List View (default) or a Grid View:
When in Grid View, you can change the number of columns and the spacing using the controls under Display Settings in the block settings on the right.
Media Location
You can set the media location so that the image appears on top, to the left, right, or behind the text of the post:
Image Shape
By default, the featured image displayed with the Homepage Posts block will use the Landscape shape, which has an aspect ratio of 4:3. It can be changed to Portrait (aspect ratio 3:4), Square, or Uncropped, which will maintain the image’s original shape.
Section Header
When the block is selected, you will have an option to give it a Section Header, a text label that will appear above the posts in the block. The placeholder will read Write Header…
Block Settings
When the Homepage Posts block is selected, a number of display options will also be available in the right-hand column.
Display Settings
The options under the Displays Settings allow you to control what posts appear in your Homepage Posts block.
Choose Specific Posts – When toggled on, this option lets you pick specific posts — using a search — to display in the Homepage Posts block. Turning this option on will hide the other query options, like Number of items, Authors, Categories and Tags, since the block will show all of the posts you select.
Number of items – Allows you to select the number of posts to display in the block. The default is three.
Authors – Allows you to display posts by one or more authors.
Categories – Allows you to display posts by one or more categories.
Tags – Allows you to display posts by or more tags.
For the Authors, Categories and Tags fields, if you pick multiple options from a single field, the block will return posts that match any of them — so if you pick three categories, the block will return posts that use any of those categories.
Example: If you pick the categories Featured, News and Entertainment, the block will return posts from the Featured OR News OR Entertainment categories.
However, if you add options to more than one of the Authors, Categories and Tags fields, they will be combined. So if you add an Author name and a Category, the posts returned will match both the author AND the category.
Example: If you pick the author Jane Doe, the category Sports and the tag Spurs, the block will return posts that have the author Jane Doe AND the category Sports AND the tag Spurs.
Show Advanced Filters – Clicking on this link will reveal the following advanced filter options:
- Exclude Tags – This option allows you to set specific tags to exclude from the block.
- Exclude Categories – This option allows you to set specific categories to exclude from the block.
Columns – When the Grid View is enabled on the block, this option will appear and let you set the number of columns the grid is displayed in, ranging from two to six. The default is three.
Show “Load More posts” Button – When enabled, this option will display a button labelled “Load More Posts” that, when clicked, will load more posts that match your block’s filters. The button will disappear once all of the posts are loaded on the page. The label on the button can be changed by clicking on it in the editor, and typing a new label:
The button is not displayed by default.
Featured Image Settings
Show Featured Image – Allows you to show or hide the featured images on posts displayed in a specific block. When disabled, the Media Location and Image Shape options will no longer be available, as well as the rest of the options in this panel.
Show Featured Image Caption – When enabled, it will display the feature image’s caption below the image, if available.
Stack on Mobile – Available when the Media Location is set to left or right. When enabled, the featured image will display in the above position on mobile-sized screens (less than 600px wide).
Featured Image Size – Available when the Media Location is set to left or right. Allows you to change the amount of space the image takes up, relative to the text. The options are S (25% of the available width), M (33% of the available width), L (50% of the available width), and XL (75% of the available width). The default value is L.
Minimum Height – Available when the Media Location is set to behind. Allows you to set a minimum height for the posts, relative to the screen height. By default, the posts will only be as tall as their contents; this option allows you to make them taller, to show more of the image.
Post Control Settings
Show Subtitle – Allows you to show or hide the Article Subtitle, which is made available by the Newspack Themes. It is hidden by default.
Show Excerpt – Allows you to show or hide the post’s excerpt. The excerpt is shown by default.
Max number of words in excerpt – Available when Show Excerpt is enabled. Allows you to change the number of words displayed in the auto-generated excerpts (custom excerpts will not be truncated). The default value is 55 words.
Add a “Read More” link – Allows you to show or hide a text link to the full article, with customizeable text. It is hidden by default.
“Read More” link text – This option is available when Add a “Read More” link is enabled. It allows you to edit the text label used for the Read More link, and the value will be applied to all of the posts in the block. The default value is “Keep reading”.
Type Scale – Allows you to change the font size of the posts to a relative value, ranging from one (small) to ten (large). The default value is four.
Color Settings
Text Color – Allows you to change the color of the text used in the Homepage Posts block. It’s intended purpose is to be able to change the text color to a light color when the block is used against a dark background, so the text will remain legible.
Post Meta Settings
Show Date – Allows you to show or hide the post dates in the block. The date is shown by default.
Show Category – Allows you to show or hide each post’s Primary Category when Yoast is enabled, or first-assigned category when it is not. The category links to its archive page. The category is hidden by default.
Show Author – Allows you to show or hide the author(s) of the current post. Each author name links to an archive of all of their posts. The author is displayed by default.
Show Author Avatar – Allows you to show or hide each author’s avatar. The author avatars are displayed by default.
Post Types
The block can be used to display posts, pages, and other custom post types. At the bottom of the block sidebar there is a Post Types panel. At minimum there will be checkboxes for Posts and Pages. If Newspack Newsletters is installed, there will be a checkbox for Newsletters as well. The block can be used to display any one of these, or a combination if appropriate.
To add support for other custom post types, a plugin or theme needs to add post type support for newspack_blocks.
Homepage Posts block
Block Table of Contents