مدل داده Bricks (Bricks Data Model)

title: مدل داده Bricks (Bricks Data Model) description: چگونه Bricks داده‌ها را ذخیره و ساختار می‌دهد: المان‌ها، ناحیه‌های محتوا، تنظیمات صفحه/الگو، و ساختارهای داده سراسری.

این صفحه توضیح می‌دهد که Bricks چگونه داده‌های خود را ساختار می‌دهد. برای درک یا تولید محتوای معتبر Bricks از آن در کنار عناصر و طرحواره‌های کنترل استفاده کنید. هر فایل JSON شکل دقیق داده‌هایی را که Bricks می‌خواند و می‌نویسد، توصیف می‌کند، بنابراین دستیاران کدنویسی هوش مصنوعی، ابزارهای ساخت، اسکریپت‌های واردات/صادرات، و ادغام‌های سفارشی می‌توانند محتوای Bricks را بدون رابط کاربری سازنده تولید، اعتبارسنجی یا تغییر دهند.

نسخه طرحواره: 2.3

ساختار المان (Element structure)

هر المان در Bricks صرف نظر از نوع آن، پاکت یکسانی دارد:

{
  "id": "dlceeu",
  "name": "button",
  "parent": 0,
  "children": [],
  "settings": { "text": "I am a button", "style": "primary" },
  "label": "My Button"
}

پاکت المان ۸ فیلد دارد (id، name، parent، children، settings، selectors، label، themeStyles). شیء settings سه لایه را ترکیب می‌کند: کنترل‌های مخصوص المان، کنترل‌های CSS به‌ارث‌رسیده (کلیدهای پیشوند _)، و متا-تنظیمات (_cssGlobalClasses، _conditions، _interactions، _attributes و غیره).

طرح‌واره المان برای مرجع کامل پاکت، لایه‌های تنظیمات، متا-تنظیمات و مستندات انتخابگرها را ببینید.

ناحیه‌های محتوا (Content areas)

یک صفحه Bricks (یا هر نوع پستی با استفاده از Bricks) المان‌های خود را در سه ناحیه محتوای مستقل ذخیره می‌کند: هدر، محتوا و پاورقی. هر ناحیه محتوا یک آرایه مسطح از المان‌ها با ارجاعات والد-فرزند است (نه یک درخت تودرتو). یک آرایه ممکن است شامل المان‌های معمولی و نمونه‌های کامپوننت باشد (با وجود فیلد cid قابل شناسایی است).

ناحیه محتوا (Content area)	کلید post meta وردپرس (WordPress post meta key)	توضیح (Description)
Header	`_bricks_page_header_2`	عناصر قالب هدر
Content	`_bricks_page_content_2`	صفحه اصلی / محتوای پست
Footer	`_bricks_page_footer_2`	عناصر قالب پاورقی

هر سه ناحیه محتوا دقیقاً از ساختار داده مشابهی استفاده می‌کنند: آرایه‌ای از المان‌ها همان‌طور که در طرح‌واره المان توضیح داده شده است.

ذخیره‌سازی: این‌ها به‌صورت آرایه‌های سریالی در جدول wp_postmeta ذخیره می‌شوند.

داده (Data)	کلید meta (Meta key)	ثابت PHP (PHP constant)
Header elements	`_bricks_page_header_2`	`BRICKS_DB_PAGE_HEADER`
Content elements	`_bricks_page_content_2`	`BRICKS_DB_PAGE_CONTENT`
Footer elements	`_bricks_page_footer_2`	`BRICKS_DB_PAGE_FOOTER`

برای جزئیات ساختار آرایه و ذخیره‌سازی به طرح‌واره ناحیه محتوا مراجعه کنید.

واریانت‌های واکنش‌گرا و state (Responsive and state variants)

تنظیمات CSS از پسوندهای نقطه‌شکست و شبه‌کلاس با استفاده از نحو کولون پشتیبانی می‌کنند. یک کلید تنظیم بدون پسوند در نقطه‌شکست پایه اعمال می‌شود (دسکتاپ به‌طور پیش‌فرض):

_typography                          → base breakpoint (no suffix)
_typography:tablet_portrait          → tablet portrait breakpoint
_typography:mobile_landscape:hover   → mobile landscape + hover state

تنظیمات صفحه (Page settings)

پیکربندی هر صفحه که نمایش سرصفحه/پانویس، رفتار اسکرول، متادیتا SEO، اشتراک‌گذاری اجتماعی و تزریق کد سفارشی را کنترل می‌کند. این تنظیمات برای پست خاصی که در حال ویرایش است اعمال می‌شود و جدا از تنظیمات المان و داده‌های سراسری است.

{
  "headerDisabled": true,
  "scrollSnapType": "y proximity"
}

برای همه کنترل‌های موجود به طرح تنظیمات صفحه مراجعه کنید.

ذخیره‌سازی: به صورت یک آرایه سریالی در جدول wp_postmeta ذخیره می‌شود.

داده (Data)	کلید meta (Meta key)	ثابت PHP (PHP constant)
Page settings	`_bricks_page_settings`	`BRICKS_DB_PAGE_SETTINGS`

تنظیمات قالب (Template settings)

تنظیمات مخصوص قالب‌های Bricks (ذخیره‌شده به‌عنوان نوع پست سفارشی bricks_template). شامل شرایط قالب است که تعیین می‌کند قالب در کجای سایت اعمال شود (به‌عنوان مثال، کل وب‌سایت، انواع پست‌های خاص، آرشیوها، یا صفحات جداگانه). قالب‌های هدر تنظیمات طرح‌بندی مانند رفتار sticky را نیز در اینجا ذخیره می‌کنند.

{
  "templateConditions": [
    { "id": "iwjjdg", "main": "any" }
  ]
}

برای همه کنترل‌های موجود به طرح تنظیمات قالب مراجعه کنید.

ذخیره‌سازی: به‌صورت آرایه‌های سریالی در جدول wp_postmeta ذخیره می‌شود.

داده (Data)	کلید meta (Meta key)	ثابت PHP (PHP constant)
Template settings	`_bricks_template_settings`	`BRICKS_DB_TEMPLATE_SETTINGS`
Template type	`_bricks_template_type`	`BRICKS_DB_TEMPLATE_TYPE`

ساختارهای داده سراسری (Global data structures)

Bricks چندین ساختار داده سراسری را به‌عنوان option های وردپرس ذخیره می‌کند. این‌ها در سراسر سایت در دسترس‌اند و بین همه صفحات و قالب‌ها به اشتراک گذاشته می‌شوند.

ذخیره‌سازی: تمام داده‌های سراسری به‌صورت آرایه‌های سریالی در جدول wp_options ذخیره می‌شوند.

داده (Data)	نام option (Option name)	ثابت PHP (PHP constant)
Global classes	`bricks_global_classes`	`BRICKS_DB_GLOBAL_CLASSES`
Global variables	`bricks_global_variables`	`BRICKS_DB_GLOBAL_VARIABLES`
Theme styles	`bricks_theme_styles`	`BRICKS_DB_THEME_STYLES`
Color palettes	`bricks_color_palette`	`BRICKS_DB_COLOR_PALETTE`
Breakpoints	`bricks_breakpoints`	`BRICKS_DB_BREAKPOINTS`
Components	`bricks_components`	`BRICKS_DB_COMPONENTS`
Pseudo-classes	`bricks_pseudo_classes`	`BRICKS_DB_PSEUDO_CLASSES`

کلاس‌های سراسری (Global classes)

تعاریف کلاس CSS قابل استفاده مجدد که می‌توان برای هر المانی از طریق تنظیم _cssGlobalClasses اعمال کرد. یک کلاس را یک بار ویرایش کنید و همه المان‌هایی که از آن استفاده می‌کنند در همه جا به‌روز می‌شوند. شیء settings در یک کلاس از همان ساختار تنظیمات المان پیروی می‌کند، از جمله پشتیبانی از انواع نقطه‌شکست و شبه‌کلاس با استفاده از نحو کولون (به‌عنوان مثال، _typography:tablet_portrait).

[
  {
    "id": "xkatss",
    "name": "hero-section",
    "settings": {
      "_background": {
        "color": {
          "light": "#81D4FA",
          "raw": "var(--bricks-color-sky-blue)",
          "id": "573827"
        }
      },
      "_padding:mobile_portrait": {
        "top": "40",
        "bottom": "40"
      }
    },
    "modified": 1772645626,
    "user_id": 2
  }
]

طرح‌واره کلاس‌های سراسری را ببینید.

متغیرهای سراسری (Global variables)

ویژگی‌های سفارشی CSS که در سرتاسر سایت به‌صورت var(--variable-name) در دسترس قرار می‌گیرند. برای تعریف توکن‌های طراحی (رنگ‌ها، فاصله، اندازه فونت و غیره) استفاده می‌شود که می‌توانند از هر تنظیم المانی که مقدار CSS می‌پذیرد، ارجاع داده شوند.

[
  { "id": "jeeawn", "name": "primary-color", "value": "green" },
  { "id": "ab3kxz", "name": "spacing-xl", "value": "80px" }
]

طرح‌واره متغیرهای سراسری را ببینید.

سبک‌های تم (Theme styles)

استایل‌های پیش‌فرض که در سرتاسر سایت برای هر نوع المان اعمال می‌شوند (به‌عنوان مثال، padding پیش‌فرض بخش، تایپوگرافی عنوان، رنگ‌های دکمه). هر Theme Style به شرایطی نیاز دارد تا مشخص کند در کدام صفحات اعمال می‌شود. چندین Theme Style با شرایط متفاوت می‌توانند همزمان وجود داشته باشند. یک تنظیم Load Method کنترل می‌کند که آیا فقط خاص‌ترین یا همه Theme Style های منطبق در یک صفحه خاص اعمال شوند.

{
  "my-theme-style": {
    "label": "My Theme Style",
    "settings": {
      "conditions": {
        "conditions": [
          { "id": "vrniaa", "main": "any" }
        ]
      },
      "section": {
        "padding": { "top": "80", "right": "16", "left": "16", "bottom": "80" },
        "_rowGap": "32"
      },
      "heading": {
        "_typography": { "font-family": "Inter", "font-weight": "700" }
      }
    }
  }
}

طرح‌واره سبک‌های تم را ببینید.

پالت‌های رنگ (Color palettes)

مجموعه‌های رنگی نام‌گذاری‌شده که در سازنده استفاده می‌شوند. چندین پالت می‌توانند همزمان وجود داشته باشند. هر رنگ یک مرجع متغیر CSS (raw)، مقدار حالت روشن (light) و یک مقدار حالت تاریک اختیاری (dark) را ذخیره می‌کند. مقدار raw چیزی است که در تنظیمات نوشته می‌شود. light/dark مقادیر نمایشی resolve‌شده هستند.

[
  {
    "id": "58e6a6",
    "name": "Brand Colors",
    "colors": [
      { "id": "920e35", "raw": "var(--bricks-color-red)", "light": "#f44336" },
      { "id": "58c724", "raw": "var(--bricks-color-blue)", "light": "#2196f3" },
      { "id": "3f6995", "raw": "var(--bricks-color-green)", "light": "#4caf50" }
    ]
  }
]

طرح‌واره پالت‌های رنگی را ببینید.

نقطه‌شکست‌ها (Breakpoints)

تعاریف نقطه‌شکست ریسپانسیو. ورودی با "base": true نقطه‌شکست پیش‌فرض است. تنظیمات بدون پسوند نقطه‌شکست در این نقطه‌شکست اعمال می‌شوند (به‌عنوان مثال، _typography). همه نقاط‌شکست دیگر یک media query با مقدار width خود ایجاد می‌کنند و از طریق پسوند دو نقطه در کلید تنظیم ارجاع می‌شوند (به‌عنوان مثال، _typography:tablet_portrait). کاربران می‌توانند نقاط‌شکست سفارشی اضافه کنند و عرض‌ها را تغییر دهند.

[
  { "base": true, "key": "desktop", "label": "Desktop", "width": 1279, "icon": "laptop" },
  { "key": "tablet_portrait", "label": "Tablet portrait", "width": 991, "icon": "tablet-portrait" },
  { "key": "mobile_landscape", "label": "Mobile landscape", "width": 767, "icon": "phone-landscape" },
  { "key": "mobile_portrait", "label": "Mobile portrait", "width": 478, "icon": "phone-portrait" }
]

طرح‌واره نقاط‌شکست را ببینید.

کامپوننت‌ها (Components)

المان‌های قابل استفاده مجدد، مشابه کامپوننت‌ها در Vue یا React. تعریف کامپوننت دارای درختی از المان‌ها (elements) و فهرستی اختیاری از properties است که کنترل‌های خاصی را برای سفارشی‌سازی هر نمونه نشان می‌دهد (به‌عنوان مثال، متن یا تصویر عنوان متفاوت در هر نمونه). هنگامی‌که به یک صفحه اضافه می‌شود، یک instance از کامپوننت ایجاد می‌شود که از طریق cid به کامپوننت اصلی ارجاع می‌دهد.

[
  {
    "id": "fdqkmn",
    "category": "Marketing",
    "desc": "A reusable CTA button with configurable label",
    "elements": [
      {
        "id": "fdqkmn",
        "name": "button",
        "parent": 0,
        "children": [],
        "settings": { "text": "Get started", "style": "dark" },
        "label": "CTA Button"
      }
    ],
    "properties": [
      {
        "id": "pbutxt",
        "label": "Button text",
        "type": "text",
        "connections": { "fdqkmn": ["text"] }
      }
    ],
    "_created": 1772645617,
    "_user_id": 2,
    "_version": "2.2-rc2"
  }
]

طرح‌واره کامپوننت‌ها را ببینید.

شبه‌کلاس‌ها (Pseudo-classes)

شبه‌کلاس‌های CSS برای انواع حالت (مانند hover، active، focus) که در سازنده در دسترس هستند. این‌ها تعیین می‌کنند کدام پسوندهای شبه‌کلاس را می‌توان با استفاده از نحو کولون (به‌عنوان مثال، _typography:mobile_portrait:hover) در تنظیمات CSS اعمال کرد. مقادیر پیش‌فرض :hover، :active، و :focus هستند، اما کاربران می‌توانند شبه‌کلاس‌های سفارشی را از طریق تنظیمات Bricks اضافه کنند.

[":hover", ":active", ":focus"]

طرح‌واره شبه‌کلاس‌ها را ببینید.

نمونه تو در تو (Nesting example)

در زیر یک بخش hero واقعی آمده است که نشان می‌دهد چگونه المان‌ها از طریق ساختار آرایه مسطح تودرتو می‌شوند. نمای درختی سلسله‌مراتب بصری و سپس داده‌های واقعی را نشان می‌دهد.

section (Hero Section 06)
  └─ container
       ├─ block (Content Wrapper)
       │    ├─ heading (h1)
       │    ├─ text-basic (Tagline)
       │    ├─ text-basic (Lede)
       │    └─ div (Button Group)
       │         ├─ button
       │         └─ button (outline)
       └─ block (Media Wrapper)
            └─ image (eager, figure)

[
  {
    "id": "13877b",
    "name": "section",
    "parent": 0,
    "children": ["65f029"],
    "settings": { "_cssGlobalClasses": ["skznjf"] },
    "label": "Hero Section 06"
  },
  {
    "id": "65f029",
    "name": "container",
    "parent": "13877b",
    "children": ["bf5a3e", "19454c"],
    "settings": { "_cssGlobalClasses": ["ubprdn"] }
  },
  {
    "id": "bf5a3e",
    "name": "block",
    "parent": "65f029",
    "children": ["c85e7f", "dfe903", "436fc0", "9b4d18"],
    "settings": { "_cssGlobalClasses": ["ebvzqj"] },
    "label": "Content Wrapper"
  },
  {
    "id": "c85e7f",
    "name": "heading",
    "parent": "bf5a3e",
    "children": [],
    "settings": {
      "text": "This hero headline is a temporary placeholder",
      "_cssGlobalClasses": ["deprgo"],
      "tag": "h1",
      "type": "hero"
    }
  },
  {
    "id": "dfe903",
    "name": "text-basic",
    "parent": "bf5a3e",
    "children": [],
    "settings": {
      "text": "Tagline",
      "tag": "p",
      "_cssGlobalClasses": ["dzwkrp", "xlqxzg"]
    },
    "label": "Tagline"
  },
  {
    "id": "436fc0",
    "name": "text-basic",
    "parent": "bf5a3e",
    "children": [],
    "settings": {
      "text": "While we're still finalizing our content, we've included this placeholder text to occupy the space temporarily.",
      "tag": "p",
      "_cssGlobalClasses": ["vpsyry", "ebhacb"]
    },
    "label": "Lede"
  },
  {
    "id": "9b4d18",
    "name": "div",
    "parent": "bf5a3e",
    "children": ["15596e", "c19a95"],
    "settings": { "_cssGlobalClasses": ["zoyzsf"] },
    "label": "Button Group"
  },
  {
    "id": "15596e",
    "name": "button",
    "parent": "9b4d18",
    "children": [],
    "settings": { "text": "Button" }
  },
  {
    "id": "c19a95",
    "name": "button",
    "parent": "9b4d18",
    "children": [],
    "settings": { "text": "Button Outline", "outline": true }
  },
  {
    "id": "19454c",
    "name": "block",
    "parent": "65f029",
    "children": ["849138"],
    "settings": { "_cssGlobalClasses": ["vxsvbb"] },
    "label": "Media Wrapper"
  },
  {
    "id": "849138",
    "name": "image",
    "parent": "19454c",
    "children": [],
    "settings": {
      "tag": "figure",
      "caption": "none",
      "image": {
        "id": 90346,
        "filename": "image_16-9_portrait.jpg",
        "size": "medium_large",
        "full": "https://example.com/wp-content/uploads/image_16-9_portrait.jpg",
        "url": "https://example.com/wp-content/uploads/image_16-9_portrait-768x1365.jpg"
      },
      "_cssGlobalClasses": ["zqibqu"],
      "loading": "eager"
    },
    "label": "Media",
    "themeStyles": []
  }
]

مدل داده Bricks (Bricks Data Model)

ساختار المان (Element structure)

ناحیه‌های محتوا (Content areas)

واریانت‌های واکنش‌گرا و state (Responsive and state variants)

تنظیمات صفحه (Page settings)

تنظیمات قالب (Template settings)

ساختارهای داده سراسری (Global data structures)

کلاس‌های سراسری (Global classes)

متغیرهای سراسری (Global variables)

سبک‌های تم (Theme styles)

پالت‌های رنگ (Color palettes)

نقطه‌شکست‌ها (Breakpoints)

کامپوننت‌ها (Components)

شبه‌کلاس‌ها (Pseudo-classes)

نمونه تو در تو (Nesting example)

دسته‌بندی‌های Schema (Schema categories)

المان‌ها

مشترک

عمومی

کنترل‌ها

سراسری

تنظیمات