WordPress のカスタムブロックに挑戦！
日付：2023-12-11更新日：2023-12-11
この記事は デジタルキューブ ＆ ヘプタゴン Advent Calendar 2023 の 12月11日分の記事として執筆しています。
目次
きっかけ。
カスタムブロックが React で作られている…という話を聞いて、ちょっと面白いかも？と思ったのがきっかけです。
Kansai WordPress Meetup でお馴染みのつぶさんとるっちんさんと３人でプチ Meetup !!!
このブログは、その時の学びと「 忘れないよ！ 」という個人的メモな記事になります。
実際にやったのは、↓このチュートリアルです。
ブロックの作成 チュートリアル
このチュートリアル、日本語がむずかしすぎますが、とりあえずイチページ全部読むとやることが理解できます。
（前半説明でやること後半みたいな感じ）
最初にブロック開発の環境を整えます
公式サイトに記載があるのは、
- コードエディター
- Node.js 開発ツール
- ローカルの WordPress 環境
①コードエディターは、いつも使っている VS Code を使いました。
②Node.js 開発ツールについては、公式サイトに 「nvm を使用した Node.js のインストール」があります。
私はもともと「nodenv」というNode.js バージョン管理ツールが入っていたので、それで代用。
バージョンは安定版なら特に問題なかったです。
③ローカルの WordPress 環境は、簡単便利な LOCAL を用意。
これで、環境は整いましたー！
テスト環境を LOCAL で作る。
LOCAL を立ち上げて、新しくサイトを立ち上げます。
設定は、何も変えずポチポチするだけで OK !!!
管理画面を開いておきましょう。（日本語化すると安心ですw。
カスタムブロックの雛形を作ります。
ターミナルで先ほど作ったテスト環境のプラグインディレクトリに移動します。
（VS Code で開いて、コマンド打っても良し）
Local だと↓な感じなところにあります。
~\Local Sites\サイト名\app\public\wp-content\plugins
ディレクトリに移動したら、コマンドをたたく。プラグインファイルが作られます。
npx @wordpress/create-block gutenpride
プラグインディレクトリの中に、新しく「gutenpride」が作られています。
追加したプラグインの有効化
ふたたび管理画面に戻りまして、プラグイン「gutenpride」を有効化します。
これでカスタムブロック「gutenpride」が使えるようになりました。
早速、投稿の画面から使えるかどうかを確認してみます。
あったー！！！！
実際に、ブロックを記事に入れてみます。
超簡易なものなので、編集機能はありませんし、ブロックツールバーや設定サイドバーはまだありません。
これを編集して、自分のブロックを作っていきます。
作られたファイルを確認しながら編集する。
VS Code で先ほど作った プラグインを開きます。
編集していくファイルは、src/ の中のファイル群です。
src/block.json
ブロックのメタデータの情報を記述します。
block.json のメタデータ
src/edit.js
ブロックをエディター上でどのように表示するかを記述します。
src/editor.scss
エディター上で表示されるブロックのCSS。
src/save.js
ブロックを最終的にサイト上でどのように表示したいかを記述します。
src/style.scss
こちらの CSS は、サイト上の表示とエディタ用の表示どちらにも適用されます。
便利だけど、、、読み込みがちょっと遅いっぽいので、エディター用 CSS は、editor.scss を使って、サイト上の表示は通常テーマに持ってる CSS に書いた方がいいよーと弊社のブロックエディターマスターが言っておりました！なるほど！！
src/index.js
ブロックの登録とそれに付随するファイルの読み込みの設定など。
実際に編集する前に。
コードエディター上で修正した内容をウオッチして、テスト環境に即反映できるようにします。
ターミナルでディレクトリ gutenpride に移動して、下記コマンドを打ちます。
開発用のビルドを開始します。
npm start
では、実際に編集してみましょう。
src/edit.js のテキストのところを変更してみます。（日本語いれただけ、、
{ __( 'Gutenpride だぜ – hello from the editor!', 'gutenpride' ) }
そうすると、、
反映されましたー。
反映されないーーって場合のイージーミスとしては、テスト環境のブラウザ更新忘れずに、、
急ですが、最終形態こうなりましたw！
Block.json
attributes を追加。（23行目
入力用の message とブロックコントロールを追加するための alignment を追加しておく。
attributes は、ブロックの edit 関数や save 関数両方に渡されます。
属性と編集可能フィールド
supports を追加。（”title” のところと11行目
これを記述するとブロックコントロールと設定サイドバーが勝手に追加されます。やった！！
ブロックサポート
↓さらに詳しくは、、
Supports
いい感じにブロックコントロールが設定されますが、テキストの位置 textAlign はないので（マジだよ！）、自分で edit.js に追加する必要があります。
次章、AlignmentToolbar のところ。
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "create-block/gutenpride",
"version": "0.1.0",
"title": "Gutenpride supports",
"category": "widgets",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"example": {},
"supports": {
"color": {
"text": true,
"background": true,
"link": true
}
},
"textdomain": "gutenpride",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js",
"attributes": {
"message": {
"type": "string",
"source": "html",
"selector": "p"
},
"alignment": {
"type": "string",
"default": "none"
}
}
}
Edit.js
入力用のコンポーネント RichText を追加しました。
RichText リファレンス
ブロックコントロール（AlignmentToolbar）も追加しております！（文字位置変えるやつ
// テキストの翻訳を取得します。
import { __ } from "@wordpress/i18n";
// コンポーネントの読み込み
import {
useBlockProps, // 必須、ブロックの属性を取得するための関数
RichText, // 入力用のコンポーネント
BlockControls, // 独自でブロックコントロール入れたい場合はこれを使う
AlignmentToolbar, // ブロックコントロールに追加するコンポーネント
} from "@wordpress/block-editor";
// エディターでの表示用CSSを読み込み。
import "./editor.scss";
// Edit 関数は、エディター上でのブロックの構造を記述します。
// attributes, setAttributes は、ブロックの属性を取得・設定するための関数です。
export default function Edit({ attributes, isSelected, setAttributes }) {
// ブロックコントロールから渡ってくるスタイルを定義します。
const onChangeAlignment = (newAlignment) => {
setAttributes({
alignment: newAlignment === undefined ? "none" : newAlignment,
});
};
const blockStyle = {
textAlign: attributes.alignment || "left",
};
return (
<div {...useBlockProps()}>
{
// 独自のブロックコントロールを追加するには、BlockControls コンポーネントを使用します。
<BlockControls>
<AlignmentToolbar
value={attributes.alignment}
onChange={onChangeAlignment}
/>
</BlockControls>
}
{/* isSelected は、ブロックが選択されているかどうかを判定するための変数です。 */}
{attributes.message && !isSelected ? (
<>
{/* 編集後の表示 */}
<p style={blockStyle}>{attributes.message}</p>
</>
) : (
<>
{/* 編集中の表示 */}
<RichText
style={blockStyle} // ブロックのスタイルを渡す
tagName="p" // このタグは要素の出力
value={attributes.message}
onChange={(val) => setAttributes({ message: val })}
placeholder={"ここにメッセージ入れてね"}
/>
</>
)}
</div>
);
}
Save.js
独自のブロックコントロールで使ったスタイルの追加ぐらいで、特段何もしていません。
// クラス名などの必要なすべてのプロパティが提供されます。
import { useBlockProps } from '@wordpress/block-editor';
// save 関数は、最終的なマークアップに結合されサイトにレンダリングされます。
// attributes は、edit 関数で設定した属性を取得するための関数です。
export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
// ブロックのスタイルを定義します。
const blockStyle = {
textAlign: attributes.alignment || "left",
};
return <div {...blockProps}>
<p style={blockStyle}>{attributes.message}</p>
</div>;
}
style.scss
チュートリアルどおり、フォントを追加して CSS を更新しました。
↓フォント追加の方法。
フォントファイルのロード
/**
* The following styles get applied both on the front of your site
* and in the editor.
*
* Replace them with your own styles or remove the file completely.
*/
@font-face {
font-family: Gilbert;
src: url( ../assets/gilbert-color.otf );
font-weight: 700;
}
.wp-block-create-block-gutenpride {
font-family: Gilbert, sans-serif;
font-size: 64px;
}
.wp-block-create-block-gutenpride {
background-color: #21759b;
color: #fff;
padding: 2px;
}
editor.scss
編集画面でもスタイルが当たるように修正、といっても数行です。
// エディター上で表示されるブロックのCSS。ブロックのスタイルを定義する。
.wp-block-create-block-gutenpride {
border: 1px dotted #f00;
}
.wp-block-create-block-gutenpride input[type='text'] {
font-family: Gilbert, sans-serif;
font-size: 64px;
color: inherit;
background: inherit;
border: 0;
}
感想。
つ、疲れたwww。
3人でやったから完走できたものの、ひとりじゃ一気にできなかったと思います。
私は、当日までなーんの予習もせずに挑んだので、ふたりにあれやこれや言われながらナントカたどり着いたーって感じでした。
後日、ブログを書くにあたって調べていると「ここにちゃんと書いてるやん」みたいなこともありましたし、自分の理解が全然追いついてなかったんだなーってこともわかりました。（復習大事。あと予習しとけ
完成
編集画面上でテキストが入ります。編集中でも見た目の表示は、公開時同様のスタイルが再現されます。
ブロックコントロールの表示とサイドバーの表示もできたー！！！
今回の学び ：なんか難しいことやるときは、みんなでやろう。
補足情報
弊社のブロックマスターよりカスタムブロックやる時のお役立ちリンクいただいたので、メモっときます！
これ公式よりもわかりやすいかも！！
Gutenbergブロック開発徹底解説
WordPress コンポーネントの使い方やコードをみて確認できます。
Component Reference
Storybook 上で @wordpress/componentsで開発された UI コンポーネントを調べることができます。
Introduction
WordPress ブロックフィルターが知れる。。
A Crash Course in WordPress Block Filters