Posts

Query and display posts in a variety of layouts including grid, list, masonry, and timeline. Supports filtering by category, tag, custom post type, and ordering. It is shown in the block inserter as Canvas Posts and registered as canvas-core/posts.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Query

• Post TypeDefaultPosts

  Which kind of content the block lists.

  ChoicesPostsPagesPortfolioEventsProducts

• Posts Per PageDefault6

  How many items to show. With pagination turned on, this is the number on each page.

• Order ByDefaultDate

  What to sort the items by.

  ChoicesDateTitleMenu OrderRandomLast ModifiedComment Count

• OrderDefaultDescending

  Read the sort order forwards or backwards.

  ChoicesDescendingAscending

• Category SlugsDefaultEmpty

  Comma-separated category slugs to filter by. Leave empty for all categories.

• Tag SlugsDefaultEmpty

  Comma-separated tag slugs to filter by. Leave empty for all tags.

• Leave Out The Record Being ViewedDefaultOff

  On a single record, drop that record from this list. Turn it on for a "more like this" row, so the page never offers the reader what they are already reading.

• Skip Password-Protected PostsDefaultOn

  On by default. A teaser for a post the reader cannot open shows "Protected:" instead of a headline and leads to a password form, fine on an archive, a dead end in a curated list. Turn this off to include locked posts, which is what WordPress does in its own loops.

• OffsetDefault0

  Skip this many items before the first card: a continuation grid starts where the previous one stopped.

Layout

• LayoutDefaultGrid

  The card design every item is drawn with.

  ChoicesStandardGridMD (Boxed Title Card)Split MD (Image Beside Text)SmallSmall AltPosts SM (Compact Widget)List 1List 2List 3MasonryTimelineand 2 more

• ColumnsDefault3

  How many cards sit side by side on a wide screen.

• Entry Column ClassesDefaultEmpty

  Bootstrap column classes for each card, replacing the ones the column count would choose. These decide how many cards fit across the row at each screen width.

  Shown when Layout is "Grid" or "MD (Boxed Title Card)" or "Masonry" or "Portfolio (Overlay Grid)"

• Entry Image ClassesDefaultEmpty

  Classes on the image wrapper. Empty uses the layout default.

  Shown when Layout is "MD (Boxed Title Card)"

• Card Inner ClassesDefaultEmpty

  Extra classes on each card's inner wrapper, for hover and transition treatments.

  Shown when Layout is "Grid"

• Entry Title ClassesDefaultEmpty

  Extra classes on each card's title container.

  Shown when Layout is "Grid"

• Entry Heading ClassesDefaultEmpty

  Extra classes on the heading element inside each card title.

  Shown when Layout is "Grid"

• Entry Excerpt Container ClassesDefaultEmpty

  Extra classes on each card's excerpt container.

  Shown when Layout is "Grid"

• Thumbnail ClassesDefaultrounded-circle

  Classes on the small thumbnail image. Clear the field for a plain square tile.

  Shown when Layout is "Posts SM (Compact Widget)"

• No Container ElementDefaultOff

  Render the entries with no wrapping grid element, for a single card sitting directly in the page container.

• Split Card VariantDefaultCompact

  Compact draws each item as a card in a column. Featured gives it a full-width row and a larger title.

  ChoicesCompactFeatured (wide meta + excerpt)Shown when Layout is "Split MD (Image Beside Text)"

• Lightbox ImagesDefaultOn

  Image opens the full-size file in a lightbox; off links it to the post.

  Shown when Layout is "MD (Boxed Title Card)"

• Portfolio GutterDefaultNone (g-0)

  Gutter utility on the portfolio row. The gutter-* scale is the portfolio grid's own responsive spacing; the g-* scale is the Bootstrap utility.

  ChoicesNone (g-0)Extra Small (g-2)Small (g-3)Medium (g-4)Large (g-5)Tight (gutter-10)Regular (gutter-20)Roomy (gutter-30)Wide (gutter-40)Regular50 from SmallNo gutter class at allShown when Layout is "Portfolio (Overlay Grid)"

• Grid EngineDefaultEmpty

  Which packing engine lays the cards out, and how it arranges them. A filterable or masonry grid needs one of the packed modes.

  ChoicesPlain Row (no Isotope) (empty)Isotope - Masonry (default packing)Isotope - Fit RowsIsotope - Masonry (explicit)Shown when Layout is "Portfolio (Overlay Grid)"

• Caption SizeDefaultEmpty

  Scales every card caption in the grid: denser grids use the small caption.

  ChoicesDefault (empty)SmallLargeShown when Layout is "Portfolio (Overlay Grid)"

• Centre Card TextDefaultOff

  Centre every card caption in the grid.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Reveal Caption on HoverDefaultOff

  Image-only cards: the title bar slides up over the image on hover instead of sitting under it.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Hover SurfaceDefaultEmpty

  Selector of the element the card overlay reacts to. Empty means the image itself; a reveal grid uses the whole card.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Parallax CardsDefaultOff

  Each card's picture becomes a scroll-driven background layer instead of a linked thumbnail.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Enlarge TriggerDefaultOn

  Show the enlarge-image icon in the card overlay. Off leaves only the open-project icon.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Project Card MediaDefaultOn

  Let a project's own film or shot-set become its card. Off keeps every card a still image: its trigger still opens the shot-set as a lightbox gallery.

  Shown when Layout is "Portfolio (Overlay Grid)" and Per-Project Card Media is on

• Wide Card Column ClassesDefaultEmpty

  Column classes for projects whose own "Wide Card" checkbox is ticked: a mixed-width grid. Empty keeps every card the same width.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Card ShapeDefaultEmpty

  Crop every card to one shape, or let each project choose its own: which is what gives a masonry grid its varied card heights. "Image’s own shape" crops nothing.

  ChoicesImage’s own shape (no crop) (empty)Each project’s own shape (masonry)Wide band - 8:3 (two columnsone row)Ultra-wide - 21:9Widescreen - 16:9Landscape - 3:2Landscape - 4:3Wide square - 5:4Square - 1:1Tall square - 17:20Portrait - 4:5Portrait - 3:4and 2 moreShown when Layout is "Portfolio (Overlay Grid)"

• Alternating Split CardsDefaultOff

  Full-width cards: image beside a description column, flipping side on every second card.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Split RatioDefaultWide image (8 / 4) - full-width page

  How much room the split card gives its image. A narrower container needs a bigger description column.

  ChoicesWide image (8 / 4) - full-width pageNarrow image (7 / 5) - beside a sidebarShown when Alternating Split Cards is on

• Flip Every Second CardDefaultOn

  Off keeps the image on the same side for every card.

  Shown when Alternating Split Cards is on

• Which Cards FlipDefaultThe 2nd, 4th, 6th card

  Whether the sequence starts image-first or description-first.

  ChoicesThe 2nd4th6th cardThe 1st3rd5th cardShown when Alternating Split Cards is on and Flip Every Second Card is on

• Flip MechanismDefaultReverse the row (flex-lg-row-reverse)

  Both turn the card round. They differ in the class the card carries, which matters when your own styling targets it.

  ChoicesReverse the row (flex-lg-row-reverse)Send the image last (order-lg-last)Shown when Alternating Split Cards is on and Flip Every Second Card is on

• Caption ContentDefaultTitle + Categories

  Split cards always use the full caption; this is for stacked cards wide enough to carry it.

  ChoicesTitle + CategoriesFull - adds excerptproject details and a buttonShown when Layout is "Portfolio (Overlay Grid)"

• Excerpt ClassesDefaultmt-3 d-none d-sm-block

  Classes on the caption excerpt: the visibility utilities decide from which breakpoint the excerpt appears.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Project Details ListDefaultCheck marks

  The skills / completion date / client list under the excerpt. Wrapping values keep long entries aligned under the icon.

  ChoicesHidden (empty)Check marksPlus markswrapping valuesShown when Layout is "Portfolio (Overlay Grid)"

• Project Details ClassesDefaulticonlist d-none d-md-block

  Classes on the project details list in the card overlay.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Details Button ClassesDefaultbtn btn-secondary d-none d-sm-inline-block

  Classes on the details button in the card overlay.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Card Media ClassesDefaultEmpty

  Extra classes on each card's media box.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Enlarge IconDefaultuil uil-plus

  Icon class on the overlay's enlarge-image trigger.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Drag to ReorderDefaultOff

  Adds a drag handle to each card so the grid can be reordered by hand.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Drag Handle IconDefaultEmpty

  Icon on the drag handle. Empty uses the move arrows.

  Shown when Drag to Reorder is on

• Open Project InDefaultEmpty

  A modal loads the project over the grid; the link still works without JavaScript.

  ChoicesIts own page (empty)A lightbox modalShown when Layout is "Portfolio (Overlay Grid)"

• Open-Project IconDefaultEmpty

  Icon class on the overlay's open-project trigger. Empty uses the layout default.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Lightbox Icon TooltipDefaultEmpty

  Tooltip shown on the magnifier icon in each card overlay. Empty shows no tooltip.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Overlay MotionDefaultEmpty

  How the trigger icons and scrim animate on hover. Only applies to cards whose caption sits under the image.

  ChoicesMatch the frame (grid or carousel) (empty)Grid - icons slide down inup outCarousel - icons slide down inup inShown when Layout is "Portfolio (Overlay Grid)"

• Equal Height CardsDefaultOff

  Stretch every card in a row to the same height, with the caption pinned to the bottom.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Open Projects In-PageDefaultOff

  Projects load above the grid without leaving the page.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Title Inside OverlayDefaultOff

  Title and description appear inside the hover overlay instead of below the image.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Overlay DescriptionDefaultProject Categories

  What the overlay caption shows beneath the title.

  ChoicesProject CategoriesProject ExcerptTitle OnlyShown when Title Inside Overlay is on

• Caption ClassesDefaultEmpty

  Extra classes on the caption under each card, e.g. text-center pb-0.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Overlay Description ClassesDefaultpt-0

  Extra classes on the overlay description block. Empty leaves a bare .portfolio-desc.

  Shown when Title Inside Overlay is on

• Alternate Overlay ToneDefaultOff

  Every second card inverts its overlay: caption below the icons, a light scrim and dark trigger buttons.

  Shown when Title Inside Overlay is on

• Inverted Overlay Description ClassesDefaultEmpty

  Caption classes on the inverted cards. Empty mirrors the classes above (pt- becomes pb-), because the caption sits at the other end.

  Shown when Title Inside Overlay is on and Alternate Overlay Tone is on

• Overlay Trigger IconsDefaultOn

  Show the lightbox and permalink icons under the overlay description.

  Shown when Title Inside Overlay is on

• Overlay ScrimDefaultOn

  Fade a dark scrim behind the overlay on hover.

  Shown when Title Inside Overlay is on

• Whole-Card LinkDefaultOff

  The image link wraps the overlay too, making the card one click target with a plain-text title.

  Shown when Title Inside Overlay is on

• Grid Extra ClassesDefaultEmpty

  Extra container tokens after "row" (e.g. portfolio-overlay-open).

  Shown when Layout is "Portfolio (Overlay Grid)"

• Animate OverlayDefaultOn

  Animate the overlay as the pointer enters a card. Off leaves the movement to your own styling.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Per-Project Card MediaDefaultOff

  Let each project replace its card image with its own hover video or multi-shot slider.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Record ClassesDefaultOff

  Add the classes WordPress puts on a post to each card, naming its id, type, status and terms, so a card can be targeted by styling, by a script or by a microformat reader.

• Card ShapeDefaultEntry on the column, inner wrapper

  Where the entry styling sits: on the grid column, with a wrapper inside it, or on the article inside a plain column.

  ChoicesEntry on the columninner wrapperBare columnarticle card insideShown when Layout is "Grid"

• Container ClassesDefaultEmpty

  Replaces the layout's own grid container classes. Leave empty to keep them.

Overlay

• Overlay AnimationDefaultDirectional (caption slides in)

  How the overlay caption arrives, sliding in from the side the pointer came from or fading in place.

  ChoicesDirectional (caption slides in)FadeShown when Layout is "Portfolio (Overlay Grid)"

• Overlay Hover SpeedDefaultEmpty

  Hover animation duration in milliseconds. Leave empty to use the layout default.

  Shown when Layout is "Portfolio (Overlay Grid)"

• Scrim ClassesDefaultEmpty

  Extra classes on the overlay scrim (e.g. op-ts op-05).

  Shown when Title Inside Overlay is on

• Scrim Hover ValueDefaultEmpty

  Animation the scrim plays as the pointer enters a card, for example op-1.

  Shown when Title Inside Overlay is on

• Scrim Hover-Out ValueDefaultEmpty

  Animation the scrim plays as the pointer leaves a card, for example op-05.

  Shown when Title Inside Overlay is on

Image

• Show Featured ImageDefaultOn

  Show the featured image on each card.

• Image SizeDefaultMedium Large

  Which stored size of the featured image to load.

  ChoicesThumbnailMediumMedium LargeLargeFullShown when Show Featured Image is on and Layout is "Standard" or "Grid" or "MD (Boxed Title Card)" or "Small" or "Small Alt" or "Posts SM (Compact Widget)" or "List 1" or "List 2" or "List 3" or "Masonry" or "Timeline" or "Carousel"

• Card Image OpensDefaultEmpty

  Where each card's picture leads. Stated once for the whole query rather than per layout.

  ChoicesLayout default (empty)The postThe full-size file in a lightboxNothing (no link)Shown when Show Featured Image is on

• Media BoxDefaultEmpty

  For a design that puts the media class straight on the image link. Only a linked picture can carry it: a post whose medium is an embed, a slider or a quote keeps its box either way.

  ChoicesA box around the picture (empty)The picture's own link IS the boxShown when Show Featured Image is on

• Card MediaDefaultFeatured Image

  Post Format Media draws each card from the post itself: a video or audio embed, a gallery slider, a thumbnail grid, a pull-quote, a link or a status card, as set in the post's own Post Media box. Posts with no format media fall back to their featured image.

  ChoicesFeatured ImagePost Format MediaShown when Show Featured Image is on and Layout is "Standard" or "Grid" or "Small" or "Small Alt" or "List 1" or "List 2" or "Masonry" or "Timeline" or "Carousel"

• Image SizeDefaultEmpty

  Which registered size these project cards ask the media library for. Leave on the site-wide setting unless this grid needs something different.

  ChoicesPortfolio setting (site-wide) (empty)ThumbnailMediumMedium LargeLargeFullShown when Show Featured Image is on and Layout is "Portfolio (Overlay Grid)"

Content

• Show TitleDefaultOn

  Show the title on each card.

• Title TagDefaultEmpty

  Heading level for each card title. Layout Default keeps the level the chosen layout is designed around.

  ChoicesLayout Default (empty)H2H3H4H5H6Shown when Show Title is on

• Show MetaDefaultOn

  Show the byline of date, author and other details.

• Meta ItemsDefaultdate

  Comma-separated: date, author, categories, comments, reading-time.

  Shown when Layout is "Posts SM (Compact Widget)" and Show Meta is on

• Meta IconsDefaultOn

  Put a small icon in front of each byline item.

  Shown when Layout is "Posts SM (Compact Widget)" and Show Meta is on

• Link Meta ItemsDefaultOn

  Link the author, categories, comment count and post format to their archives. Turn off in a compact widget, where the row title is already the link.

  Shown when Layout is "Posts SM (Compact Widget)" and Show Meta is on

• Show ExcerptDefaultOn

  Show a short extract from each item.

• Excerpt LengthDefault20

  Maximum number of words in the excerpt.

  Shown when Show Excerpt is on

• Show Read More ButtonDefaultOff

  Add a Read More button below each excerpt.

• Read More ClassesDefaultEmpty

  Style classes on the read-more link. Empty leaves the theme default.

  Shown when Show Read More Button is on

• Read More Inside the SummaryDefaultOff

  Put the read-more link inside the card summary rather than after it, which is what a design that runs the link on from the last line expects.

  Shown when Show Read More Button is on

• Read More TextDefaultRead More

  Wording on the Read More button.

  Shown when Show Read More Button is on

Meta

• Meta Icon OverridesDefaultEmpty

  One item=glyph pair per line. Items: date, author, categories, comments, reading_time.

• Meta Date FormatDefaultEmpty

  PHP date format for the byline date. Leave empty to use the site format.

Pagination

• Show PaginationDefaultOff

  Split the results over several pages and show the controls for moving between them.

• Pagination StyleDefaultNumbered pages

  How readers reach the next page of results.

  ChoicesNumbered pagesOlder / Newer pagerLoad more buttonInfinite scrollClient-side paginatorShown when Show Pagination is on

• Pagination Wrapper ClassesDefaultEmpty

  Classes on the element that wraps the controls. Empty uses the default for the chosen style.

  Shown when Show Pagination is on

• Load More LabelDefaultEmpty

  Wording on the load more button. Empty uses the default.

  Shown when Pagination Style is "Load more button" or "Infinite scroll"

• Load More ClassesDefaultEmpty

  Classes on the load more button.

  Shown when Pagination Style is "Load more button" or "Infinite scroll"

• Loader Status ClassesDefaultEmpty

  Extra classes on the status region the scroller writes into.

  Shown when Pagination Style is "Infinite scroll"

• Keep Both ArrowsDefaultOff

  Show the previous and next arrows on every page, greyed out where there is nowhere to go, so the numbers do not shift sideways as the reader walks through.

  Shown when Pagination Style is "Numbered pages"

• Show End-of-Content MessagesDefaultOn

  The "End of content" and "No more pages" alerts inside the status region.

  Shown when Pagination Style is "Infinite scroll"

Carousel

• Carousel Style ClassDefaultAutomatic (from the content type)

  Which stylesheet treatment the strip claims. Choose None for a narrow sidebar carousel, which should not inherit the wide grid strip's spacing.

  ChoicesAutomatic (from the content type)Portfolio strip (.portfolio-carousel)Posts strip (.posts-carousel)None - plain carouselShown when Layout is "Carousel"

• Items (base)Default0

  Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.

  Shown when Layout is "Carousel"

• Items (XS)Default1

  Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

  Shown when Layout is "Carousel"

• Items (SM)Default2

  Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Carousel"

• Items (MD)Default3

  Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Carousel"

• Items (LG)Default4

  Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Carousel"

• Items (XL)Default4

  Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Carousel"

• Item Gap (px)Default20

  Space between one slide and the next, in pixels.

  Shown when Layout is "Carousel"

• Show ArrowsDefaultOn

  Show the previous and next arrows beside the slides.

  Shown when Layout is "Carousel"

• Arrows Always VisibleDefaultOff

  Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

  Shown when Layout is "Carousel"

• Show DotsDefaultOn

  Show the row of dots below the slides, one per page.

  Shown when Layout is "Carousel"

• Autoplay (ms)Default0

  Milliseconds between slides. 0 disables autoplay.

  Shown when Layout is "Carousel"

• LoopDefaultOff

  Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

  Shown when Layout is "Carousel"

• Transition SpeedDefault250

  Milliseconds per slide transition.

  Shown when Layout is "Carousel"

• Centre Active SlideDefaultOff

  Keeps the active slide in the middle of the stage.

  Shown when Layout is "Carousel"

• Stage PaddingDefault0

  Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

  Shown when Layout is "Carousel"

• Animate InDefaultEmpty

  Animation class applied to the incoming slide. Empty uses a plain slide.

  Shown when Layout is "Carousel"

• Animate OutDefaultEmpty

  Animation class applied to the outgoing slide. Empty uses a plain slide.

  Shown when Layout is "Carousel"

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Posts: Blog Archive Loop, Blog Loop, Blog Single Post, Post Archive Index, Post Author, Post Comments.