WordPress 5. Інтеграція Gutenberg у твій шаблон

Як примусити свій шаблон коректно відображати нові блоки Gutenberg? Додай кілька рядків у код своєї теми, і вуаля! Як це зробити, читай у статті.

Як відомо, у новому WordPress 5 розробники інтегрували новий блоковий редактор Gutenberg на заміну класичному TinyMCE. Сьогодні поговоримо про те, як примусити свою тему коректно показувати нові блоки.

Я коротко розгляну лиш основні аспекти, детально про інтеграцію Gutenberg у свою тему можеш почитати отут:

https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support

Отже, для того, щоби твій шаблон узагалі почав адекватно сприймати нові блоки, додай у файл functions.php своєї теми рядок:

add_theme_support( 'wp-block-styles' );

Також додай наступний рядок для підтримки адаптивності вбудованих сервісів (аудіо, відео, фреймів та ін.):

add_theme_support( 'responsive-embeds' );

Деякі блоки (наприклад, вставка зображення) дозволяють застосувати розтягнення на ширину контенту або на повну ширину вікна. У мене така фішка не працює, оскільки я задав максимальну ширину контенту за замовчуванням у шаблоні ще до того, як розробники WordPress подбали про це у своєму Gutenberg. Та якщо тобі така функція стане у пригоді, то додай ще отакий рядок:

add_theme_support( 'align-wide' );

Якщо є бажання, можна змінити також розміри шрифтів за умовчанням, а також кольори, які застосовуються до певних блоків (наприклад, межі цитат blockqute та нового блоку “Витримка”).

Розміру шрифтів я теж не чіпав, оскільки вони давно прописані у моїй темі. Якщо ж ти захочеш зробити це по-новому, то ось так це робиться:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'regular', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => __( 'large', 'themeLangDomain' ),
        'size' => 36,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'larger', 'themeLangDomain' ),
        'size' => 50,
        'slug' => 'larger'
    )
) );

А ось із кольорами – це виявилося цікаво і для мене, оскільки я використовую у своїй темі різні кольори для кожної категорії записів. Мені було дуже приємно внести свої кольори у редактор Gutenberg і вибирати їх одним клацанням мишки.

За замовчуванням Gutenberg пропонує 11 власних стандартних кольорів та палітру для вибору кольору. Замінимо їх своїми кольорами:

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
    array(
        'name' => __( 'very light gray', 'themeLangDomain' ),
        'slug' => 'very-light-gray',
        'color' => '#eee',
    ),
    array(
        'name' => __( 'very dark gray', 'themeLangDomain' ),
        'slug' => 'very-dark-gray',
        'color' => '#444',
    ),
) );

На цьому все, приємного користування новим WordPress 5 із блоковим редактором Gutenberg!

Якщо ви виявили орфографічну помилку, будь ласка, повідомте мені. Виділіть текст із помилкою та натисніть Ctrl+Enter.

21.12.2018 Wordpress

Прокоментувати