新規ブロックの追加や繰り返し系ブロックの操作性の強化をおこなった Snow Monkey Blocks v3.0 をリリースしました

主な更新内容

  • 繰り返し系ブロックの操作方法の変更
  • アコーディオンブロックの追加
  • このページの子ページブロックの追加
  • セクション(背景画像あり)ブロックにパララックスの設定を追加
  • セクション(背景画像あり)ブロックに文字色の設定を追加
  • 項目ブロック、パネルブロックに、各項目のタイトルのタグを選択できる機能を追加
  • セクションブロックにアンカーを設定できる機能を追加
  • カテゴリーリストブロックのスマホでの表示を修正

繰り返し系ブロックの操作方法の変更

項目ブロック、パネルブロックなど、1つのブロックの中で複数の項目を増減させる繰り返し系ブロックにおいて、操作性/メンテナンス性の向上のために操作方法(と内部の実装方法)の変更をおこないました。

これまでは1つのブロックの中で独自の実装で繰り返し機能を実現していましたが、WordPress コア標準の繰り返し機能である InnerBlocks を使って実装しなおしました。

これまでの操作はこんな感じ。

これからの操作はこんな感じ。

以前のほうが増減の操作性は良かったかな…と思うのですが、数が増えるとインスペクターの項目も同じだけ増えるので、設定がかなりやりづらくなるというデメリットがありました。InnerBlocks を使えば、1つのブロックで全部やるのではなく、親ブロックの中の子ブロックをそれぞれ操作する、という形になるので、どれを操作しているのかわかりやすいし、設定項目も増えないので操作がしやすくなります。

また、InnerBlocks は WordPress 標準のやり方なので、独自にやるより今後安定運用させることができそうというところも再実装に踏み切った理由です。

後方互換性について

一応後方互換性の処理はちゃんといれまして、これまでの繰り返し系ブロックを使っているページの編集画面を開けば、自動的に新しいブロックの形式に変換されるようにしています。なので、中身を新しいブロックにコピペし直したりということは基本的には発生しないはずです。ただ、この後方互換性のための処理がいまいちよく理解できていなくて、内容によってはブロックが正しく変換されず、コピペし直さないといけない場合もあるかもしれません。そのときはすみません…。

ちなみに Snow Monkey 公式サイトのトップページはブロックでつくっているのですが、繰り返し系ブロックは全滅しました(白目)。入れ子の具合やアップデートのタイミング(こまめにアップデートせずに飛ばしてアップデートしたので)とかの影響もあるのかもしれません…。

子ブロックの追加方法について

今まで方式よりブロックの追加がちょっとやりにくいかなと思うので、やり方を書いておきます。結論から言えば「親ブロックを選択すると子ブロック追加するためのボタンが下部にでてくるので、それを押す」という形です。

ただ、ブロックエディター、親ブロックの選択操作がめちゃくちゃやりづらいですよね。コアで提供してあるカラムブロックを使うとよくわかると思うのですが、マジで操作しにくいです。この辺は今後改善されていくのかもしれませんが、ちょっとイライラが MAX レベルになるくらいの使いにくさなので、Snow Monkey Blocks の繰り返し系ブロックについては、CSS をゴリゴリに書いていくらか操作しやすくなるように調整をおこないました。

一番簡単なやり方としては、子ブロックは簡単に選択できるのでとりあえず子ブロックを選択してもらって、そうすると灰色の線で子ブロックが囲まれると思うので、そのちょっと外側をクリックしてみてください。それで親ブロックが選択されて子ブロックの追加ボタンがでてくるはずです。

アコーディオンブロックの追加

シンプルなアコーディオンのブロックを追加しました。

このページの子ページブロックの追加

Snow Monkey v5 から、固定ページのオプション機能として存在していた「このページの子ページを表示する」機能を廃止する予定です。かわりに、Snow Monkey Blocks にブロックを追加し、好きな場所に追加できるようにしました。

ブロックを追加しても子ページが存在しない場合は何も表示されません。

ダウンロード

WordPress 公式ディレクトリからダウンロードできます。

この記事を書いた人

キタジマ タカシ

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

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

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

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