ブロックエディタGutenbergでPタグを消されないもっともシンプルな方法。

まずは、後日訂正でございます。
ブログ更新のたびにこの投稿タイトルが目に入って、なんぞ違和感を憶えていた理由をようやく自覚。

なんて矛盾した風評被害なタイトルだろう。
そもそもブロックエディタで書く限り、Pタグを消されたり追加されたりしやしません。
WordPressで改行まわりに悩ましくなりたくなかったら、ブロックエディタGutenberg一択。それでいいのだった。

自分が書いたのは「コードエディター」で、というのが正しい。
Gutenbergにも旧来と同じくモード違いとして「ブロックエディタ」と「コードエディタ」が内包されている。

htmlタグをまるっとペーストして一気に済ませたい場合はコードエディターを使うケースが多いと思うが、その時に「カスタムHTML」ブロックなんだよ、ここは、と明示的に「wp:html」コメントタグを2つ挿んでおくと、ブロックエディタのブロック認識が正しく働き、予想外の書き換えなんぞなくて安心です。という話でした。

以下、本文。


WPのブロックエディタで、段落を挿入して、コードエディタに切り替えたことがある人は、見たことがあるはず。

コメントタグで囲まれた

<!-- wp:paragraph -->
<p>コメントタグで囲まれた</p>
<!-- /wp:paragraph -->

wp:paragraph の文字。
いちいちこんなマークで挟んでマメなのか何なのか・・・と過去には思っていたが、理由はあった。

ですよね。WPの痒い所に手が届かない感は、常に「改行まわり」「パラグラフまわり」にありましたよね。

Pタグやbrタグが自動で追加されるは消されるわ。

SectionタグをPタグで囲まれた日には泣きたい気分で、おまえもちったぁHTML5を理解してくれよ・・・と学問のススメに入りそうになりますよね。

開発者はときにゴリゴリのHTMLをドサッとコピペで投稿したいのですが、阻まれてきたわけです。WPエディタの自動整形という難物に。

で、どれほど検索したことでしょう。
WPエディタの自動整形によるPタグやbrタグの勝手な追加や、消去をコントロールする方法を。

多くのサイトではプラグイン「TinyMCE Advanced」を薦めていましたし、設定ファイルfunctions.phpに加筆するコードなども参考にさせていただきましたが

あらら?

<!-- wp:html -->
<p>パラグラフではなくHTML版もあるぢゃないの</p>
<!-- /wp:html -->

この簡素な2行・<!!!–wp:html–>開始と閉じ<!!!–/wp:html–>で挟むだけで、素のまま、生のまま(キのまま)のHTMLをマルッと書けます。

テキストエディタで整形したインデントもそっくり守られて、崩れることなく生かされます。

このコメントはブロックエディタをコードエディターモードに切り替えた時に見えるのですが、ビジュアルエディタでも簡単。

ビジュアルエディタで編集中に出ている黒「+」をクリックすると開くメニューから、カスタムHTMLを選ぶと、コードの中では

<!-- wp:html -->
このタグで挟まれた状態になっている
<!-- /wp:html -->

カスタムHTMLの入力画面はこんな感じですが
コードエディタに切り替えてしまった方が広々使えて楽。

で、最初からコードエディタが開くように使い慣れてるWPで、保存したカスタムHTMLだけのPOSTを、ビジュアルエディタにあえて切り替えて「見たところ」

ほんの一部ですが、インデントもそのまま表示されておびっくり。

ブロックエディタGutenbergは本当に使いやすいので、クライアントにも、そのまま何も気にしないでサクサク使って欲しいと思っていて、プラグインやfunctions.phpで基本のところを変えてしまうのはやや抵抗があったので、これはマジ嬉しい機能。