Gutenberg

WordPress

Gutenbergのビジュアルエディタとコードエディタの切り替えなどを検出する方法

ブロックエディタには「ビジュアルエディター」と「コードエディター」の二種類のエディタが用意されており、気軽に切り替えることができます。 ビジュアルエディターコードエディター エディタにデザインを適用させるためにクラスを...
WordPress

Gutenbergエディタにテーマ以外の外部CSSを追加する方法

テーマのCSSをエディタに適用することで公開後のデザインに近づけることができます。 今までのクラシックエディタではテーマディレクトリ配下のCSSを「add_editor_style」を使用して追加することができました。 その場...
WordPress

Gutenbergエディタとクラシックエディタの判定やCSSの読み込み方法まとめ

エディタの判定 以下の方法でGutenbergエディタ(ブロックエディタ)とクラシックエディタを判定することが可能です。 $current_screen = get_current_screen(); if ( ( method_ex...
WordPress

GutenbergエディタのDOMを操作をしたい場合

今までのエディタでは「tiny_mce_before_init」フィルタなどのフックでクラスを付与したり色々な設定を変更したりすることができました。 Gutenbergでは同様の方法をとることができません。 新たにDOMの構築後...
WordPress

Gutenbergエディタ(ブロックエディタ)にボタンを追加する

WordPressのバージョンが5.0になり、エディタが新しくなりました。 これまでのTinyMCEとは異なりReactを利用したモダンな実装になっており、エディタへの機能の追加方法も大きく変わりました。 ここでは選択し...