JavaScript Gutenbergのブロック検索のキーワードを自由に設定できるようにしてみる
機能
ブロック検索に使用するキーワードをサイドバーから設定できるようにします。
いくつかのサイトでも言及されていますが、ブロックの検索キーワードが日本語になっているものがあります。
スラッ...
プログラミング
JavaScript JavaScript Gutenbergプラグイン用のデータを永続化する
Gutenbergには store による状態管理を簡単に行う方法が用意されています。
さらにその状態をブラウザのローカルストレージに保持するための仕組みもあります。
設定を保存することで、より便利なプラグインを作成することが...
JavaScript GutenbergのregisterStoreで注意すべき点
より高度なGutenbergプラグインを作成する場合は registerStore を使用した状態管理が必須です。
実装方法によっては状態を変更してもすぐに画面に反映されないため注意が必要です。
例
例えば f...
JavaScript Gutenbergのツールバーにドロップダウンを追加する
Gutenberg（ブロックエディタ）のツールバーにボタンを追加する方法は以前紹介しました。
ただ、この方法の場合はドロップダウンでまとめることはできません。
Gutenberg プラグイン v5.3 または Word...
PHP Gutenberg用の校正プラグインを作成しました
機能
Yahoo!API の校正支援APIを利用して校正を行います。
導入手順
ZIPをダウンロード『プラグインのアップロード』からインストールプラグインを有効化Yahoo! APIのClient IDを...
PHP 【Gutenberg】公開済みの記事のプレビューの変更が反映されない場合の対処方法
メタボックス を使用している場合 かつ 公開後の投稿の場合、変更した内容がプレビューで反映されない場合があります。
すでにIssueとして挙がっているので今後本体側で修正される可能性が高いですが、それまでは自分で修正する必要がありま...
JavaScript Gutenbergのビジュアルエディタとコードエディタの切り替えなどを検出する方法
ブロックエディタには「ビジュアルエディター」と「コードエディター」の二種類のエディタが用意されており、気軽に切り替えることができます。
ビジュアルエディターコードエディター
エディタにデザインを適用させるためにクラスを...
WordPress Gutenbergエディタにテーマ以外の外部CSSを追加する方法
テーマのCSSをエディタに適用することで公開後のデザインに近づけることができます。
今までのクラシックエディタではテーマディレクトリ配下のCSSを「add_editor_style」を使用して追加することができました。
この方...
JavaScript Gutenbergエディタ（ブロックエディタ）にボタンを追加する
WordPressのバージョンが5.0になり、エディタが新しくなりました。
これまでのTinyMCEとは異なりReactを利用したモダンな実装になっており、エディタへの機能の追加方法も大きく変わりました。
ここでは選択...
JavaScript WordPressのTinyMCE投稿エディタでダイアログを出すボタンを追加する
WordPress5.0からGutenbergという新しい投稿エディタがデフォルトになりましたが、プラグインで前のバージョンの投稿エディタ（TinyMCE）はまだ使えます。
また新しいエディタ内でも「フォーマット」⇒「Clas...