JavaScript

WordPress

【Gutenberg】ブロックエディタに任意の要素を追加する

基本はReact ブロックエディタは React なので、ブロックエディタの持っている情報などを利用するには React を使用したほうがよいです。 コンポーネントを作成 通常通りにコンポーネントを作成します。 d...
プログラミング

【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...
タイトルとURLをコピーしました