Posts module

Posts block

Posts from any public post type in a grid, list, masonry, carousel or slider — with “Load more”, infinite scroll and category filter buttons.

Overview

The Posts block lists your blog posts (or pages, portfolio items, products — any public post type) automatically. One block covers every common layout: Grid, List, Masonry, Carousel and a one-at-a-time Slider. Choose which posts appear (a custom query, the most recent, or posts related to the one being read), what each card shows, and optionally let visitors load more posts or filter by category without reloading the page.

When you change the Layout or Source, the block applies sensible starting values (for example the Slider switches to one column with text over a 16:9 image) — but only for settings you have not changed yourself.

At a glance

Block name: wpbb/posts
Module: Posts
Find it by searching: Posts
Loads JavaScript on the site: Only for Carousel/Slider layouts, Load more, Infinite scroll or the Filter bar

When and why to use it

Blog home and archive-style pages.
“Latest news” sections on the homepage.
“You may also like” related posts under an article.
Portfolio grids with filter buttons.

Example scenarios

Homepage: Most recent, 3 posts, Grid, Card style.
Blog page: Custom query, 9 per page, Grid, “Load more” button, Filter bar by Categories.
Single post template: Related to the current post, 3 posts, Carousel.
Hero: Slider of 5 featured posts (category “Featured”) with text over the image and autoplay.

How to add the Posts block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Posts in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Posts in the results. The block appears with a live preview of your latest posts.
Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Live preview

What it does: The block shows your real posts in the editor.
What to enter or choose: Nothing to type — change the settings in the sidebar.
How to use it: Select the block and use the Settings tab.
When to use it: —
Example: —
Result: The preview updates as you change settings.
Good to know: If no posts match, editors see a hint in the editor; visitors see nothing (unless a filter bar is shown).

Settings panel: Query

Which posts are shown.

Source

What it does: How posts are chosen.
What to enter or choose: One of: Custom query, Most recent, Related to the current post.
Default: Custom query
How to use it: Open the dropdown and pick an option.
When to use it: Custom query: pick the post type, terms, order and more. Most recent: the newest posts, nothing else to set (starts as a compact list of 5). Related: posts sharing a category or tag with the post being viewed.
Example: Related under each blog post.
Result: The preview updates.
Good to know: Related only works where there is a current post — a single-post template or inside a post. The current post is always left out of related posts.

Post typeShown when Source is not Related

What it does: What kind of content to list.
What to enter or choose: Any public post type on your site (Posts, Pages, and those added by plugins).
Default: post
How to use it: Open the dropdown and pick an option.
When to use it: For anything other than blog posts.
Example: “Projects” from a portfolio plugin.
Result: Changing it clears the term filters and the filter bar.

Taxonomy filters (e.g. Categories, Tags)Shown when Source is Custom query

What it does: Only shows posts in the chosen terms.
What to enter or choose: One field per taxonomy of the post type. Type to find terms; leave empty for “Any”.
Default: None selected
How to use it: Start typing a name and pick it from the suggestions. Add several if needed; remove one with its ×.
When to use it: To show one topic.
Example: Categories: “News”, “Guides”.
Result: Posts in any of the chosen terms of that taxonomy.

Number of posts

What it does: How many posts are shown (per page, when Load more is used).
What to enter or choose: A number from 1 to 24.
Default: 6
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 6.
Result: More or fewer cards.

Order byShown when Source is Custom query

What it does: How posts are sorted.
What to enter or choose: One of: Publish date, Last modified, Title, Most comments, Menu order, Random.
Default: Publish date
How to use it: Open the dropdown and pick an option.
When to use it: Publish date for blogs; Menu order for hand-ordered pages.
Example: Random for a varied showcase.
Result: The order changes.

OrderShown when Source is Custom query

What it does: Sort direction.
What to enter or choose: One of: Newest / Z–A, Oldest / A–Z.
Default: Newest / Z–A
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Oldest first for a course.
Result: Reverses the order.

Skip first (offset)Shown when Source is Custom query

What it does: Skips the first posts.
What to enter or choose: A number from 0 to 20.
Default: 0
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: To avoid duplicates.
Example: 1 when the latest post is already shown in a hero above.
Result: The list starts later.

Exclude the current postShown when Source is not Related

What it does: Leaves out the post being viewed.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep on.
Example: On in a post template sidebar.
Result: Visitors never see the current post in the list.

Settings panel: Layout

Layout

What it does: How posts are arranged.
What to enter or choose: One of: Grid, List, Masonry, Carousel, Slider (one at a time).
Default: Grid
How to use it: Open the dropdown and pick an option.
When to use it: Grid for most pages; List for sidebars and archives; Masonry for images of different heights; Carousel to save space; Slider for a featured hero.
Example: Carousel for related posts.
Result: Carousel and Slider turn off “More posts” and the filter bar (they show a fixed set).

Columns (desktop)Shown when Layout is Grid, Masonry or CarouselDesktop

What it does: Items per row on large screens.
What to enter or choose: A number from 1 to 6.
Default: 3
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 3.
Result: Items resize to fit the row.

Columns (tablet)Shown when Layout is Grid, Masonry or CarouselTablet

What it does: Items per row on tablets (below 1024px).
What to enter or choose: A number from 1 to 4.
Default: 2
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 2.
Result: Applies up to 1023px wide.

Columns (mobile)Shown when Layout is Grid, Masonry or CarouselMobile

What it does: Items per row on phones (below 600px).
What to enter or choose: A number from 1 to 2.
Default: 1
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always.
Example: 1.
Result: Applies up to 599px wide.

Card styleShown when Layout is not Slider

What it does: How each post looks.
What to enter or choose: One of: Card (bordered), Plain, Text over image, Compact (thumbnail + title).
Default: Card (bordered)
How to use it: Open the dropdown and pick an option.
When to use it: Compact for sidebars and “recent posts” lists; Text over image for visual grids.
Example: Compact in a sidebar.
Result: The card design changes.

Image aspect ratioShown when Layout is not Masonry and Card style is not Compact

What it does: The shape of featured images.
What to enter or choose: One of: Original, 1:1, 4:3, 3:2, 16:9, 3:4.
Default: 3:2
How to use it: Open the dropdown and pick an option.
When to use it: Keep images aligned.
Example: 16:9.
Result: Images are cropped to that shape.

Image resolutionShown when Card style is not Compact

What it does: Which image file size is loaded.
What to enter or choose: One of your site’s image sizes.
Default: medium_large
How to use it: Open the dropdown and pick an option.
When to use it: Smaller for many columns.
Example: Large for a 1-column slider.
Result: Sharper or lighter images.

Settings panel: Card content

Featured image

What it does: Shows each post’s featured image.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on.
Example: Off for a text-only list.
Result: Posts without a featured image show no image.

Date

What it does: Shows the publish date.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Time-sensitive content.
Example: On for news.
Result: Date in the meta line.

Author

What it does: Shows the author name.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On for multi-author blogs.
Result: Author in the meta line.

Reading time

What it does: Shows an estimate like “4 min read” (220 words per minute).
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On for long articles.
Result: Added to the meta line.

Excerpt

What it does: Shows a short summary.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on.
Example: On in grids.
Result: The manual excerpt, or the start of the content.

Excerpt length (words)Shown when Excerpt is on

What it does: How long the summary is.
What to enter or choose: A number from 5 to 80.
Default: 20
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Keep cards similar in height.
Example: 20.
Result: Longer or shorter excerpts.

"Read more" link

What it does: Adds a link at the bottom of each card.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional — the title already links to the post.
Example: On.
Result: A “Read more” link appears.

Title tag

What it does: The heading level of post titles.
What to enter or choose: One of: H2, H3, H4, H5, H6, P.
Default: H3
How to use it: Open the dropdown and pick an option.
When to use it: Match the page structure.
Example: H2 on a blog page; H3 under a section heading.
Result: Structure only.

Settings panel: Carousel

Only shown for the Carousel and Slider layouts.

Arrows

What it does: Shows previous/next arrow buttons.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep on for desktop visitors.
Example: On.
Result: Arrows at the sides.

Dots

What it does: Shows a dot per page below the slides.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: To show how many slides there are.
Example: On.
Result: Clickable dots.

Loop back to the start

What it does: After the last slide, continues from the first.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually on.
Example: On.
Result: Arrows never become disabled.

Autoplay

What it does: Advances slides automatically.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Use sparingly — moving content distracts.
Example: On for a hero slider.
Result: Pauses on hover and focus, shows a pause button, and never runs for visitors who prefer reduced motion.

Delay (ms)Shown when Autoplay is on

What it does: Time each slide stays (1000 ms = 1 second).
What to enter or choose: A number from 2000 to 15000 (ms), in steps of 500.
Default: 5000 ms
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Longer for slides with text.
Example: 6000.
Result: Slower or faster autoplay.

Settings panel: Load more & filter (AJAX)

Only shown for the Grid, List and Masonry layouts.

What it does: Lets visitors see more posts without leaving the page.
What to enter or choose: One of: None, "Load more" button, Infinite scroll.
Default: None
How to use it: Open the dropdown and pick an option.
When to use it: “Load more” for blogs (visitors stay in control); Infinite scroll for image-heavy feeds.
Example: “Load more” on the blog page.
Result: The next posts are added below. The button appears only when more posts exist.

Button textShown when More posts is “Load more” button

What it does: The button label.
What to enter or choose: Short text, or empty for “Load more”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Show more stories”.
Result: The button shows your text.

Filter barShown when Source is not Related

What it does: Buttons that filter the posts by term without reloading the page.
What to enter or choose: None or one of the post type’s taxonomies.
Default: Empty
How to use it: Open the dropdown and pick an option.
When to use it: Portfolios and blogs with a few main categories.
Example: Categories.
Result: An “All” button plus one button per term — the terms you selected in Query, or otherwise the 8 most used.

Message when nothing is found

What it does: Text shown when a filter has no posts.
What to enter or choose: A sentence, or empty for “No posts found.”
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “Nothing here yet — check back soon.”
Result: Shown in place of the posts.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Posts offers.

Element: Card selected first

Each post card. Hover state.

Styles-tab controls for “Card”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Element: Block

The whole block.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Image

The featured image. Hover state (card hovered).

Styles-tab controls for “Image”
Panel	Control	Per device	Available in states
Border	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover

States for this part:

Hover — When the mouse pointer is over the whole block — so this part changes as soon as visitors point at the block.

Element: Card content

The text area of the card.

Styles-tab controls for “Card content”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Spacing	Padding	Yes	Normal

States: Normal only.

Element: Title

Post titles. Hover state (card hovered).

Styles-tab controls for “Title”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover
Colors	Text	—	Normal, Hover

States for this part:

Hover — When the mouse pointer is over the whole block — so this part changes as soon as visitors point at the block.

Element: Meta (date, author)

The date/author/reading time line.

Styles-tab controls for “Meta (date, author)”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Excerpt

The excerpt.

Styles-tab controls for “Excerpt”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal

States: Normal only.

Element: Category chips

Category chips. Hover state.

Styles-tab controls for “Category chips”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover
Colors	Text	—	Normal, Hover
Background	Type	—	Normal, Hover
	Color / Gradient	—	Normal, Hover
	Image	—	Normal
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Spacing	Padding	Yes	Normal

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Element: Read more

The “Read more” link. Hover state (card hovered).

Styles-tab controls for “Read more”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover
Colors	Text	—	Normal, Hover

States for this part:

Hover — When the mouse pointer is over the whole block — so this part changes as soon as visitors point at the block.

Element: Filter buttons

Filter buttons. Hover, Focus and Active (the selected filter).

Styles-tab controls for “Filter buttons”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus, Active
Colors	Text	—	Normal, Hover, Focus, Active
Background	Type	—	Normal, Hover, Focus, Active
	Color / Gradient	—	Normal, Hover, Focus, Active
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus, Active
	Border	—	Normal, Hover, Focus, Active
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus, Active
Box Shadow	Shadow layers	—	Normal, Hover, Focus, Active
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus, Active

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.
Active — Applies to the selected filter button.

Element: Load more button

The “Load more” button.

Styles-tab controls for “Load more button”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Carousel arrows

Carousel arrows.

Styles-tab controls for “Carousel arrows”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal, Hover, Focus
Background	Type	—	Normal, Hover, Focus
	Color / Gradient	—	Normal, Hover, Focus
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus
	Border	—	Normal, Hover, Focus
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover, Focus
Box Shadow	Shadow layers	—	Normal, Hover, Focus
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.

Element: Carousel dots

Carousel dots. Active = the current slide.

Styles-tab controls for “Carousel dots”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Active
	Color / Gradient	—	Normal, Active
	Image	—	Normal
Border	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Active — Applies to the dot of the current slide.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

Set Columns separately for desktop, tablet and mobile in the Layout panel. Carousels show that many cards per view on each device.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

Posts are rendered on the server (fast and SEO-friendly). Scripts are loaded only when needed: the carousel script for Carousel/Slider, and a small AJAX script for Load more, Infinite scroll and the Filter bar. Only published, non-password-protected posts of public post types are ever listed.

Accessibility

Newly loaded posts are announced to screen readers.
Filter buttons announce which one is pressed.
Carousels: arrows and dots are keyboard-accessible buttons; autoplay pauses on hover and focus, has a pause button, and never runs for visitors who prefer reduced motion.
Give posts featured images with alternative text in the Media Library.

Tips and best practices

Use the same Image aspect ratio for all cards to keep rows tidy.
For a “featured + latest” layout: a Slider of 1–5 posts, and below it a Grid with Skip first = the number of slides.

Limitations and notes

Up to 24 posts per page.
Carousel and Slider layouts cannot use Load more or the Filter bar.
Related posts need a current post (templates or inside a post).

Troubleshooting

The block shows nothing on the site.

No posts match the settings. Check the post type and term filters, and that the posts are published (not drafts, private or password-protected).

Overview

At a glance

When and why to use it

Example scenarios

How to add the Posts block

Content settings

On the block (in the editor canvas)

Live preview

Settings panel: Query

Source

Post typeShown when Source is not Related

Taxonomy filters (e.g. Categories, Tags)Shown when Source is Custom query

Number of posts

Order byShown when Source is Custom query

OrderShown when Source is Custom query

Skip first (offset)Shown when Source is Custom query

Exclude the current postShown when Source is not Related

Settings panel: Layout

Layout

Columns (desktop)Shown when Layout is Grid, Masonry or CarouselDesktop

Columns (tablet)Shown when Layout is Grid, Masonry or CarouselTablet

Columns (mobile)Shown when Layout is Grid, Masonry or CarouselMobile

Card styleShown when Layout is not Slider

Image aspect ratioShown when Layout is not Masonry and Card style is not Compact

Image resolutionShown when Card style is not Compact

Settings panel: Card content

Featured image

Categories

Date

Author

Reading time

Excerpt

Excerpt length (words)Shown when Excerpt is on

"Read more" link

Read more textShown when “Read more” link is on

Title tag

Settings panel: Carousel

Arrows

Dots

Loop back to the start

Autoplay

Delay (ms)Shown when Autoplay is on

Settings panel: Load more & filter (AJAX)

More posts

Button textShown when More posts is “Load more” button

Filter barShown when Source is not Related

Message when nothing is found

Design & styling

Element: Card selected first

Element: Block

Element: Image

Element: Card content

Element: Title

Element: Meta (date, author)

Element: Excerpt

Element: Category chips

Element: Read more

Element: Filter buttons

Element: Load more button

Element: Carousel arrows

Element: Carousel dots

Responsive settings

Advanced options

How it works on your site

Accessibility

Tips and best practices

Limitations and notes

Troubleshooting