Before Gutenberg – ショートコードをブロックに変換する – Capital P

WordPress 5.0がリリースされて以来、筆者は”Gutenberg lang:ja”でtwitter検索することを趣味にしているのだが、テーマが対応していないことによる怨嗟の声が聞こえてくる。有料テーマなら対応しておけばよかったのに……とは思うが、これは逆に考えるとビジネスチャンスでもある。

ただ実際、対応といっても国内有料テーマの利便性は豊富なショートコードなので、ブロックエディタとは相性がわるいし挿入ボタンも置けなくなったので「似たブロックをつくって移行をお願いする」しか方法がないはずなんですよね。でもそれは微妙だから迷っているうちに今…みたいな。か、単にめんどい
— キタジマタカシ?Snow Monkey 開発者 (@inc2734) December 14, 2018

そこで、今回はZange Themeという架空の人気有償テーマがあり、そのテーマの提供するショートコードzange-alertをCapital Blockで紹介したAlertブロックに変換する方法を紹介しよう。

まず、テーマを乗り換えたzange-alertは編集画面で次のような見栄えになるはずだ。

ここで「ブロックに変換」を選ぶと、次のようにショートコードブロックが挿入される。

では、ここでCapital Blockは既存のZange Themeの顧客を横取りするために、「うちのテーマはGutenberg対応してますよ！　すぐ乗り換えできますよ！　乗り換えのお客さんは一年間サブスクリプション無償！」というキャンペーンを売ったとしよう。Capital Blockテーマを使えば、ユーザーはなんの苦労もなくいままでのコンテンツを引き継げるわけだ。

このためのプロパティがtransformsプロパティである。

transformsとは

ブロックのtransformsプロパティは、toとfromに大別され、そのブロックがなにから作られるのか、そして、なににコンバートできるか、ということを決めるプロパティである。上記のtwitterタイムラインでは、北島氏も「ブロックからブロック」と理解していたようだが、ドラッグ&ドロップしたファイルや、もちろんショートコードからも変換することができる。

たとえば、今回であれば、alertブロックが必要とするstyleとcontentをショートコードから引き継げばいいのだ。そのためのコードは次の通り。

registerBlockType( 'capital-block/alert', {
  //...
  transforms: {
    from: [
      {
        type: 'shortcode',
        tag: 'zange-alert',
        attributes: {
          style: {
            type: 'string',
            shortcode: ( attributes ) => {
              // namedというプロパティにショートコード属性が
              return attributes.named.style || 'info';
            },
          },
          content: {
            type: 'array',
            shortcode: ( attributes, content ) => {
              const honbun = content.shortcode.content || '';
              // richtextコンテンツはDOMの配列でなくてはならない
              return [
                <p>{honbun}</p>
              ];
            },
          },
        },
      },
    ]
  },
} );

これで、次のように無事変換されるようになる。