WooCommerce の商品説明をブロックエディターで編集したい !

WordPress 5.0 が 2018年12月にリリースされてから、 もうすぐ3年経ちますが、WooCommerce の編集画面は、クラシックエディターのままです。ブロックエディターに慣れてくると、この便利な機能を WooCommerce の編集画面でも使いたいなと思うのは、自然の流れのように思います。

そこで、これまで自分なりに考えてきたことをここで一旦まとめてみたいと思います。

商品説明をブロックエディターで編集するには、どうすればいいのか ?

最初に思いついたこと

  1. 固定ページとかに下書きの状態で、ブロックエディターを使って商品説明を作成。
  2. 右上のオプションからコードエディターに切り替え。
  3. HTMLをまるっとコピー。
  4. その後商品の編集画面に移動して貼り付ける。

今思うと全然スマートではないし、ちょっとトリッキーで裏技てきな使い方でしたが、当時の自分にとっては商品説明をブロックエディターで編集できるというのは、とても画期的なことでした。

再利用ブロックをショートコードを利用して商品説明に貼り付ける

次に思いついたのが、再利用ブロックを利用する方法です。

管理画面メニューに「再利用ブロック (Reusable Blocks)」を表示して、簡単にアクセスできるようにしておけば編集作業も楽です。

管理画面メニューに「再利用ブロック」を表示するPHPコード。
  • 投稿や固定ページと分けて管理ができる。
  • ショートコードを商品説明に貼り付けるだけ。
  • 再利用ブロックで編集した内容が、そのまま商品説明にも反映される。

ということで、最初に思いついた方法よりも便利です。

ただ、再利用ブロックはプレビューができないので、フロント側の表示は商品ページを開いて確認することになります。

商品説明をブロックエディターで編集/管理できるプラグインを作る

「再利用ブロック+ショートコード」をさらに発展させて、プラグインを作ることを考えました。

プラグインの仕様としては、よくあるスライダーのプラグインみたいな感じで、カスタム投稿タイプで商品説明の編集画面「Product Description」を作成して、ブロックエディターで商品説明のコンテンツを作成し、WooCommerce 側には、ショートコードを貼り付けるようにします。

管理画面 Product Description のメニュー。
商品説明のコンテンツをブロックエディターで作成。
Product Description のショートコードを WooCommerce に貼り付ける。

といった感じで、かなり便利なプラグインができました!
GitHub に公開していますので、自由にダウンロードしてお使いください。

買ってもいいよという奇特な方は、こちらからご購入できます。