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

SPONSORED LINK

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

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

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

クラシックブロックとして表示されるはず。

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

もっとビジュアル的にわかりやすくしてほしい……

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

要するにこういう風に変換されると嬉しい。

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

transformsとは

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

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

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>
              ];
            },
          },
        },
      },
    ]
  },
} );

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

いかがだろうか。多くの有料テーマが1,2ヶ月ほど対応に時間がかかると宣言していることを考えると、その間にとっととブロックの対応を終えてしまえば、かなりいい感じにシェアを取れるのではないだろうか。

以上、残りは有料会員向けにソースコード全体を提供して終わりにする。

続きの 9% を読み、添付されたファイルにアクセスするには、Gumroadでライセンスキーを取得してください!

SPONSORED LINK

この記事を書いた人

高橋 文樹

小説家であり、WordPress開発者。WordCamp Tokyo 2016のリードオーガナイザー。山梨に土地を持ち、DIYで家を建てている。小説と家づくりとWordPress開発の3種競技があれば日本代表有力候補。KunoichiというWordPressテーマ・プラグインマーケットプレースを作成中。

Club Capital P

Club Capital PはCapital Pのファンクラブです。有料会員制となっており、Gumroad経由でサブスクリプションをご購入いただき、ライセンスキーを登録いただくことで、会員特典を受け取ることができます。