グーテンベルグでフィルター「wpautop」って必要？

クラシックエディタでも同様の問題があったのですが、グーテンベルグでも同様のフィルターが機能していることに少し驚いた話です。

ブロック単位でコンテンツを編集することができるようになってから、正直「autop」が消えていると思い込んでいました。

馴染みの無い人に「autop」について一言で説明すると、ワードプレスのエディタで編集したテキストがHTMLタグなどで囲われていない場合などに、ワードプレスが自動でマークアップのためにPタグ（パラグラフ）で囲ってくれるという、自動補完フィルター機能です。

旧エディタでは確かにパラグラフを自動で補完してくれる上に、ブロックでコンテンツ管理していた訳ではなく、フロントエンドに出力する時にうまくフィルターでテキストを補完してくれていましたが、Gutenbergに変わってから少し使い勝手が異なってきました。

グーテンベルグで「autop」に困らされる理由

グーテンベルグでは基本的に非常に小さなテンプレートとなるブロック単位で編集を行いますので、自動で改行などにもPタグを施す必要はあまり有りません。

改行すると自動でPタグのブロックが追加されますし、ラッパーとなるタグも含めてブロック単位でスタイルやフロントエンド側でのJavaScriptも作用しますので、むしろ自動で予期せぬタグを挿入されることで機能を阻害する結果になることもあり得ます。

僕が困った事例を挙げるなら、タブブロックを作成していた時です。

タブメニューで表示を切り替えられるブロックを用意しても、自動でその間にPタグを挿入されるので、ラッパーから単純に子要素としてタブを取得しようとすると関係無い要素が混じってきます。

編集時にフィルターでも掛けて修正出来ればいいんですが、このフィルターはフロントエンドで「the_content」に掛けられたフィルターですので、保存時に編集を加えることで解決するのは難しいです。

「autop」フィルターを外す方法

必要コードはたったの一行で案外簡単です。

remove_filter( 'the_content', 'wpautop' );

「the_content」では「the_content()」で出力されるコンテンツにかかるフィルターを取り除けます。

この他、抜粋から取り除く場合は「the_excerpt」を使用します。

remove_filter( 'the_excerpt', 'wpautop' );

このコードを読ませておけば、自動Pタグ補完機能は取り除かれます。

ただ、フィルターを外すにも例外を作っておくこともできますので、自分のコンテンツにあった適用がベターです。

グーテンベルグを使用していない場合

条件を絞る方法の１つです。

グーテンベルグが使用される条件としては、投稿タイプのプロパティとして「show_in_rest」が真偽値「true」であり、エディタのサポートが付与されていることが挙げられます。

if ( is_singular() ) {
  global $post;
  $post_type_obj = get_post_type_object( $post->post_type );
  if ( ! empty( $post->post_content ) && true === $post_type_obj->show_in_rest ) {
    remove_filter( 'the_content', 'wpautop' );
  }
}

こんな感じです。

フィルターを除去するタイミング

前の項目で紹介したコードはテーマの「functions.php」やプラグインのメインファイルなどに直接書いても意味がありません。

というより正しく作用しないと思います。

条件を指定する際には、フロントエンドでグローバル変数「$post」が定義されていることが前提となっていますので、条件が整ったタイミングでコールすれば良い筈です。

ページ内で想定される出力箇所はコンテンツ部分だけではありません。

この他ショートコードやウィジェットなどを使って「the_content」と同様のフィルターを使用している可能性もありますので、メインコンテンツの「the_content()」使用直前よりは、アクションフック「wp」や「wp_head」などでコールしておく方がいいと思います。

add_action( 'wp_head', 'your_func' );
function your_func() {
  // ここに
}

まぁ主観的な私見かもしれませんが。