WP5.3で検証

ウィジェット

最新の記事

デフォルト表示

<ul class="wp-block-latest-posts wp-block-latest-posts__list">
	<li><a href="https://example.com/setting-panel/block-panel-font/">ブロック設定パネル（テキスト設定）</a></li>
	<li><a href="https://example.com/setting-panel/block-panel-color/">ブロック設定パネル（色設定）</a></li>
	<li><a href="https://example.com/setting-panel/block-panel-advanced/">ブロック設定パネル（高度な設定）</a></li>
	<li><a href="https://example.com/setting-panel/block-panel-responsive/">ブロック設定パネル（メディア設定）</a></li>
	<li><a href="https://example.com/uncategorized/block-list/">ブロックリスト</a></li>
</ul>

ブロック設定パネル

高度な設定

投稿コンテンツ設定
内容を表示する場合、抜粋＆文字数指定か全文表示を選択

投稿メタ設定
登校日を表示

並べ替えと絞り込み
並び順（投稿日時でソート / タイトルでソート）
カテゴリー（すべてか1カテゴリーを選択）
項目数（表示件数を1〜100で設定）
カラム（グリッド表示の場合2〜6）

サンプル

  • 段落
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈 […]
  • 画像
    Contents幅広全幅左揃え中央揃え右揃え画像ツールバー 幅広 全幅 左揃え あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 山路を登 […]
  • 見出し
    ContentsH1.見出しH2.見出しH3.見出しH4.見出し H1.見出し H2.見出し H3.見出し H4.見出し H5.見出し H6.見出し 見出し設定H1〜h6までを選択 色設定文字色のみ 高度な設定アンカーも […]
  • ギャラリー
    ul / li がリストブロックの影響を受けないように調節する必要がある。 ギャラリーの設定カラム / 切り抜き / リンク設定 カラムは1〜8まで設定リンク設定は全画像共通になる画像切り抜きOFFの場合、幅に合わせて高 […]
  • リスト
    Contents箇条書きリスト番号付きリストサンプル（9から逆順） 箇条書きリスト 項目1 項目2 項目2-1 項目2-1-1 項目2-1-2 項目2-2 項目2-3 項目2 番号付きリスト 項目1 項目2 項目2-1 […]
<ul class="wp-block-latest-posts wp-block-latest-posts__list has-dates">
	<li>
		<a href="https://example.com/setting-panel/block-panel-font/">ブロック設定パネル（テキスト設定）</a>
		<time datetime="2019-11-26T20:05:15+09:00" class="wp-block-latest-posts__post-date">2019年11月26日</time>
		<div class="wp-block-latest-posts__post-excerpt">テキスト設定 値サイズクラス名小13px.has-small-font-siz … <a href="https://example.com/setting-panel/block-panel-font/">もっと読む</a></div>
	</li>
	<li>
		<a href="https://example.com/setting-panel/block-panel-color/">ブロック設定パネル（色設定）</a>
		<time datetime="2019-11-26T20:02:08+09:00" class="wp-block-latest-posts__post-date">2019年11月26日</time>
		<div class="wp-block-latest-posts__post-excerpt">色設定 背景色 p.has-background { padding:20px … <a href="https://example.com/setting-panel/block-panel-color/">もっと読む</a></div>
	</li>
	<li>
		<a href="https://example.com/setting-panel/block-panel-advanced/">ブロック設定パネル（高度な設定）</a>
		<time datetime="2019-11-26T20:00:12+09:00" class="wp-block-latest-posts__post-date">2019年11月26日</time>
		<div class="wp-block-latest-posts__post-excerpt">高度な設定 追加CSSクラスを半角スペース区切りで指定。 例外ブロック 見出し … <a href="https://example.com/setting-panel/block-panel-advanced/">もっと読む</a></div>
	</li>
</ul>

サンプル（カラム表示）

<ul class="wp-block-latest-posts wp-block-latest-posts__list is-grid columns-3 has-dates">
  <li><a href="https://example.com/uncategorized/block-list/">ブロックリスト</a></li>
</ul>

スタイル設定

標準スタイル

.wp-block-latest-posts.alignleft {
    margin-right:2em
}

.wp-block-latest-posts.alignright {
    margin-left:2em
}

.wp-block-latest-posts.wp-block-latest-posts__list {
    list-style:none
}

.wp-block-latest-posts.is-grid {
    display: flex;
    flex-wrap: wrap;
    padding:0
}

.wp-block-latest-posts.is-grid li {
    margin: 0 16px 16px 0;
    width:100%
}

@media (min-width: 600px) {
    .wp-block-latest-posts.columns-2 li {
        width:calc(50% - 16px)
    }

    .wp-block-latest-posts.columns-3 li {
        width:calc(33.33333% - 16px)
    }

    .wp-block-latest-posts.columns-4 li {
        width:calc(25% - 16px)
    }

    .wp-block-latest-posts.columns-5 li {
        width:calc(20% - 16px)
    }

    .wp-block-latest-posts.columns-6 li {
        width:calc(16.66667% - 16px)
    }
}

.wp-block-latest-posts__post-date {
    display: block;
    color: #6c7781;
    font-size:13px
}

.wp-block-latest-posts__post-excerpt {
    margin-top: 8px;
    margin-bottom:16px
}

ブロック制御コメント

開始タグのみ。終了タグなし。

<!-- wp:latest-posts /-->

<!-- wp:latest-posts {"displayPostContent":true,"displayPostDate":true} /-->

<!-- wp:latest-posts {"postsToShow":12,"displayPostDate":true,"postLayout":"grid"} /-->