WordPress

Javascriptに詳しくなくてもできる!WordPressブロックエディタ(Gutenberg)カスタム -ACF編-

WordPressのブロックエディタ(以下、Gutenberg)はReactで開発されているため、カスタムするには、最低限javascriptの知識が必要です。Node.js、WebpackやBabelなど開発環境を整えないといけません。

JS+CSSでブロックエディタのスタイルを追加する方法

JavaScriptの盛り上がりは近年目覚ましいものですが、まだ多くの人はJavascriptに苦手意識を持っているクリエイターも多いのではないかと思います。
jQueryならわかるけどES6って何それオイシイノ?みたいな状態だとブロック構築もなかなか難しいですよね。

今回紹介するACF(Advanced Custom Fields)は、ブロック表示用のテンプレートを使用して、カスタムフィールドからブロックを作成するプラグインです。

カスタム方法は、Reactの知識もNodeのインストールも必要ありません。
これでグッとカスタマイズの敷居も低くなったのではないでしょうか。

"Block building without JavaScript"(Javascript無しでブロックをビルドできる)と言われているACFを使ってブロックエディタを最速でカスタムしていきましょう。

Advanced Custom Fields Pro

Advanced Custom Fields Pro様様ってぐらいお世話になってます

その前に少しACFについてご紹介。

もともとACFは、カスタムフィールドをあれこれできる便利なプラグインで、フリーランスや代理店向けにも非常に人気のある開発者ツール。それも世界中で100万以上のインストールされているプラグインです。

ACF無印は無料でダウンロードできますが、Pro版は有償です。ACF Proバージョン5.8以降はブロックビルダーで作成されています。5.8より前のバージョンでは動作しないのでご注意ください。

最終動作

エディタはこのような感じ

themes内のディレクトリ構成

以下のようにディレクトリとファイルを作成します

/テーマ名 
function.php 
  /template-parts
    /blocks
      /testimonial
        testimonial.php
        testimonial.css
        testimonial.js

カスタムブロック作成

acf_register_block_type()で、カスタムブロックをサクサク作っていきます。

まずはいつものようにfunction.phpに記載。

function register_acf_block_types() {
    // register a testimonial block.
    acf_register_block_type(array(
        'name'              => 'testimonial',
        'title'             => __('Testimonial'),
        'description'       => __('A custom testimonial block.'),
        'render_template'   => 'template-parts/blocks/testimonial/testimonial.php',
        'category'          => 'formatting',
        'icon'              => 'admin-comments',
        'keywords'          => array( 'testimonial', 'quote' ),
		'enqueue_assets' 	=> function(){
			wp_enqueue_style( 'block-testimonial', get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.css', array(), '1.0.0' );
			wp_enqueue_script( 'block-testimonial', get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.js', array(), '1.0.0', true );
		  },
    ));
}
// Check if function exists and hook into setup.
if( function_exists('acf_register_block_type') ) {
    add_action('acf/init', 'register_acf_block_types');
}

カスタムフィールドを作成

Gutenbergの編集画面では下のように表示されます。

テンプレート作成

<?php

/**
 * Testimonial Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'testimonial-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'testimonial';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assing defaults.
$text = get_field('testimonial') ?: 'Your testimonial here...';
$author = get_field('author') ?: 'Author name';
$role = get_field('role') ?: 'Role';
$image = get_field('image') ?: 295;
$background_color = get_field('background_color');
$text_color = get_field('text_color');

?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
    <blockquote class="testimonial-blockquote">
        <span class="testimonial-text"><?php echo $text; ?></span>
        <span class="testimonial-author"><?php echo $author; ?></span>
        <span class="testimonial-role"><?php echo $role; ?></span>
    </blockquote>
    <div class="testimonial-image">
        <?php echo wp_get_attachment_image( $image, 'large' ); ?>
    </div>
    <style type="text/css">
        #<?php echo $id; ?> {
            background: <?php echo $background_color; ?>;
            color: <?php echo $text_color; ?>;
        }
    </style>
</div>  
(function ($) {

  /**
   * initializeBlock
   *
   * Adds custom JavaScript to the block HTML.
   *
   * @date    15/4/19
   * @since   1.0.0
   *
   * @param   object $block The block jQuery element.
   * @param   object attributes The block attributes (only available when editing).
   * @return  void
   */
  var initializeBlock = function ($block) {
    $block.find('img').doSomething();
  }

  // Initialize each block on page load (front end).
  $(document).ready(function () {
    $('.testimonial').each(function () {
      initializeBlock($(this));
    });
  });

  // Initialize dynamic block preview (editor).
  if (window.acf) {
    window.acf.addAction('render_block_preview/type=testimonial', initializeBlock);
  }

})(jQuery);
.testimonial {
    background: #00e4ba;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
}
...

環境

ローカル開発:Flywheel
テストサイト:WordPress 5.2.2、Gutenberg 6.1.1
ACF:5.8.2

Javascriptが書けなくてもGutenbergをカスタムできる

多少、phpの理解は必要ですが、Javascriptをすっ飛ばしてカスタムすることができました。

リアルタイムでブロックとして修正できる快感...!
テーマによってはショートコードの方が楽かもしれませんが、Gutenbergは文字というよりレイアウトとしてビジュアライズされているので、編集時も直感的にわかりやすいので、積極的に取り入れていきたいです。