The blog link is a block that takes the title, description, and image (OGP) of the linked page by simply entering the URL. It can also be used for internal links like "Read more" or "Related articles," and for introducing external sites. Since the pages within your own site use the post data directly, there is no communication involved.
Actual display
Since this manual is located on the site that is currently shitate pro blocks running, the following isReal blocks, not imagesHowever, please actually click on it, open it, and check the movement to confirm its functionality.
Related reading shitate pro blocks shitateOf course, by adding it to your current WordPress theme, you’ll have access to 14 new blocks…
Examples of external sites
A CMS that can be used to build everything from a blog to a large-scale site – WordPress.org
Basic usage
- From "shitate unique blocks"Blog LinkAdd the
- Paste the URL into the input field that appears and press "Create Card" (the same goes for the URL field in the sidebar; pressing Enter or leaving the input field will confirm).
- A preview of the card appears on the editor. If necessary, adjust the labels and display items in the sidebar.
Settings screen in the editor

Settings items (sidebar)
- URL — Link destination. Only http/https.
- Show the label(Initial value on) andLabel — The small badge above the title. If the field is empty, the initial value "Read together" will be displayed.
- View the image/Display the description(Both are set to the initial value)
- Open in a new tab(Initial value off)
- Re-acquiredButton — Discard the cache and refresh the link destination. Use immediately after changing the title and image of the destination link.
What to acquire
- The URL of the site — Use the post title, excerpt (if applicable, 60 words from the body), the icon (medium size), and the site name and site icon directly in the post. Only published posts are eligible; drafts and unlisted posts are treated the same as external sites.
- URL of external site — on the page
<head>Fromog:title(If not)、og:description(If notdescription)、og:image、og:site_name(If not host name), read the favicon. Retrieving takes 6 seconds and up to 600KB, and the character encoding is automatically converted. - If it cannot be obtained, it is a card that includes the URL in the title and the host name in the site name. The link itself will not be broken.
How cash works
The retrieved content is cached for 30 days. If it becomes older than 1 week, the display remains cached and is refreshed in the background (stale-while-revalidate). Therefore, the page display does not wait for external site response. URLs that fail to retrieve are recorded as “failed” for only 1 hour, during which time they become fallback cards.
The period of time considered "old" and the initial value of the label can be changed with the filter.
add_filter( 'sb_blog_link_fresh_ttl', fn() => DAY_IN_SECONDS ); // Default value is WEEK_IN_SECONDS add_filter(
'sb_blog_link_default_label', fn() => 'Related Articles' ); // Default value for the labelHTML and CSS output
The entire card is one <a class="sb-blog-link"> However, all images are treated as decorative elements (alt empty). Therefore, screen readers read them as links connecting the label, title, description, and site name. JavaScript is not used.
<a class="sb-blog-link has-thumb" href="/en/…/">
<span class="-text">
<span class="-label">Would like to read them together</span>
<span class="-title">…</span>
<span class="-desc">…</span>
<span class="-site"><img alt="">Site name</span>
</span>
<span class="-thumb"><img alt=""></span>
</a>Thumbnail width clamp (6rem, 28%, 11rem)• Ratio 4:3; the title and description are omitted in two lines. Media queries are not used. The brackets are --sb-radius(Card) and --sb-radius-sIn (Label, Thumbnail, Favicon), the background of the label and the border when hovered are --st-color-brand It is.
/* サムネイルを正方形に、ラベルの色を変える */
.sb-blog-link > .-thumb { aspect-ratio: 1 / 1; }
.sb-blog-link > .-text > .-label { background: #c80000; }Points to note
- The data from the site's posts also get stored in the same cache. Even if you edit the post, it won't be reflected in the card until it has been refreshed after a week or you press "Re-retrieve."
- URLs without cached data are retrieved on the fly at the time of the front-end’s initial display (up to 6 seconds). Since caching is usually enabled when previewed in the editor, there is almost no waiting after publishing.
- Sites that are not correctly displaying OGP or sites that deny bot access will only display a card with the URL.
- It is the successor to the link-area block that was discontinued in 1.0.0. Saved link-areas will become "unknown blocks", so please replace them with blog links or box elements in the layout.
