unitone v15.4.0 の概要

機能追加

• スライダーブロックに前へ/次へボタンのデザインの設定機能を追加
• スライダーブロックにページネーションのデザインの設定機能を追加

変更

• クエリーブロックのブロックリンクと、リンク設定済みのデコレーターブロックのリンク動作を JavaScript を使用する方式に変更
• ブログカードのリンク先のタイトルが取得できないときのぶログカードの HTML 構造を変更

不具合の修正

• スライダーブロックを設置しているページ（エディター）を開いたとき、あるいはリサイズしたときに1スライド目に強制的にフォーカスされてしまう不具合を修正
• ブログカードのリンク先のタイトルが取得できないとき、ブログカードには URL が表示されるが、スマホではその URL が表示されなくなる不具合を修正
• ナビゲーションのサブメニューの余白のズレを修正

スライダーブロックに前へ/次へボタンのデザインの設定機能を追加

スライダーブロックの前へ/次へボタンに下記の設定を追加しました。

• アイコンの選択
• アイコンの色
• アイコンの太さ
• アイコンのサイズ

また、「矢印の配置」に、「コンテンツを両端揃え」よりもさらに外側に矢印を配置する設定「コンテンツを両端揃え（拡張）」を追加しました。

アイコンの選択については、互換性を考慮し、アイコンを何も選択していない場合はこれまでの矢印（実装は CSS）が表示され、選択した場合は SVG のアイコンが使用されるようにしました。

下記はアイコンを「シェブロン（二重）」、色を「ダークレッド」、サイズを「24px」、配置を「コンテンツを両端揃え（拡張）」にしたサンプルです。

スライダーブロックにページネーションのデザインの設定機能を追加

スライダーブロックのページネーションに下記の設定を追加しました。

• アイコンの選択
• アイコンの色

下記はページネーションのアイコンを「プログレスバー」、色を「ダークレッド」にしたサンプルです。

クエリーブロックのブロックリンクと、リンク設定済みのデコレーターブロックのリンク動作を JavaScript を使用する方式に変更

unitone ではそのボックス要素全体をリンクにすることを「ブロックリンク」と呼んでいます。クエリーブロックのブロックスタイルのいくつかと、デコレーターブロックにリンク設定したものがブロックリンクになります。

このブロックリンクの実装は、これまで CSS でおこなっていました。リンク要素の疑似要素を position: absolute でボックス全体に広げる形です。

実装が比較的シンプルなのでこの方式を採用していましたが、ボックスリンクの中の文章にテキストリンクが含まれている場合への対応で子要素の position や z-index を調整しなければなりませんが、中に入れるブロックによってはそのスタイル干渉してしまい、レイアウトが崩れてしまう場合があります。

そういう感じで、常々中に何でも入れられる WordPress とこの実装は相性がわるいと感じていたため、JavaScript を使う形の実装に変更してみました。サンプルは以下。