サイトアイコン Capital P

Before Gutenberg – ぼくのショートコードを守って

さて、この連載ではGutenbergの準備方法について書いているのだが、今回はショートコードである。現状、Gutenbergではショートコードブロックが存在する。

写真は筆者がrubyプラグインを対応させるために悪戦苦闘しているところ。

やや味気ないデザインではあるが、ショートコードに対応している。では、インラインショートコードはどうなるのだろうか? 次のような「文字列に圏点をつけるショートコード」を作成して試してみると……

add_shortcode( 'goma', function( $atts = [], $content = '' ){
  return sprintf( '<strong style="-webkit-text-emphasis: filled sesame">%s</strong>', $content );
} );
インラインでショートコードを書いてみる。
ちゃんと表示された! 引用元はカート・ヴォネガット Jr.「スローターハウス5」だが、適当に書いたので原文ママではない。

既存のショートコードに関してだが、こちらは一行に書かれている場合、ショートコードブロックに変換される。

こうなる!

さて、いったんまとめよう。

そういうわけで、デフォルトのショートコードに関しては問題なく動くといってしまって良いのではないだろうか。「ネスト(入れ子)にしたショートコード」については検証していないのだが、そもそもネストしたショートコードを書くのがおかしいと筆者は思っているので、ここでは検証しない。検証した人がいたら、ぜひコメントでお知らせいただきたい。

さて、タイトルの元ネタは「ぼくの地球を守って」であるのだが……

筆者がここで守りたいショートコードとはいったいなんなのか? それは、以前紹介したShortcakeによるカスタマイズである。

詳しくは記事を読んでもらいたいのだが、ShortcakeというのはショートコードにビジュアルUIを提供することで、Wysiwygを実現するものだった。かつてはベータプラグインに名を連ね、コアに取り込まれることを目指していたようだが、Gutenbergの登場によってお蔵入りになってしまった。

筆者がFacebookのAdvanced WordPressグループなどで訪ねてみたところ、Shortcakeのようなビジュアルブロックを提供する予定はいまのところないようだ。そうなるとどういうことが起きるかというと、筆者がCapital Pのために作った「Slackのログからインタビュー記事を作成する」というものすごい機能が劣化してしまうのである。

この記事は……
このようなUIで編集されていたのだが……
Gutenbergだとこうなってしまう!

これだと、編集体験が劣化してしまうので、なんとしても元の機能を保ちたいのだが、筆者が調査した限りでは、このコンバート機能をハイジャックする方法はいまのところ提供されていない。というより、Gutenbergではまだフックがあまり整備されていないのが現状だ。

そこで、次のような方針で当たりたい。

それでは、上記の内容を有料会員向けにお届けするとしよう。本来であれば広く読んでもらいたいのだが、筆者も生活がかかっているのだ、心を鬼にせざるを得ない。

この投稿の続きを読むためには、Capital Pでログインする必要があります。

続きを読む
モバイルバージョンを終了