پرش به محتویات

کامپوننت‌ها به‌عنوان بلوک

بیشتر سایت‌های Bricks این الگو را دارند: صفحات و قالب‌ها در Bricks ساخته می‌شوند و پست‌ها یا محتوای دیگر در ویرایشگر بلوک (Gutenberg).

برای محتوای استاندارد خوب است؛ اما وقتی داخل ویرایشگر بلوک به چیزی سفارشی‌تر نیاز دارید — مثل testimonial استایل‌دار یا بلوک تبلیغاتی قابل استفاده مجدد — گزینه‌ها کم می‌شود.

قابلیت آزمایشی components as blocks این فاصله را پر می‌کند: بلوک را در Bricks طراحی می‌کنید و مستقیماً در ویرایشگر بلوک در دسترس قرار می‌گیرد.

همان امکانات سازنده‌ای که برای صفحات و قالب‌ها دارید را می‌گیرید، و دقیقاً مشخص می‌کنید ویرایشگر از طریق propertyهای کامپوننت چه چیزهایی را بتواند تغییر دهد.

این امکان را فراهم می‌کند:

  • ساخت بلوک‌های سفارشی و استایل‌دار کاملاً در Bricks
  • یکپارچگی طراحی با به‌روزرسانی یک‌باره کامپوننت در Bricks
  • آزادی ویرایشگر برای تغییر محتوا در ویرایشگر بلوک، در چارچوب design system شما

فعال‌سازی components as blocks

این قابلیت فعلاً آزمایشی است و پیش‌فرض غیرفعال است. از پیشخوان وردپرس: Bricks → Settings → General → Block editor → Bricks components in the block editor.

سه گزینه:

  • Disabled (پیش‌فرض)
  • Enable individual components manually
  • هر کامپوننت باید جداگانه فعال شود.
  • در سازنده:
    • Components panel را باز کنید، روی کامپوننت هاور کنید، Use in block editor را بزنید و تأیید کنید.
    • یا کامپوننت را ویرایش کنید و از هدر تنظیمات Use in block editor → Enabled را روشن کنید.
  • فیلتر در پنل Components فقط کامپوننت‌های فعال برای block editor را نشان می‌دهد.
  • Enable all components automatically
  • همه کامپوننت‌های Bricks فوراً در ویرایشگر بلوک در دسترس هستند.

وقتی کامپوننت برای block editor فعال شود، تنظیمات اضافی زیر «Use in block editor» در هدر کامپوننت ظاهر می‌شود:

  • Block category: دسته بلوک در ویرایشگر بلوک
  • Block icon: آیکون در block picker
  • Block preview image: تصویر پیش‌نمایش اختیاری در block inserter

درج کامپوننت در ویرایشگر بلوک

  1. پست/صفحه را در ویرایشگر بلوک باز یا بسازید.
  2. Add block (+) را بزنید و نام کامپوننت را جستجو کنید.
  3. کامپوننت را انتخاب کنید؛ مستقیماً در ویرایشگر رندر می‌شود.

مثل هر بلوک دیگر می‌توانید متن بالا/پایین اضافه کنید، جابه‌جا کنید یا با بلوک‌های دیگر ترکیب کنید.

سفارشی‌سازی propertyهای کامپوننت

وقتی بلوک کامپوننت Bricks را در ویرایشگر بلوک انتخاب می‌کنید، propertyهای قابل ویرایش در Block settings sidebar — همان‌طور که instance را در Bricks ویرایش می‌کنید — نمایش داده می‌شوند.

همه نوع property پشتیبانی می‌شود:

  • Text
  • Rich text
  • Select
  • Toggle
  • Global classes
  • Image
  • Image gallery
  • Link
  • Query loop (Query editor (PHP)، External APIs و Query manager فعلاً پشتیبانی نمی‌شوند)

هر instance می‌تواند مقادیر property منحصربه‌فرد داشته باشد؛ طراحی کامپوننت یکسان می‌ماند.

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

همه instanceهای بلوک به کامپوننت اصلی در Bricks متصل‌اند. هر تغییر طراحی در Bricks (layout، typography، spacing و غیره) در کل سایت — از جمله داخل ویرایشگر بلوک — اعمال می‌شود.

موارد استفاده

  • المان‌های طراحی قابل استفاده مجدد: testimonial، کارت رویداد، بلوک تبلیغ، فرم ثبت‌نام در پست‌ها
  • یکپارچگی طراحی: به‌روزرسانی سراسری در Bricks در کل سایت
  • انعطاف محتوا: ویرایشگر متن، تصویر و toggle را per instance تغییر می‌دهد بدون خروج از ویرایشگر بلوک
  • تفکیک workflow: طراح در Bricks کامپوننت می‌سازد، ویرایشگر در block editor استفاده می‌کند

این قابلیت آزمایشی است؛ بازخورد شما درباره components as blocks و ایده‌های یکپارچگی بهتر Bricks با block editor را در انجمن Bricks یا ایمیل با ما به اشتراک بگذارید.