[ 解決済 ] 投稿リストの記事の有無で見出しの表示非表示をさせたい

以下のようにして、見出しを非表示にできました。

【手順①】

グループブロックに
* 投稿リスト
* 見出し(H2)
の順に入れる。

グループブロックに 追加 CSS クラス「year-group」を指定する。

これを学年ごとに作る。

今回やりたいことのために、あえて見出しを後に配置します。

【手順②】

以下の CSS を追加する。

.year-group .alert-warning,
.year-group .alert-warning + h2 {
    display: none;
}

.year-group .wp-block-group__inner-container {
    display: flex;
    flex-direction: column-reverse;
}

CSS の隣接セレクタを使って 投稿リスト の後ろの 見出し を非表示にしています。

そして、フレックスボックスを使って 投稿リスト と 見出し の位置を入れ替えています。

コンテンツの後に見出しがあるのは SEO 的にどうよ？なんてことは気にしないようにお願いします (^^♪
もしそれが心配なら、見出しの代わりに段落を使えばいいですね。

[ 解決済 ] から間が空きましたが、Chrome / Edge 105 がリリースされて、:has() 疑似クラスが使えるようになったので、情報を追加しておきます。

以下のようにして、見出しを非表示にするやり方が現実的な選択肢になりました。

【手順①】

グループブロックに
* 見出し(H2)
* 投稿リスト
の順に入れる。

※3月5日に書いたやり方のように逆順にする必要はありません。(編集画面ですごく見やすくなります)

グループブロックに 追加 CSS クラス「year-group」を指定する。

これを学年ごとに作る。

【手順②】

以下の CSS を追加する。

.year-group:has(.alert-warning),
.year-group .alert-warning {
    display: none;
}

※:has(.alert-warning) は「.alert-warning を含む(持っている)」という意味です。

※.year-group .alert-warning は Firefox 向けに残してあります。

Safari はすでに :has() をサポートしていますので、これで Firefox 以外の主要ブラウザが対応したことになります。

Firefox では学年見出しが表示されますが、それには目をつぶって(そのうちにサポートされると期待しつつ😅)、このような「表示されたらごめんなさい」で済むケースではもう :has() を使う方がよいのではないかと思う次第…