Posts Block Lite

Rating:

Downloaded: 45 times

#block #carousel #latest-posts #posts #recent-posts

Code

Posts Block Lite adds a Posts block to the block editor inserter that can be added to display posts in a list, grid or carousel.

Upgrade to Pro at https://troytempleman.com/wordpress/blocks/posts-block/.

Features

Responsive
Settings
- Block alignment
- Layout
- List
- Grid
- Carousel
- Text alignment
- Post type [Pro]
- Number of posts
- Order by
- Order
- Number of columns
- Column gutter width
- Display featured image
- Display title
- Add heading to title
- Title heading
- Display author
- Display date
- Display excerpt
- Maximum number of words in excerpt
- Display content
- Display link
- Link text
- Carousel
- Display dots
- Display arrows
- Infinite
- Speed
- Slides to show
- Slides to scroll
Styles
- Color
  - Text
  - Background
  - Link
  - Carousel dots [Pro]
  - Carousel dots hover [Pro]
  - Carousel arrows [Pro]
  - Carousel arrows hover [Pro]
- Typography
  - Font family
  - Font size
  - Appearance
  - Line height
  - Letter spacing
  - Text decoration
  - Letter case
- Dimensions
  - Padding
  - Margin
  - List post padding [Pro]
  - List post margin [Pro]
  - Grid post padding [Pro]
  - Grid post margin [Pro]
  - Carousel post padding [Pro]
  - Carousel post margin [Pro]
  - Featured image padding [Pro]
  - Featured image margin [Pro]
  - Title padding [Pro]
  - Title margin [Pro]
  - Meta padding [Pro]
  - Meta margin [Pro]
  - Excerpt padding [Pro]
  - Excerpt margin [Pro]
  - Content padding [Pro]
  - Content margin [Pro]
  - Link padding [Pro]
  - Link margin [Pro]
Variations [Pro]
- List [Pro]
- Grid [Pro]
- Carousel [Pro]

Demo

https://troytempleman.com/wordpress/blocks/posts-block/

HTML

Posts Block Lite will output a Posts block with the following HTML structure:

<ul class="wp-block-tt-posts wp-block-tt-posts-6">
    <li class="wp-block-tt-posts-post">
        <div class="wp-block-tt-posts-post-featured-image”>
            <img class=“wp-block-tt-posts-post-thumbnail” src=“#”>
        </div>
        <h3 class="wp-block-tt-posts-post-title">
            <a href=“#”>Title</a>
        </h3>
        <div class="wp-block-tt-posts-post-meta">
            <span class="wp-block-tt-posts-post-meta-date">Posted <time class="wp-block-tt-posts-post-meta-date-time" datetime="2023-11-01T12:00:00+00:00">November 1, 2023</time></span>
        </div>
        <div class="wp-block-tt-posts-post-excerpt">Excerpt</div>
        <a class="wp-block-tt-posts-post-link" href=“#”>Read more</a>
    </li>
</ul>