Gutenberg ویرایشگر جدیدی برای وردپرس است که جایگزین ویرایشگر فعلی که بر پایه TinyMCE کار می کند خواهد شد. این یک پروژه بلند پروازانه است که وردپرس را دچار تغییر خواهد کرد، و هم کاربران و هم توسعه دهندگان را تحت تاثیر قرار خواهد داد. این ویرایشگر چنین ظاهری دارد:
Gutenberg همچنین شامل الگوی جدیدی به نام Block می شود.
Block عبارت چکیده ای است که برای توصیف نقاط نشانه گذاری شده که از محتویات یا لایه های یک صفحه ساخته شده اند، استفاده می شود. این ایده مفاهیمی که امروزه در وردپرس با کد های کوتاه، HTML های سفارشی سازی شده، مواردی که با استفاده از API ها می سازیم و تجربه کاربری به دست می آوریم، ادغام می کند.
راه اندازی پروژه
برخی توسعه دهندگان با دانستن این که Gutenberg بر پایه React ساخته شده است، نگرانند که این کار برای توسعه دهندگان تازه وارد سخت باشد.
اگر تازه کار با React.js را شروع کرده اید، راه اندازی آن می تواند وقت گیر و پیچیده باشد. شما حداقل بهJSX transformer، Babel، با توجه به کدتان شاید یک سری پلاگین های Babel، و Bundler هایی مانند Webpack، Roolup یا Parcel نیاز دارید.
خوشبختانه، برخی افراد داخل جامعه وردپرس پیش قدم شده و در حال تلاش هستند، تا توسعه با Gutenberg را برای هر کسی راحت تر کنند. حال، ابزاری داریم که یک Gutenberg boilerplace تولید می کند، که با استفاده از آن می توانیم سریعا شروع به کدنویسی کنیم، بدون این که با ابزار و پیکربندی هایشان درگیر شویم.
Create Guten Block
Create-guten-block یک پروژه نوکار توسط Ahmad Awais است. این یک جعبه ابزار بدون نیاز به پیکر بندی است که به شما اجازه می دهد Gutenberg block را با یک سری بسته از پیش ساخته شده شامل React، Webpack، ESNext، Blabel، ESLint و Sass توسعه دهید.
اسفتاده از ES5 (ECMAScript 5)
اسفتاده از تمام این ابزار تنها برای ساخت یک بلوک ساده «سلام دنیا» به نظر زیاد می آید. اگر می خواهید stack های خود را مرتب نگه دارید، می توانید یک بلوک Gutenberg را با استفاده از ECMAScript 5 که احتمالا هین الان نیز با آن آشنا باشید، توسعه دهید. اگر WP-CLI 1.5.0 را بر روی سیستم خود نصب دارید، می توانید به سادگی این کد را اجرا کنید:
wp scaffold block <slug> [--title=<title>] [--dashicon=<dashicon>] [--category=<category>] [--theme] [--plugin=<plugin>] [--force]
و به این صورت boilerplate بلوک خود را برای پلاگین یا تم خود بسازید. این روش به خصوص برای استفاده از پلاگین ها و تم هایی که قبل از وجود Gutenberg ساخته اید، بسیار معقول تر است.
به جای ساخت یک پلاگین جدید برای تطبیق دهی بلوک های Gutenberg، شاید بخواهید بلوک ها را با پلاگین ها و تم های خود ادغام کنید. در جهت آسان تر شدن استفاده از این آموزش برای همگان، از ECMAScript 5 به همراه WP-CLI استفاده خواهیم کرد.
ثبت یک بلوک جدید
Gutenberg در حال حاضر به عنوان یک پلاگین توسعه داده می شود، و هر موقع که گروه سازنده حس کنند که آماده است، با وردپرس ادغام خواهد شد. پس فعلا، باید آن را از صفحه پلاگین ها در wp-admin نصب کنید. وقتی که آن را نصب و فعال سازی کردید، کد زیر را بر روی ترمینال، یا اگر کاربر ویندوز هستید در CMD اجرا کنید:
.
├── series
│  ├── block.js
│  ├── editor.css
│  └── style.css
└── series.php
حال بیایید فایل اصلی بلوک هایمان را در بخش dunction.php تم بارگذاری کنیم:
if ( function_exists( 'register_block_type' ) ) {
require get_template_directory() . '/blocks/series.php';
}
دقت کنید که بارگذاری فایل را با یک شرط می بندیم. این تطابق با نسخه های پیشین وردپرس را تضمین می کند. حال بلوک ما باید در رابط Gutenberg قابل دسترسی باشد.
پس از این که بلوک را وارد کردیم، باید به این شکل باشد:
API های Gutenberg
Gutenberg دو سری API را برای ثبت یک بلوک جدید معرفی می کند. اگر به فایل series.php نگاهی بیندازیم، این کد را میبینیم که بلوک ما را ثبت می کند. این فایل همچنین stylesheet و جد های جاوا اسکریپت را بر روی ویرایشگر بارگذاری می کند.
register_block_type( 'twentyseventeen/series', array(
'editor_script' => 'series-block-editor',
'editor_style' => 'series-block-editor',
'style' => 'series-block',
) );
همانطور که در بالا مشاهده می کنید، بلوک ما twentyseveteen/series نام دارد. نام بلوک های ما باید منحصل به فرد باشند و ساختار مرتب و درستی داشته باشند (در اصطلاح namespace شده باشند) تا از تداخل با بلوک های دیگر متعلق به پلاگین های دیگر جلوگیری شود.
علاوه بر این، Gutenberg یک سری API جدید جاوا اسکریپت را نیز برای تعامل با رابط بلوک در ویرایشگر فراهم کرده است. از آنجایی که API ها فراوان اند، فقط بر روی چند API خاص تمرکز می کنیم که فکر می کنم بهتر است برای ساخت یک بلوک Gutenberg ساده اما کارآمد بدانید.
Wp.blocks.registerBlockType
در ابتدا، به wp.block.registerBlockType نگاهی می اندازیم. این تابع برای ثبت یک بلوک جدید در ویرایشگر Gutenberg استفاده می شود. این تابع به دو آرگومان نیاز دارد. آرگومان اول نام بلوک است که بهتر است همانند نام ثبت شده در تابع register_block_type سمت PHP باشد. آرگومان دوم یک آبجکت است که ویژگی های بلوک مانند عنوان، دسته و تعدادی تابع دیگر را تعریف می کند.
var registerBlockType = wp.blocks.registerBlockType;
registerBlockType( 'twentyseventeen/series', {
title: __( 'HTML5 Series' ),
category: 'widgets',
keywords: [ 'html' ],
edit: function( props ) { },
save: function( props ) { }
} );
Wp.element.createElement
این تابع به شما کمک می کند تا عنصر داخل بلوک را بسازید. تابع wp.element.createElement اساسا برداشتی از تابع createElement() در React است پس آرگومان های مشابهی را برداشت می کند. آرگومان اول نوع عنصر، مانند پاراگراف، span یا یک div را دریافت می کند. مانند این نمونه:
wp.element.createElement('div');
همچنین به این صورت می توانیم این تابع را در یک متغیر قرار دهیم:
var el = wp.element.createElement;
el('div');
اگر سینتکس جدید ES6 را ترجیح می دهید، می توانید به این صورت کار را انجام دهید:
const { createElement: el } = wp.element;
el('div');
همچنین می توانیم صفات عنصر مانند class یا id را بر روی پرامتر دوم اضافه کنیم:
var el = wp.element.createElement;
el('div', {
'class': 'series-html5',
'id': 'series-html-post-id-001'
});
Div ای که ساختیم بدون محتوبا معنایی نخواهد داشت. می توانیم محتویات را بر روی آرگومان پارامتر سوم اضافه کنیم:
var el = wp.element.createElement;
el('p', {
'class': 'series-html5',
'id': 'series-html-post-id-001'
}, 'This article is part of our "HTML5/CSS3 Tutorials series" - dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series' );
wp.components
wp.components همانطور که از نامش پیداست، مجموعه ای از کامپوننت های Gutenberg را در بر می گیرد. این کامپوننت ها، از نظر فنی کامپوننت های سفارشی سازی شده React هستند که شامل Button، Popover، Spinner، Tooltip و چند کامپوننت دیگر هستند. می توانیم از این کامپوننت ها در بلوک خود استفاده کنیم. در این مثال، یک کامپوننت Button اضافه می کنیم:
var Button = wp.components.Button;
el( Button, {
'class': 'download-button',
}, 'Download' );
صفات
صفات راه ذخیره سازی داده ها در بلوک هستند. این داده ها می توانند محتویات، رنگ ها، تراز بندی ها، URL و ... باشند. می توانیم صفات را از Property های موجود در تابع edit() به دست بیاوریم:
edit: function( props ) {
var content = props.attributes.seriesContent;
return el( 'div', {
'class': 'series-html5',
'id': 'series-html-post-id-001'
}, content );
}
برای بروز رسانی صفات، از تابع setAttributes() استفاده می کنیم. معمولا محتویات را در زمانی خاص، مانند زمانی که روی دکمه ای کلیک شده است، ورودی ای پر شده است، گزینه ای انتخاب شده است و ... تغییر می دهیم. در این مثال، برای زمانی که اتفاقی برای صفت seriesContent ما افتاد، یک محتویات پشتیبان اضافه می کنیم:
edit: function( props ) {
if ( typeof props.attributes.seriesContent === 'undefined' || ! props.attributes.seriesContent ) {
props.setAttribute({
seriesContent: 'Hello World! Here is the fallback content.'
})
}
var content = props.attributes.seriesContent;
return [
el( 'div', {
'class': 'series-html5',
'id': 'series-html-post-id-001'
}, content ),
];
}
ذخیره بلوک
تابع save() مشابه تابع edit() کار می کند، جز این که محتویات بلوک را برای ذخیره در دیتابیس تعریف می کند.ذخیره محتویات بلوک بسیار ساده است. به این صورت:
save: function( props ) {
if ( ! props || ! props.attributes.seriesContent ) {
return;
}
var content = props.attributes.seriesContent;
return [
el( 'div', {
'class': 'series-html5',
'id': 'series-html-post-id-001'
}, content ),
];
}
مرحله بعدی چیست؟
Gutenberg اکوسیستم وردپرس را به خوبی (یا شاید به بدی) تغییر خواهد داد. Gutenberg به توسعه دهندگان اجازه می دهد که راه جدیدی در توسعه پلاگین ها و تم های وردپرس داشته باشند. Gutenberg تنها یک شروع است. به زودی الگوی Block به نواحی دیگر وردپرس مانند تنظیمات API و ویجت ها گسترش داده خواهد شد.
اگر با پایه جاوا اسکریپت، پیش فرض ها، توابع، ابزار و خوبی و بدی هایش آشنا هستید، مطمئنم در Gutenberg سریع خواهید شد.
ایده ها و الهام بخشی ها
من یک بلوک بسیار ساده Gutenberg ساخته ام که در گیت هاب می توانید آن را بیابید و به علاوه، از منابع زیر نیز می توانید استفاده کنید:
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید