Block Supports در وردپرس یک API رسمی برای فعال‌سازی، غیرفعال‌سازی و کنترل ویژگی‌های ظاهری و ساختاری بلاک است که از طریق آن می‌توانید امکاناتی مانند رنگ، فاصله‌گذاری، تایپوگرافی، حاشیه و چیدمان را به بلاک اضافه یا از آن حذف کنید و بدون نوشتن کد CSS اختصاصی، بلاک را با سیستم طراحی وردپرس هماهنگ نمایید.

Block Supports در وردپرس یک لایه رسمی برای کنترل امکانات ظاهری و ساختاری بلاک است که از طریق فایل block.json تعریف می‌شود.

این API امکان فعال‌سازی ویژگی‌هایی مانند رنگ، تایپوگرافی، فاصله‌گذاری، حاشیه و چیدمان را بدون نوشتن کد اضافی فراهم می‌کند.

Block Supports مکمل Block Attributes است و از تعریف دستی attribute و CSS برای هر ویژگی جلوگیری می‌نماید.

کاربرد صحیح آن، بلاک‌ها را با ویرایشگر سایت هماهنگ کرده و امکان استفاده از استایل‌های سراسری را فراهم می‌آورد.

در این مقاله ساختار، انواع پشتیبانی، الگوهای پیشرفته، اشتباهات رایج و نکات مهندسی Block Supports را با مثال‌های واقعی بررسی می‌کنیم.

نخستین باری که یک بلاک سفارشی را برای یک پروژه فروشگاهی ساختم، برای افزودن قابلیت تغییر رنگ پس‌زمینه، کد CSS اختصاصی و attribute جداگانه نوشتم. زمانی که همان بلاک را در ویرایشگر سایت باز کردم، متوجه شدم که تنظیمات سراسری رنگ اعمال نمی‌شود و کاربر نمی‌تواند از پالت رنگی قالب استفاده کند. آن تجربه باعث شد که به‌سراغ Block Supports بروم و از آن زمان، این API به یکی از ابزارهای اصلی در طراحی بلاک‌های حرفه‌ای تبدیل شده است. آنچه در ادامه می‌خوانید حاصل کار عملی با این لایه در پروژه‌های واقعی و بررسی کد منبع گوتنبرگ است.

Block Supports چیست و چه نقشی در معماری بلاک دارد؟

Block Supports یک API رسمی در گوتنبرگ است که به توسعه‌دهنده اجازه می‌دهد امکانات ظاهری و ساختاری بلاک را به‌صورت declarative تعریف کند. به‌جای آنکه برای هر ویژگی مانند رنگ، فاصله‌گذاری یا تایپوگرافی، attribute جداگانه، کد CSS اختصاصی و رابط کاربری مجزا بنویسید، با تعریف چند کلید در فایل block.json، وردپرس به‌طور خودکار آن امکانات را در اختیار کاربر قرار می‌دهد. برای آشنایی با تاریخچه گوتنبرگ، مقاله Gutenberg چیست و چگونه ویرایش محتوای وردپرس را متحول کرد؟ را مطالعه کنید.

نقش Block Supports در معماری بلاک را می‌توان در چند لایه بررسی کرد. در لایه رابط کاربری، این API به‌طور خودکار کنترل‌های مناسب را در پنل تنظیمات بلاک نمایش می‌دهد. در لایه ذخیره‌سازی، ویژگی‌های فعال‌شده به attributeهای استاندارد نگاشت می‌شوند و در JSON سریالایز ذخیره می‌گردند. در لایه نمایش، وردپرس کلاس‌های CSS و استایل‌های inline لازم را تولید می‌کند. در لایه استایل سراسری، Block Supports با سیستم طراحی وردپرس هماهنگ می‌شود و امکان استفاده از پالت رنگی، تایپوگرافی و فاصله‌گذاری سراسری را فراهم می‌آورد.

Block Supports یک لایه انتزاعی است که ویژگی‌های پرکاربرد را از توسعه‌دهنده پنهان می‌کند و امکان استفاده از استانداردهای وردپرس را فراهم می‌آورد.

نکته مهمی که در بررسی‌های خود به آن پی بردم این است که Block Supports تنها یک میان‌بر برای صرفه‌جویی در کد نیست؛ یک قرارداد معماری با ویرایشگر سایت است. بلاکی که از Block Supports استفاده می‌کند، به‌طور خودکار با تنظیمات سراسری قالب هماهنگ می‌شود و کاربر می‌تواند از پالت رنگی و تنظیمات تایپوگرافی قالب بهره‌مند گردد. این هماهنگی در بلاک‌هایی که از attribute و CSS اختصاصی استفاده می‌کنند، به‌سختی قابل دستیابی است.

Block Supports در نسخه‌های مختلف گوتنبرگ به‌تدریج گسترش یافته است. در نسخه‌های اولیه، تنها پشتیبانی‌های ساده مانند align و anchor وجود داشت. با گذشت زمان، پشتیبانی‌هایی مانند color، typography، spacing، border و layout اضافه شد. امروزه این API یکی از کامل‌ترین لایه‌های کنترل ظاهری بلاک در گوتنبرگ محسوب می‌شود و به‌طور فعال توسعه می‌یابد.

چرا Block Supports یک تصمیم معماری است؟

Block Supports فراتر از یک API ساده است؛ یک تصمیم معماری با پیامدهای عمیق بر نحوه تعامل کاربر با بلاک و یکپارچگی آن با اکوسیستم وردپرس. در ادامه به بررسی دلایل این اهمیت می‌پردازیم.

اولین دلیل، هماهنگی خودکار با ویرایشگر سایت است. ویرایشگر سایت وردپرس از یک سیستم طراحی سراسری پشتیبانی می‌کند که شامل پالت رنگی، تایپوگرافی، فاصله‌گذاری و حاشیه است. بلاکی که از Block Supports استفاده می‌کند، به‌طور خودکار با این سیستم هماهنگ می‌شود و کاربر می‌تواند از تنظیمات سراسری قالب بهره‌مند گردد. در مقابل، بلاکی که از CSS اختصاصی استفاده می‌کند، از این هماهنگی محروم می‌ماند و ممکن است با تغییر قالب یا تنظیمات سراسری، ظاهر آن ناسازگار شود.

دومین دلیل، کاهش کد تکراری است. اگر برای هر ویژگی ظاهری مانند رنگ، فاصله‌گذاری و تایپوگرافی، کد اختصاصی بنویسید، حجم کد بلاک به‌سرعت افزایش می‌یابد و نگهداری آن دشوار می‌شود. Block Supports این کد تکراری را حذف می‌کند و تنها با تعریف چند کلید، تمام امکانات لازم را فراهم می‌آورد. برای مطالعه بیشتر درباره ساختار استاندارد، مقاله چرا بدون React نمی‌توان بلاک حرفه‌ای در وردپرس ساخت؟ را ببینید.

سومین دلیل، پشتیبانی از آینده است. تیم هسته وردپرس به‌طور مداوم Block Supports را گسترش می‌دهد و ویژگی‌های جدیدی به آن اضافه می‌کند. بلاکی که از این API استفاده می‌کند، به‌طور خودکار از این ویژگی‌های جدید بهره‌مند می‌شود و نیازی به بازنویسی ندارد. این مزیت به‌ویژه در پروژه‌های بلندمدت که نیاز به به‌روزرسانی مداوم دارند، حیاتی است.

چهارمین دلیل، امکان اعتبارسنجی و مهاجرت است. ویژگی‌های فعال‌شده از طریق Block Supports به attributeهای استاندارد نگاشت می‌شوند و در مکانیزم اعتبارسنجی و Deprecation به‌طور خودکار مدیریت می‌گردند. این هماهنگی، فرآیند مهاجرت را ساده‌تر می‌کند و از بروز خطاهای پنهان جلوگیری می‌نماید. برای مطالعه بیشتر درباره این مکانیزم، مقاله Block Deprecation در وردپرس چیست و چرا نسخه‌های قدیمی بلاک را می‌شکند؟ را ببینید.

پنجمین دلیل، بهبود تجربه کاربری است. کاربر ویرایشگر انتظار دارد که بلاک‌های مختلف، تجربه کاربری یکسانی داشته باشند. Block Supports این یکنواختی را تضمین می‌کند و امکان استفاده از کنترل‌های استاندارد وردپرس را فراهم می‌آورد. کاربر با یک بار یادگیری، می‌تواند از تمام بلاک‌هایی که از این API استفاده می‌کنند، بهره‌مند شود.

ساختار Block Supports در block.json

Block Supports در فایل block.json و از طریق کلید supports تعریف می‌شود. این کلید یک شیء است که هر ویژگی آن، یک نوع پشتیبانی را فعال یا غیرفعال می‌کند. ساختار کلی به این صورت است:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-plugin/custom-block",
  "title": "Custom Block",
  "category": "widgets",
  "supports": {
    "anchor": true,
    "align": [ "wide", "full" ],
    "color": {
      "background": true,
      "text": true,
      "gradients": true,
      "link": true
    },
    "typography": {
      "fontSize": true,
      "lineHeight": true
    },
    "spacing": {
      "margin": true,
      "padding": true
    }
  },
  "editorScript": "file:./index.js"
}

در این ساختار، هر کلید در supports یک ویژگی را کنترل می‌کند. مقدار این کلید می‌تواند یک مقدار Boolean باشد (برای فعال یا غیرفعال کردن کامل)، یک آرایه (برای تعیین مقادیر مجاز) یا یک شیء (برای کنترل دقیق‌تر جنبه‌های مختلف). این انعطاف‌پذیری به شما امکان می‌دهد که دقیقاً مشخص کنید چه امکاناتی در بلاک نمایش داده شود.

انواع مقادیر در supports

نوع مقدار کاربرد مثال
Boolean فعال یا غیرفعال کردن کامل "anchor": true
Array تعیین مقادیر مجاز "align": [ "wide", "full" ]
Object کنترل دقیق زیر‌ویژگی‌ها "color": { "text": true }

نکته مهم این است که فعال‌سازی یک پشتیبانی، به‌طور خودکار attributeهای لازم را به بلاک اضافه می‌کند. برای مثال، فعال‌سازی color.background باعث می‌شود که attributeهایی مانند backgroundColor، style.color.background و customBackgroundColor به‌طور خودکار در بلاک تعریف شوند. این ویژگی، از تعریف دستی attribute جلوگیری می‌کند و کار توسعه‌دهنده را ساده‌تر می‌نماید.

پشتیبانی رنگ (Color)

پشتیبانی رنگ یکی از پرکاربردترین انواع Block Supports است. این پشتیبانی به کاربر اجازه می‌دهد رنگ متن، پس‌زمینه، گرادیانت و لینک را تنظیم کند. پیکربندی آن به این صورت است:

"color": {
  "background": true,
  "text": true,
  "gradients": true,
  "link": true,
  "custom": true,
  "customDuotone": true,
  "defaultPalette": true,
  "defaultGradients": true
}

گزینه‌های پشتیبانی رنگ

  • background: فعال‌سازی تنظیم رنگ پس‌زمینه
  • text: فعال‌سازی تنظیم رنگ متن
  • gradients: فعال‌سازی تنظیم گرادیانت
  • link: فعال‌سازی تنظیم رنگ لینک
  • custom: اجازه ورود رنگ سفارشی
  • customDuotone: اجازه ورود دوتون سفارشی
  • defaultPalette: نمایش پالت پیش‌فرض وردپرس
  • defaultGradients: نمایش گرادیانت پیش‌فرض وردپرس

زمانی که پشتیبانی رنگ فعال شود، وردپرس به‌طور خودکار یک پنل تنظیمات در نوار کناری ویرایشگر نمایش می‌دهد که شامل پالت رنگ قالب، رنگ‌های پیش‌فرض وردپرس و امکان ورود رنگ سفارشی است. همچنین، کلاس‌های CSS استاندارد وردپرس مانند has-background، has-text-color و has-{color}-background-color به‌طور خودکار تولید می‌شوند.

پشتیبانی رنگ، بلاک را با پالت رنگی قالب هماهنگ می‌کند و امکان استفاده از رنگ‌های سراسری را فراهم می‌آورد.

برای مطالعه بیشتر درباره مبانی رنگ در طراحی، می‌توانید صفحه CSS را در ویکی‌پدیا ببینید.

پشتیبانی تایپوگرافی (Typography)

پشتیبانی تایپوگرافی به کاربر اجازه می‌دهد اندازه فونت، ارتفاع خط، وزن فونت، فاصله حروف و سایر ویژگی‌های متنی را تنظیم کند. پیکربندی آن به این صورت است:

"typography": {
  "fontSize": true,
  "lineHeight": true,
  "fontFamily": true,
  "fontWeight": true,
  "fontStyle": true,
  "letterSpacing": true,
  "textDecoration": true,
  "textTransform": true,
  "dropCap": true,
  "fluid": true
}

زمانی که پشتیبانی تایپوگرافی فعال شود، وردپرس کنترل‌های مربوطه را در پنل تنظیمات نمایش می‌دهد و کلاس‌های CSS استاندارد مانند has-{size}-font-size و has-text-decoration-{type} را تولید می‌کند. همچنین، امکان استفاده از تایپوگرافی سراسری قالب را فراهم می‌آورد.

گزینه fluid در تایپوگرافی

گزینه fluid که در نسخه‌های اخیر وردپرس اضافه شده است، امکان استفاده از تایپوگرافی سیال (Fluid Typography) را فراهم می‌کند. در این حالت، اندازه فونت بر اساس اندازه صفحه تغییر می‌کند و به‌جای مقادیر ثابت، از توابع clamp() در CSS استفاده می‌شود. این ویژگی به‌ویژه در طراحی ریسپانسیو حرفه‌ای مفید است.

پشتیبانی فاصله‌گذاری (Spacing)

پشتیبانی فاصله‌گذاری به کاربر اجازه می‌دهد حاشیه بیرونی (margin) و حاشیه درونی (padding) بلاک را تنظیم کند. پیکربندی آن به این صورت است:

"spacing": {
  "margin": true,
  "padding": true,
  "blockGap": true,
  "units": [ "px", "em", "rem", "%", "vh", "vw" ]
}

گزینه blockGap

گزینه blockGap که برای بلاک‌های دارای InnerBlocks طراحی شده است، فاصله میان بلاک‌های فرزند را کنترل می‌کند. این ویژگی به‌ویژه در بلاک‌هایی مانند Columns، Group و Stack کاربرد دارد و امکان تنظیم فاصله یکنواخت میان فرزندان را فراهم می‌آورد. برای مطالعه بیشتر درباره بلاک‌های تودرتو، مقاله چرا InnerBlocks در وردپرس کلید ساخت بلاک‌های حرفه‌ای است؟ را ببینید.

در صورت فعال‌سازی پشتیبانی فاصله‌گذاری، وردپرس کلاس‌های CSS استاندارد و استایل‌های inline لازم را تولید می‌کند. این کلاس‌ها با سیستم فاصله‌گذاری سراسری قالب هماهنگ هستند.

پشتیبانی حاشیه (Border)

پشتیبانی حاشیه به کاربر اجازه می‌دهد رنگ، ضخامت و شعاع حاشیه بلاک را تنظیم کند. پیکربندی آن به این صورت است:

"border": {
  "color": true,
  "radius": true,
  "style": true,
  "width": true
}

این پشتیبانی به‌ویژه در بلاک‌های کارت، دکمه و جعبه‌های اطلاعاتی کاربرد دارد. با فعال‌سازی آن، وردپرس کنترل‌های مربوطه را در پنل تنظیمات نمایش می‌دهد و کلاس‌های CSS استاندارد مانند has-border-color و has-{color}-border-color را تولید می‌کند.

پشتیبانی چیدمان (Layout)

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

"layout": {
  "default": {
    "type": "flex",
    "flexWrap": "wrap",
    "justifyContent": "center"
  },
  "allowEditing": true,
  "allowJustification": true,
  "allowOrientation": true,
  "allowCustomContentAndWideSize": true
}

در حال حاضر، دو نوع چیدمان اصلی پشتیبانی می‌شود: flex و grid. نوع flex برای چیدمان انعطاف‌پذیر و نوع grid برای چیدمان شبکه‌ای کاربرد دارد. انتخاب نوع صحیح، نقش کلیدی در تجربه کاربری بلاک دارد. برای مطالعه بیشتر درباره طراحی چیدمان، مقاله Static یا Dynamic Blocks در وردپرس؛ کدام انتخاب درست است؟ را ببینید.

پشتیبانی ابعاد (Dimensions)

پشتیبانی ابعاد به کاربر اجازه می‌دهد حداقل ارتفاع، نسبت ابعاد و سایر ویژگی‌های ابعادی بلاک را تنظیم کند. پیکربندی آن به این صورت است:

"dimensions": {
  "minHeight": true,
  "aspectRatio": true
}

این پشتیبانی به‌ویژه در بلاک‌های Hero، Cover و Gallery کاربرد دارد و امکان کنترل دقیق ابعاد بلاک را فراهم می‌آورد.

پشتیبانی موقعیت (Position)

پشتیبانی موقعیت به کاربر اجازه می‌دهد نوع موقعیت‌دهی بلاک را تنظیم کند. پیکربندی آن به این صورت است:

"position": {
  "sticky": true
}

در حال حاضر، تنها گزینه sticky پشتیبانی می‌شود که امکان چسبیدن بلاک به بالای صفحه در زمان اسکرول را فراهم می‌آورد. این ویژگی به‌ویژه در هدر، نوار اعلان و بلاک‌های شناور کاربرد دارد.

پشتیبانی HTML و anchor

پشتیبانی anchor به کاربر اجازه می‌دهد یک شناسه HTML (ID) برای بلاک تنظیم کند. این شناسه برای ایجاد لینک‌های مستقیم به بلاک کاربرد دارد. پیکربندی آن به این صورت است:

"anchor": true

پشتیبانی html که در نسخه‌های اخیر به‌عنوان یک گزینه پیشرفته اضافه شده است، به کاربر اجازه می‌دهد کد HTML سفارشی به بلاک اضافه کند. این پشتیبانی نیازمند دقت بالا است زیرا می‌تواند به آسیب‌پذیری‌های امنیتی منجر شود. برای مطالعه بیشتر درباره امنیت، مقاله چرا HTML API در وردپرس امن‌ترین راه پردازش HTML است؟ را ببینید.

پشتیبانی align و background

پشتیبانی align به کاربر اجازه می‌دهد عرض بلاک را تنظیم کند. مقادیر ممکن عبارتند از left، center، right، wide و full. پیکربندی آن می‌تواند به‌صورت Boolean یا آرایه باشد:

"align": [ "wide", "full" ]

پشتیبانی background به کاربر اجازه می‌دهد تصویر پس‌زمینه برای بلاک تنظیم کند. پیکربندی آن به این صورت است:

"background": {
  "backgroundImage": true,
  "backgroundSize": true
}

پشتیبانی حالت‌های تعاملی

در نسخه‌های اخیر گوتنبرگ، پشتیبانی‌های مربوط به حالت‌های تعاملی اضافه شده است. این پشتیبانی‌ها امکان تعریف حالت‌های مختلف ظاهری برای بلاک را فراهم می‌کنند و در طراحی رابط کاربری مدرن کاربرد دارند. برای مطالعه بیشتر درباره تعاملات، مقاله آیا WordPress Interactivity API جایگزین React در وردپرس می‌شود؟ را ببینید.

Block Supports در برابر Block Attributes

یکی از مباحثی که اغلب توسعه‌دهندگان تازه‌کار را سردرگم می‌کند، تفاوت میان Block Supports و Block Attributes است. در حالی که این دو مفهوم به‌هم مرتبط هستند، اما نقش‌های متفاوتی ایفا می‌کنند. برای مطالعه بیشتر درباره Attributes، مقاله Block Attributes در وردپرس چیست و مدیریت داده‌های بلاک چطور انجام می‌شود؟ را ببینید.

Block Attributes

Attributes داده‌های دائمی بلاک هستند که در پایگاه داده ذخیره می‌شوند. این داده‌ها می‌توانند هر نوعی داشته باشند و توسعه‌دهنده کنترل کامل روی تعریف و مدیریت آن‌ها دارد. Attributes منبع حقیقت برای داده‌های بلاک محسوب می‌شوند.

Block Supports

Block Supports یک لایه انتزاعی روی Attributes است که ویژگی‌های پرکاربرد را به‌صورت خودکار مدیریت می‌کند. زمانی که یک پشتیبانی فعال می‌شود، وردپرس به‌طور خودکار Attributeهای مربوطه را تعریف می‌کند، کنترل‌های رابط کاربری را نمایش می‌دهد و کلاس‌های CSS لازم را تولید می‌نماید. توسعه‌دهنده نیازی به تعریف دستی این موارد ندارد.

ویژگی Block Attributes Block Supports
نحوه تعریف دستی توسط توسعه‌دهنده خودکار توسط وردپرس
رابط کاربری نیاز به پیاده‌سازی دستی خودکار در پنل تنظیمات
کلاس‌های CSS نیاز به تعریف دستی خودکار توسط وردپرس
هماهنگی با استایل سراسری محدود کامل
کاربرد اصلی داده‌های سفارشی ویژگی‌های ظاهری استاندارد

درک این تفاوت‌ها به شما امکان می‌دهد که از هر دو مکانیزم در جای مناسب استفاده کنید. برای داده‌های سفارشی بلاک، از Attributes استفاده کنید و برای ویژگی‌های ظاهری استاندارد، Block Supports را انتخاب نمایید.

Block Supports و استایل‌های سراسری

یکی از مهم‌ترین مزایای Block Supports، هماهنگی خودکار با استایل‌های سراسری وردپرس است. ویرایشگر سایت وردپرس یک سیستم طراحی سراسری دارد که شامل پالت رنگی، تایپوگرافی، فاصله‌گذاری و حاشیه است. بلاکی که از Block Supports استفاده می‌کند، به‌طور خودکار با این سیستم هماهنگ می‌شود.

پالت رنگی سراسری

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

تایپوگرافی سراسری

پشتیبانی تایپوگرافی به‌طور خودکار با تنظیمات تایپوگرافی سراسری قالب هماهنگ می‌شود. اگر مدیر سایت اندازه فونت پایه یا ارتفاع خط را تغییر دهد، بلاک‌هایی که از این پشتیبانی استفاده می‌کنند، به‌طور خودکار به‌روزرسانی می‌شوند.

فاصله‌گذاری سراسری

پشتیبانی فاصله‌گذاری با سیستم فاصله‌گذاری سراسری قالب هماهنگ است و امکان استفاده از مقادیر استاندارد را فراهم می‌آورد. این هماهنگی به یکنواختی ظاهری سایت کمک می‌کند.

Block Supports یک پل است میان بلاک و سیستم طراحی سراسری وردپرس؛ بدون آن، هر بلاک یک جزیره مستقل از نظر ظاهری باقی می‌ماند.

Block Supports در بلاک‌های تودرتو

در بلاک‌های تودرتو که از InnerBlocks استفاده می‌کنند، Block Supports نقش ویژه‌ای ایفا می‌کند. بلاک والد می‌تواند از پشتیبانی‌هایی مانند layout، spacing و color استفاده کند که بر چیدمان و ظاهر بلاک‌های فرزند تأثیر می‌گذارد.

پشتیبانی layout در بلاک والد

پشتیبانی layout به بلاک والد اجازه می‌دهد نحوه چیدمان بلاک‌های فرزند را کنترل کند. برای مثال، یک بلاک Columns می‌تواند از نوع flex استفاده کند تا فرزندان را در یک ردیف قرار دهد، یا از نوع grid استفاده کند تا آن‌ها را در یک شبکه بچیند.

پشتیبانی blockGap در بلاک والد

پشتیبانی blockGap که زیرمجموعه‌ای از spacing است، فاصله میان بلاک‌های فرزند را کنترل می‌کند. این ویژگی به‌ویژه در بلاک‌های Group، Stack و Columns کاربرد دارد و امکان تنظیم فاصله یکنواخت را فراهم می‌آورد.

ارث‌بری استایل در بلاک‌های فرزند

در برخی موارد، بلاک‌های فرزند می‌توانند از استایل بلاک والد ارث‌بری کنند. این رفتار به‌طور خودکار توسط وردپرس مدیریت می‌شود و نیاز به کد اضافی ندارد.

Block Supports در Dynamic Blocks

Block Supports در Dynamic Blocks نیز به‌طور کامل پشتیبانی می‌شود، اما پیاده‌سازی آن تفاوت‌هایی با Static Blocks دارد. در Dynamic Blocks، خروجی در زمان نمایش از طریق PHP تولید می‌شود و به همین دلیل، کلاس‌ها و استایل‌های تولیدشده باید در تابع render_callback اعمال شوند. برای مطالعه بیشتر درباره این نوع بلاک‌ها، مقاله Dynamic Blocks در وردپرس چیست و چرا رندر سرور مهم است؟ را ببینید.

استفاده از get_block_wrapper_attributes

برای اعمال کلاس‌ها و استایل‌های تولیدشده توسط Block Supports در Dynamic Blocks، از تابع get_block_wrapper_attributes استفاده می‌شود:

function my_plugin_render_dynamic_block( $attributes, $content, $block ) {
  $wrapper_attributes = get_block_wrapper_attributes( array(
    'class' => 'my-custom-class',
  ) );

  return '<div ' . $wrapper_attributes . '>' . esc_html( $content ) . '</div>';
}

این تابع به‌طور خودکار کلاس‌های CSS مربوط به Block Supports را تولید کرده و آن‌ها را به عنصر wrapper اعمال می‌کند. بدون استفاده از این تابع، استایل‌های تنظیم‌شده توسط کاربر در فرانت‌اند اعمال نمی‌شوند.

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

در پروژه‌های بزرگ، کنترل امکانات بلاک نیازمند الگوهای پیشرفته‌تری است که کیفیت کد و پایداری بلاک را تضمین کنند. در ادامه به بررسی چند الگوی مهم می‌پردازیم.

الگوی Conditional Supports

در این الگو، پشتیبانی‌های بلاک بر اساس context یا شرایط خاص فعال یا غیرفعال می‌شوند. برای مثال، اگر بلاک درون یک بلاک خاص قرار دارد، ممکن است برخی پشتیبانی‌ها غیرفعال شوند تا از تناقض ظاهری جلوگیری شود. این الگو به‌ویژه در بلاک‌های تودرتو کاربرد دارد.

الگوی Reusable Supports

در این الگو، تعاریف Supports در یک فایل مشترک نگهداری می‌شوند و در چندین بلاک استفاده می‌گردند. این رویکرد از تکرار کد جلوگیری می‌کند و نگهداری را ساده‌تر می‌نماید. برای مطالعه بیشتر درباره ساختار استاندارد، مقاله Block Serialization در وردپرس چیست و ذخیره بلاک‌ها چطور کار می‌کند؟ را ببینید.

الگوی Extending Core Supports

در این الگو، پشتیبانی‌های بلاک‌های هسته وردپرس با استفاده از فیلترها گسترش داده می‌شوند. این رویکرد به شما امکان می‌دهد امکانات جدیدی به بلاک‌های موجود اضافه کنید بدون آنکه کد آن‌ها را تغییر دهید.

function my_plugin_extend_block_supports() {
  $block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core/paragraph' );

  if ( $block_type ) {
    $block_type->supports[ 'typography' ][ 'textTransform' ] = true;
  }
}
add_action( 'init', 'my_plugin_extend_block_supports' );

این کد به بلاک پاراگراف هسته وردپرس پشتیبانی textTransform را اضافه می‌کند بدون آنکه فایل اصلی بلاک تغییر کند.

الگوی Schema-First در Block Supports

در این الگو، ابتدا ساختار کامل پشتیبانی‌های بلاک را تعریف می‌کنید و سپس بر اساس آن، رابط کاربری و استایل‌ها را می‌سازید. این رویکرد از بروز ناهماهنگی میان داده و رابط جلوگیری می‌کند و نگهداری بلاک را ساده‌تر می‌نماید.

اشتباهات رایج در استفاده از Block Supports

در کار با Block Supports، توسعه‌دهندگان اغلب مرتکب اشتباهاتی می‌شوند که منجر به کد شکننده یا تجربه کاربری ضعیف می‌شود. در ادامه به برخی از مهم‌ترین این اشتباهات اشاره می‌کنیم.

فعال‌سازی تمام پشتیبانی‌ها به‌صورت پیش‌فرض

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

عدم تعریف مقادیر مجاز در align

اگر پشتیبانی align را بدون تعریف مقادیر مجاز فعال کنید، تمام گزینه‌ها نمایش داده می‌شوند حتی اگر برخی از آن‌ها در طراحی بلاک شما منطقی نباشند. همیشه مقادیر مجاز را به‌صورت صریح تعریف کنید.

نادیده گرفتن get_block_wrapper_attributes در Dynamic Blocks

در Dynamic Blocks، اگر از تابع get_block_wrapper_attributes استفاده نکنید، استایل‌های تنظیم‌شده توسط کاربر در فرانت‌اند اعمال نمی‌شوند. این اشتباه یکی از رایج‌ترین دلایل ناسازگاری ظاهری بلاک‌های Dynamic است.

استفاده از CSS اختصاصی به‌جای Supports

برخی توسعه‌دهندگان به‌جای استفاده از Block Supports، از CSS اختصاصی برای ویژگی‌های ظاهری استفاده می‌کنند. این کار باعث می‌شود که بلاک از سیستم طراحی سراسری وردپرس جدا شود و با تغییر قالب، ظاهر آن ناسازگار گردد.

عدم توجه به سازگاری با استایل سراسری

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

استفاده نادرست از custom در رنگ

فعال‌سازی گزینه custom در پشتیبانی رنگ، به کاربر اجازه ورود رنگ سفارشی می‌دهد. این گزینه باید با دقت استفاده شود زیرا می‌تواند به ناسازگاری ظاهری با پالت رنگی قالب منجر شود. در پروژه‌هایی که یکپارچگی ظاهری اولویت دارد، این گزینه را غیرفعال نگه دارید.

عدم تعریف fluid در تایپوگرافی

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

عیب‌یابی مشکلات Block Supports

عیب‌یابی مسائل مربوط به Block Supports نیازمند رویکردی سیستماتیک است. در ادامه به بررسی مراحل عیب‌یابی می‌پردازیم.

مرحله اول: بررسی block.json

اولین گام، بررسی فایل block.json و صحت تعریف supports است. مطمئن شوید که کلیدها با نام صحیح نوشته شده‌اند و مقادیر با نوع مورد انتظار مطابقت دارند.

مرحله دوم: بررسی کنسول مرورگر

گام دوم، بررسی کنسول مرورگر است. گوتنبرگ پیام‌های خطای دقیقی درباره پشتیبانی‌های نامعتبر در کنسول نمایش می‌دهد. به‌دنبال پیام‌هایی مانند «Invalid supports key» بگردید.

مرحله سوم: بررسی کلاس‌های CSS تولیدشده

گام سوم، بررسی کلاس‌های CSS تولیدشده است. با استفاده از ابزارهای توسعه‌دهنده مرورگر، عنصر بلاک را بررسی کنید و مطمئن شوید که کلاس‌های مربوط به پشتیبانی‌های فعال‌شده اعمال شده‌اند.

مرحله چهارم: بررسی اعمال استایل‌ها در فرانت‌اند

گام چهارم، بررسی اعمال استایل‌ها در فرانت‌اند است. اگر استایل‌ها در ویرایشگر اعمال می‌شوند اما در فرانت‌اند خیر، احتمالاً تابع get_block_wrapper_attributes در Dynamic Block استفاده نشده است.

مرحله پنجم: بررسی سازگاری با قالب

گام پنجم، بررسی سازگاری با قالب است. برخی قالب‌ها ممکن است سیستم طراحی سراسری را به‌طور کامل پشتیبانی نکنند و این می‌تواند به ناسازگاری ظاهری منجر شود. در چنین مواردی، بررسی مستندات قالب ضروری است.

پرسش‌های پرتکرار درباره Block Supports

Block Supports چیست و چه تفاوتی با Block Attributes دارد؟

Block Supports یک لایه انتزاعی روی Attributes است که ویژگی‌های ظاهری استاندارد را به‌صورت خودکار مدیریت می‌کند. Attributes داده‌های سفارشی بلاک را نگهداری می‌کند و نیاز به تعریف دستی دارد.

چگونه می‌توانم یک پشتیبانی را به بلاک خود اضافه کنم؟

کلید مربوطه را در بخش supports فایل block.json اضافه کنید و مقدار آن را بر اساس نیاز تنظیم نمایید. برای مطالعه بیشتر، مقاله Block Attributes در وردپرس چیست و مدیریت داده‌های بلاک چطور انجام می‌شود؟ را ببینید.

تفاوت پشتیبانی color و typography چیست؟

پشتیبانی color برای تنظیم رنگ متن، پس‌زمینه، گرادیانت و لینک استفاده می‌شود، در حالی که پشتیبانی typography برای تنظیم اندازه فونت، ارتفاع خط، وزن فونت و سایر ویژگی‌های متنی به کار می‌رود.

آیا Block Supports در Dynamic Blocks نیز کار می‌کند؟

بله، اما برای اعمال استایل‌ها در فرانت‌اند باید از تابع get_block_wrapper_attributes در render_callback استفاده کنید.

چگونه می‌توانم پشتیبانی‌های یک بلاک هسته وردپرس را گسترش دهم؟

با استفاده از فیلترها و تابع WP_Block_Type_Registry می‌توانید پشتیبانی‌های جدیدی به بلاک‌های هسته اضافه کنید. برای مطالعه بیشتر، مقاله Block Deprecation در وردپرس چیست و چرا نسخه‌های قدیمی بلاک را می‌شکند؟ را ببینید.

آیا فعال‌سازی تمام پشتیبانی‌ها توصیه می‌شود؟

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

آیا Block Supports بر سئو تأثیر می‌گذارد؟

Block Supports به‌طور مستقیم بر سئو تأثیر نمی‌گذارد، اما کلاس‌ها و استایل‌های تولیدشده می‌توانند بر ظاهر و تجربه کاربری اثر بگذارند. برای مطالعه بیشتر، مقاله چرا HTML API در وردپرس امن‌ترین راه پردازش HTML است؟ را ببینید.

چگونه می‌توانم پشتیبانی‌های بلاک را با قالب هماهنگ کنم؟

با تعریف theme.json در قالب و تعریف پالت رنگی، تایپوگرافی و فاصله‌گذاری سراسری، بلاک‌هایی که از Block Supports استفاده می‌کنند، به‌طور خودکار با قالب هماهنگ می‌شوند.

آیا می‌توانم پشتیبانی‌ها را به‌صورت شرطی فعال کنم؟

بله، با استفاده از فیلترها می‌توانید پشتیبانی‌ها را بر اساس context یا شرایط خاص فعال یا غیرفعال کنید.

تفاوت پشتیبانی layout و blockGap چیست؟

پشتیبانی layout نحوه چیدمان بلاک‌های فرزند را کنترل می‌کند، در حالی که blockGap فاصله میان بلاک‌های فرزند را تنظیم می‌نماید.

آیا Block Supports از TypeScript پشتیبانی می‌کند؟

بله، پکیج‌های گوتنبرگ دارای type definition برای Block Supports هستند و می‌توانید از آن‌ها در پروژه‌های TypeScript استفاده کنید. برای مطالعه بیشتر، مقاله چرا TypeScript برای توسعه دهندگان جاوااسکریپت یک تحول بنیادی است؟ را ببینید.

چگونه می‌توانم از Block Supports در بلاک‌های Synced استفاده کنم؟

بلاک‌های Synced نیز از Block Supports پشتیبانی می‌کنند، اما توجه داشته باشید که تغییرات در الگو در تمام نمونه‌ها اعمال می‌شود. برای مطالعه بیشتر، مقاله Synced Patterns در وردپرس چطور محتوا را در چند صفحه هماهنگ می‌کند؟ را ببینید.

آیا می‌توانم Block Supports را در PHP نیز مدیریت کنم؟

بله، با استفاده از فیلتر block_type_metadata_settings می‌توانید پشتیبانی‌های بلاک را در PHP تغییر دهید.

نگاه مهندسی به لایه Block Supports

از منظر معماری نرم‌افزار، Block Supports یک پیاده‌سازی از الگوی Aspect-Oriented Programming (AOP) است. در این الگو، نگرانی‌های عرضی مانند رنگ، تایپوگرافی و فاصله‌گذاری که در بسیاری از بلاک‌ها مشترک هستند، از منطق اصلی بلاک جدا می‌شوند و در یک لایه مستقل مدیریت می‌گردند. این جداسازی، تکرار کد را کاهش می‌دهد و نگهداری را ساده‌تر می‌نماید. برای مطالعه بیشتر درباره TypeScript، مقاله تعریف Interface حرفه‌ای برای آبجکت‌ها در TypeScript را ببینید.

یکی از جنبه‌های کمتر شناخته‌شده، نحوه تعامل Block Supports با مکانیزم سریالایز است. زمانی که یک پشتیبانی فعال می‌شود، وردپرس attributeهای مربوطه را به‌طور خودکار تعریف می‌کند. این attributeها در JSON سریالایز ذخیره می‌شوند و در زمان بارگذاری بازخوانی می‌گردند. این هماهنگی خودکار، فرآیند مهاجرت را ساده‌تر می‌کند و از بروز خطاهای پنهان جلوگیری می‌نماید. برای مطالعه بیشتر، مقاله Block Serialization در وردپرس چیست و ذخیره بلاک‌ها چطور کار می‌کند؟ را ببینید.

از منظر عملکرد، Block Supports یک trade-off میان سادگی و کنترل ایجاد می‌کند. استفاده از این API کد را ساده‌تر می‌کند اما کنترل کمتری روی جزئیات پیاده‌سازی می‌دهد. در پروژه‌هایی که نیاز به کنترل کامل روی ظاهر بلاک دارند، ممکن است نیاز باشد که از ترکیب Block Supports و CSS اختصاصی استفاده شود.

از منظر امنیت، Block Supports لایه‌ای ایمن محسوب می‌شود زیرا وردپرس به‌طور خودکار مقادیر را اعتبارسنجی و پاکسازی می‌کند. این ویژگی از بروز آسیب‌پذیری‌هایی مانند XSS از طریق ویژگی‌های ظاهری جلوگیری می‌نماید. برای مطالعه بیشتر درباره امنیت، مقاله useSelect و useDispatch در توسعه بلاک وردپرس چطور کار می‌کنند؟ را ببینید.

از منظر قابلیت نگهداری، Block Supports یک سرمایه‌گذاری بلندمدت است. با تعریف پشتیبانی‌های استاندارد، بلاک شما با اکوسیستم وردپرس هماهنگ می‌شود و امکان استفاده از تنظیمات سراسری قالب را فراهم می‌آورد. این رویکرد مشابه استفاده از متغیرهای CSS به‌جای مقادیر ثابت است که در بلندمدت از هزینه‌های نگهداری می‌کاهد.

از منظر قابلیت آزمون‌پذیری، Block Supports امکان تست را ساده‌تر می‌کند زیرا رفتار بلاک قابل پیش‌بینی‌تر است. می‌توانید با تغییر تنظیمات سراسری قالب، رفتار بلاک را در سناریوهای مختلف بررسی کنید و از پایداری آن مطمئن شوید.

از منظر مقیاس‌پذیری، Block Supports امکان استفاده مجدد از بلاک را در پروژه‌های مختلف فراهم می‌کند. یک بلاک که از این API استفاده می‌کند، در هر قالبی که سیستم طراحی سراسری را پشتیبانی کند، به‌درستی نمایش داده می‌شود. این ویژگی به‌ویژه در توسعه افزونه‌های عمومی حیاتی است.

آینده Block Supports

تیم هسته وردپرس در حال کار بر روی گسترش Block Supports است. از جمله تحولات مورد انتظار می‌توان به پشتیبانی از ویژگی‌های جدید مانند انیمیشن، ترنسفورم و فیلترها اشاره کرد. همچنین، تلاش‌هایی برای بهبود یکپارچگی با theme.json و سیستم طراحی سراسری در حال انجام است. این تحولات می‌توانند Block Supports را به یک لایه کامل‌تر برای کنترل ظاهری بلاک‌ها تبدیل کنند. برای مطالعه بیشتر، مقاله Data API در وردپرس چیست و چطور state بلاک‌ها را مدیریت می‌کند؟ را ببینید.

نکات کلیدی

  • Block Supports یک API رسمی برای کنترل امکانات ظاهری و ساختاری بلاک است.
  • این API از طریق کلید supports در فایل block.json تعریف می‌شود.
  • پشتیبانی‌های اصلی شامل color، typography، spacing، border، layout، dimensions، position و anchor هستند.
  • Block Supports مکمل Block Attributes است و از تعریف دستی attribute و CSS جلوگیری می‌کند.
  • بلاکی که از این API استفاده می‌کند، به‌طور خودکار با سیستم طراحی سراسری وردپرس هماهنگ می‌شود.
  • در Dynamic Blocks، برای اعمال استایل‌ها در فرانت‌اند باید از get_block_wrapper_attributes استفاده کنید.
  • در بلاک‌های تودرتو، پشتیبانی layout و blockGap نقش کلیدی در چیدمان فرزندان دارند.
  • تنها پشتیبانی‌هایی را فعال کنید که در بلاک شما کاربرد دارند.
  • گزینه custom در رنگ باید با دقت استفاده شود تا یکپارچگی ظاهری حفظ گردد.
  • Block Supports یک سرمایه‌گذاری بلندمدت برای هماهنگی با اکوسیستم وردپرس است.
  • آینده این API شامل پشتیبانی از انیمیشن، ترنسفورم و فیلترها خواهد بود.

اگر در پروژه‌ای از Block Supports استفاده کرده‌اید، برایم جالب است بدانید کدام پشتیبانی بیشترین تأثیر را بر تجربه کاربری بلاک شما داشته است؛ به‌ویژه اگر راه‌حل خلاقانه‌ای برای ترکیب آن با CSS اختصاصی یا theme.json پیدا کرده‌اید که می‌تواند برای دیگران مفید باشد. تجربه خود را در دیدگاه‌ها بنویسید. 🚀