@burger-editor/blocks 4.0.0-alpha.2 → 4.0.0-alpha.22

package/README.md

@@ -4,82 +4,75 @@
 
 ブロックエディタの標準ブロックと標準アイテムを提供するパッケージです。
 
-## ブロックの仕様
-
-### ブロックの構成
-
-```html
-<div data-bge-name="{ブロック名}" data-bge-container="inline:center:wrap">
-	<div data-bge-group>
-		<div data-bge-item>{アイテムの01HTML}</div>
-		<div data-bge-item>{アイテムの02HTML}</div>
-	</div>
-	<div data-bge-group>
-		<div data-bge-item>{アイテムの01HTML}</div>
-		<div data-bge-item>{アイテムの02HTML}</div>
-	</div>
-	<div data-bge-group>
-		<div data-bge-item>{アイテムの01HTML}</div>
-		<div data-bge-item>{アイテムの02HTML}</div>
-	</div>
-</div>
-```
-
-### ブロックを構成する要素
+> **ℹ️ ブロックの構造仕様について**
+> ブロックの構造管理は[@burger-editor/core](../core/)で行われています。
+> ブロック構造の詳細仕様については [@burger-editor/core のREADME](../core/README.md#ブロックの仕様) を参照してください。
 
-#### コンテナ
+## 提供されるアイテム
 
-`data-bge-container`属性はコンテナの性質を表します。ブロックのルート要素にあたります。属性値はコロン区切りで表現し、先頭はコンテナのタイプを表し、その後にオプションが続きます。
+このパッケージでは以下のアイテムを提供しています：
 
-`data-bge-name`属性はブロックの名前を表します。ブロック選択の際に利用されますが、振る舞いには影響しません（⚠️ つまり、この属性を利用したスタイル変更は推奨されません）。
+- **button** - ボタン
+- **details** - 折りたたみ要素
+- **download-file** - ダウンロードファイル
+- **google-maps** - Google Maps 埋め込み
+- **hr** - 水平線
+- **image** - 画像
+- **table** - テーブル
+- **title-h2** - 大見出し（h2）
+- **title-h3** - 中見出し（h3）
+- **wysiwyg** - リッチテキストエディタ
+- **youtube** - YouTube 動画埋め込み
 
-##### コンテナタイプ
+## 提供されるブロックカタログ
 
-アイテムの配置方法を表します。
+このパッケージではデフォルトのブロックカタログを提供しています：
 
-- `grid`: グリッドに並べる（ `display: block grid;` ）
-- `inline`: インライン方向に並べる（ `display: block flex;` ）
-- `float`: 先頭のアイテムを回り込みさせる
+### 見出し
 
-##### `grid`オプション
+- **大見出し** (h2) - title-h2 アイテムを使用
+- **中見出し** (h3) - title-h3 アイテムを使用
 
-- `[数値]`: グリッドの列数（ `grid-template-columns: repeat([数値], 1fr);` ） 1〜5の範囲で指定可能
+### 基本ブロック
 
-例: `data-bge-container="grid:3"`
+- **テキスト** (wysiwyg) - wysiwyg アイテムを使用
+- **画像** (image) - image アイテムを使用
+- **折りたたみ** (disclosure) - details アイテムを使用
+- **テーブル** (table) - table アイテムを使用
+- **YouTube** (youtube) - youtube アイテムを使用
 
-##### `inline`オプション
+### カード
 
-- `center`: 中央寄せ（ `justify-content: center;` ）
-- `start`: 左寄せ（ `justify-content: start;` ）
-- `end`: 右寄せ（ `justify-content: end;` ）
-- `between`: 両端寄せ（ `justify-content: space-between;` ）
-- `around`: 左右余白均等（ `justify-content: space-around;` ）
-- `evenly`: 要素間均等（ `justify-content: space-evenly;` ）
-- `align-center`: 垂直中央寄せ（ `align-items: center;` ）
-- `align-start`: 上寄せ（ `align-items: start;` ）
-- `align-end`: 下寄せ（ `align-items: end;` ）
-- `align-stretch`: 伸縮（ `align-items: stretch;` ）
-- `align-baseline`: ベースライン（ `align-items: baseline;` ）
-- `wrap`: 折り返し（ `flex-wrap: wrap;` ）
-- `nowrap`: 折り返さない（ `flex-wrap: nowrap;` ）
+- **画像 + テキスト** (image-text) - image と wysiwyg アイテムを3列グリッドで組み合わせ
+- **テキスト+画像+テキスト** (text-image-text) - wysiwyg、image、wysiwyg を3列グリッドで組み合わせ
 
-例: `data-bge-container="inline:space-between:wrap"`
+### 画像+テキスト
 
-##### `float`オプション
+- **画像右寄せ: テキスト回り込み** (text-float-image-end) - 画像が右に浮動し、テキストが回り込み
+- **画像左寄せ: テキスト回り込み** (text-float-image-start) - 画像が左に浮動し、テキストが回り込み
+- **画像右寄せ: テキスト回り込み無し** (text-start-image-end) - テキストと画像を左右に配置（回り込み無し）
+- **画像左寄せ: テキスト回り込み無し** (image-start-text-end) - 画像とテキストを左右に配置（回り込み無し）
 
-- `start`: 左寄せ（ `float: inline-start;` ）
-- `end`: 右寄せ（ `float: inline-end;` ）
+### ボタン
 
-例: `data-bge-container="float:start"`
+- **ボタン** (button) - button アイテムを3つ横並びで配置
+- **テキストリンク** (button) - リンク形式のボタンを3つ配置
+- **ファイルダウンロード** (file) - download-file アイテムを3つ横並びで配置
+- **コンテンツナビゲーション** (content-navigation) - ページ内リンクボタンを4列グリッドで8つ配置
 
-##### 共通オプション
+### その他
 
-- `immutable`: コンテナのタイプやオプションを変更できない
+- **Google Maps** (google-maps) - google-maps アイテムを使用
+- **区切り線** (hr) - hr アイテムを使用
 
-#### グループ
+## 使用方法
 
-グループは`data-bge-group`属性をもつ任意の要素です。コンテナ内の直下に配置され、アイテムのまとまりをつくります。このグループは「要素の追加/削除」機能で**増減することができます**。グループがない場合は「要素の追加/削除」機能が無効になります。
+```typescript
+import { items, defaultCatalog } from '@burger-editor/blocks';
 
-#### アイテム
+// アイテムの使用
+const wysiwygItem = items.wysiwyg;
 
-アイテムは`data-bge-item`属性をもつ要素で、コンテンツ編集可能な要素をラップします。
+// ブロックカタログの使用
+const catalog = defaultCatalog;
+```