キタジマ タカシ Snow Monkey Blocks のメジャーアップデートである v20 のベータ版を配布します。メジャーアップデートは後方互換性に影響がでる可能性が高いアップデートになりますので、もしテスト環境で動作確認いただける方は、正しく動作できた、ここにこういう不具合があった、などなどオンラインコミュニティにご報告いただけるととても助かります！また、ベータ版はあくまで動作確認用であるため、本番環境での利用は推奨されません。
Snow Monkey Blocks v20.0.0 Beta1 の概要
変更
- WordPress の必須バージョンを 6.3 以上に変更
- 各ブロックの
apiVersionを2から3に変更 - 各ブロックの InnerBlocks を
constrainedに変更 - 各ブロックの CSS の読み込みを（可能な限り）
wp_enqueue_style()から block.json のfile:に変更 - 各ブロックの CSS のハンドル名の変更（例：
snow-monkey-blocks/accordion→snow-monkey-blocks-accordion-style） - Snow Monkey Blocks の各 js ファイルをなるべく
deferで呼び出すように変更 - ボックス コンテナー フレックス グリッド 「アンラップ」機能を廃止、「グループ解除」を追加
各ブロックの apiVersion を 2 から 3 に変更
WordPress 6.3 から、その WordPress 環境にある全ブロックの apiVersion が 3 のときは、投稿エディターが iframe になるようになりました。6.2 まではタブレットプレビュー、モバイルプレビューのときは iframe、デスクトッププレビューのときは非 iframe でしたが、それが全部 iframe になるということです。
iframe になることの一番のメリットは、WordPress が持つダッシュボード用の CSS が記事の内容に影響しないようになるということです。つまりエディター上のデザインと実際のページでのデザインの一致度が更に上がるし、一致させるための労力も少なくなってメンテしやすいということですね。
Snow Monkey の場合は、Snow Monkey Blocks の各ブロックはもちろんですが、Snow Monkey テーマ内にもいくつかブロックがありますし、Snow Monkey Forms をお使いの場合は Forms のブロックもあるので、それが全部の apiVersion が 3 以上であれば iframe 化されます。これらは WordPress 6.3 のリリースに合わせて全部調整するので普通にアップデートしてもらえれば大丈夫かなと思います。
もし他にブロックを追加するようなプラグインを使っていて、そのブロックの apiVersion が 2 だったり、あとメタボックスがある場合も iframe 化されないので、例えば SEO 系のプラグインはメタボックスで description の設定をするものとかが多いと思うので、そういうのを使われている場合はご注意ください。
各ブロックの InnerBlocks を constrained に変更
InnerBlocks というのはボックスブロックのような、中に子ブロックを入れられるようになっているもののことです。Snow Monkey Blocks でいえば、例えばボックスブロック、コンテナーブロック、項目ブロックの自由入力子ブロック等々たくさんあります。
で、WordPress 6.3 からブロックのレイアウト機能が正式版になるのですが、そのレイアウト機能のタイプの1つに constrained というものがあり、これは記事直下と同じレイアウトを実現できるタイプになります。例えば「コンテンツ幅」が各ブロックに適用されたり、回り込みができたり、記事直下用の装飾（Snow Monkey でいえば見出しの装飾等）が適用される、等の特徴があります。
Snow Monkey Blocks v20 未満では、各ブロックの InnerBlocks には特にレイアウトタイプの指定はしていなかったのですが、WordPress 6.3 からレイアウト機能が正式版になるし、レイアウト機能を使ったほうがデザインの統一性やメンテナンス性があがるかなということで、constrained にすることにしました。
各ブロックの CSS の読み込みを（可能な限り）wp_enqueue_style() から block.json の file: に変更
ブロックをつくったことがない方にはなんのこっちゃわからないかもしれない話で恐縮ですが、そのブロック用の CSS をどう呼び出すか、いくつかやり方があります。主なものは wp_enqueue_style() でエンキューしたものを呼び出すか、file: という書き方を使って呼び出すかになります。block.json を見ると、こういう感じで記述してあります。
{
...省略...
"style": "file:./style.css",
}file: を使うと、その CSS の容量が少ないときは link 要素で普通に呼び出すのではなくて HTML 上にインラインで展開されるようになります。これは WordPress の機能でなんでそうなっているのか詳しくは調べていないのですが、多分 CSS の容量が小さいときは link で呼び出すほうが遅くなることが多いみたいなことなのかな？ということで、file: に変更することにしました。
これに伴い、各ブロックの CSS のハンドル名が変更になります。ブロックの CSS のハンドルを依存関係に指定して、独自の CSS を呼び出しているような場合は影響がありますのでご注意ください。
例：snow-monkey-blocks/accordion → snow-monkey-blocks-accordion-style
ボックス コンテナー フレックス グリッド 「アンラップ」機能を廃止、「グループ解除」を追加
WordPress 6.2 まではブロックツールバーのブロックアイコンをクリックすると、グループブロックのような子ブロックを持つブロックを「アンラップ」することができました。6.3 からはこの「アンラップ」機能が廃止され、ブロックツールバーの「…」のところから「グループ解除」で解除するようになります。
Snow Monkey Blocks のボックス・コンテナー・フレックス・グリッドも「アンラップ」できなくなるので、「…」のところから「グループ解除」で解除できるように変更しました。
