【wordpress】オリジナルテーマに自作ブロック(吹き出し)を入れる
wordpressでオリジナルテーマを作ったときに，自作ブロックも入れたいときの作り方。こちらを参考に。ここでは吹き出しを作ってみる。
JavaScript
設置方法は，JavaScriptとcssファイルを用意してfunctions.phpで読み込み。
まずはJavsScriptから。
(function (wp) {
'use strict';
const { blocks, element, blockEditor } = wp;
const el = element.createElement;
const { RichText } = blockEditor;
blocks.registerBlockType('mm/word-balloon-left', {
title: '吹き出し(左)', //ブロックエディタに表示されるタイトル
icon: 'wordpress-alt', //アイコン
category: 'mm-blocks', //カテゴリー名
keyword: ['吹き出し', 'hukidasi', 'ふきだし'], //検索用のキーワード
attributes: {
p: {
type: 'string',
source: 'html',
default: '',
selector: 'p'
}
},
supports: {
anchor: true
},
edit: function (props) {
return el('div', {
className: 'mm-word-balloon-edit-left'
}, [
el('div', {
className: 'header',
},
'吹き出し(左)'
),
el(RichText, {
tagName: 'p',
className: 'content',
value: props.attributes.p,
onChange: function (content) {
props.setAttributes({ p: content });
},
placeholder: 'テキストを入力',
})
]);
},
save: function (props) {
return el("div", {
class: "mm-word-balloon"
}, el("div", {
class: "inner"
}, el("div", {
class: "avatar"
}, el("div", {
class: "avatar-inner"
}, el("img", {
src: "/wp-content/themes/オリジナルテーマの名前/assets/image/avatarLeft.png"
}))), el("div", {
class: "balloon-left"
}, el(RichText.Content, {
tagName: 'p',
className: 'mm-word-balloon-content',
value: props.attributes.p,
type: 'p'
}))));
}
});
}(
window.wp
));グローバルスコープの汚染を防ぐため，全体を即時関数で括っておく。
自作ブロックの本体はblocks.registerBlockType('名前空間/ブロック名',{ ・・・ })の部分。名前空間は複数の自作ブロックをまとめるフォルダ名みたいなもので，上のコードではmmとしている。また，今回は左側の吹き出しを作ったのでブロック名をword-balloon-leftとしている。
iconはsvgなどで独自に用意することができる。以下に例を示す。
icon: el("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
class: "bi bi-chat",
viewBox: "0 0 16 16"
}, el("path", {
d: "M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"
}));JavsScriptはhtmlを直接出力できないので，こんな感じでel()を使って出力する。
ブロックが複雑になるとel()の書き方がややこしくなるが，babelのTry it outを利用すると良い。表示されたコードの/#PURE/React.createElementをelに置き換えると動く。
attributesにp要素を指定して，編集できるようにする。editがエディターの画面に出力される部分で，saveがブログに出力される部分。
テキストを入力する部分はel(RichText, { ・・・ })で設定する。
css
.mm-word-balloon-edit-left {
margin-right: 150px;
border: 1px solid gray;
.header {
font-size: 12px;
background-color: rgba(0, 0, 255, 0.1);
}
.content {
padding: 10px;
}
}エディター画面用のcssを書いておく。表示側のスタイルはテーマ用のcssに記述する。
functions.php
add_action('enqueue_block_editor_assets', 'add_custom_block_style_script');
function add_custom_block_style_script()
{
//Javascript
$directory_url = get_template_directory_uri();
$wp_js = array('wp-edit-post', 'wp-element', 'wp-blocks', 'wp-editor', 'wp-block-editor',);
wp_enqueue_script('add-post-editor-block-script', $directory_url . '/assets/js/mm-blocks.js', $wp_js, '', true);
//CSS
wp_enqueue_style('original-blocks-editor-style', $directory_url . '/assets/css/mm-blocks.css');
}
add_filter('block_categories', 'add_editor_block_categories', 10, 2);
function add_editor_block_categories($categories, $post)
{
return array_merge(
array(
array(
'slug' => 'mm-blocks',
'title' => 'mmブロック',
'icon' => 'dashicons-layout',
),
),
$categories
);
}functions.phpに上のコードを追加してJavaScriptとcssを読み込む。
SNSでシェア