Gutenberg(ブロックエディタ)メモ: Templatesとplaceholderを使う

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg
WordPressのGutenberg

WordPressのGutenberg用のTemplatesが便利そうなので、多少試したことを記載しています。

構築環境
WordPress4.9.8
JavaScriptJSX/ESNext
Gutenberg3.9.0

Templates

ハンドブックでは上記ページにあります。

特徴

  • PHPファイルに記述することで、予めブロックを配置した状態で書き始められる
  • もともと用意されているcoreのブロックだけではなく、独自に作成したブロックも使用可能
  • attibutesの設定によるが、placeholderなどの指定もできる
  • template_lockを記述して、「移動不可/追加不可/削除不可」と「移動可/追加不可/削除不可」の状態が設定できる

簡単に書けば、ひな形を作成して手間を減らせる便利な仕組みです。

既存記事での動作

  • テンプレートなしの状態から設定した場合、既存記事にはテンプレートの反映を拒否できる選択肢がでる
  • テンプレートを反映後に変更した場合でも、反映前に配置されたブロックは消えない(テンプレートで配置して何も入力していないブロックも残る)

拒否できる選択肢とは以下のようなものです(※あくまで執筆時点)。

Templatesのアラート
Templatesのアラート

ただし、強制的にではないものの(反映を拒否することが可能)、「投稿ページ/固定ページ/投稿タイプ」ぐらいの区分けしかできないため影響範囲が広く、設定するならなるべく最初からの方が良いと思います。

まだ開発中

ハンドブックには新機能の実装予定が書かれており、現時点では完成していません。

そのため作り方にしろ反映の仕方にしろ、今後変化があるという前提で考える必要があります。

その意味では、一度配置されたブロックには影響を与えないとはいえ、仕様や機能が固まるまで使わない方がよいかもしれず、使う場合は自己責任となります。

サンプル

以下はサンプルですが、プラグインで開発している場合にはプラグイン内のPHPに、そうではない場合はfunctions.phpあたりに記載することになります。


//templates ブロックを予め設定できる
function my_add_template_to_posts() {
  $post_type_object = get_post_type_object( 'post' );
  $post_type_object->template = array(
    array( 'core/paragraph', array(
      'placeholder' => '冒頭文',
    ) ),
    array( 'core/heading', array(
      'placeholder' => '中見出し',
    ) ),
    array( 'core/image'),
    array( 'core/paragraph', array(
      'placeholder' => '本文',
    ) ),
    array( 'core/paragraph', array(
      'placeholder' => '本文',
    ) ),
    array( 'core/list', array(
      'tagName'     => 'ul',
    ) ),
    array( 'core/list', array(
      'tagName'     => 'ol',
    ) ),
    array( 'core/shortcode', array(
    ) ),
    //自作したブロックのブック名を記載するとcoreと同様にセットされる
    //placeholderはここの指定がブロック設定時の指定よりも優先される
    array( 'my-plugin/my-block', array(
      'placeholder' => 'カスタムブロック',
    ) ),
  );
  //allにすればブロック固定。移動も削除も追加も不可。
  //$post_type_object->template_lock = 'all';

  //insertすればブロックは移動可能。削除と追加は不可。
  //$post_type_object->template_lock = 'insert';

  //記載しないか、以下のようにfalseにすれば、移動も削除も追加も全て可能。
  //$post_type_object->template_lock = false;

}
add_action( 'init', 'my_add_template_to_posts' );

template_lock

template_lockを指定すれば、ブロックの操作を限定できます。

通常では不要だと思いますが、カスタム投稿タイプでがっちりブロックを管理したい場合には非常に有効な機能です。

なお、デフォルトで自由に操作できるため、false指定を書く必要はまずないでしょう。

coreに設定できるコンポーネント

上記を見ると、恐らく以下のコンポーネントが記述可能だと思われます。

  • archives
  • audio
  • button
  • categories
  • code
  • columns
  • cover-image
  • embed
  • file
  • freeform
  • gallery
  • heading
  • html
  • image
  • latest-comments
  • latest-posts
  • list
  • more
  • nextpage
  • paragraph
  • preformatted
  • pullquote
  • quote
  • separator
  • shortcode
  • spacer
  • subhead
  • table
  • text-columns
  • verse
  • video

実際に試したのはごく一部のため、使えないものもあるかもしれません。

また、渡せる値とその効果は使うコンポーネントによって違うため、実際に使う場合にはgit内の各詳細(大概はindex.jsのedit内をみれば渡せる値の検討がつきます)を見る必要があります。

placeholder

自作したブロックにもplaceholderを付けてtemplatesで操作した場合には、以下のように書けば良いようです(git内を見て確認しました)。

  • attributesにplaceholderをtype:stringで設定
  • return内の該当コンポーネントにplaceholderを記述

上だけでは分かりにくいでの、以下にコードを例示します。


registerBlockType( 'my-plugin/test-placeholder-p', {
    title: 'test-placeholderr-p',
    icon: 'universal-access-alt',
    category: 'formatting',

    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        placeholder: {
          type: 'string',
        }
    },

    edit( { attributes, className, setAttributes } ) {
        const { content } = attributes;

        function onChangeContent( newContent ) {
            setAttributes( { content: content } );
        }

        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
                value={ content }
                {// plseholderだけの場合、templatesでの設定がないと空欄になるため、求める状態次第で書換え
                }
                placeholder={ placeholder || '通常表示されるplaceholder' }
            />
        );
    },

    save( { attributes, className } ) {
        const { content } = attributes;

        return (
            <RichText.Content
                tagName="p"
                className={ className }
                value={ content }
            />
        );
    },
} );

上記は単に編集可能なpタグのブロックを作るコードですが、肝心の部分はreturn内のplaceholderの箇所です。


{// plseholderだけの場合、templatesでの設定がないと空欄になるため、求める状態次第で書換え
}
placeholder={ placeholder || '通常表示されるplaceholder' }

上記のコメントにも書いていますが{ placeholder } だけもでも可能です。

なお、attrigutesのplaceholderにdefaultで値を入れていると、上記の記述ではplaceholderが出力されず空白になります。

この件に限らず、attrigutesでdefaultを使う場合には影響を確認してから可否を判断するのが安全かもしれません。

関連記事

Gutenberg(ブロックエディタ)に関連する記事一覧。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄