BurgerEditor の標準ブロックと標準アイテムを提供するカタログパッケージ。
ブロック構造の仕様自体は @burger-editor/core が定義し、blocks はその上に「すぐ使えるカタログ」を載せる位置づけ。
yarn add @burger-editor/blocks
import { items, defaultCatalog } from '@burger-editor/blocks';
const wysiwygItem = items.wysiwyg;
const catalog = defaultCatalog;items から個別に import するか、defaultCatalog 経由でブロックの構成要素として利用する。実装は src/items/* を参照。
| key |
用途 |
button |
ボタン |
details |
折りたたみ要素 |
download-file |
ダウンロードファイル |
google-maps |
Google Maps 埋め込み |
hr |
水平線 |
image |
画像 |
import |
他ファイルから HTML を取り込むインポートブロック用（enableImportBlock で制御） |
table |
テーブル |
title-h2 |
大見出し（h2） |
title-h3 |
中見出し（h3） |
wysiwyg |
リッチテキストエディタ |
youtube |
YouTube 動画埋め込み |
defaultCatalog は以下のカテゴリ構成。実装は src/catalog/* を参照。
| ラベル |
name (block) |
使用アイテム |
| 大見出し |
h2 |
title-h2 |
| 中見出し |
h3 |
title-h3 |
| ラベル |
name (block) |
使用アイテム |
| テキスト |
wysiwyg |
wysiwyg |
| 画像 |
image |
image |
| 折りたたみ |
disclosure |
details |
| テーブル |
table |
table |
| YouTube |
youtube |
youtube |
| ラベル |
name (block) |
構成 |
| 画像 + テキスト |
image-text |
image + wysiwyg を 3 列グリッドで並べる |
| テキスト+画像+テキスト |
text-image-text |
wysiwyg+image+wysiwyg を 3 列グリッド |
| ラベル |
name (block) |
レイアウト |
| 画像右寄せ: テキスト回り込み |
text-float-image-end |
float: end（画像が右に浮動） |
| 画像左寄せ: テキスト回り込み |
text-float-image-start |
float: start（画像が左に浮動） |
| 画像右寄せ: テキスト回り込み無し |
text-start-image-end |
テキスト → 画像（左右配置・回り込み無） |
| 画像左寄せ: テキスト回り込み無し |
image-start-text-end |
画像 → テキスト（左右配置・回り込み無） |
| ラベル |
name (block) |
構成 |
| ボタン |
button |
button を 3 つ横並び |
| テキストリンク |
button |
リンク形式の button を 3 つ（<ul> セマンティクス） |
| ファイルダウンロード |
file |
download-file を 3 つ横並び |
| コンテンツナビゲーション |
content-navigation |
ページ内リンク button を 4 列グリッドで 8 つ |
| ラベル |
name (block) |
使用アイテム |
| Google Maps |
google-maps |
google-maps |
| 区切り線 |
hr |
hr |
各アイテムは個別の style.css を持つ。すべて統合した CSS を読み込みたい場合は @burger-editor/css を使う。
general.css はブロック全体の基本スタイルを定義し、以下のセレクタ／カスタムプロパティを「契約」として露出する。利用側 CSS はこの契約に依存して上書き／拡張できる。
| セレクタ / 変数 |
役割 |
[data-bge-container] |
ブロックコンテナ。レイアウト・余白・背景色などの基本スタイルを担う |
grid |
CSS 変数ベースのグリッド（auto-fit / auto-fill 対応） |
inline |
Flexbox ベースの横並びレイアウト |
float |
テキスト回り込みレイアウト |
[data-bgc-flex-box] |
Wysiwyg 内の横並び Flexbox |
[data-bgc-align] |
Wysiwyg 内段落の左寄せ／中央寄せ／右寄せ |
--bge-repeat-min-inline-size--{variant} |
グリッドの折り返し基準インラインサイズのプリセット（variant で切替） |
@burger-editor/core の createItem を使う。
Dual Licensed under MIT OR Apache-2.0