最近studioを触りはじめて、すっかり魅了されている私です。こんにちは。
Figmaのノリで画面デザインを行うともう公開可能なwebページになっちゃうんですよね。studioの仕様で問題ないwebサイトならこれまででは考えられないくらいスピーディな公開が可能ですし、WordPressでつきまとうバージョンアップの管理やらセキュリティの心配やらから解放されるのも嬉しいところ。

これまでhtmlやphpのマークアップが参入障壁になっていたデザイナーにとってはとんでもない光明なんではないでしょうかね。
私らの頃みたいに「コーディングできない人はwebデザイナーではない」みたいな空気で揉まれて全部中途半端になるくらいなら、ノーコードに全ベットしてUI/UXや美観の専門家として突き詰めていくやり方を選ぶ人も全然出てくるでしょうねこれは。ネガティブな妥協ではなくて。

「投稿はありません」をやや無理やり回避するブロック設定

そうはいっても、studioの標準機能を普通に使うだけでは実現できない部分も当然ありまして、最近お客様からご要望があったのが「お知らせが0件だったら見出しを含むブロック全体を非表示にしたい」というものでした。

通常のstudioの機能では、CMS機能と紐づけたList要素に「0件の表示」という設定が現れて、それを有効にすると「No Content」という「投稿はありません」的な表示をするブロックが使えるようになります。

これはこれで良いと思いますが、なるべく画面に余計な要素は出したくないとか、0件であることを明示したくないとかいろいろ思惑はあるわけです。なるべく叶えたいなぁというのがイーガオ流かなと思っております。

というわけでやっていきます。studioの無料テンプレートを使って実験してみましょう。

まずお知らせのセクション自体をリスト化します

はいここです。普通はこの中の記事部分のみがリスト化されていて、それがCMSのデータに紐づいていますね。
リスト化している部分は紐づいているCMSの投稿がヒットしなければ当然出力されません。それを利用します。

こんな感じになりますので、データを紐づけていきます。

データを紐づけたら、表示数を1にします。

もっと見るボタンはつけないでくださいね。こうすることで、投稿が1件以上あればセクション全体が表示されるし、0件なら表示されないという状態になります。

ただやってみるとわかりますが、セクション内の投稿のリストのCMSデータの紐づけが一回クリアされてNo Dataだらけの表示になります。あらためてぽちぽちひも付けましょう。

あとはセクションがul要素で囲われてしまうので、デザインがちょっと崩れると思います。
余計な10pxのパディングを削除したり幅を100%にしたり適宜調整しましょう。

うまくいけばこんな風にセクションが表示されなくなります。良かったですね！