در قسمت قبلی به نحوه دسترسی و دستکاری داده ها در فروشگاه core/editor ویرایشگر گوتنبرگ پرداختیم. و توانستیم تیتر پست را با ماژول دیتا در Gutenberg تغییر دهیم. با ما در ادامه این آموزش همراه شوید.

حالا متوجه شدید که می توان هر قسمتی از داده‌ها را در گوتنبرگ تغییر داد. با سلکتورها داده‌ها را بازیابی کردیم و با اکشن‌ها آن ها را تغییر دادیم. هر گونه تغییری تاثیر مستقیم روی هر بخشی از رابط کاربری حاوی آن داده خواهد داشت.

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

گوتنبرگ
فروشگاه‌های مختلفی دارد که در ادامه نگاهی به برخی دیگر از آن‌ها خواهیم داشت.

فروشگاه‌هایی که شما بیشترین استفاده را از آن ها خواهید کرد، core/editor است که در مورد آن توضیح دادیم و core که شرح آن در ادامه می آید. Core بر خلاف core/editor حاوی اطلاعاتی در مورد کل وب سایت وردپرس است. برای مثال ما می توانیم همه نویسنده‌های یک سایت را با دستور زیر دریافت کنیم:

JavaScript

wp.data.select('core').getAuthors()

همچنین
با کد زیر می توانیم برخی پست‌های وب‌سایت را دریافت کنیم:

JavaScript

wp.data.select('core').getEntityRecords('postType','post',{per_page:
5})

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

اجازه
بدهید به یک فروشگاه دیگر به نام edit-post نگاهی بیندازیم. این فروشگاه شامل اطلاعات UI (رابط کاربری) در ویرایشگر واقعی است. برای
مثال می توانیم سلکتورهایی برای بررسی باز بودن سایدبار داشته باشیم.

JavaScript

wp.data.select('core/edit-post').isEditorSidebarOpened()

این
دستور در صورت باز بودن سایدبار True برمی‌گرداند ولی تلاش برای بستن سایدبار این دستور را دوباره اجرا
می کند که ایندفعه باید false برگرداند.

همچنین
می توان با ارسال دستورات ها (dispatching actions) در این فروشگاه، سایدبار را باز و بسته کرد.
در صورت باز بودن سایدبار و اجرای دستور زیر، آن را می بندد.

JavaScript

wp.data.dispatch('core/edit-post').closeGeneralSidebar()

البته بعید است که این دستور به کارتان بیاید ولی بد نیست بدانید با
کلیک روی آیکون سایدبار چه اتفاقی در گوتنبرگ می‌افتد.

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

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

آموزش ساخت افزونه وردپرس برای افزودن سایدبار gutenberg

حالا که می دانیم چگونه از فروشگاه‌های Redux-مانند گوتنبرگ استفاده کنیم، قدم بعدی افزودن یک مولفه سایدبار React به ویرایشگر است. مولفه React به فروشگاه core/editor متصل شده و با داشتن برخی ورودی ها، وقتی که تغییر کند، با ارسال دستوراتی متادیتا را تغییر می دهد. درست مثل کمی قبل تر که تیتر پست را تغییر دادیم.

ترفند پاسخ دادن به پیام در واتس اپ بدون آنلاین شدن

اما برای
انجام این کار به یک پلاگین وردپرسی نیاز داریم که کدهای ما را در خود نگه دارد.

شما می توانید کدهای این قسمت را از ریپوزیتوری GitHub دریافت کنید.

برای
شروع یک فولدر در شاخه wp-content/plugins در محل نصب وردپرس ایجاد کنید. ما این فولدر را
gutenberg-sidebar می‌نامیم. حالا در این فولدر یک فایل PHP بسازید که هنگام فعال کردن پلاگین، اجرا می
شود. این فایل PHP را plugin.php بنامید و مقداری اطلاعات اولیه در مورد افزونه و برخی کدها برای
جلوگیری از دسترسی مستقیم در آن می نویسیم:

PHP

/**
* Plugin Name: gutenberg-sidebar
* Plugin URI: https://roojan.ir/
* Description: Sidebar for the block editor.
* Author: amirh
* Author URI: https://roojan.ir/
*/
if( ! defined( 'ABSPATH') ) { exit;
}

حالا می
توانید پلاگین خود را در صفحه افزونه های وردپرس ببنید و آن را فعال کنید:

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

البته
این ویژگی ها روی همه مرورگرها اجرا نمی شود پس بهتره که کدهای‌مان را به
جاوااسکریپت قدیمی ES5 تبدیل کنیم.

خوشبختانه
ابزارهای زیادی برای این کار هست که از جمله آن ها می‌توان به webpack اشاره کرد. webpack یکی از معروفترین باندلر ها است
که خود تاپیک بزرگی است و آموزش آن در این مقاله نمی‌گنجد. بنابراین ما از ابزاری
استفاده می کنیم که وردپرس برای توسعه دهنده‌گان فراهم کرده است. این ابزار @wordpress/scripts لینک بدهم نام دارد. با نصب این بسته یک
پیکربندی توصیه شده داریم و نیازی نیست خودمان در webpack کاری کنیم. البته توصیه ما این است که کار با webpack را یاد بگیرید و
خودتان پیکربندی را انجام دهید تا درک بهتری از آنچه که انجام می‌دهیم داشته
باشید. اما در حال حاضر ابزار پیکربندی ورپرس را نصب کنید:

از طریق
ترمینال به فولدر پلاگین خود بروید

Terminal

cd path/to/your/theme/folder

حالا
باید برای نصب بسته وردپرسی @wordpress/scripts اقدام به نصب 
npm در فولدر پلاگین خود کنید که با دستور زیر انجام می
شود:

Terminal

npm init

در ادامه
از شما سوالاتی در مورد نام بسته، نسخه، لایسنس و غیره پرسیده می شود. پشت سر هم اینتر
را بزنید و مقدارها را در حال پیش‌فرض رها کنید. حالا باید فایلی به نام package.json داشته باشیم تا
بتوانیم بسته های npm را نصب کنیم. حالا اجازه دهید نصب @wordpress/scripts را با دستور زیر شروع کنیم:

Terminal

npm install
@wordpress/scripts –save-dev

این بسته یک CLI به نام wp-scripts نمایش می دهد که باید در اسکریپت‌های npm استفاده کنید. کامندهای مختلفی را می توانید اجرا کنید ولی در حال حاضر ما فقط از build و  start استفاده می کنیم. build فایل های شما را کوچک کرده و آماده تولید می کند.

بلاک کردن کامل در اینستاگرام + کامنت های آن کاربر

سورس سطر
اول کدهای شما در src/index.js پیکربندی می شود و خروجی آن به 
build/index.js می رود. بطور مشابه اسکریپت start هم کدهای شما در src/index.js را به build/index.js تبدیل می کند. بهر حال این بار کدها برای صرفه
جویی  زمان و حافظه کوچک نخواهند شد. این
کامند هرگونه تغییری در فایل های شما را مشاهده کرده و هربار که چیزی تغییر می
کند، آن‌ها را تغییر می دهد. کامند strat برای توسعه بیشتر به کار می آید درصورتی که
کامند build برای تولیدات است. برای استفاده از این کامندها، ما کلید script را در فایل package.json جایگزین می‌کنیم. در
صورتی که از گزینه‌‌های پیش‌فرض در نصب npm استفاده کنید، کدی شبیه زیر باید مشاهده شود:

JSON

"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},

حالا کد
بالا را به این کد تبدیل کنید:

 JSON

"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
},

حالا می
توانیم به ترتیب از npm start و npm run build برای توسعه و ساخت فایل استفاده کنیم. حالا اجازه بدهید در شاخه
پلاگین فولدری به نام src ایجاد کرده و فایل را به آن اضافه کنیم. می بینید که به یک
جاوااسکریپت کوچک تبدیل می شود. حالا یک هشدار را امتحان می کنیم.

حالا npm start را در ترمینال اجرا
کنید. حالا می توانید فولدر build ساخته شده با index.js کامپایل و فایل‌های sourcemap را پیدا کنید. توجه داشته باشید که فایل فشرده
نشده و webpack روی تغییرات نظارت دارد. سعی کنید فایل src/index.js را تغییر داده و دوباره سیو کنید. مشاهده می‌کنید
که فایل build/index.js دوباره ایجاد میشود.

حالا اگر با کلیدهای Ctrl + C واچ در ترمینال را متوقف کرده و npm run build را ران کنید، build/index.js فشرده (minified) می شود.

روژان