Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection, RequestResponseExamples } from "@wix/docs-ui/content";

{/* Generated by @wix/tw-typedoc-to-wix-docs from packages/blog-builder/src/extensions/related-posts-context-provider/related-posts-context-provider.tsx. Do not edit this file directly — edit the TSDoc in the source package. */}

# Blog Related Posts Context Properties

## emptyState

**Type:** `EmptyStateLabels | null`

Text to show in place of the list when the current post has no related posts.

`null` while the posts load, when they fail to load, and when there are related posts. In
the editor, but not in Preview, it's also set while `relatedPosts` holds sample posts,
unless the posts failed to load.

<ExpandableSection name="Child Properties">
  <PropertyList>
    <Property name="description" type="string">
      Sentence to show under the heading, in the site's language.
    </Property>
    <Property name="title" type="string">
      Heading to show in place of the empty list, in the site's language.
    </Property>
  </PropertyList>
</ExpandableSection>

---

## hasError

**Type:** `boolean`

Whether the related posts failed to load.

When it's `true`, `emptyState` is `null`, so show an error message rather than an empty
state. `relatedPosts` is empty, except after a failed load in the editor, but not in
Preview, where it holds sample posts.

---

## hasRelatedPosts

**Type:** `boolean`

Whether there are related posts to show: `true` exactly when `relatedPosts` isn't empty.

`false` while the posts load for the first time, when they fail to load, and when the
current post has no related posts. In the editor, but not in Preview, it's `true` while
`relatedPosts` holds sample posts.

---

## isLoadingRelatedPosts

**Type:** `boolean`

Whether the related posts are loading for the first time.

When the current post changes, it stays `false`, and `relatedPosts` keeps the previous
post's related posts until the new ones load.

---

## relatedPosts

**Type:** `PostListItem[]`

Posts related to the current post.

When the current post's writer picked related posts for it, and at least one of them still
exists, these are the picked posts that still exist, in the order the writer picked them.
Otherwise, they're the most recently published posts in the site's language that share a
category with the current post, newest first. When the current post has no categories,
they're the blog's most recently published posts in the site's language. The current post
is never one of them.

Limited to the number in the **Related Posts** Data Source's **Number of Posts** setting,
up to 12. When the setting is empty, limited to 3.

Empty while the posts load for the first time, and when they fail to load. To tell those
apart from a post with no related posts, check `isLoadingRelatedPosts` and `hasError`. In
the editor, but not in Preview, it holds sample posts whenever there are no posts to show,
including when they fail to load, but not when an error stops them from rendering.

<ExpandableSection name="Child Properties">
  <PropertyList>
    <Property name="_id" type="string">
      Post ID.
    </Property>
    <Property name="authorImage" type="Image | undefined">
      Author's profile photo, with its URL, size, and alt text. The alt text is the author's
      name, or a generic author-photo label when the author has no name.

      `undefined` when the author has no photo.
    </Property>
    <Property name="authorName" type="RichText">
      Name of the post's author, as rich text. Empty when the author isn't found.
    </Property>
    <Property name="clockValue" type="number">
      Current time that `itemPublishedDate` is relative to, in milliseconds since the Unix
      epoch.

      When you format `publishedDateValue` as a relative date yourself, use this value as the
      current time, so your text matches `itemPublishedDate`.
    </Property>
    <Property name="commentCount" type="RichText">
      Number of comments as rich text in the site's language.

      Empty when the count wasn't loaded with the post. In the editor, but not in Preview, a
      sample count instead.
    </Property>
    <Property name="commentingEnabled" type="boolean | undefined">
      Whether site visitors can comment on the post.

      `undefined` when it isn't known, such as for the sample posts in the editor.
    </Property>
    <Property name="initialCommentCount" type="number | undefined">
      Number of comments on the post, as loaded with the post.

      `undefined` when the count wasn't loaded with the post. In the editor, but not in Preview,
      a sample number instead.
    </Property>
    <Property name="initialViewCount" type="number | undefined">
      Number of times the post was viewed, as loaded with the post.

      `undefined` when the count wasn't loaded with the post. In the editor, but not in Preview,
      a sample number instead.
    </Property>
    <Property name="itemCategoryLabel" type="RichText">
      Name of the post's main category, as rich text. It's the first of the post's categories
      that still exists.

      Empty when none of the post's categories exists. In the editor, but not in Preview, a
      sample name instead.
    </Property>
    <Property name="itemCoverImage" type="Image | undefined">
      Post's cover image, with its URL, size, and alt text. For a post whose cover is a video
      uploaded to Wix, the video's poster image.

      `undefined` when there's no image to show, such as when the cover is an embedded video.

      It holds the cover image even when the post's author hid the cover. To leave out a hidden
      cover, check `itemCoverMedia`, which is `undefined` then.
    </Property>
    <Property name="itemCoverMedia" type="CoverMedia | undefined">
      Post's cover as an image or a playable video. Use it to play a video cover, which
      `itemCoverImage` holds only as its poster image.

      `undefined` when the post has no cover, or the post's author hid it.
      <ExpandableSection name="Properties when kind is 'image'">
        <PropertyList>
          <Property name="image" type="Image">
            Cover image, with its URL, size, and alt text.
          </Property>
          <Property name="kind" type="'image'">
            Image cover.
          </Property>
        </PropertyList>
      </ExpandableSection>
      <ExpandableSection name="Properties when kind is 'wixVideo'">
        <PropertyList>
          <Property name="altText" type="string">
            Alt text for the cover. The post's title when the cover has no alt text.
          </Property>
          <Property name="id" type="string">
            Video ID.
          </Property>
          <Property name="kind" type="'wixVideo'">
            Cover video uploaded to Wix.
          </Property>
          <Property name="posterHeight" type="number | undefined">
            Height of the poster image, in pixels. `undefined` when it isn't known.
          </Property>
          <Property name="posterUrl" type="string | undefined">
            URL of the video's poster image, the image shown before the video plays.

            `undefined` when the video has no poster image.
          </Property>
          <Property name="posterWidth" type="number | undefined">
            Width of the poster image, in pixels. `undefined` when it isn't known.
          </Property>
          <Property name="sources" type="VideoSource[]">
            Playable files of the video, the recommended one first.

            Empty when the video's files couldn't be loaded. Show the poster image instead.
            <ExpandableSection name="Child Properties">
              <PropertyList>
                <Property name="height" type="number | undefined">
                  Height of the video, in pixels. `undefined` when it isn't known.
                </Property>
                <Property name="url" type="string">
                  URL of the video file.
                </Property>
                <Property name="width" type="number | undefined">
                  Width of the video, in pixels. `undefined` when it isn't known.
                </Property>
              </PropertyList>
            </ExpandableSection>
          </Property>
        </PropertyList>
      </ExpandableSection>
      <ExpandableSection name="Properties when kind is 'embed'">
        <PropertyList>
          <Property name="altText" type="string">
            Alt text for the cover. The post's title when the cover has no alt text.
          </Property>
          <Property name="embedUrl" type="string | undefined">
            URL of the video in its site's player, set to play as soon as it loads.

            `undefined` when `provider` is `'unknown'`.
          </Property>
          <Property name="kind" type="'embed'">
            Cover video embedded from another site, such as YouTube.
          </Property>
          <Property name="provider" type="EmbedProvider">
            Site that hosts the video.
            <ExpandableSection name="Enum Values">
              <PropertyList>
                <Property name="'youtube'">
                  YouTube. `embedUrl` is the video in YouTube's player, set to play as soon as it loads,
                  so load it only after a site visitor clicks to play.
                </Property>
                <Property name="'vimeo'">
                  Vimeo. `embedUrl` is the video in Vimeo's player, set to play as soon as it loads, so
                  load it only after a site visitor clicks to play.
                </Property>
                <Property name="'unknown'">
                  Any other site. There's no `embedUrl`, so show the thumbnail instead of a player.
                </Property>
              </PropertyList>
            </ExpandableSection>
          </Property>
          <Property name="thumbnailHeight" type="number | undefined">
            Height of the thumbnail image, in pixels. `undefined` when it isn't known.
          </Property>
          <Property name="thumbnailUrl" type="string | undefined">
            URL of the video's thumbnail image.

            `undefined` when the video has no thumbnail.
          </Property>
          <Property name="thumbnailWidth" type="number | undefined">
            Width of the thumbnail image, in pixels. `undefined` when it isn't known.
          </Property>
          <Property name="videoUrl" type="string">
            URL of the video on its own site.
          </Property>
        </PropertyList>
      </ExpandableSection>
    </Property>
    <Property name="itemExcerpt" type="RichText">
      Post's excerpt, as rich text. Empty when the post has no excerpt.
    </Property>
    <Property name="itemLink" type="Link | undefined">
      Link to the post's page. `href` is the page's URL, and `target` is `'_self'`, so the link
      opens in the same tab.

      `undefined` when the post has no slug and no URL.
    </Property>
    <Property name="itemPublishedDate" type="RichText">
      Date the post was first published, as rich text in the site's regional format. In the
      week after publishing, it's relative, such as "3 days ago". After that, it's a date, such
      as "Aug 5", with the year when it isn't the current year.
    </Property>
    <Property name="itemTitle" type="RichText">
      Post's title, as rich text. Its `text` field holds the plain text, and its `html` field
      holds the text as an HTML paragraph.
    </Property>
    <Property name="minutesToReadValue" type="number | undefined">
      Estimated reading time, in minutes.

      `undefined` when the post has no estimate.
    </Property>
    <Property name="publishedDateValue" type="string | undefined">
      Date the post was first published, as an
      [ISO 8601](fallback::https://en.wikipedia.org/wiki/ISO_8601) string.

      `undefined` when the post has no publish date.
    </Property>
    <Property name="recentPostItem" type="{ slug: string; title: string }">
      Post's title and slug, as plain text.
      <ExpandableSection name="Child Properties">
        <PropertyList>
          <Property name="slug" type="string">
            Post's slug, the last part of the post page's URL.
          </Property>
          <Property name="title" type="string">
            Post's title.
          </Property>
        </PropertyList>
      </ExpandableSection>
    </Property>
    <Property name="timeToRead" type="RichText">
      Estimated reading time as rich text in the site's language, such as "5 min read".

      Empty when the post has no estimate.
    </Property>
    <Property name="title" type="string">
      Post's title, as plain text.
    </Property>
    <Property name="viewCount" type="RichText">
      Number of views as rich text in the site's language, such as "1,234 views".

      Empty when the count wasn't loaded with the post. In the editor, but not in Preview, a
      sample count instead.
    </Property>
  </PropertyList>
</ExpandableSection>