WordPress Gutenberg ブロックの作成
WordPress Gutenberg ブロックの作成 ブロックエディタ Gutenberg で独自のブロックタイプを作成（自作）するための基本的なことについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 2024年時点での情報でのカスタムブロックの作り方は以下を御覧ください。 WordPress Highlight.js カスタムブロックの作成 WordPress Highlight.js カスタムブロック サンプル 環境構築などはせずに、独自のブロック（カスタムブロック）を作成する方法を掲載しています。内容的には主に日本語の公式リファレンスの「ブロック」を元にしています。 以下で作成するブロックは単純なもので、JSX も使用しないので環境構築（Babel の設定など）の必要はありませんが、ローカル
WordPress Gutenberg ダイナミックブロックの作り方
ファイルの作成 この例ではファイルの作成及び JavaScript 環境の構築は create-block を使って行っています。 カスタムブロックをプラグインとして作成するので、ターミナルでプラグインディレクトリに移動して npx コマンド「 npx @wordpress/create-block 」を実行します。 以下では対話モードで実行していますが、slug とオプションを指定して実行することもできます。 関連ページ：Gutenberg ブロック開発の環境構築 $ npx @wordpress/create-block return //create-block を対話モードで実行 npx: 217個のパッケージを33.092秒でインストールしました。 //対話的にオプションを設定 //ファイルの出力先ディレクトリ名に使用される文字列（slug）を指定 ? The block slu
Gutenberg のRichTextの使い方・注意点
基本的なコード RichTextを使う場合のベーシックなコードは次のようになります。h2タグで囲まれた見出しが出力されます。Block Editor Handbookの例をアレンジました。 const { registerBlockType } = wp.blocks; const { RichText } = wp.blockEditor; registerBlockType( /* ... */, { // ... attributes: { title: { type: 'string', // データ型 source: 'html', //どのようにデータを取り出すか selector: 'h2', //対象要素 } } edit(props){ const { attributes: { title, }, } = props; <RichText tagName="h2" //
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
