Block Editor HandbookのBlocksチュートリアルを和訳する 【step.1】

そろそろ新エディターGutenbergで独自のカスタムブロックを作ってみたくて、公式チュートリアルのBlock Editor Handbook(ブロックエディターハンドブック)を少しずつ和訳していこうと思います。まだ日本語の詳しい説明が少ないのでね。わかりやすいように端折った部分がありますが、、誰かのお役に立ちますように。

公式チュートリアルの和訳

Blocks (Introduction)

https://developer.wordpress.org/block-editor/tutorials/block-tutorial/の和訳

このチュートリアルの目的は、新しいブロックタイプを作成するための基本を順を追って説明することです。 簡単な例から始めて、それぞれのセクションで徐々に新しいブロックを構築し、最終的には、独自のブロックタイプを実装するときに必要になると思われる一般的な機能を学びます。

このチュートリアルに沿って進むにあたり、WordPressプラグインをダウンロード(download the accompanying WordPress plugin )することで、あなた自身のサイトで全ての例を試すことができます。チュートリアルの各ステップで自分のアイディアで例を修正し、それがブロックにどのような影響を与えるのか、自由に試してみるべきです。

コードスニペットは、「従来の」JavaScript(ECMAScript 5、または「ES 5」)、および新しいバージョンの言語規格(ES 2015以降、または「ES Next」)の両方に用意されています。 各コード例の上にあるタブを使用してそれらを切り替えることができます。 ブロックをESNextで作成することを選択した場合は、古いブラウザをサポートするためにJavaScriptのビルドステップを実行する必要があります。

ESNextを使用して新しいブロックを作成する必要はなく、必要に応じて従来のJavaScriptを使用することができます。

Writing Your First Block Type

https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/の和訳

まず最初は簡単な例で、スタイル付きのメッセージを投稿に表示する新しいブロックタイプを作成しましょう。 この時点では、ユーザーはメッセージの編集をできません。 編集可能フィールドについては、後のセクションで詳しく説明します。

静的コンテンツを含むブロックは、JavaScriptでregisterBlockType関数を使用して実装されています。 この関数は、エディタでどのように表示し、編集時に変更し、投稿のコンテンツに保存されるか、というブロックの設計図を記述するためのものです。

Enqueuing Block Scripts

ブロックのエディタはJavaScriptで実装されていますが、エディタがロードされたときにスクリプトが実行されるようにするには、ブロックサーバーサイドを登録する必要があります。wp_register_scriptwp_register_styleを使用してスクリプトとスタイルを登録します。そして、script、style、editor_script、editor_styleでブロックタイプの登録設定をして、これらをブロックに関連付けられたハンドルとして割り当てます。 editor_という接頭辞付きのハンドルはエディタ内でのみ実行されますが、スクリプトとスタイルはエディタとサイトに表示するときの両方で実行されます。

2つのスクリプトの依存関係に注意

・wp-blocksはブロックタイプの登録とそれに関連する関数を含みます
・wp-elementはブロックの構造を記述するためのWordPress要素の抽象化( WordPress Element abstraction)を含みます

RichTextコンポーネントのような、wp-editorパッケージのコンポーネントを使用する場合は、依存関係リストにwp-editorを追加する必要もあります。

Registering the Block 

スクリプトを実行して、ブロックがどのように実装されるか見てみましょう。

ここまでで、エディタ側では「Hello World, step 1 (from the editor).」、サイト側では「Hello World, step 1 (from the frontend).」と表示されるはずです。

title、icon、categoryの値を指定すると、エディタ内のブロック挿入ダイアログでオプションとして使用できるようになります。 iconは、組み込みのDashiconsアイコンセットに含まれているものからアイコンを選択するか、カスタムのsvg要素を指定できます。

正直もうこの時点でよくわからないので補足説明。

まずはプラグイン作成

「Enqueuing Block Scripts」で書かれているコードをどこに記述するのかわからなかったのですが、まずはプラグインを作成するのですね。一気に萎えましたが意外と簡単でした!

wp-content > plugins のフォルダ内に好きな名前のプラグインフォルダを作成します。私は適当に「original-block」としました。そして、作成したフォルダ内に新しいphpファイルを作って、下記のコードを記述します。phpファイルの名前は、例えば「original-block.php」など、オリジナルな名前にします。サイトの管理画面からプラグイン一覧をみると、自分で作ったプラグインが表示されるので、有効化しましょう。

上記のphpファイルに、続けて「Enqueuing Block Scripts」で書かれているコード「function gutenberg_examples_01_register_block() {…」を記述します。下記のようになりました。

ここからブロック作成。

先程作成したプラグインフォルダの中に「block.js」という名前のファイルを作り、「Registering the Block 」で説明されているコードをそのままコピペして保存します。「( function( blocks, element ) {…」ってやつですね。

投稿エディタで「ブロックの追加」を押すと、「レイアウト要素」の中に「Example: Basic」が出てくるはず!

registerBlockType関数

カスタムブロックを作るための基本となる関数です。 wp-blocksというパッケージに含まれる関数なので、blocks.registerBlockTypeという書き方になってます。下記のコードが基本になり、{ }内でさらにブロックの詳細を書いていきます。

blocks.registerBlockType( ‘プラグイン名またはテーマ名/ブロック名’, {} );

ブロックの構造を指定

titleは、エディターでブロックを選択する時に表示される名前。iconはその名のとおりアイコン。WordPress’ Dashicons から好きなものを指定するか、SVGも使用可能です。categoryは、common / formatting / layout / widgets / embed のいずれかを指定します。

その他にも、オプションでkeywords, styles, attributes, transforms, parent, supportsがありますが、この時点では割愛します。公式の英文説明はこちら↓

edit

エディターでブロックを使う時に表示する構造を function( ) { return el( ) } の中に書きます。上の例だと、pタグblockStyleで定義したスタイル(4~8行目)を適用させて「Hello World, step 1 (from the editor)」という内容を表示させます。

save

save: function() {
return el(
‘p’,
{ style: blockStyle },
‘Hello World, step 1 (from the frontend).’
);
},

最終的に投稿として保存するブロックの構造を function( ) { return el( ) } の中に書きます。これはとーってもシンプルな例ですね。

今日はこれで以上です!

次のステップの日本語訳はこちら

anchoko.

前回に引き続き、Block Editor Handbook(ブロックエディターハンドブック)のブロックスチュートリアルを…

実務レベルの環境構築は・・・

ちなみに・・・今回は公式チュートリアルに沿って自分でコードを書いて勉強するために自分でプラグイン作成してみましたが、実務レベルでカスタムブロックを作っていくなら、「Create Guten Block」を使って環境構築するのが一番簡単でスピーディーだと思いました。Node.js必須です。でも、練習ならとりあえず簡単なプラグインを作っちゃえばいいと思うので、ここのブログanchokoで紹介しているコードを参考にしてもらえたら嬉しいです。Create Guten Blockについては下記の記事を参考にしました。