Gutenberg

WordPress

Gutenberg v5.3 からリッチテキストのツールバーはドロップダウンにまとまります

2019/3/30 に Gutenberg v5.3 がリリースされました。 使用するブロックを管理する機能やカバーブロックの機能改善などの修正が含まれています。 現在はプラグインでのみ試すことができますが、近々Wo...
WordPress

Gutenberg の Format type に複数クラスを指定

インラインで文字を修飾するために registerFormatTypeを使用してツールバーにボタンを追加することができます。 ただ registerFormatType で指定できるクラス名はスペース等で複数指定することはで...
WordPress

Gutenberg用の文章修飾プラグインを開発しました

Gutenberg エディタのツールバーに文章修飾用のボタンを追加するプラグインを作成しました。 公式ディレクトリのページ 導入手順 公式ディレクトリに登録してあるので、管理画面から追加することができます...
WordPress

Marker AnimationプラグインをGutenbergエディタに対応させました

Marker Animationプラグインは蛍光ペンを引くようなアニメーションを設定できるようにするWordPressのプラグインです。 ツールバーにボタンを追加 Gutenbergのツールバーにボタンを追加...
WordPress

Gutenbergのリッチテキストの既知の問題

経緯 こちらの記事の現象が開発中のプラグインでも発生したため原因を調査しました。 現象 クラスとタグ名を指定して registerFormatType でフォーマットタイプを登録ツールボタン等から登録したフォーマ...
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を利用したモダンな実装になっており、エディタへの機能の追加方法も大きく変わりました。 ここでは選択...