More than 1 year has passed since last update.

Advanced Custom Fields Proを用いたGutenbergのブロック開発

Posted at 2022-11-13

Gutenbergが嫌われている件について

WordPress5.0にてGutenbergが搭載されてから早4年が経ちました。
今ではGutenbergをフル活用した「フルサイトエディター (FSE)」なるものが実装されつつあり、もはやWordPressを使用する人にとって、Gutenbergの理解は必須です。

しかし、、、世の中はGutenbergが嫌いな人が多い印象を抱きます

Gutenberg内の機能開発が活発であり、運用の工数がかかる
クラス名が勝手に割り振られてしまい、CSSでの制御が難しい
アップデートによりブロックの見た目が崩れることがある
Classic Editorよりも、投稿画面のカスタマイズがしにくい
カスタムフィールドを設置しても、場所が見にくい（ページ下部とサイドバーにしか出せない）ので編集しにくい

などが主に嫌われる理由だと思います。

※余談ですが、フルサイトエディターの呼び方がサイトエディターに変更になりました。
より利用しやすい名前にしたことから、WordPress側はこの機能を本格的に開発していくことが予想されます。

じゃあ自分でGutenbergブロックを開発しちゃおう！

Gutenbergは幸いなことに、オリジナルブロックを開発することができます。

しかし、一つのブロックを作るのに途方もない苦労を要します。
Reactの知識やGutenbergのコアの仕組み等、考慮するべき点が非常に多く存在しているため、工数がかなりかかります。

そして何より、Gutenbergはまだ発展途上であり今後のアップデートによってはオリジナルブロックが壊れてしまうこともあるかもしれません。
Gutenbergのブロックが壊れてしまった場合の改修は、かなり大変なことになると予想されます。

そんなあなたにはこれ「Advanced Custom Fields Pro」

かの有名なプラグイン「Advanced Custom Fields」の有料版「Advanced Custom Fields Pro（以下、ACFPro）」がGutenbergのブロック作成をサポートしてくれてました！

お値段：Personalプラン（1つのサイト） $49/年

他にも無料で優秀なプラグインはたくさんありましたが、管理画面上での使い勝手・知名度・カスタマイズのしやすさ・ドキュメントの充実さ等を考慮すると、「ACFPro」が一番良いと考えられます。
安易に無料のプラグインを使用していると、いつサポートを切られるかわかりませんからね…

ACFProのバージョンは6.0.3で行います。
6.x系から管理画面の見た目が大きく変更されました。後方互換性は一部例外（parse_blocks()を用いてACFブロックからデータを読み取る場合）を除きとれていますので、5.x系の方でも参考になるかと思います。

前置きが長くなりましたが、ここからACFProを用いたブロック開発の手順を公開していきます。

ACFProを用いたブロック作成手順

実装したい機能

カラム数を1-4まで自分で選択可能。
カテゴリーを表示させるかどうか選択可能。
表示させたい投稿を手動で選択して、該当投稿のタイトル・サムネイルを表示する。
表示するスタイルを選ぶことができる

上記の機能を実装したカスタムブロックをACFProを使用して作成してみます。

①functions.phpの記述

functions.php

<?php
/**
 * フロント側・エディター側の両方でjavascript,cssの読み込み
 */
function my_block_editor_front() {
  wp_enqueue_style(
    'block-style',
    home_url() . '/assets/css/wp/style.css', //ACFブロックで定義したスタイルはすべてこのCSSの中に入れる。
    [],
    '1.0.0'
  );
}
add_action('enqueue_block_assets', 'my_block_editor_front');

/**
 * ACFカスタムブロックの登録
 */
function acf_custom_block_add() {
if (function_exists('acf_register_block_type')){
    acf_register_block_type([
      'name' => 'post-list', //ブロック名を英数字で入力
      'title' => __('投稿一覧'), //ブロックの名前
      'description' => __('投稿一覧です。'), //ブロックの説明
      'icon' => 'admin-post', //ブロックのアイコンを指定 (https://developer.wordpress.org/resource/dashicons/#store)
      'keywords' => ['投稿一覧'], //ブロックを検索するときのキーワード
      'mode' => 'edit', //どのエリアにブロック入力欄を表示させるか
      // 'post_types' => array('post', 'page'), 表示する投稿タイプ（今回は使用しない）
      'category' => 'custom-layout-category', //ブロックをどのカテゴリーに属させるか
      'render_template' => 'acf-blocks/acf-block/post-list.php', // ベースとなるテンプレート
      'supports' => [
        'align' => false, // 中央寄せとか右寄せとかの表示を出さない。
        'multiple' => true, // ブロックを複数回利用させるかどうか
        // 'jsx' => true, // カスタムブロックの中で、Gutenbergのブロックを使用したい場合（今回は使用しない）
      ],
    ]);
  }
}

/**
 * ACFカスタムブロックの登録
 */
if (function_exists('acf_custom_block_add')) {
  add_action('acf/init', 'acf_custom_block_add');
}

/**
 * カスタムブロックカテゴリーの登録
 */
add_filter('block_categories_all', function ($categories) {
  $categories[] = [
    'slug' => 'custom-layout-category',
    'title' => 'ACFブロック',
  ];
  return $categories;
});

ACFPro6.0系からblock.jsonを使用してACFのブロックを登録するようにできるようになりました。

①-2 block.jsonを利用する場合（ACFPro6.0以降のみ）

functions.php

<?php

/**
 * ACFカスタムブロックの登録（block.json利用）
 */
function register_acf_blocks() {
	register_block_type( __DIR__ . '/acf-block/post-list' ); // block.jsonが含まれているディレクトリへのパス
}

block.json

{
    "name": "post-list",
    "title": "投稿一覧",
    "description": "投稿一覧です",
    "icon": "table-col-after",
    "category": "custom-layout-category",
    "align": "center",
    "apiVersion": 2,
    "acf": {
        "mode": "edit",
        "renderTemplate": "./acf-block/post-list/post-list.php"
    },
    "supports": {
      "align": false
    }
}

②ACFPro側の設定

フィールドグループを表示する条件を「ブロック」、「投稿一覧（ブロック名）」に設定します。
※ブロック名は、functions.phpで設定した「title（今回の場合は投稿一覧）」を指定してください。

フィールドを設定します。色々設定する項目はありますが、作りたいブロックに合わせてフィールドを設定してください。

③フィールドで入力した項目を吐き出すテンプレートを作る。

①でrender_templateのパスを設定しましたので、そのファイルにテンプレートを書きます。

post-list.php


<?php
/**
 * ブロック：関連投稿フィールド
 *
 * ブロック説明：
 * 関連投稿を表示させるフィールドです。
 * カテゴリー表示の有無、表示形式、カラム数などを選択できます。
 *
 *  @package shin_m
 */

// ACFに入力した値を取得
$col_num        = 'is-' . get_field( 'col-num' );
$type_field     = get_field( 'type' );
$featured_posts = get_field( 'featured_posts' );
$category_show  = get_field( 'category-show' );

if ( ! function_exists( 'my_category_html' ) ) {
	/**
	 * カテゴリーのHTMLを出力する関数
	 * function_existsで存在を確認しないと、Fatal error: Cannot redeclare ***（関数名）が出てしまう
	 *
	 * @param string $category_show カテゴリー表示フラグ
	 * @param Array  $featured_post 投稿一覧
	 * @return string カテゴリー名を返却
	 */
	function my_category_html( $category_show, $featured_post ) {
		if ( $category_show ) :
			$category_list = get_the_category( $featured_post->ID );
			foreach ( $category_list as $category ) :
				return $category->name;
			endforeach;
		endif;
	}
}
?>

<div class="grid <?php echo esc_html( $col_num ); ?>">
<?php
foreach ( $featured_posts as $featured_post ) :
	if ( 'col' === $type_field ) :
		?>

	<div class="grid-item">
		<a href="<?php echo esc_url( get_permalink( $featured_post->ID ) ); ?>">
			<img src="<?php echo esc_attr( wp_get_attachment_url( get_post_thumbnail_id( $featured_post->ID ) ) ); ?>">
			<span><?php echo esc_html( get_the_title( $featured_post->ID ) ); ?></span>
			<p><?php echo esc_html( my_category_html( $category_show, $featured_post ) ); ?></p>
		</a>
	</div>
		<?php
	elseif ( 'side' === $type_field ) :
		?>

	<div class="side_link">
		<a href="<?php echo esc_url( get_permalink( $featured_post->ID ) ); ?>">
			<p class="side_img">
				<img src="<?php echo esc_attr( wp_get_attachment_url( get_post_thumbnail_id( $featured_post->ID ) ) ); ?>">
			</p>
			<div class="side_info">
				<p class="side_title"><?php echo esc_html( get_the_title( $featured_post->ID ) ); ?></p>
				<p><?php echo esc_html( my_category_html( $category_show, $featured_post ) ); ?></p>
			</div>
		</a>
	</div>
		<?php
	endif;
endforeach;
?>

</div>