このリポジトリはBlock CollectionsというWordpressのプラグインのソースコードを含んでいます。 zipファイルをダウンロードしてWordpress管理画面からプラグインのインストールを行うとプラグインとして機能します。 今回のバージョンはWordPressの新機能であるサイトエディタでのWebサイト構築のための機能を備え、大幅なバージョンアップを行いました。 このプラグインをインストールすると次の９つのブロックが登録され、サイトエディタで使用することができます（WordPress6.4.2で動作確認済み）。各ブロックは原則として文字色、背景色、境界、空白等の基本的スタイルが設定できる他、影やアイコンを設定することができるものもあります。また、簡単なアニメーションをセットしたものもあります。 以下各ブロックの簡単な説明です。
- Design Title HTMLのヘディングタグをスタイリングすることができるブロックです。ノーマルスタイルの他、円形のマーカーを入れることができるタイプとサブコピーとアイコンを付加できるタイプのものを用意しました。 今回のバージョンでは、次の新機能を搭載しました。
- 表示させるテキストとして、ユーザー入力の文字だけでなく、一般設定で設定したサイトのタイトルやキャッチフレーズを表示させるタイプが選択できるようになった。
- このブロックをリンクにすることができるようになった。リンクタイプとして次のタイプを用意した。
- 固定ページへのリンク
- アーカイブページへのリンク
- 任意のURLへのリンク
- サブメニューを表示させるリンク これらの機能により、このブロックをメニューアイテムとして活用することができるようになりました。
- サブコピーのスタイルでは、サブコピーを上下左右に配置できるようにした。 これによってアイコン付きやサブタイトル付きのメニューアイテムを簡単に作成することができるようになりました。
- アンダーラインアニメーションを設定できるようにした 簡単なアニメーションですが、マウスホバーしたときアンダーバーが中央から伸びます。アンダーバーの高さ、幅、タイトルからの距離が設定できます。
- Design Text Control HTMLのinput要素のテキストコントロールとテキストエリアコントロールをスタイリングできるブロックです。今回はノーマルなボックスタイプとラインタイプをご用意しました。必須入力の表示もできるようになっており、近日公開予定のForm Send Blocksのインナーブロックとしてバリデーションチェックができるブロックになっています。 今回のバージョンでは、次の新機能を搭載しました。
- モバイルモード（幅767px以下のデバイスでの表示）でデフォルトスタイルの時はラベルがインプットボックスの右上に配置されるようにした。
- Design CheckBox HTMLのinput要素のチェックボックスをスタイリングできるブロックです。アニメーションでチェックが入ります。現時点では１種類しかご用意できていませんが、今後、順次他のバリエーションを提供していく予定です。 今回のバージョンでは、次の新機能を搭載しました。
- 近日公開予定のForm Send Blocksのインナーブロックとして、処理を続行させるか否かを設定する機能を搭載した。
- Design Select HTMLのSELECT要素をスタイリングできるブロックです。選択要素がちょっと凝ったアニメーションで選択状態が表示されるのが自慢です。単数選択と複数選択に対応しています。 今回のバージョンでは、次の新機能を搭載しました。
- ラベル付きで表示されるようにした。
- 近日公開予定のForm Send Blocksのインナーブロックとして配置したとき、選択したオプションのラベル名を入力値として保持するようにした。
-
Design Process フォーム入力の入力プロセスを表示するためのブロックです。近日公開予定のForm Send Blocksのインナーブロックとして活用することを前提としており、このブロックは単独では動作しません。
-
Code HighLight 編集モードでテキストエリアにコードを入力し、それをフロントエンドでハイライト表示させるブロックです。このブロックはハイライト表示のためGoogle Code Prettifyライブラリを利用しています。 今回のバージョンでは、ブロックエディタで、ブロックマウント時にエディタモードでのコード表示がされないという不具合を解消しました。
-
Design Table 今回のバージョンで新たに追加したブロックです。 Webページ上に設置されたフォームオブジェクトをデータソースとして、その内容を表示します。 近日公開予定のForm Send Blocksのインナーブロックとして、入力確認フォームに設置することを前提としています。
-
Design Button 今回のバージョンで新たに追加したブロックです。 通常のボタンとフォーム要素内のサブミットボタンの選択ができます。通常ボタンを選択したときは固定ページへのリンクを選択して、そのページに遷移させることができます。
-
Design Group 今回のバージョンで新たに追加したブロックです。
- ブロックを収納して、それらの配置を設定することが主たる機能です。 配置は、CSSのdisplayプロパティのblock、flex(row)、flex(column)、gridに対応する選択が可能で、gridを選択するとグリッドスタイルの各種設定が可能です。
- ブロックテーマに対応しており、theme.jsonのlayout句のcontentSize、wideSizeが選択できる他、コンテンツ幅にあわせることや自由な幅の設定もできます。
- 「メニューにする」と設定することでモバイルモード（幅767px以下のデバイスでの表示）ではハンバーガーボタンとなり、これをクリックすることで左からせり出すようになります。
- これらの設定はデスクトップモード（幅768px以上のデバイスでの表示）とモバイルモード（幅767px以下のデバイスでの表示）で、別々の設定が可能です。
- 可動に設定することでドラッグによる配置調整が可能です。この機能を搭載したことで旧バージョンのDraggble Boxは廃止しました。
- 今回のバージョンでは、レスポンシブ対応が必要と思われるスタイル設定について、デスクトップモード（幅768px以上のデバイスでの表示）とモバイルモード（幅767px以下のデバイスでの表示）で、別々の設定が可能となっています。どちらの設定なのかは、ブロックエディタやサイトエディタで表示モードを切り替えたとき、サイドメニューの表示に「（デスクトップ）」、「（モバイル）」と表示されるようになっています。 なお、タブレット表示に関するレスポンシブには対応しておりません。
- このプラグインは、近日公開予定のForm Send Blocksに対して依存関係にあります。このプラグインを使用するためには、インストールと有効化が必要です。
- 文言等の表示に関しては、WordPressの国際化関数による設定を行っていますので、多国籍の言語表示が可能です。現時点においては英語と日本語表記が可能となっています。
- Design Text ControlブロックではFontAwesomeのKitでダウンロードしたアセットからアイコンを表示しています。したがって、したがって、このブロックを利用する場合は、次の利用規約にしたがってください。 FontAwesome Privacy Poicy
- Code HighLightブロックでは、ハイライト機能を実現するため、「Google Code Prettify」プラグインを利用しています。したがって、このブロックを利用する場合は、次のドキュメント等をお読みください。 Google Code Prettify