چگونه بلوک های وردپرس را با Block.json و ثبت سمت سرور تقویت کنیم

یاد بگیرید که چگونه بلاک ها را ثبت کنید و چرا block.json روش توصیه شده است.

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

فهرست مطالب

روش های مختلف ثبت بلوک

سمت مشتری

بلوک های ثبت شده در سمت مشتری توسط کد جاوا اسکریپت که در مرورگر مشتری اجرا می شود پردازش می شوند. این اجازه می دهد تا بلوک ها هم در ویرایشگر وردپرس و هم در قسمت جلویی اضافه شوند و ارائه شوند. را ویرایش () متد نحوه نمایش بلوک و تعامل با آن در ویرایشگر را تعریف می کند، در حالی که صرفه جویی() روش نحوه نمایش بلوک در قسمت جلویی وب سایت را مشخص می کند.

سمت سرور

بلوک های ثبت شده در سمت سرور را می توان با کد PHP قالب یا افزونه وردپرس پردازش کرد. این روش ویژگی‌های پیشرفته‌ای مانند فیلدهای سفارشی و داده‌های پویا را ارائه می‌دهد که بلوک را روی سرور ارائه می‌کند.

Block.json (توصیه می شود)

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

نحوه عملکرد فایل «block.json».

از زمان استقرار وردپرس 5.8، می‌توان از یک متافیل مخصوص به نام «block.json» استفاده کرد که حاوی متادیتا و تنظیمات یک بلوک (نام، عنوان و نماد) است. این فایل با ارائه روشی واضح و سازماندهی شده برای تعریف بلوک ها و ویژگی های آنها، توزیع و نصب بلوک ها را در تم ها و افزونه های مختلف آسان می کند.

تعریف بلوک مزایای اشتراک گذاری کد بین جاوا اسکریپت، PHP و سایر زبان ها را هنگام پردازش انواع بلوک های ذخیره شده به عنوان JSON ارائه می دهد. ثبت بلوک‌ها با فایل block.json همچنین فرآیند ثبت‌نام را ساده می‌کند – با استفاده از تابع PHP وردپرس «register_block_type()» به ثبت‌نام دوگانه سریع و آسان در سمت سرور و سمت کلاینت اجازه می‌دهد.

function wpvip_example_block_registration() {
	
	// By providing a path to a directory as the first argument, 
	// `register_block_type` will look for a `block.json` file in
	// that directory.
	// You can also provide the full path to the block.json file.
	register_block_type( __DIR__ );
}
add_action( 'init', wpvip_example_block_registration );

فایل block.json یک گزینه عالی برای کسانی است که می‌خواهند بلوک‌های سفارشی خود را بین مخاطبان وسیع‌تری توزیع کنند و/یا نصب و استفاده از آن‌ها را برای دیگران آسان کنند. به لطف ثبت نام دوگانه آسان، بلوک را می توان در هر زمینه ای استفاده کرد: ویرایشگر وردپرس، یک برنامه جلویی جاوا اسکریپت یا برنامه تلفن همراه، حتی REST API.

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

اگر طرح زمینه شما از بارگذاری تنبل دارایی‌هایش پشتیبانی می‌کند، روش ثبت block.json حتی ممکن است به عملکرد front end کمک کند. بلوک‌هایی که با استفاده از این متافیل ثبت می‌شوند، به‌طور خودکار دارایی‌شان در صف بهینه‌سازی می‌شود. دارایی‌های CSS و جاوا اسکریپت ثبت‌شده در ویژگی‌های «style» یا «اسکریپت» تنها زمانی در صف قرار می‌گیرند که بلوک در صفحه فعلی وجود داشته باشد، که به کاهش اندازه صفحه کمک می‌کند.

نحوه ثبت بلوک با استفاده از «block.json».

فایل «block.json» ثبت بلوک را هم در سمت کلاینت و هم در سمت سرور مدیریت می‌کند و تمام ویژگی‌ها و پیکربندی بلوک مورد نیاز را در یک فایل فراداده واحد حمل می‌کند.

1. یک فایل block.json جدید ایجاد کنید و در سمت مشتری ثبت نام کنید

تمام فیلدهای موجود برای این فایل را در اسناد رسمی WordPress.org پیدا کنید. یک ورودی طرحواره را به بالای فایل block.json اضافه کنید تا در مرحله توسعه از طریق راهنمایی ابزار، تکمیل خودکار و اعتبارسنجی (اگر ویرایشگر شما از آن پشتیبانی کند) کمک کنید.

// block.json file
{
"$schema": "https://schemas.wp.org/trunk/block.json",
    "name": "wpvip_example/hello-block",
    "title": "Hello Block",
    "icon": "shield",
    "category": "common",
    "attributes": {
        "name": {
            "type": "string"
        }
    },
    "editor_script": "file:./build/hello-block.js"
}

ویژگی «editor_script» در فایل block.json، فایل جاوا اسکریپت را مشخص می‌کند که حاوی کد ثبت بلوک در سمت کلاینت با استفاده از تابع «registerBlockType» از بسته «wordpress/block@» است. این ویژگی باید به مسیر نسبی فایل جاوا اسکریپت که بلوک در آن ثبت می شود اشاره کند.

import { registerBlockType } from '@wordpress/blocks';
import metadata from '../block.json';

registerBlockType( metadata, {
edit: () => { /* edit component */ },
save: () => { /* save component, where the rendering happens */ },
}

2. ثبت نام با سمت سرور

هنگامی که بلوک شما در سمت سرویس گیرنده با تمام ابرداده های فایل «block.json» ثبت شد، باید در سمت سرور ثبت شود. این کار را با فراخوانی تابع «register_block_type()» با دایرکتوری بلوک به عنوان اولین آرگومان انجام دهید (مسیر کامل فایل «block.json» نیز قابل ارائه است). بلوک هم در سمت کلاینت و هم در سمت سرور ثبت می شود و ابرداده های مشابهی مانند ویژگی های بلوک، سبک های CSS و فایل های JS را به اشتراک می گذارد.

// file: hello-block.php
<?php

function wpvip_example_register_hello_block() {
    // Register the block using a block.json file in the current directory
    register_block_type( __DIR__ );
}
add_action( 'init', 'wpvip_example_register_hello_block' );

تابع «register_block_type» آرگومان دوم را با آرایه‌ای از آرگومان‌های نوع بلوک می‌پذیرد که می‌تواند برای پیکربندی نحوه ثبت بلوک استفاده شود. این تابع همچنین می‌تواند بلوک را با یک تابع بازخوانی رندر خاص مطابق شکل زیر ثبت کند.

<?php

function wpvip_example_register_hello_block() {
    // Register the block using a block.json file in the current directory
    register_block_type( __DIR__,
    array(
        'render_callback' => 'wpvip_example_render_hello_block',
    )
    );
}
add_action( 'init', 'wpvip_example_register_hello_block' );

function wpvip_example_render_hello_block( $attr ) { ... }

به‌جای تنظیم یک فراخوان رندر، می‌توانید از ویژگی «render» در فایل «block.json» استفاده کنید. این ویژگی مشخص می کند که کدام فایل PHP برای رندر کردن بلوک در سمت سرور استفاده می شود. اگر ویژگی «render» و آرگومان «render_callback» تنظیم نشود، رندر توسط سمت کلاینت انجام می شود، همانطور که یک بلوک سمت کلاینت معمولی انجام می دهد.

// block.json file with server-side rendering
{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "name": "wpvip_example/hello-block",
    (...)   
    "render": "file:./render.php"
}

برای اطلاعات بیشتر در مورد آرگومان های موجود هنگام ثبت یک بلوک، اسناد «register_block_type» و مستندات فوق داده «block.json» را مرور کنید.

مزایای استفاده از ثبت نام بلوک سمت سرور و سمت سرویس گیرنده برای برنامه های جدا شده

اگر نمی توانید از فایل block.json استفاده کنید، حداقل در سمت مشتری و سمت سرور ثبت نام کنید. در حالی که ممکن است، ثبت انحصاری سمت مشتری برای بلوک ها در ویرایشگر سایت متأسفانه می تواند عملکرد بلوک را محدود کند و استفاده در خارج از محیط وردپرس را دشوار کند. مشکلات شامل رندر کردن بلوک ها هنگام تولید HTML برای یک صفحه وب، یا تولید اجزای خاص در یک برنامه تلفن همراه برای نمایش آن بلوک است.

ثبت سمت سرور مخصوصاً برای برنامه‌های جداشده که در آن محتوا باید از قسمت پشتی وردپرس به یک محیط جلویی کاملاً متفاوت منتقل شود، مهم است. اگر هسته وردپرس از یک بلوک و ویژگی های آن اطلاعی نداشته باشد (به دلیل عدم انجام ثبت نام سمت سرور)، آن اطلاعات را از طریق API ارائه نمی دهد تا توسط برنامه جدا شده مصرف شود و بنابراین برنامه نمی تواند رندر شود. آن محتوا به درستی

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

توصیه ما: برای ثبت بلاک ها در وردپرس از ثبت سمت سرور یا فایل block.json استفاده کنید.

نحوه ثبت بلوک سمت کلاینت در سمت سرور

می‌توانید یک بلوک فعلی سمت کلاینت را در سمت سرور بدون استفاده از فایل فوق‌داده «block.json» ثبت کنید.

1. بلوک را در سمت مشتری ثبت کنید

برای این بلوک سفارشی با نام “Hello Block” که فقط در سمت کلاینت ثبت شده است، از تابع “registerBlockType” با ویژگی به نام “name” (رشته ساده) استفاده کرده ایم. ثبت نام مرحله به مرحله را در زیر مشاهده کنید.

// file: hello-block.js
import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'wpvip-example/hello-block', {
    title: 'Hello Block',
    icon: 'shield',
    category: 'common',
    attributes: {
        name: {
            type: 'string',
        },
    },
    edit: ( { className, setAttributes, attributes } ) => {
        const { name } = attributes;
        return (
            <div className={ className }>
                <p>Hello {name}</p>
                <input 
                    type="text"
                    value={name}
                    onChange={(event) => setAttributes({name: event.target.value})}
                />
            </div>
        );
    },
    save: ( { attributes } ) => {
        const { name } = attributes;
        return <p>Hello {name}</p>;
    },
} );

پاسخ به تماس «ویرایش» یک پاراگراف را با متن «Hello» + name ارائه می‌کند، به دنبال آن یک فیلد ورودی که به شما امکان می‌دهد مقدار «نام» را ویرایش کنید. سپس callback «ذخیره» پاراگراف را با رشته به عنوان خروجی نهایی بلوک برمی گرداند.

این بلوک، در حالی که کاملاً کاربردی است، فقط در سمت کلاینت وردپرس ثبت شده است، به این معنی که فقط برای ویرایشگر وردپرس قابل مشاهده است – به این ترتیب، هسته وردپرس از وجود آن بی اطلاع است.

2. بلوک را در سمت سرور ثبت کنید

برای اینکه آن را برای هسته وردپرس قابل مشاهده کنید، آن را در سمت سرور با استفاده از API وردپرس PHP ثبت کنید. دو راه برای انجام این کار وجود دارد:

1. یک فایل PHP جدید برای رسیدگی به ثبت نام سمت سرور بلوک ایجاد کنید
2. از یک فایل موجود اگر قبلاً با افزونه یا موضوعی همراه شده است استفاده کنید

از طریق تابع PHP «register_block_type» به راحتی یک بلوک سمت سرویس گیرنده را در سمت سرور ثبت کنید. اگر به مثال «Hello Block» ادامه دهیم، فقط باید «register_block_type» را مطابق شکل زیر فراخوانی کنیم.

// file: hello-block.php
<?php

function wpvip_example_register_hello_block() {
    // (...) enqueue the scripts and styles (...)

    register_block_type('wpvip-example/hello-block' );
}
add_action( 'init', 'wpvip_example_register_hello_block' );

اکنون یک بلوک بسیار ساده فقط در سمت کلاینت در سمت سرور ثبت کرده ایم. همه رندرها همچنان در سمت کلاینت با تابع «ذخیره» پاسخ به تماس در فایل «hello-block.js» مدیریت می‌شوند.

توجه داشته باشید: سمت سرور هنوز نمی‌داند کدام ویژگی‌ها در این بلوک در دسترس هستند، زیرا ثبت آن پایه است—تمام منطق بلوک در سمت کلاینت انجام می‌شود.

از آنجایی که ما در این مثال فقط یک ویژگی داریم (‘name’)، می‌توانیم آن اطلاعات را هنگام ثبت بلوک همانطور که در اسکریپت زیر مشاهده می‌کنید ارائه کنیم.

// file: hello-block.php
<?php

function wpvip_example_register_hello_block() {
    // (...) enqueue the scripts and styles (...)

    register_block_type( 'wpvip-example/hello-block', 
[ 
'attributes' => [
		'name' => [
			'default' => 'default name',
			'type'    => 'string'
		],
	],
	] );
}
add_action( 'init', 'wpvip_example_register_hello_block' );

همچنین می‌توان با استفاده از آرگومان «render_callback»، رندر را در سمت سرور بارگذاری کرد. این رویکرد محتوای بلوک را در سمت سرور با استفاده از PHP ارائه می کند.

// file: hello-block.php
<?php

function wpvip_example_register_hello_block() {
    // (...) enqueue the scripts and styles (...)

    register_block_type(
        'wpvip-example/hello-block',
        array(
		 'attributes' => (...), // block attributes
            'render_callback' => 'wpvip_example_render_hello_block',
        )
    );
}
add_action( 'init', 'wpvip_example_register_hello_block' );

function wpvip_example_render_hello_block( $attributes ) {
    return '<p>Hello ' . esc_html( $attributes['name'] ) . '</p>';
}

ما اکنون دو تابع callback داریم که رندر بلوک را انجام می‌دهند: یکی در سمت کلاینت (بازخوانی «ذخیره») و دیگری در سمت سرور (عملکرد «wpvip_example_render_hello_block»). هنگام کار با بلوک‌های پویا، باید «null» را از تابع «ذخیره» که در فایل جاوا اسکریپت تعریف شده است، برگردانید. این به ویرایشگر می‌گوید که فقط ویژگی‌های بلوک را در پایگاه داده ذخیره کند و از فرآیند اعتبارسنجی نشانه‌گذاری بلوک صرفنظر کند و از تغییر مکرر مسائل نشانه‌گذاری اجتناب کند.

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

بلوک نهایی به شکل زیر خواهد بود:

// file: hello-block.js
import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'wpvip-example/hello-block', {
    title: 'Hello Block',
    icon: 'shield',
    category: 'common',
    attributes: {
        string: {
            type: 'string',
        },
    },
    edit: ( { className, setAttributes, attributes } ) => {
        const { string } = attributes;
        return (
            <div className={ className }>
                <p>Hello {string}</p>
                <input 
                    type="text"
                    value={string}
                    onChange={(event) => setAttributes({string: event.target.value})}
                />
            </div>
        );
    },
    save: ( { attributes } ) => null,
} );

// file: hello-block.php
<?php

function wpvip_example_register_hello_block() {
    // (...) enqueue the scripts and styles (...) 

    register_block_type(
        'wpvip-example/hello-block',
		[ 
'attributes' => [
		'name' => [
			'default' => 'default name',
			'type'    => 'string'
		],
	],
        	     'render_callback' => 'wpvip_example_render_hello_block',
	] );
}
add_action( 'init', 'wpvip_example_register_hello_block' );

function wpvip_example_render_hello_block( $attributes ) {
    return '<p>Hello ' . esc_html( $attributes['name'] ) . '</p>';
}

تبدیل را با یک فایل block.json ساده کنید

تبدیل یک بلوک سمت سرویس گیرنده به بلوک سمت سرور می تواند دلهره آور به نظر برسد، اما استفاده از فایل block.json این فرآیند را ساده می کند. این روش امکان توزیع و نصب آسان بلوک ها را فراهم می کند و همچنین بلوک ها را در سمت سرور و مشتری به طور خودکار ثبت می کند.

روش block.json همچنین امکان به اشتراک گذاری کد بین جاوا اسکریپت، PHP و سایر زبان ها را هنگام پردازش انواع بلوک های ذخیره شده به عنوان JSON فراهم می کند. با استفاده از block.json می توانید از قابلیت های قدرتمند ویرایشگر سایت نهایت استفاده را ببرید و بلوک های قوی، پویا و همه کاره را برای وب سایت وردپرس خود بسازید.

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

هنوز به کمک نیاز داری؟