カスタムパターン
元のパターン
このパターンをコピーして、カスタムパターン用のスクリプトを作成する。幅広は、クエリーパターンと、投稿テンプレートの両方を幅広にしないと有効にならない。
最新のバージョンでは、「パターン/再利用ブロックの作成」メニューが追加され、ここでパターン作成ができるようになっている。
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
-
-
-
-
上記をコピーしてカスタマイズしたパターン
投稿テンプレートに背景色は、更にグループで囲んで全幅にする必要がある。クエリーパターンを全幅にできるが、背景色をセットできない。背景画像もセットできない。カバーの中に入れるのが良いかも。幅広の中では、見た目も不可。カバーでは問題が。（後述）
各投稿の背景は、グループのもう一つ外の枠(li.wp-block-post)にセットする必要がある。これはスタイルシート側になるかも。
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
-
-
-
-
<!-- wp:query {"queryId":11,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"align":"wide"} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide","backgroundColor":"vivid-cyan-blue","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"1rem","bottom":"1rem","left":"1rem"}}},"backgroundColor":"white","layout":{"inherit":false}} -->
<div class="wp-block-group has-white-background-color has-background" style="padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><!-- wp:post-featured-image /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-date /-->
<!-- wp:post-excerpt /--></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->コンテンツ幅のページ内での、幅広
クエリーループと投稿テンプレートで幅広アイコンを選択
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
-
-
幅広にして、カバーにいれると、フロント側のレイアウトが崩れる。（この下）
全幅内の幅広（クエリールプ、投稿テンプレート共に幅広アイコン選択）は、スタティック配置にし、インラインマージンをゼロにする。全幅内のコンテンツ幅は、単にcontent-blockクラスを追加指定する。
カバー（全幅）ブロック内のパターン
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
-
-
-
-
4列は、フレックスにしてセンタリング
各エントリーは、flex:0 0 280px で固定幅になる。
-
Hello world!
安房.jpサイト へようこそ。これは最初の投稿です。編集または削除してコンテンツの作成を始めてください。
-
-