تغییر استایل گوتنبرگ

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

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

به صورت پیشفرض پسزمینه این ویرایشگر سفید می باشد. در این مقاله نحوه تغییر استایل و رنگ های گوتنبرگ بحث خواهد شد.

با داشتن اطلاعات مختصر از زبان css میتوانید بینهایت تغییر اعمال کنید.

برای شروع ابتدا باید فایل CSS برای این ویرایشگر مشخص کنید، برای این کار کد زیر را در فایل functions.php قالب خود اضافه کنید:

function wpvar_gutenberg_setup() {
	add_theme_support( 'editor-styles' );
        // اضافه کردن امکان ویرایش ادیتور در قالب شما

	add_editor_style( 'gutenberg.css' );
        //مشخص کردن فایل استایل
}
add_action( 'after_setup_theme', 'wpvar_gutenberg_setup' );

فایل gutenberg.css را در مسیر اصلی قالب خود ایجاد کنید. پس از این مراحل هرگونه کدنویسی در این فایل استایل گوتنبرگ را تغییر خواهد داد.

برای مثال جهت تغییر رنگ پسزمینه ادیتور کد زیر را در فایل gutenberg.css قرار دهید:

body {
    background: #242020;
}

نتیجه به این صورت خواهد بود:

با استفاده از این روش می توانید رنگ بندی ها و المان های طراحی مختلفی را برای گوتنبرگ تنظیم کنید تا هم شما و هم نویسندگانتان خوشحال باشند!

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