Block Variations در وردپرس چطور بلاک‌ها را بدون کدنویسی تغییر می‌دهد؟

Block Variations در وردپرس یک مکانیزم پیشرفته برای تغییر رفتار، ساختار و تنظیمات اولیه بلاک‌ها بدون نیاز به کدنویسی پیچیده یا ساخت بلاک جدید است. این قابلیت که از وردپرس 5.4 معرفی شده، به توسعه‌دهندگان و کاربران امکان می‌دهد نسخه‌های از پیش پیکربندی‌شده از بلاک‌های موجود را با ویژگی‌های سفارشی ایجاد کنند. برخلاف Block Styles که فقط ظاهر را تغییر می‌دهند، Block Variations می‌توانند اتریبیوت‌ها، بلاک‌های داخلی، و رفتار بلاک را بازتعریف کنند. در این راهنما، مفهوم، تفاوت‌ها، کاربردهای عملی، و پیاده‌سازی گام‌به‌گام با PHP و JavaScript بررسی می‌شود. هدف، توانمندسازی توسعه‌دهندگان برای بهره‌گیری حرفه‌ای از این API در پروژه‌های واقعی است.

در نخستین مواجهه با Block Variations، ممکن است این قابلیت صرفاً یک تغییر کوچک به نظر برسد. اما تجربه نشان می‌دهد که این API می‌تواند معماری محتوای سایت را به شکلی بنیادین ساده‌تر کند. این راهنما حاصل کار با بلاک‌های سفارشی در پروژه‌های واقعی است. هدف، ارائه درکی عمیق از چرایی و چگونگی استفاده از این ابزار است. 🧩

Block Variations چیست؟

Block Variations (تغییرات بلاک) روشی برای تعریف نسخه‌های جایگزین از یک بلاک موجود است. به جای ساخت یک بلاک کاملاً جدید، می‌توانید تنظیمات، ساختار، و ظاهر یک بلاک را از پیش پیکربندی کنید و آن را به عنوان یک گزینه مستقل در درج‌کننده بلاک (Block Inserter) نمایش دهید. از دید کاربر، یک Block Variation مانند یک بلاک مستقل به نظر می‌رسد، اما در واقع نمونه‌ای از همان بلاک پایه با اتریبیوت‌های تغییر یافته است.[reference:0]

برای مثال، بلاک core/quote می‌تواند چندین Variation داشته باشد: یک نسخه ساده، یک نسخه با نقل‌قول برجسته، و یک نسخه با تصویر نویسنده. هر Variation می‌تواند اتریبیوت‌های متفاوتی داشته باشد و حتی Inner Blocks خاص خود را تعریف کند. این مفهوم در مستندات رسمی وردپرس به عنوان یکی از قدرتمندترین روش‌های گسترش وردپرس معرفی شده است.[reference:1]

Block Variations در هسته وردپرس نیز استفاده می‌شوند. برای مثال، بلاک ستون‌ها (Columns) از Variations برای ارائه چیدمان‌های از پیش تعریف‌شده مانند دو ستون، سه ستون، و غیره استفاده می‌کند. بلاک Embed نیز Variations متعددی برای سرویس‌های مختلف مانند YouTube، Twitter، و Spotify دارد.[reference:2]

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

چرا Block Variations اهمیت دارد؟

اهمیت Block Variations را می‌توان از چند منظر بررسی کرد:

کاهش تکرار کد: به جای ساخت چندین بلاک مشابه، یک بلاک پایه با Variations مختلف تعریف می‌شود. این امر باعث کاهش حجم کد، ساده‌تر شدن نگهداری، و کاهش احتمال خطا می‌شود.[reference:3]
تجربه کاربری بهتر: کاربران غیرفنی می‌توانند بدون تنظیم دستی اتریبیوت‌ها، از گزینه‌های آماده استفاده کنند. این امر سرعت تولید محتوا را به شدت افزایش می‌دهد.[reference:4]
رابط کاربری تمیزتر: به جای شلوغ کردن درج‌کننده بلاک با ده‌ها بلاک مجزا، می‌توان چندین Variation را زیر یک بلاک پایه گروه‌بندی کرد.[reference:5]
انعطاف‌پذیری برای توسعه‌دهندگان: Variations می‌توانند به صورت داینامیک بر اساس نوع پست، تاکسونومی، یا داده‌های دیگر تولید شوند. این امر امکان ساخت رابط‌های کاربری هوشمند را فراهم می‌کند.[reference:6]

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

تفاوت Block Variations و Block Styles

Block Variations و Block Styles دو مفهوم متفاوت هستند که اغلب با هم اشتباه گرفته می‌شوند. درک تفاوت آن‌ها برای انتخاب درست در پروژه‌ها حیاتی است.

جدول ۱: مقایسه Block Variations و Block Styles
ویژگی	Block Variations	Block Styles
ماهیت	نسخه از پیش پیکربندی‌شده از بلاک با اتریبیوت‌ها و ساختار مشخص	مجموعه‌ای از استایل‌های CSS برای تغییر ظاهر
تأثیر بر اتریبیوت‌ها	می‌تواند اتریبیوت‌ها را تغییر دهد	اتریبیوت‌ها را تغییر نمی‌دهد؛ فقط کلاس CSS اضافه می‌کند
Inner Blocks	می‌تواند Inner Blocks تعریف کند	Inner Blocks تعریف نمی‌کند
محل نمایش	درج‌کننده بلاک (Block Inserter)	نوار کناری تنظیمات بلاک
روش ثبت	`registerBlockVariation()`	`registerBlockStyle()`
کاربرد اصلی	تغییر ساختار و رفتار بلاک	تغییر ظاهر بلاک

Block Styles فقط ظاهر بلاک را تغییر می‌دهند و از طریق یک کلاس CSS اضافی اعمال می‌شوند. اما Block Variations می‌توانند اتریبیوت‌ها، ساختار Inner Blocks، و حتی رفتار بلاک را بازتعریف کنند.[reference:7] برای مطالعه بیشتر درباره تفاوت این دو مفهوم، مقاله قالب وردپرس چیست و چگونه قالب مناسب انتخاب کنیم را ببینید.

اجزای اصلی یک Block Variation

هر Block Variation از چند جزء اصلی تشکیل شده است که در زمان ثبت تعریف می‌شوند:

name: نام یکتای Variation به صورت kebab-case (مثلاً fancy-quote).
title: عنوان قابل خواندن برای نمایش در درج‌کننده بلاک.
description: توضیح مختصر که در درج‌کننده نمایش داده می‌شود.
icon: آیکون Dashicons، SVG، یا آبجکت برای نمایش Variation.
attributes: اتریبیوت‌های از پیش پیکربندی‌شده که بلاک با آن‌ها مقداردهی اولیه می‌شود.
innerBlocks: آرایه‌ای از بلاک‌های داخلی که به صورت خودکار در Variation قرار می‌گیرند.
isActive: تابع یا آرایه‌ای برای تشخیص اینکه آیا Variation فعال است یا خیر.
scope: دامنه نمایش Variation (مانند inserter، block، transform).
keywords: کلمات کلیدی برای جستجوی بهتر در درج‌کننده بلاک.

درک این اجزا برای ساخت Variations مؤثر ضروری است. برای آشنایی با ساختار بلاک‌های سفارشی، مقاله آموزش ساخت بلوک سفارشی گوتنبرگ را ببینید.

کاربردهای عملی در پروژه‌های واقعی

Block Variations در پروژه‌های واقعی کاربردهای متنوعی دارند. برخی از مهم‌ترین آن‌ها عبارتند از:

۱. دکمه‌های با سبک از پیش تعریف‌شده

یک بلاک دکمه پایه می‌تواند Variations مختلفی داشته باشد: دکمه اصلی (Primary)، دکمه ثانویه (Secondary)، دکمه با گوشه‌های گرد، دکمه با سایه، و غیره. هر Variation اتریبیوت‌های استایل متفاوتی دارد و کاربر با یک کلیک آن را درج می‌کند.[reference:8]

۲. چیدمان‌های از پیش تعریف‌شده

بلاک ستون‌ها (Columns) می‌تواند Variations برای چیدمان‌های دو ستون، سه ستون، و چهار ستون داشته باشد. کاربر بدون تنظیم دستی عرض ستون‌ها، چیدمان مورد نظر را انتخاب می‌کند. این الگو در بلاک Query Loop نیز استفاده می‌شود.[reference:9]

۳. بلاک‌های محتوایی سفارشی

یک بلاک پاراگراف می‌تواند Variation برای نمایش دسته‌بندی اصلی نوشته داشته باشد. این Variation شامل اتریبیوت‌های خاص برای دریافت محتوا از تاکسونومی و نمایش آن است.[reference:10]

۴. فروشگاه‌های اینترنتی

در ووکامرس، می‌توان Variations برای نمایش محصولات با چیدمان‌های مختلف (گرید، لیست، کاروسل) ایجاد کرد. کاربر بدون نیاز به کدنویسی، چیدمان مناسب را انتخاب می‌کند. برای آشنایی با توسعه ووکامرس، مقاله آموزش کار با ووکامرس برای فروشگاه اینترنتی را ببینید.

۵. سایت‌های خبری و وبلاگی

Variations می‌توانند برای نمایش آخرین اخبار، مقالات ویژه، یا پست‌های مرتبط با چیدمان‌های مختلف استفاده شوند. این امر انعطاف‌پذیری بالایی برای ویرایشگران فراهم می‌کند.

ثبت Variation با JavaScript

روش اصلی ثبت Block Variations استفاده از تابع registerBlockVariation() از پکیج @wordpress/blocks است. این تابع دو آرگومان می‌پذیرد: نام بلاک پایه و آبجکت Variation.[reference:11]

import { registerBlockVariation } from '@wordpress/blocks';

registerBlockVariation( 'core/quote', {
    name: 'fancy-quote',
    title: 'نقل‌قول برجسته',
    description: 'نمایش نقل‌قول با استایل برجسته',
    icon: 'format-quote',
    attributes: {
        className: 'is-style-fancy-quote',
        citation: 'نویسنده ناشناس'
    },
    innerBlocks: [
        [ 'core/paragraph', { placeholder: 'متن نقل‌قول را وارد کنید...' } ]
    ],
    scope: [ 'inserter' ],
    keywords: [ 'quote', 'blockquote', 'نقل‌قول' ]
} );

در این مثال، یک Variation با نام fancy-quote برای بلاک core/quote ثبت می‌شود. این Variation دارای یک Inner Block از نوع پاراگراف است و اتریبیوت className را به صورت پیش‌فرض تنظیم می‌کند. برای اطلاعات بیشتر درباره بلاک‌های داخلی، مقاله آموزش استفاده از هوک‌های وردپرس برای توسعه‌دهندگان را ببینید.

ثبت Variation با PHP

از وردپرس 6.5 به بعد، امکان ثبت Block Variations با PHP نیز فراهم شده است. این روش به ویژه زمانی مفید است که نیاز به تولید داینامیک Variations بر اساس داده‌های وردپرس مانند نوع پست یا تاکسونومی باشد.[reference:12]

add_filter( 'get_block_type_variations', function( $variations, $block_type ) {
    if ( 'core/quote' !== $block_type->name ) {
        return $variations;
    }

    $variations[] = array(
        'name'       => 'fancy-quote',
        'title'      => __( 'نقل‌قول برجسته', 'textdomain' ),
        'attributes' => array(
            'className' => 'is-style-fancy-quote',
        ),
        'innerBlocks' => array(
            array( 'core/paragraph', array( 'placeholder' => __( 'متن نقل‌قول...', 'textdomain' ) ) ),
        ),
        'scope'      => array( 'inserter' ),
    );

    return $variations;
}, 10, 2 );

استفاده از فیلتر get_block_type_variations امکان تولید Variations بر اساس شرایط خاص را فراهم می‌کند. برای مثال، می‌توان Variationهایی بر اساس نوع پست سفارشی (Custom Post Type) ایجاد کرد. مقاله ساخت نوع نوشته سفارشی در وردپرس را ببینید.

ثبت Variations با PHP به شما اجازه می‌دهد تا رابط کاربری را بر اساس داده‌های واقعی سایت هوشمندتر کنید.

کار با Inner Blocks در Variation

یکی از قدرتمندترین ویژگی‌های Block Variations، توانایی تعریف Inner Blocks است. این ویژگی به شما امکان می‌دهد ساختار داخلی بلاک را از پیش تعریف کنید. برای مثال، یک Variation از بلاک ستون‌ها می‌تواند شامل دو ستون با محتوای پیش‌فرض باشد.

registerBlockVariation( 'core/columns', {
    name: 'two-column-feature',
    title: 'دو ستون ویژه',
    icon: 'columns',
    innerBlocks: [
        [ 'core/column', {}, [
            [ 'core/heading', { level: 2, placeholder: 'عنوان ستون اول' } ],
            [ 'core/paragraph', { placeholder: 'توضیحات...' } ]
        ] ],
        [ 'core/column', {}, [
            [ 'core/image', { placeholder: 'تصویر را انتخاب کنید' } ]
        ] ]
    ],
    scope: [ 'inserter' ]
} );

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

مدیریت isActive و تشخیص Variation فعال

ویژگی isActive برای تشخیص اینکه آیا یک Variation خاص در بلاک انتخاب‌شده فعال است یا خیر استفاده می‌شود. این ویژگی می‌تواند یک تابع یا آرایه‌ای از نام اتریبیوت‌ها باشد. هنگامی که Variation فعال است، می‌توان استایل یا رفتار خاصی را اعمال کرد.[reference:13]

registerBlockVariation( 'core/group', {
    name: 'custom-group',
    title: 'گروه سفارشی',
    attributes: {
        className: 'is-style-custom-group',
        backgroundColor: 'primary'
    },
    isActive: [ 'className' ],
    scope: [ 'inserter', 'block' ]
} );

در این مثال، isActive به صورت آرایه‌ای از نام اتریبیوت‌ها تعریف شده است. اگر اتریبیوت className با مقدار is-style-custom-group مطابقت داشته باشد، Variation فعال در نظر گرفته می‌شود. این قابلیت در ساخت رابط‌های کاربری تعاملی بسیار مفید است.

بهترین شیوه‌ها

برای استفاده حرفه‌ای از Block Variations، رعایت شیوه‌های زیر توصیه می‌شود:

نام‌گذاری منظم: از kebab-case برای نام Variation استفاده کنید و نامی انتخاب کنید که هدف آن را به وضوح بیان کند.
محدود کردن scope: فقط دامنه‌هایی را فعال کنید که Variation در آن‌ها مورد نیاز است (مانند inserter یا transform).
استفاده از isActive دقیق: تابع یا آرایه isActive را به گونه‌ای تعریف کنید که فقط در شرایط مشخص فعال شود.
مستندسازی: برای هر Variation توضیح مختصری بنویسید تا سایر توسعه‌دهندگان بتوانند به راحتی از آن استفاده کنند.
تست در محیط staging: قبل از انتشار، Variations را در محیط staging تست کنید تا از سازگاری با سایر افزونه‌ها و قالب‌ها مطمئن شوید.
استفاده از PHP برای تولید داینامیک: اگر Variations بر اساس داده‌های سایت تغییر می‌کنند، از فیلتر PHP استفاده کنید.[reference:14]

برای مطالعه بیشتر درباره بهترین شیوه‌های توسعه وردپرس، مقاله استانداردهای کدنویسی وردپرس چیست را ببینید.

اشتباهات رایج

در پیاده‌سازی Block Variations، برخی اشتباهات رایج می‌توانند باعث بروز مشکل شوند:

تعریف name تکراری: نام Variation باید یکتا باشد. استفاده از نام تکراری باعث نادیده گرفته شدن Variation می‌شود.
عدم تنظیم scope: اگر scope تعریف نشود، Variation ممکن است در مکان‌های نامناسب نمایش داده شود.
نادیده گرفتن isActive: بدون isActive، تشخیص Variation فعال در ویرایشگر دشوار می‌شود.
استفاده از Inner Blocks ناسازگار: Inner Blocks باید با بلاک پایه سازگار باشند، در غیر این صورت خطا رخ می‌دهد.
عدم تست با نسخه‌های مختلف وردپرس: برخی ویژگی‌های Variations در نسخه‌های قدیمی‌تر پشتیبانی نمی‌شوند.
نادیده گرفتن عملکرد: Inner Blocks زیاد می‌تواند عملکرد ویرایشگر را کاهش دهد.

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

دیدگاه مهندسی پیشرفته

از منظر معماری نرم‌افزار، Block Variations یک الگوی طراحی مبتنی بر ترکیب (Composition) است. به جای ارث‌بری از یک بلاک پایه و ساخت بلاک جدید، Variations اتریبیوت‌ها و ساختار را از طریق پیکربندی تغییر می‌دهند. این رویکرد مزایای قابل توجهی دارد: کاهش تکرار کد، افزایش انعطاف‌پذیری، و سادگی نگهداری.

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

برای مهندسان ارشد، درک تعامل Variations با سیستم رندر بلاک در سمت سرور (Server-Side Rendering) ضروری است. Variations که Inner Blocks دارند، باید اطمینان حاصل کنند که ساختار تولیدشده در سمت کلاینت با ساختار ذخیره‌شده در دیتابیس مطابقت دارد. همچنین، استفاده از get_block_type_variations برای تولید داینامیک Variations می‌تواند عملکرد را در سایت‌های پربازدید تحت تأثیر قرار دهد و نیازمند کشینگ مناسب است.

در آینده، انتظار می‌رود که سیستم Variations با قابلیت‌هایی مانند Variations شرطی (Conditional Variations) و Variations مبتنی بر نقش کاربر (Role-Based Variations) گسترش یابد. این امر امکان ساخت رابط‌های کاربری کاملاً شخصی‌سازی‌شده را فراهم می‌کند. برای مطالعه درباره آینده گوتنبرگ، مقاله گوتنبرگ و آینده ویرایش محتوا در وردپرس را ببینید.

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

Block Variations چیست و چه تفاوتی با Block Styles دارد؟

Block Variations نسخه‌های از پیش پیکربندی‌شده از یک بلاک با اتریبیوت‌ها و ساختار مشخص هستند، در حالی که Block Styles فقط ظاهر بلاک را از طریق کلاس CSS تغییر می‌دهند.[reference:15]

چگونه یک Block Variation ثبت کنم؟

می‌توانید از تابع registerBlockVariation() در JavaScript یا فیلتر get_block_type_variations در PHP استفاده کنید.[reference:16]

آیا می‌توانم Inner Blocks را در یک Variation تعریف کنم؟

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

چگونه تشخیص دهم که یک Variation فعال است؟

از ویژگی isActive استفاده کنید که می‌تواند یک تابع یا آرایه‌ای از نام اتریبیوت‌ها باشد. این ویژگی به ویرایشگر کمک می‌کند تا Variation فعال را تشخیص دهد.[reference:17]

آیا Block Variations بر عملکرد سایت تأثیر می‌گذارد؟

اگر به درستی پیاده‌سازی شوند، تأثیر منفی ندارند. اما استفاده از Inner Blocks زیاد یا تولید داینامیک Variations بدون کشینگ می‌تواند عملکرد را کاهش دهد.

آیا می‌توان Variations را بر اساس نقش کاربر محدود کرد؟

در حال حاضر، Variations به طور مستقیم از محدودیت نقش کاربر پشتیبانی نمی‌کنند. اما می‌توان با استفاده از فیلترهای PHP، Variations را به صورت شرطی بر اساس نقش کاربر نمایش داد.

سخن پایانی

Block Variations یک ابزار قدرتمند در جعبه‌ابزار توسعه‌دهندگان وردپرس است که به آن‌ها امکان می‌دهد بدون ساخت بلاک جدید، رفتار و ساختار بلاک‌های موجود را بازتعریف کنند. این قابلیت نه تنها تجربه کاربری را بهبود می‌بخشد، بلکه معماری محتوای سایت را ساده‌تر و قابل نگهداری‌تر می‌کند. با تسلط بر JavaScript و PHP در ثبت Variations، می‌توانید رابط‌های کاربری هوشمند و کارآمدی بسازید. 💡

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