[ 投稿リストブロック ] クエリーループブロックみたいに １件分の要素をインナーブロックの組み合わせで作れないか？まずは技術検証

[kurudrive]

No description provided.

[drill-lancer]

@kurudrive

Lightning で クエリーブロック設置したものをコードエディタで見ていたら
さりげなく VK Blocks のスペーサーが紛れ込んでいたのですが、これって theme.json で設定しているのでしょうか？

<!-- wp:query {"queryId":6,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]}} -->
<div class="wp-block-query"><!-- wp:post-template {"className":"vk_block-margin-0\u002d\u002dmargin-top","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"border":{"color":"#e5e5e5","width":"1px"}}} /-->

<!-- wp:vk-blocks/spacer {"spaceSize":"xs"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-xs--margin-top"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:post-title {"level":4,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0rem"},"padding":{"right":"0","left":"0","top":"0","bottom":"0"}},"color":{"background":"#ffffff00"},"elements":{"link":{"color":{"text":"#333333"}}}},"fontSize":"small"} /-->

<!-- wp:vk-blocks/spacer {"spaceSize":"xs"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-xs--margin-top"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:columns {"isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"0"}}},"fontSize":"small"} -->
<div class="wp-block-columns is-not-stacked-on-mobile has-small-font-size" style="margin-top:0;margin-bottom:0"><!-- wp:column {"width":"7em","backgroundColor":"bg-secondary","fontSize":"x-small"} -->
<div class="wp-block-column has-bg-secondary-background-color has-background has-x-small-font-size" style="flex-basis:7em"><!-- wp:paragraph {"align":"left","vkbCustomCss":"","className":""} -->
<p class="has-text-align-left">カテゴリー</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"70%"} -->
<div class="wp-block-column" style="flex-basis:70%"><!-- wp:post-terms {"term":"category","style":{"typography":{"textDecoration":"none"},"elements":{"link":{"color":{"text":"#666666"}}},"color":{"text":"#666666"}},"fontSize":"x-small"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template -->

<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"クエリーが何も結果を返さない場合に表示するテキストまたはブロックを追加します。"} -->
<p>投稿はありません</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->

<!-- wp:vk-blocks/spacer -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top"><div class="vk_block-margin-md--margin-top"></div></div>
<!-- /wp:vk-blocks/spacer -->

<!-- wp:query-pagination {"paginationArrow":"chevron","layout":{"type":"flex","justifyContent":"center","orientation":"horizontal","flexWrap":"wrap"}} -->
<!-- wp:query-pagination-previous {"label":"前へ"} /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next {"label":"次へ"} /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query -->

投稿リスト１件分をクエリーループにはめ込むのは上記の謎が解決できればできそうな気がします。

---

逆に１件分の情報を既存のブロックで構成したブロックパターンを作れという場合は僕である必要があるのか疑問です。

詳しい説明をお願いします。

[kurudrive]

@drill-lancer

クエリーループブロックを使えば１件分の中身は自由にブロックで構成できます。

一方、VK Blocks Pro の投稿リストブロックは決め打ちのレイアウトでしか作れません。

なので、VK Blocks Pro の投稿リストブロックもクエリーループブロックのように、1件分の要素をブロックで組めるモードが作れないかなという意図です。

[drill-lancer]

@kurudrive
ありがとうございます。理解しました。