ちょっと使い勝手が悪い？と思った話...
今までクラシックエディタプラグインを導入して制作をしてきたのですが、
そろそろブロックエディタも機能が色々追加になって使いやすくなった、との話を聞いて
今回初めてカスタムブロックを作成しました。
そもそもacfがカスタムブロックを作る機能を用意していたことを最近になって学びました...。
以下、「Advanced Custom Fields Pro」のことを「acf」と省略します。
バージョン
・acf => 5.8.2(2020.7.15最新)
※Proは有料版です。
・WordPress version => 5.4
・acf以外にカスタムブロックを作るプラグインは入れていません。
本題：どの点が使い勝手が悪いのか？
ずばり、編集とプレビューが同時にできない点です。
標準で用意されているブロックの場合：
ブロック選択後、編集をしながらプレビューができる状態です。
しかし、acfには「編集モード(edit)」「プレビューモード(preview)」があり、
この二つを同時に行うことができないのです。
わかりづらいので画像で説明します！
ケース：繰り返しフィールド > 画像フィールドとテキストエリア のカスタムブロックを作成した。
① acfで作成したブロック選択後
何も無いですね...
② 鉛筆マークをクリック
すると、アイコンが変わります。
つまり、「鉛筆マーク=>編集モードにしたい時 モニターに目玉マーク=>プレビューモードにしたい時」 です。
画像1枚目では、まだ行を追加していないから何も見えなかったんですね。
③ 行を追加後、再度「モニターに目玉マーク」をクリックしてプレビューモードにする
今回は繰り返しフィールドのため、全く何も無い状態でしたが
単体の画像フィールドなどにした場合は、
ブロックを選択した時の初期表示はCSSが当たっていますが、編集モードに切り替えないと
画像の追加はできません。
mode の設定を変える？
またカスタムブロックを作成する際に、
mode を auto にするとアイコンの切り替えなしで、
「フォーカスを外した際に」自動でプレビューモードにはなるようです。
まだやりたい事に近しいですが、標準で用意されているブロックの方が使い勝手は良さそうです。
※modeを何も設定しないと「preview」になり、アイコンクリックで切り替える必要があります。
ちなみに カスタムブロックの作り方
公式ドキュメント： https://www.advancedcustomfields.com/resources/acf_register_block_type/
functions.php
add_action('acf/init', 'my_acf_init');
//①カスタムブロック設定
function my_acf_init()
{
if (function_exists('acf_register_block_type')) {
acf_register_block_type(
array(
//ここにmodeを設定する。
'name' => 'acf_column_2',
'title' => __('2カラム'),
'description' => __('2カラムを挿入します'),
'render_callback' => 'acf_column_2_info',
'category' => 'layout',
'icon' => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#555d66" class="cls-1" d="M9,2V22H2V2H9M9,0H2A2,2,0,0,0,0,2V22a2,2,0,0,0,2,2H9a2,2,0,0,0,2-2V2A2,2,0,0,0,9,0Z"/><path class="cls-1" d="M22,2V22H15V2h7m0-2H15a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h7a2,2,0,0,0,2-2V2a2,2,0,0,0-2-2Z"/></svg>',
'keywords' => array('2カラム', 'acf_column_2'),
'enqueue_assets' => function () {
wp_enqueue_style('original-block', get_template_directory_uri() . '/block/wordpress_admin.css');//このCSSを設定することにより管理画面でも実際の表示の見え方になる
},
)
);
}
//作成したいカスタムブロックが複数ある場合は繰り返す
if (function_exists('acf_register_block_type')) {
acf_register_block_type(array(
'name' => 'acf_column_3',
...
)
}
}
//出力するHTMLコード
//繰り返しフィールド > 画像フィールドとテキストエリアフィールド
function acf_column_2_info($block) //render_callback
{
$class = 'c-acf_column_2';
?>
<div class="<?php echo $class; ?> c-acf_column">
<?php
while (have_rows('column_2_group')) : the_row();
$image = get_sub_field('column_2_image');
$caption = get_sub_field('column_2_caption');
?>
<div class="<?php echo esc_attr($class . '__item'); ?> c-acf_column__item">
<div class="<?php echo esc_attr($class . '__image'); ?> c-acf_column__image"><img src="<?php echo $image['url']; ?>" alt=""></div>
<?php if ($caption) : ?>
<p class="<?php echo esc_attr($class . '_caption'); ?> c-acf_column__caption">
<?php echo $caption; ?>
</p>
<?php endif; ?>
</div>
<?php endwhile; ?>
</div>
<?php
}
...
※アイコンも自由に設定できますが、SVGの場合、iconのbackgroundプロパティなどは効かないようです。
色はsvgパスに直接かけばokです。
※別途PHPファイルに出力させるhtmlコードを書く場合は、render_callbackの代わりに下記を設定。
'render_template' => get_stylesheet_directory().'/block/block-acf-column-2.php',
なぜカスタムブロックが必要？
標準で用意されているブロックのHTML構造を変えたり、
例えばレイアウト要素>カラムから、2カラムを選んだ時に親要素の
見つからなかったので今回作成することにしました。
私が担当する案件では、
あくまでブロック単位で自由に組み合わせるのは推奨するけど、
そのブロックの中で自由に画像の大きさを変形させたり、文字サイズや色を組み合わせたりってことは
全体のデザイン性統一の理由から、
基本無いので... 結局CSSをきちんと当ててあげることが多いです。
今後どうするか...
acfがより進化するのを待つのか。
他のカスタムブロックプラグインを探すのか
ゴリゴリ自分で作るか..
余談
今回初めてカスタムブロックを作成して、
acfでたくさんカスタムフィールドを作るんじゃなくて、
ブロックエディタを使うのが主流になってくるんだろうなあと感じました。