Bu yazımızın konusu ise Gutenberg editörünü düzenlemek. Her ne kadar konuda sadece genişliğini nasıl değiştireceğinizi anlatsak da ekleyeceğiniz CSS dosyasına yazdığınız tüm CSS kodları Gutenberg editöründe aktif olacak ve sayfayı şekillendirmemize imkan tanıyacak. Öncelikle yapmanız gereken temanızın bulunduğu dizine girerek burada bulunan functions.php dosyasına aşağıdaki kodları eklemek.
/**
Gutenberg block editor style
Lanet olasica Gutenberg editor genisligini duzeltir
*/
function gutenberg_editor_styles() {
wp_enqueue_style( 'add-editor-styles', get_theme_file_uri( '/gutenberg-style.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'gutenberg_editor_styles' );
Artık functions.php dosyasına eklediğimiz kod durduğu sürece Gutenberg editörüne gutenberg-style.css adında bir sitil dosyası çağrılacak. tabi olmayan bir dosyayı çağırmak istemeyiz, bu nedenle 2. aşama olarak temamızın içerisine bir gutenberg-style.css dosyası oluşturuyoruz ve son olarak bu dosyanın içerisine aşağıdaki kodları eklediğimizde Gutenberg editörümüzün genişliğini de değiştirmiş oluyoruz.
/* Main column width */
.wp-block {max-width: 870px;}
/* Width of "wide" blocks */
.wp-block[data-align="wide"] {max-width: 1080px;}
/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {max-width: none;}
Önemli not: Örnek kodda biz işlem yaptığımız sitenin içerik genişliğini baz alarak 870px değerini girdik, sizde 870px yerine istediğiniz değeri girerek genişliği arttırabileceğiniz gibi azalta da bilirsiniz. Ayrıca px yerine % değerini de kullanarak duyarlı bir genişlik belirleyebileceğinizi unutmayın.
Kaynak: https://codex.dincmedya.com.tr/?p=1121
