Lazy Block　タイプの解説

今回もLazy Blockの解説をしていきます。
コントロールタイプの羅列&ちょい解説をしていきます。
前回の解説はこちら→Lazy Blocksとは？

コードは公式ドキュメントからの引用になります。
公式ドキュメント
また、コード例はPHPとさせていただきます。

コードに書かれているHTML部分は一例であり、あくまで重要なのはPHPの出力部分なので、どこに出力するかでいくらでも応用が利くと思います。

基本ブロック

テキスト（Text）

テキストを入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

テキストエリア（Textarea）

テキストエリアでテキストを入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

数値（Number）

数値を入力できます。
最小値、最大値、増減値の振り幅を設定できます。

      
 <p><?php echo $attributes['変数名'];?></p>
      

範囲（Range）

数値を決められた範囲から入力できます。
最小値、最大値、増減値の振り幅を設定できます。

      
 <p><?php echo $attributes['変数名'];?></p>
      

URL

URLを入力できます。

     
 <a href="<?php echo esc_url( $attributes['変数名'] ); ?>">リンクテキスト</a>
      

メールアドレス（Email）

メールアドレスを入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

パスワード（Password）

パスワードを入力できます。
ちなみにコードの通り出力するとパスワードがそのまま出力されます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

コンテンツブロック

画像（Image）

画像を挿入できます。
altについては画像の説明が当てはまります。

     
 <?php if ( isset( $attributes['変数']['url'] ) ) : ?>
   <img src="<?php echo esc_url( $attributes['変数']['url'] ); ?>" alt="<?php echo esc_attr( $attributes['変数']['alt'] ); ?>">
 <?php endif; ?>
      

ギャラリー（Gallery）

画像を複数挿入できます。

     
 <?php foreach( $attributes['変数'] as $image ): ?>
   <img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
 <?php endforeach; ?>
      

ファイル（File）

ファイルを挿入できます。
挿入できるファイルの拡張子を制限することもできます。
また、このコード例ではAudioになっていますが、Audioである必要はありません。

     
 <audio
   controls
   src="<?php echo esc_url( $attributes['変数']['url'] ); ?>">
 </audio>
      

リッチテキスト（Rich Text）

リッチテキストで入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

クラシックエディター（Classic Editor）

クラシックエディターで入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

コードエディター（Code Editor）

コードを入力できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

インナーブロック（Inner Blocks）

ブロックの中にブロックを配置できます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

選択系ブロック

セレクト（Select）

セレクトプルダウンを作れます。
Label、Value、または両方ともなど、出力できる部分を指定できます。Allow Nullで未選択部分を作ることができます。

     
 <p><?php echo $attributes['変数名'];?></p>

 複数選択（Multiple）を選択した場合
 <?php foreach( $attributes['変数名'] as $inner ): ?>
   <p><?php echo $inner; ?></p>
 <?php endforeach; ?>

 label、valueの複数出力を選択した場合
 <p><?php echo $attributes['変数名']['label']; ?></p>
 <p><?php echo $attributes['変数名']['value']; ?></p>
      

ラジオボタン（Radio）

ラジオボタンを作れます。
Label、Value、または両方ともなど、出力できる部分を指定できます。Allow Nullで未選択部分を作ることができます。

     
 <p><?php echo $attributes['変数名'];?></p>

 label、valueの複数出力を選択した場合
 <p><?php echo $attributes['変数名']['label']; ?></p>
 <p><?php echo $attributes['変数名']['value']; ?></p>
      

チェックボックス（Chechbox）

チェックボックスを作れます。

     
 <?php if ( $attributes['変数名'] ) : ?>
   <p>チェックされてるよ！</p>
 <?php else: ?>
   <p>チェックされてないよ！</p>
 <?php endif; ?>
      

トグルボタン（Toggle）

トグルボタンを作れます。

     
 <?php if ( $attributes['変数名'] ) : ?>
   <p>トグルがオンだよ！</p>
 <?php else: ?>
   <p>トグルがオフだよ！</p>
 <?php endif; ?>
      

その他ブロック

カラーピッカー（Color Picker）

カラーピッカーから色を選択できます。
ちなみに出力するとカラーコードが表示されます。

     
 <p><?php echo $attributes['変数名'];?></p>
      

日付ピッカー（Date Time Picker）

日付ピッカーから日付を選択できます。
デフォルトで時間まで指定できますが、オフにできます。
例のごとく長いコードですが、このまま使う必要はありません。また、フォーマット文字列は使用できます。

     
 Date + Time:
 <div>
   <?php echo date_i18n( 'F j, Y H:i', strtotime( $attributes['変数名'] ) ); ?>
 </div>

 Date:
 <div>
   <?php echo date_i18n( 'F j, Y', strtotime( $attributes['変数名'] ) ); ?>
 </div>

 Time:
 <div>
    <?php echo date_i18n( 'H:i', strtotime( $attributes['変数名'] ) ); ?>
 </div>
      

リピートブロック（Rpeater）

繰り返し項目を作ることができます。
項目のLabelを{{#}}と設定すれば、連番になります。

     
 <?php foreach( $attributes['変数名'] as $inner ): ?>
   <p><?php echo $inner['変数名']; ?></p>
 <?php endforeach; ?>
      

最後に

今回はブロックタイプの羅列をしました。メモ的要素として残しておきます。

次はちょっとした応用編です