Snow Monkey Blocks v20.0.0 Beta1

Snow Monkey Blocks のメジャーアップデートである v20 のベータ版を配布します。メジャーアップデートは後方互換性に影響がでる可能性が高いアップデートになりますので、もしテスト環境で動作確認いただける方は、正しく動作できた、ここにこういう不具合があった、などなどオンラインコミュニティにご報告いただけるととても助かります!また、ベータ版はあくまで動作確認用であるため、本番環境での利用は推奨されません。

Snow Monkey Blocks v20.0.0 Beta1 の概要

変更

  • WordPress の必須バージョンを 6.3 以上に変更
  • 各ブロックの apiVersion2 から 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 環境にある全ブロックの apiVersion3 のときは、投稿エディターが iframe になるようになりました。6.2 まではタブレットプレビュー、モバイルプレビューのときは iframe、デスクトッププレビューのときは非 iframe でしたが、それが全部 iframe になるということです。

iframe になることの一番のメリットは、WordPress が持つダッシュボード用の CSS が記事の内容に影響しないようになるということです。つまりエディター上のデザインと実際のページでのデザインの一致度が更に上がるし、一致させるための労力も少なくなってメンテしやすいということですね。

Snow Monkey の場合は、Snow Monkey Blocks の各ブロックはもちろんですが、Snow Monkey テーマ内にもいくつかブロックがありますし、Snow Monkey Forms をお使いの場合は Forms のブロックもあるので、それが全部の apiVersion3 以上であれば iframe 化されます。これらは WordPress 6.3 のリリースに合わせて全部調整するので普通にアップデートしてもらえれば大丈夫かなと思います。

もし他にブロックを追加するようなプラグインを使っていて、そのブロックの apiVersion2 だったり、あとメタボックスがある場合も 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 のボックス・コンテナー・フレックス・グリッドも「アンラップ」できなくなるので、「…」のところから「グループ解除」で解除できるように変更しました。

Snow Monkey Blocks v20.0.0 Beta1 のダウンロード

ここから先は Snow Monkey サブスクリプションユーザー特典です。継続課金されている方はログインして閲覧できます。ご購入がまだの方はこちらから購入できます。

この記事を書いた人

アバター画像

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!