The Content Loop block (formerly called Homepage Posts block) allows you to insert a list or grid of up to 30 blog posts (or other types) 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 Content Loop block
To use the Content Loop 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 ‘Content’, or scroll down to the Newspack section of the dropdown and pick Content Loop block:
- You can also type
/content loopand press Enter:
Block Toolbar
Clicking on the Content Loop block will bring up a toolbar that has a few different options to change the look of the block:
Block Styles
Clicking on the Content Loop 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 Content Loop 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 using the controls under Grid in the block settings on the right.
You can also change the spacing using the controls under Dimensions in the block styles 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 Content Loop 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…
Imitating the Section Header
To make a regular heading block look the same as the Content Loop block’s section header, add the CSS class accent-header to the ‘Additional CSS Class(es)’ field in the Advanced panel.
Block Settings
When the Content Loop block is selected, a number of display options will also be available in the right-hand column.
Grid
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.
Content
The options under Content allow you to control what posts appear in your Content Loop block.
Mode – By default the Content Loop block is “Dynamic” meaning the block will display the content based on the filtering settings. The “Static” mode lets you pick specific posts — using a search — to display in the Content Loop 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 selected.
Number of items – Allows you to select the number of posts to display in the block. The default is three.
Categories – Allows you to display posts by one or more categories.
Tags – Allows you to display posts by or more tags.
Authors – Allows you to display posts by one or more authors.
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.
Excluded categories – This option allows you to set specific categories to exclude from the block.
Excluded tags – This option allows you to set specific tags to exclude from the block.
Excluded custom taxonomies – If you have a plugin installed that adds a custom taxonomy that can be applied to posts, it will also appear as an option for exclusion under the Advanced Filters. For example, if you have the Newspack Sponsors plugin installed, the Content Loop block will include the Sponsors taxonomy as an option to exclude.
Allow duplicate stories – By default, the Content Loop block will not repeat a story more than once on a page over multiple blocks. When this option is enabled, it will remove this duplication logic from the block. This means the block can repeat stories that appear below it, and the stories it displays can also appear again after it.
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.
Infinite scroll – When enabled, the “Load more posts” button will be replaced by an infinite scroll, allowing users to keep scrolling until they reach the last post.
Display
Text – Allows you to show no content at all, the excerpt, or the full post. The excerpt is shown by default.
Max number of words in excerpt – Available when 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”.
Featured Image
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 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).
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 Meta
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 subtitle – Allows you to show or hide the Article Subtitle, which is made available by the Newspack Themes. It 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 avatar – Allows you to show or hide each author’s avatar. The author avatars are displayed by default.
Show date – Allows you to show or hide the post dates in the block. The date is shown 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.
Styles Settings
When the Content Loop block is selected, a number of styles options will also be available in the right-hand column.
Styles
You can 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.
Color
Text – Allows you to change the color of the text used in the Content Loop 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.
Typography
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.
Dimensions
Grid spacing – When the Grid View is enabled on the block, this option will appear and let you control the spacing between the columns.
Content Loop block
Block Table of Contents