WordPress Gutenberg Editör Genişliğini Arttırma/Azaltma

Geleceği önceden kesinleşen ancak WordPress’in 5.0 güncellemesine kadar eklenti ile kullanılabilen Gutenberg editörü 5.0 güncellemesi ile hayatımıza tamamen girdi. Blogger‘lar tarafından beğenilen ancak Webmastar‘lar tarafından pek beğenilmeyen Gutenberg’den kurtulmanın yolu olduğu gibi düzenlemenin de çeşitli yolları var. Eğer klasik editörü vazgeçemeyecek kadar seviyorsanız 5.0 güncellemesinden önce nasıl Gutenberg’i eklenti ile deneyebiliyorsak, klasik görünümü de eklenti ile geri getirebiliyoruz.

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;}