WordPress 【Gutenberg】ブロックエディタに任意の要素を追加する
基本はReact
ブロックエディタは React なので、ブロックエディタの持っている情報などを利用するには React を使用したほうがよいです。
コンポーネントを作成
通常通りにコンポーネントを作成します。
d...
JavaScript
WordPress 
プログラミング 【Vue.js】i18n をテンプレート以外から利用する
Vue I18n の設定例
plugins/i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import options from './optio...
プログラミング JavaScript でオブジェクトの配列の特定のキーの値を使用してオブジェクトに変換する
やりたいこと
const data = [
{
id: 1,
name: 'test1',
},
{
id: 2,
name: 'test2',
},
{
id: 3,
...
WordPress Gutenbergのブロック検索のキーワードを自由に設定できるようにしてみる
機能
ブロック検索に使用するキーワードをサイドバーから設定できるようにします。
いくつかのサイトでも言及されていますが、ブロックの検索キーワードが日本語になっているものがあります。
スラッ...
WordPress Gutenbergプラグイン用のデータを永続化する
Gutenbergには store による状態管理を簡単に行う方法が用意されています。
さらにその状態をブラウザのローカルストレージに保持するための仕組みもあります。
設定を保存することで、より便利なプラグインを作成することが...
WordPress GutenbergのregisterStoreで注意すべき点
より高度なGutenbergプラグインを作成する場合は registerStore を使用した状態管理が必須です。
実装方法によっては状態を変更してもすぐに画面に反映されないため注意が必要です。
例
例えば f...
WordPress Gutenbergのツールバーにドロップダウンを追加する
Gutenberg（ブロックエディタ）のツールバーにボタンを追加する方法は以前紹介しました。
ただ、この方法の場合はドロップダウンでまとめることはできません。
Gutenberg プラグイン v5.3 または Word...
WordPress Gutenbergのビジュアルエディタとコードエディタの切り替えなどを検出する方法
ブロックエディタには「ビジュアルエディター」と「コードエディター」の二種類のエディタが用意されており、気軽に切り替えることができます。
ビジュアルエディターコードエディター
エディタにデザインを適用させるためにクラスを...
WordPress Gutenbergエディタ（ブロックエディタ）にボタンを追加する
WordPressのバージョンが5.0になり、エディタが新しくなりました。
これまでのTinyMCEとは異なりReactを利用したモダンな実装になっており、エディタへの機能の追加方法も大きく変わりました。
ここでは選択...
WordPress WordPressのTinyMCE投稿エディタでダイアログを出すボタンを追加する
WordPress5.0からGutenbergという新しい投稿エディタがデフォルトになりましたが、プラグインで前のバージョンの投稿エディタ（TinyMCE）はまだ使えます。
また新しいエディタ内でも「フォーマット」⇒「Clas...