در قسمت قبل ساخت پلاگین سایدبار گوتنبرگ را مورد بررسی قرار دادیم و استفاده کامندهای strat و build را به شما آموزش دادیم. در ادامه با روژان همراه شوید.

حالا که باندل جاوااسکریپت‌مان را داریم باید این فایل را در ویرایشگر گوتنبرگ به صف کنیم. برای این کار باید از enqueue_block_editor_assets استفاده کنیم تا مطمئن شویم که فقط در صفحه گوتنبرگ به صف شوند و در دیگر صفحه‌های wp-admin که نیازی به آن نیست، نرود!

فایل را می توان مثل همین در plugin.php نیز به صف کنیم:

PHP

// Note that it’s a best practice to prefix function names (e.g. myprefix)
function myprefix_enqueue_assets()
{ wp_enqueue_script(
'myprefix-gutenberg-sidebar',
plugins_url( 'build/index.js', __FILE__ )
);
} add_action( 'enqueue_block_editor_assets', 'myprefix_enqueue_assets' );

حالا به صفحه گوتنبرگ بروید اگر همه چیز خوب پیش رفته باشد به خاطر
افزودن src/index.js پیغان هشداری دریافت می کنیم:

عالیه! حالا آماده‌ایم که کمی کد جاوااسکریپت بنویسیم.

بسته جاوااسکریپت وردپرس را وارد کنید

به منظور افزودن محتوا به سایدبار موجود گوتنبرگ و یا ساخت یک سایدبار خالی باید یک پلاگین جاوااسکریپت گوتنبرگ به ثبت برسانیم. برای این کار باید از برخی توابع و مولفه‌هایی که توسط wp-plugins ، wp-edit-post و wp-i18n (لینک باید بدهم)فراهم شده، استفاده کنیم. این بسته‌ها در متغیر عمومی wp در مرورگر با عناوین wp-plugins ، wp-edit-post و wp-i18n موجود است.

حالا می توانیم توابعی که نیاز داریم را وارد src/index.js کنیم، مخصوصا دو تابع registerPlugin و PluginSidebar.

Javascript

const { registerPlugin } = wp.plugins;
const { PluginSidebar } = wp.editPost;
const { __ } = wp.i18n;

شایان
ذکر است که باید مطمئن شویم این فایل ها را براساس وابستگی داشته باشیم. یعنی باید
فایل index.js قبل از wp-plugins ، wp-edit-post و wp-i18n لود شود. اجازه بدهید آن‌ها را در plugin.php اضافه کنیم:

PHP

function myprefix_enqueue_assets() {
wp_enqueue_script(
'myprefix-gutenberg-sidebar',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post', 'wp-i18n', 'wp-element' )
);
}
add_action( 'enqueue_block_editor_assets', 'myprefix_enqueue_assets' );

توجه:

در کد
بالا ما wp-element را بر اساس وابستگی اضافه کردیم به خاطر اینکه برای نوشتن مولفه
های React از JSX استفاده می‌کنیم. معمولا وقتی قصد ساخت مولفه های React را داریم کل کتابخانه React را وارد می‌کنیم. wp-element یک لایه انتزاعی روی React است به همین دلیل هیجوقت مجبور نیستیم همه React را وارد یا نصب کنیم. به جای آن از wp-element بعنوان متغیر عمومی
استفاده می‌کنیم.

این پکیج‌ها
همچنین بعنوان بسته‌های npm نیز در دسترس هستند. به جای وارد کردن توابع از متغیر wp عمومی (که فقط در مرورگر در دسترس است و
ویرایشگر در مورد آن چیزی نمی‌داند)، می‌توانیم این بسته‌ها را به سادگی با npm نصب و وارد فایل‌مان کنیم.

این بسته‌های
ورپرسی عموما بصورت پیش‌فرض توسط @wordpress وجود دارند.

اجازه
بدهید، دو تا از بسته‌هایی که نیاز داریم را نصب کنیم:

Terminal

npm install @wordpress/edit-post @wordpress/plugins @wordpress/i18n –save

حالا می
توانیم بسته‌مان را وارد index.js کنیم:

Javascript

import { registerPlugin } from "@wordpress/plugins";
import { PluginSidebar } from "@wordpress/edit-post";
import { __ } from "@wordpress/i18n";

مزیت
اینطور وارد کردن بسته این است که ویرایشگر متنی شما می فهمد @wordpress/edit-post و @wordpress/plugins چیست و در نتیجه می تواند مولفه‌ها و توابع را
بصورت خودکار برای شما کامل کند. بر خلاف وارد کردن از wp.plugins ، wp.editpost که فقط در مرورگرها موجود هستند و مرورگر هم که
اصلا نمی‌داند wp چیست!!

شاید فکر
کنید این روش وارد کردن بسته، سایز باندل شما را هم افزایش می‌دهد که در این مورد
اصلا نگران نباشید. فایل کانفیگ Webpack که با @wordpress/scripts می‌آید دستورالعمل رد شدن از باندل کردن این بسته‌های @wordpress را دارد و به جای آن به متغیر عمومی wp بستگی دارد. بعنوان نتیجه، باندل نهایی در واقع
حاوی بسته های مختلف نیست ولی از طریق متغیر wp آن‌ها را ارجاع می‌دهد.

عالیه!
در این مقاله بسته ها را از طریق npm وارد می کنیم ولی اگر وارد کردن از طریق متغیر عمومی wp را ترجیح می دهید، خب دیگه خودتون می‌دونید!!

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

ثبت پلاگین سایدبار گوتنبرگ

به منظور
افزودن سایدبار سفارشی به گوتنبرگ، اول باید یک پلاگین ثبت کنیم که با تابع registerPlugin که وارد کردیم باید این کار را انجام دهیم. registerPlugin بعنوان اولین آرگومان یک حلقه منحصر بفرد برای
پلاگین دریافت می‌کند. برای دومین آرگومان آرایه ای از گزینه‌های مختلف داریم. در
میان این گزینه‌ها می توانیم یک نام آیکون (از کتابخانه dashicons .. (باید
لینک بدهیم)) و یک تابع رندر داشته باشیم. این تابع رندر می‌تواند مقادیری
مولفه از بسته wp-edit-post برای ما برگرداند.

در این مثال، ما مولفه PluginSidebar را از wp-edite-post وارد کردیم و با برگرداندن این مولفه در تابع رندر سایدباری در ویرایشگر گوتنبرگ ساختیم. چون می توانستیم مولفه‌های دیگری نیز وارد تابع رندر کنیم، یک  PluginSidebar هم وارد React Fragments کردیم. تابع __ را هم از wp-i18n وارد کردیم که هر رشته خروجی را تفسیر کنیم:

JavaScript

registerPlugin( 'myprefix-sidebar', {
icon: 'smiley',
render: () => {
return (
<>
title={__('Meta Options', 'textdomain')}
>
Some Content


)
}
})

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

اگر روی
آیکون ستاره در کنار تیتر سایدبار کلیک کنید، آیکون خنده از بالا نوار حذف می‌شود.
بنابراین برای مواقعی که کاربر آیکون خنده را از بالا با کلیک روی آیکون ستاره حذف
کند به یک راه دیگر برای دسترسی به سایدبارمان داریم. برای این کار میتوانیم مولفه
جدیدی به نام PluginSidebarMoreMenuItem را از wp-edit-post وارد کنیم. حالا باید شرح ورودی را تصحیح کنیم:

JavaScript

import { PluginSidebar, PluginSidebarMoreMenuItem } from "@wordpress/edit-post";

PluginSidebarMoreMenuItem به امکان افزودن یک آیتم به منوی گوتنبرگ را می‌دهد
که با کلیک روی آیکون سه نقطه میتوان جا به جا کرد. ما می خواهیم پلاگین را برای
شامل شدن این مولفه تصحیح کنیم. باید به PluginSidebar یک نام پشتیبانی (Prop) و به  PluginSidebarMoreMenuItem یک هدف Prop با مقادیر یکسان بدهیم.

JavaScript

registerPlugin( 'myprefix-sidebar', {
icon: 'smiley',
render: () => {
return (
<>
target="myprefix-sidebar"
>
{__('Meta Options', 'textdomain')}

name="myprefix-sidebar"
title={__('Meta Options', 'textdomain')}
>
Some Content


)
}
})

حالا در
منو یک “گزینه متا” با آیکون خنده داریم. این آیتم جدید حالا باید به
سایدبار سفارشی ما سوئیچ شود:

حالا در
صفحه گوتنبرگ فضای جدیدی داریم. ما می‌توانیم برخی محتواهای متنی در PluginSidebar را برداشته و مولفه های خود را وارد کنیم.

شما می
توانید سری هم به بسته های ویرایشی (edit-post package
documentation) بزنید. در این بسته مولفه‌های مختلفی وجود
دارد که می‌توانید به پلاگین خود اضافه کنید. این مولفه‌ها می‌تواند سایدبار فعلی
را گسترش دهد و مولفه هایی که می‌خواهیم را به آن اضافه کند. مولفه هایی هم برای
افزودن به منوی بالای سمت راست و بلوک‌های گوتنبرگ نیز وجود دارد.

امیدواریم
این آموزش مورد توجه شما قرار گرفته باشد.