“گوتنبرگ فراتر از یک ادیتور”. ادعای وسوسه انگیز و بسیار عجیب که تیم گوتنبرگ در مخزن وردپرس آنرا منتشر کرده است اما این جمله تا چه حد به واقعیت نزدیک است ؟ از زمان نسخه ۲ وردپرس افراد زیادی مخصوصا کاربران ایرانی مشکلات زیادی با ادیتور ها داشتند. قالب هایی که این امکانات را به مردم ما میداد بسیار سنگین بودند و اصلا به کار وبمستر های ایرانی نمی آمد. اما با بالارفتن سرعت اینترنت ایران نسبت به قبل قالب های خارجی فارسی شدند که اکثرا هم دزدی(بدون اجازه طراح اصلی آنرا دریافت و فارسی می‌کردند و میفروختند!) یا به اصطلاح ریپ شده بودند.

gutenberg یک ادعای نیاز به کار در ورپرس

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

The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg

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

دانلود گوتنبرگ از مخزن وردپرس  نسخه ۳٫۴٫۰

شروع کار با گوتنبرگ با ترجمه فارسی

اولین تغییری که شما می بینید یک ستون در سمت راست شما و حذف شدن ویرایشگر دیداری در هنگام ارسال پست است. امکاناتی که هر بلاک را کنترل می کند. تنظیمات مشخصی مثل سایز ها که شما می توانید با کلاس های css سایز S , M , L , XL را مشخص کنید.

 

 

هر نوشته ای که شما داشته باشید زمانی که ماوس را روی آن ببرید قابل تغییر است و زمانی که روی افزودن بلاک کلیک کنید یک بخش کوچک در بلاک محتوای شما می سازد.

 

یک بخش جدید بسازیم

در بالای ویرایشگر یک دکمه + است که کار اصلی گوتنبرگ از آنجا آغاز می شود . بخش هایی که وردپرس داشت به همراه یک سری از قابلیت های جدید که شما میتوانید آنها را قرار دهید و با کلاس های سی سی اس آنها را منطبق کنید

بلاک های مشترک : دسته‌بندی منظم و کاربردی

 پاراگراف ، گالری ، لیست و … بخش هایی بودند که قبلا دیده ایم . قراردادن صدا و تصویر و فایل نیز بسیار ساده شده و کافیست روی آن کلیک کنید تا به راحتی بتوانید فایل های مورد نظر خود را قرار دهید و آنها را تکه تکه کنید و به صورت بسیار منظم تری قرار دهید. کار کردن با این افزونه اینقدر راحت است که فقط کافیست آنها را اضافه و حرکت دهید .

 

فرمت کردن : بخش های جدید و قدیم

کد، کلاسیک ، شعر ، کد html و جدول در این بخش قرار دارد

آنچه احتمالا شما دنبالش باشید بخش کلاسیک در فرمت کردن است . همان پنجره ساده قدیمی را برای شما می آورد تا به راحتی بتوانید به همان سبک قبلی بعضی کنترل های نوشتاری را دوباره به دست آورید.

در این بین گوتنبرگ دو حرکت جذاب برای کاربران اضافه کرده یکی بخش شعر و دیگری بخش جدول است که به ساده ترین شکل ممکن بدون جدول کار شما را کنترل می کند . این جدول تا حد زیادی شما را افزونه tablepress و سایر افزونه های جدول ساز وردپرس بی نیاز می کند و کار کردن با آن بسیار ساده است . بخش

 

عناصر طرح : اوج قدرت نمایی گوتنبرگ

ستون ها، page break، دکمه ، بیشتر، جدا کننده، spacer

• ستون‌ها اینجا گوتنبرگ قدرت خود را به رخ می کشد. بخشی به اسم ستون ها که کلمه بتا در مقابل آن قرار داده شده است اوج کار تیم این افزونه است . بخشی که به شما اجازه می دهد در مطلب خود ستون بندی هایی انجام دهید و آنها را به سادگی در کنار هم قرار دهید. فرض کنید ما می خواهیم یک بخش دو ستون بسازیم که در یک طرف تصویر و در طرف دیگر توضیح به شکل مرتب قرار دهیم . در ویرایشگر قبلی با استفاده از راست چین و چپ چین کردن به راحتی این کار را می‌کردیم اما دردسر های خود را داشت با استفاده از ستون ها به راحتی می توانید در مطلب خود باکسی مانند زیر ایجاد کنید.
• pagebreaker یا جدا کننده صفحه نیز به شما قابلیت می دهد پست خود را دو صفحه کنید یعنی پست خود را به چند صفحه تقسیم کنید و در به جای هر هر pagebreaker که قرار می دهید صفحه شما جدا می شود و پست شما یک صفحه به آن اضافه می شود.
• دکمه بخشی کاربری است که به شما اجازه می دهد یک دکمه قرار دهید دقت کنید که استایل آنرا در قالب خود تعریف کیند
• بیشتر هم بخشی بوده که در قدیم برای قراردادن ادامه مطلب داشتیم
• جدا کننده همان hr است و فقط برای شما یک خط قرار می دهد
• spacer هم فاصله بین بلاک ها ایجاد می کند

ابزارک‌ها : پایان افزونه‌ و دردسرهای اضافی در وردپرس

مثل اینکه قرار است گوتنبرگ در همین نسخه اول کار را برای بقیه ادیتور‌ها و افزونه‌های اضافی وردپرس تمام کند.

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

جاسازی‌ها : یک پل قوی بین وردپرس و شبکه‌های اجتماعی

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

کد های css گوتنبرگ

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

 add_theme_support( 'gutenberg', array(

// Theme supports wide images, galleries and videos.
'wide-images' => true,

// Make specific theme colors available in the editor.
'colors' => array(
'#ffffff',
'#۰۰۰۰۰۰',
'#cccccc',
),

) );

به راحتی با تغییر colors  میتوانید آنرا اجرا کنید و برای کسانی که قبلا با scss کار کردند این موضوع چندان جدید نیست اما با دیدن آن کمی به وجد می آیند.

 

تغییر استایل دستی css در gutenberg.css

همانطور که میبینید چهار سایز مشخص تعریف شده که با کلاس های زیر می توانید آنرا تغییر دهید

.is-small-text : کلاس نوشته کوچک

.is-regular-text : کلاس نوشته معمولی

.is-large-text : کلاس نوشته بزرگ

.is-larger-text : کلاس نوشته خیلی بزرگ

.wp-block کل بلاک های نوشته

قابلیت wp-block-{namespace}-{block-name} به شکلی است که می توانید آنرا شخصی سازی کنید

.wp-block-table بلاک جدول

.wp-block-quote نقل قول

.wp-block-columns کلاس ستون ها

wp-block-verse کلاس شعر

wp-block-pullquote بلاک نقل قول کشیده

wp-block-code بلاک کد ها

بیشتر از گوتنبرگ بدانید

ببینید با افزونه Gutenberg چه صفحه‌ای ایجاد شده. صفحه ای بسیار منظم. این هم در نظر بگیرید تمامی امکانات داخل این صفحه نیست و فقط از بخش های کنترل تایپوگرافی و ستون بندی استفاده کردند!

یرای شروع کارکردن با گوتنبرگ کمی سخت و دشوار به نظر می رسد اما کمی به آن عادت کنید اگرچه برای تایپوگرافی فارسی کمی امکانات کمتری دارد. مسلما در آینده این افزونه امکانات عجیبی به خودش اضافه می کند و بخشی جدا نشدنی از قالب های جدید می شود. بزارید ساده بگویم برای خوشگل تر کردن پست ها وبلاگ این افزونه فوق العاده است ! ۱۰۰% طراح پوسته شما چه بخواهد چه نخواهد باید قالب وردپرسی خود را با این سیستم هماهنگ کند البته کار آنچنان سختی پیش روی خود ندارد. این افزونه نمای جدید از وردپرس ۵ است .

افزودن کلاس های اضافی css در تمامی بلاک ها و همچنین کد های پیشفرض css میتواند به راحتی با الگوی قالب شما خود را هماهنگ کند. همچنین میتوانید از اینجا در مورد این پروژه کاربردی بیشتر بخوانید

افزونه های اضافی که تا کنون برای گوتنبرگ منتشر شده است :

• Block Collection – بلاک های استایل داده شده
• Block Map – افزودن نقشه گوگل
• Gutenberg Custom Feild – زمینه دلخواه برای گوتنبرگ

دانلود گوتنبرگ از مخزن وردپرس  نسخه ۳٫۴٫۰