Випуск WordPress 5.0 у грудні 2018 став знаковою подією для світу WordPress. Ми всі знали, що введення редактора Гутенберга сильно змінить те, як ми будуємо, взаємодіємо та керуємо нашими сайтами.
Але загалом це був дуже плавний перехід.
Хоча найкращою практикою є підтримка наших сайтів у актуальному стані з останніми та найкращими пропозиціями WordPress, зміна редактора – це великий крок. Але є дещо, що (можливо, по праву) змусило багатьох уповільнити використання редактора блоків.
Справді, можливо не слід поспішати з перебудовою сайту для вашого бізнесу або клієнтів у новому середовищі редактора блоків?
Не боячись проблем, наша команда Кастос розпочала переробку свого сайту на початку цього року. Переробка базувалася на Гутенберзі. Ми багато чого навчилися і хотіли поділитися з вами здебільшого цих нових знань.
Відомі обмеження вбудованого редактора блоків
Хоча нове середовище редагування значно перевершує попередні версії, в ньому можуть бути відсутні ключові елементи, які ви хотіли б бачити на своєму сайті. Деякі з цих розширень ще не доступні у власному редакторі або сторонніх пакетах блоків.
Сторонні пакети блоків пропонують безліч унікальних варіантів вибору поза основними блоками, але будьте обережні, деякі їх налаштування та функції не працюють у всіх блоках. Крім того, якщо ви використовуєте кілька різних наборів сторонніх блокових надбудов, ви можете отримати різні стилі та стилі, які складно стандартизувати.
Попрацювавши з кількома, ми вирішили використати один пакет первинних блоків Коблоки. Він включає більшість функцій, які ми використовували, та чудово працює з основними блоками WordPress.
Працюючи таким чином, ми змогли підтримувати узгодженість, отримуючи максимальну функціональність.
вибір теми
Для початку потрібно вибрати тему. Для нашого дизайну ми відійшли від середовища Genesis, яке служило нам протягом багатьох років і досі вирішивши створити дочірню тему з першої теми Гутенберга – Атомні блоки.
Є багато тем, які готові працювати з Гутенбергом, включаючи Genesis. Але знаючи, що блоки виконуватимуть важку роботу зі створення сайту, ми вибрали мінімалістичну легку тему, яка пропонувала лише те, що нам було потрібне, без великої кількості доповнень.
Блок міркувань для вашої теми
Ви також захочете переконатись, що ваша тема має широко відкритий базовий шаблон сторінки для роботи, який використовує переваги двох нових параметрів вирівнювання: wide та full.
Перевірте, чи настроєна ваша тема для
add_theme_support
у файлі functions.php та обов'язково додайте підтримку для цього, якщо вона відсутня.
Збільшення продуктивності за допомогою Гутенберга
У новому редакторі Gutenberg є кілька областей, які можуть заощадити ваш час – повторне використання елементів сторінки на вашому сайті.
Багаторазові блоки
Нова функція багаторазових блоків відмінно підходить для контенту, який не змінюватиметься від сторінки до сторінки, наприклад заклик до дії. Ви можете швидко зібрати групу блоків та зберегти угруповання для подальшого використання.
Ми використовуємо це найчастіше в тому, що ми називаємо блоком CTA, який присутній на нашій домашній сторінці і трохи вище нижнього колонтитулу на більшості сторінок.
Дивіться також:
Найкращі у 2019 році теми WordPress 5.0 для вашого сайту.
Копіювання блоків між сторінками
Якщо ви зібрали відмінний макет для цільової сторінки, який хочете використати повторно, можете скопіювати макет блоку та зберегти його на новій сторінці. Для цього перейдіть до елементів InspectorControls, перейшовши до Code Editor, і скопіюйте всі елементи блоку для цієї сторінки та вставте їх на нову сторінку.
На нашому сайті ми використовували цей метод для відображення формату сторінок на багатьох спеціальних сторінках. Таким чином, усі вони мають однаковий зовнішній вигляд та формат, і наша маркетингова команда редагує для кожної сторінки лише контент.
CSS селектори рівня блоку
У кількох місцях ми виявили, що можливість додати користувальницький CSS селектор у блок – це чудовий спосіб швидко налаштувати елемент, у якому потрібно змінити стиль. Хоча це й не найлаконічніший спосіб написання CSS, на крайній випадок він буде корисним.
Зокрема, ми зробили це, щоб додати тіні та ефекти до блоку Testimonials, який надає GhostKit.
Важкі місця
Наші відвідувачі не помітять змін, що відбуваються у новому редакторі за лаштунками. Але ці зміни мають величезний вплив на адміністраторів сайту.
Наші користувачі-адміністратори тепер мають більшу гнучкість, що є великою перемогою. Але це може означати, що ви будете перевантажені необхідністю приймати занадто багато дизайнерських рішень.
Побажання розробникам тем та плагінів: ретельно продумуйте параметри, які надаються користувачам-адміністраторам.
У процесі редизайну Castos ми постаралися створити основу для швидкого та безболісного створення нових сторінок та постів у майбутньому. Це включало надання декількох налаштувань елементів Gutenberg Inspector Controls в бічній панелі, таких як палітра кольорів і обмеження стилів блоків.
Якщо ваша тема працює з Гутенбергом, додати палітру кольорів можна досить просто, додавши підтримку тем для editor-color-palette. Цей фрагмент зробить свою справу:
add_theme_support( 'editor-color-palette', array( array( 'name' => __( 'independence', 'castos-theme' ), 'slug' => 'independence', 'color' => '#555471', ), array( 'name' => __( 'payne grey', 'castos-theme' ), 'slug' => 'payne grey', 'color' => '#5F5D7E', ), ) );
Тоді нашому редактору адміністратора потрібно лише вибрати колір і не намагатися запам'ятовувати значення HEX щоразу, коли потрібно встановити колір.
Якщо на вашому сайті вже є посібник із стилю, то завантаження його прямо в палітру кольорів означатиме, що на вашому сайті встановлені постійні кольори. І помилок чи плутаниць із вибором кольору не буде.
Ще один крок уперед
Можна зробити ще один крок уперед і розширити існуючі базові блоки за допомогою варіанти стилів блоків. Цей метод дає великий виграш, як і палітра кольорів, тому що ви додаєте функціональність саме там, де адміністратор очікує її знайти - в рамках існуючих налаштувань блоку.
Більшість блокових пакетів та плагінів пропонують свою власну версію кнопок, яка швидко додає безліч кнопок та їх стилів.
Якщо ви хочете зберегти свій узгоджений стиль на своєму сайті, то обмеження параметрів для адміністратора буде гарною ідеєю, оскільки стає важко відстежувати, яку кнопку використовувати.
Ви також можете спростити роботу адміністратору, відключивши блоки кнопок, які не використовуватимете. Багато пакетів блоків мають цю функціональність, вбудовану в налаштування їх блоків на головній панелі. Виняток зайвих опцій може значно полегшити роботу адміністратора під час створення нової сторінки.
Максимально використовувати шаблони сторінок
Враховуючи, що побудова сторінок тепер переважно виконується в редакторі, шаблони сторінок також розвиваються.
У нашому редизайні ми врахували новий шаблон сторінки, який видаляє заголовок сторінки, відкриваючи простір для використання блоку заголовка з нашого основного пакета блоку заголовка.
Багаторазово використовувані блоки в таких місцях не працювали, тому що вміст повторно використовуваних блоків має бути однаковим. У цьому випадку ви можете закодувати шаблон блоку для вибору користувачем, який завантажує необхідні блоки без вмісту, щоб користувачеві-адміністратору не доводилося щоразу «винаходити колесо».
Мабуть, єдине місце в Гутенберзі, де ми шукали те, що не могли легко знайти: шаблони блоків.
Шаблон блоку може бути чимось схожим на багаторазово використовуваний блок, але в якому вміст легко змінюється для кожного екземпляра, де використовується блок. Ми хотіли б використовувати його у розділі додаткових функцій у дизайні нашої домашньої сторінки.
Тут розташування і структура кожного з цих 3 блоків однакові, але весь вміст відрізняється. Щось на зразок блокового шаблону було б ідеальним, щоб заощадити нам час на створення одного й того ж кожного разу, коли ми хочемо створити один із цих розділів.
Післямова
Проектування та розробка теми в новому редакторі блоків – це баланс між наданням стилю, який визначає зовнішній вигляд вашого сайту, та інтерфейсу користувача для вашого адміністратора, щоб створювати сторінки, що відповідають вашому дизайну сайту в цілому.
У той час як новий редактор надає неймовірно гнучкі можливості, при розгляді вашого редизайну з використанням Gutenberg ви будете успішнішими у підтримці послідовного посібника зі стилю. А також зможете створити дочірню тему, яка забезпечить стиль інтерфейсу у поєднанні із заготівлями та обмеженнями, що спрощують роботу адміністратора щодо відповідності дизайну концепції сайту.
Загалом вся команда Castos, з погляду дизайну, розробки та маркетингу була задоволена результатом редизайну нашого сайту з використанням підходу Гутенберга.
Через кілька місяців після перезапуску ми виявили, що особливо приємно створювати новий контент, який має дуже схожий, високо стилізований зовнішній вигляд та сприймається на рівні з існуючим контентом сайту. Така узгодженість стилів має велике значення для забезпечення позитивного досвіду для відвідувачів сайту і зрештою має забезпечити більше конверсій та щасливих клієнтів.
Джерело: wpmayor.com
Коментарі до запису: 1
Зі статті незрозуміло, чи потрібно створювати свою нову тему підганяти під Gutenberg?