@burger-editor/blocks 4.0.0-alpha.4 → 4.0.0-alpha.43

package/README.md

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