【WordPress】registerBlockTypeの書き方のきほん

  • URLをコピーしました!

WordPressのブロック登録について、registerBlockType の記述方法が公式のドキュメントだけでは覚えられなかったのでメモ。

目次

ブロック登録 registerBlockType

registerBlockType( 'namespace/block-name', {});
  • namespaceはプラグイン・テーマ名
  • block-nameは各ブロックの名前

ブロック構成

上記の {} の中に、key : value の組み合わせで入れていく

  • title:ブロック名
  • description(任意):ブロックの説明文
  • category:<後述>ブロックが属するカテゴリ
  • icon(任意):<後述>ブロックのアイコン
  • keywords(任意):ブロック検索に使えるキーワード
  • styles(任意):<後述>ブロックにスタイルのバリエーションをつけるための設定
  • attributes(任意):<後述>編集可能なブロックを使うときには必ず使う様々な設定
  • example(任意):ブロック選択時に表示するプレビューの設定
  • transform(任意):ブロック変換の変換元・変換先の設定
  • parent(任意):<後述>入れ子の親になれるブロックを指定
  • support(任意):<後述>ブロックの機能(配置・html編集モードなど)のON/OFF設定

カテゴリー category

どのブロックカテゴリーに登録するかを選ぶ。

category : 'common',
  • common:一般ブロック
  • formatting:フォーマット
  • layout:レイアウト要素
  • widgets:ウィジェット
  • embed:埋め込み

また、functions.phpでカスタムブロックカテゴリーを作成して、登録することもできる。
参考:https://wemo.tech/2210

アイコン icon

ブロックのアイコン。Dashicon か SVGを設定できる。実は色設定などもできる。

icon: 'book-alt',
//または
icon: {
    background: '#7e70af',
    foreground: '#fff',
    src: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,
} ,

スタイル styles

ブロックにスタイルのバリエーションを持たせるのに使う。
nameの部分がclass名としてブロックの囲み要素につくので、それを使ってCSSでスタイリングする。

styles: [
   { name: 'default', label: '角丸', isDefault: true },
   { name: 'outline', label: '枠線' },
],
ブロックのスタイルバリエーション

属性 attributes

属性(attributes)はeditやsaveメソッドにアクセスさせるために必要なもの。
つまり編集可能なブロックで、ブロックの内容を変更・保存するために必要なもの。

attributes: {
    content: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
    }
}
  • 属性名: 好きな名前(上記ではcontent)
  • type: 値の種類、文字列なら’string’。数値なら’number’など
  • source: 変更・保存するもの。text, html, attribute, query(type:arrayの時に使う),meta(記事のメタ属性)(richtextのときはchildren)
  • selector: htmlタグやclass名。sourceがhtmlの時に使う。
  • attribute: 属性(alt とか srcとか)名。sourceがattributeの時に使う。

※後述するsupport でalign(配置)を使えるようにすると、align属性も使えるようになる。

attributes: {
    align: {
        type: 'string',
        default: 'right'
    },
}

親 parent

特定のブロックの中でしか使えないブロックをつくる時に設定する。(スライドショーブロックの中に、スライド画像ブロックを作る ような)

parent: [ 'core/columns' ],

[] の中に記述したブロックの中でだけ選べるブロックになる。

サポート support

ブロックがどの機能をサポートするかを設定する。

supports: {
    anchor: true
}

align(配置)

初期値はfalse。trueとするか、[] で left, center , right, wide, full から選ぶ。デフォルト値を設定したいときは前述のattributesを使う

alignWide

初期値はtrue。ブロックに対して幅広の配置を有効にする設定。(テーマ側にadd_theme_support( ‘align-wide’ )が無いと効果が無い)

anchor

初期値はfalse。ブロックに自由なid名(アンカーリンク用のアンカー)を設定できるようにする設定。

anchor

customClassName

初期値はtrue。ブロックに自由なclass名を設定できるようにする。

customClassName

className

初期値はtrue。ブロックに .wp-block-***(ブロック名) というclassをつける。

出力されるHTML上はすごい状態になるが、他のプラグインのブロックなどとのブロック名が混ざる(CSSが混ざる)のを避けるために有用。

html

初期値はtrue。HTMLとして編集 の機能を使えるようにする。

HTMLとして編集

inserter

初期値はtrue。インサーター(+ボタンで選べるブロックの一覧)に表示させるかどうか。

multiple

初期値はtrue。1つの投稿につき1回しか使わなせないときは、falseにする。(標準ブロックの「続きを読む」ブロックはfalseになっている)

reusable

初期値はtrue。再利用可能なブロックに変換してほしくないときは、falseにする。

最終的にできるもの

最終的にはこんな感じでブロックを作ります。

(function () {
    var el = wp.element.createElement,
        blocks = wp.blocks,
        InnerBlocks = wp.blockEditor.InnerBlocks;

    blocks.registerBlockType('custom/hoge', {
        title: 'hogeブロック',
        icon: 'welcome-widgets-menus',
        category: 'layout',
        supports: {
            anchor: true
        },
        keywords: [],
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'div',
            },
        },
        edit:,//編集時の処理
        save:,//保存時の処理
    });


    blocks.registerBlockType('custom/fuga', {
        title: 'fugaブロック',
        icon: 'welcome-widgets-menus',
        category: 'layout',
        supports: {
            anchor: true
        },
        keywords: [],
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'div',
            },
        },
        edit:,//編集時の処理
        save:,//保存時の処理
    });
})();
<?php
function add_my_assets_to_block_editor() {
    wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/block/block_style.css' );
    wp_enqueue_script( 'block-custom', get_stylesheet_directory_uri() . '/block/block_custom.js',array(), "", true);
}
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );

参考文献

https://developer.wordpress.org/block-editor/developers/block-api/block-registration/

https://illustswitch.com/gutenberg-attributes/

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次