Основна відміннсть редактора Гутенберг від класичного редактора
Редактор Гутенберг замінив класичний редактор в WordPress з кінця 2018 року. З тих пір редактор Гутенберг є базовим редактором WordPress.
Редактор Гутенберг – блоковий редактор. Це означає, що контент сторінки представлений у вигляді окремих блоків. Сторінка по суті – це набір блоків і визначення як буде відображатися контент видно прямо в редакторі при створенні сторінки.
Класичний редактор WordPress – це текстовий редактор. Текстовий редактор – це програма для обробки тексту, а визначення як буде відображатися контент задається у окремих файлах коду HTML та у файлах стилю CSS.
Тобто у класичному редакторі контент та оформлення розділені. В редакторі Гуттенберг контент та оформлення поєднані.
В статті розглянуто основи роботи з редактором Гутенберг на прикладі сторінки, створеній WordPress при його інсталяції.
до змісту ↑Як влаштований редактор Гутенберг
При переході в WordPress до редактування сторінки в Gutenberg стандартне меню WordPress зникає і редактор надає змогу створювати сторінку у повноекранному режимі. Так встановлено за змовчуванням.
Умовно екран редактора можна розділити на три частини: верхнє меню, бічні меню та основна область вмісту.
- Верхнє меню містить найбільш загальні функції: додати новий блок, скасувати чи повторити попередню дію, зберегти чернетку, відкрити попередній перегляд та опублікувати.
- Бічні меню знаходиться праворуч та містять розширені параметри. В цій частині буде дві вкладки: Сторінка/Запис із загального налаштування публікації, і вкладка Блок із налаштуваннями вибраного блоку.
- Основна область вмісту знаходиться ліворуч і займає більшу частину екрана. Вміст у ньому буде виглядати приблизно так само, як і на самому сайті.
Елементи верхнього меню
Розглянемо елементи управління верхнього меню редактора Гутенберг:
- кнопка “Повернення до адмініки”, натиснувши яку ми вийдемо з редактора і повернемося назад до адмінпанелі WordPress
- кнопка “Додати блок”: при натисканні отримуємо перелік всіх доступних блоків, шаблонів блоків (їх називають патерни) і список блоків, що часто використовуються.
- кнопка “Інструменти” – тут вибираємо взаємодію з блоками на сторінці: або вибрати блок або його редагувати. Якщо активна опція редагувати, то при виборі блоку на сторінці відразу переходимо в режим редагування. Щоб повернутись до вибору блоку, натисніть “Escape”; Щоб повернутися до редагування, натисніть «Enter».
- кнопки «Скасувати» та «Повторити» — скасувати дію або повторити скасовану дію
- кнопка “Підробиці” — показує кількість символів, слів, заголовків, параграфів та блоків, які використовуються в документі.
- кнопка “Перегляд списком” – показує список усіх блоків, які були використані на сторінці. Вона корисна для швидкого переходу між блоками.
- справа розміщено кнопку “Налаштування”. При натисканні на кнопку відбувається поява або зникнення меню налаштувань сторінки і блоку.
- крайня справа розміщена кнопка меню “Параметри” у вигляді трьох вертикальних крапок. Під час її натискання з’являються додаткові налаштування перегляду, стилю редактора та інструментів.
Розглянем опції меню “Параметри” детальніше.
Опції меню “Параметри”
Опції меню “Параметри” мають ряд розділів: Перегляд, Редактор, Інструменти.
Опція “Верхня панель інструментів” розділу Перегляд вказує місце, де будуть відображатися панелі інструментів блоку під час його редагування: біля блоку або у верхньому меню.
Опція “Режим освітлення“: якщо увімкнено, то блоки, які не редагуються, частково зникають і стають напівпрозорими.
Опція “Повноекранний режим” для зосереждення над роботою відключає елементи екрану, які не мають відношення до вводу і редактування контенту. Опція включена за змовчуванням. При відключенні опції не екрані буде присутня адмінпанель WordPress.
В розділі Редактор можна вибрати відображення контенту сторінки: у візуальному редакторі або в редакторі коду. За змовчуванням відкривається візуальний редактор і контент показано так як він буде відображатись на сторінці. Але можна перейти до редактора коду щоб переглядати всю сторінку у вигляді коду.
Розділ Інструменти містить ряд налаштувань для оптимізації роботи з редактором Гутенберг.
Опція Керування багаторазовими блоками призведе до редактора персональних блоків. Ви можете створити свої набори із блоків, щоб потім додавати їх на сторінку сайту в один клік.
Опція “Гарячі клавіші” покаже комбінації клавіш швидкого доступу.
Опція “Скопіювати весь вміст” скопіює весь вміст у буфер для вставки на іншу сторінку.
Опція “Допомога” – надає посилання на англомовний посібник “блочний редактор Гутенберг” на офіційному сайті WordPress
Опція Уподобання допоможе встановити додаткові налаштування редактора та персоналізувати відображення панелей. Опція також дозволяє вимкнути блоки, які ви не використовуєте. Таким чином, коли приходить час шукати блок, вам не потрібно просіювати ті блоки, які ви не будете застосовувати.
Слід зазначити, що теми або плагіни можуть додавати свої розділи та кнопки як на панель верхнього меню, так до опцій меню “Параметри”.
до змісту ↑Бокове меню редактора Гутенберг
При натисканні у верхньому меню на піктограму «Налаштування» відкривається бокове меню редактора Гутенберг. У цьому меню є кілька вкладок з параметрами налаштувань як для всього запису чи сторінки на вкладці Запис/Сторінка, так і параметрами вибраного блоку на вкладці Блок.
Для запису/сторінки загалом це:
Статус та видимість
Постійне посилання
Рубрики
Мітки
Головна Зображення для запису
Уривок
Параметри обговорення
Натисніть стрілку “вниз” поряд з кожним заголовком опцій у налаштуваннях документа щоб редагувати конкретні опції.
У меню можна додавати теги та рубрики для сторінки, додавати зображення, відстежувати та змінювати статус запису. Ці опції застосовуються до всієї сторінки.
При натисканні на вкладку “Блок” у бічному меню налаштувань з’являються параметри вибраного блоку, що відповідають його типу. Якщо блок не вибрано – то ви побачите повідомленн; “Блок не вибрано”.
Повторне натискання на піктограму «Параметри» приховує бічне меню.
Якщо ви не знаходите налаштувань сторінки в правій частині вікна редактора блоків, клацніть піктограму налаштувань у вигляді шестерні у верхньому правому куті і бічне меню з’явиться на екрані
до змісту ↑Розділ “Область вмісту” і 4 способи додавати блоки на сторінку
Область вмісту – це розділ редактора, до якого можна додати блоки з вмістом.
У візуальному редакторі Гутенберг будь-яка публікація створюється за допомогою блоків. Кожен параграф – це окремий блок, кожна кнопка – це окремий блок, кожен список, заголовок або зображення – теж окремі блоки.
Створювати публікації у редакторі дуже просто. На сторінку в “область вмісту” додайте необхідні блоки та настройте параметри блоків.
Блоки є для кожного типу контенту: текст, зображення, відео та аудіо, стовпці, пробіли, кнопки, календарі та багато іншого.
Можна також почати вводити текст у порожній області, яка за умовчанням перетворюється на блок «Абзац».
Отже, є 4 способи додати блок в область вмісту:
- Натисніть чорний значок «+» збоку від порожнього блоку або значок «+» у верхньому лівому куті вікна редактора.
- Натисніть клавішу “Enter” (клавішу переходу на новий рядок), перебуваючи у вибраному блоці, щоб створити під ним новий блок.
- Ще один спосіб Клацніть три точки над виділеним блоком і виберіть, куди додати новий блок: вище або нижче поточного.
- Якщо ви знаєте назву блоків – то ви зможете додавати їх, вводячи косу риску ( / ) та назву блоку. Наприклад, /image чи /heading.
Часто використовуємі блоки
Для пришвидшення роботи редактор Гутенберг дозволяє виділити в окрему групу блоки, що часто використовуються.
Щоб створити групу часто використовуємих блоків, виконайте наведені нижче дії.
- Натисніть кнопку верхнього меню “Параметри” (три вертикальні крапки у верхньому правому куті екрана редактора).
- Виберіть Вподобання.
- Виберіть “Блоки” і поставте прапорець поруч із пунктом Показати часто використовувані блоки.
Коли цю функцію увімкнено, група блоків доступна в бібліотеці. Щоб відкрити бібліотеку блоків, натисніть значок «+» у верхньому меню. Блоки, що часто використовуються, відображаються вгорі списку.
“Анатомія” блоків редактора Гутенберг
Розглянем детально “анатомію” блоків. Будь який блок в візувльному редакторі Гутенберг має 3 області:
- панель інструментів блоку,
- бічну панель налаштувань блоку
- вміст блоку.
Залежно від призначення блоку кнопки панелей інструментів будуть змінюватись.
Кожен блок має власні налаштування. Натисніть на блок, щоб знайти їх. Відкриється панель інструментів у верхній частині блоку. Додаткові параметри блоку знаходяться на бічній панелі праворуч.
Для доступу до додаткових опцій, які є у більшості блоків, натисніть кнопку з вертикальними крапкам праворуч на панелі інструментів блоку.
Як працювати з блоками в Gutenberg
Як додавати блоки в область вмісту описано вище. В цьому розділі розглянем інші операції з блоками.
Переміщення блоків
Щоб перемістити блок, затисніть курсор миші на значку з шістьма крапками на панелі інструментів блоку та перетягніть блок.
Можна також натискати стрілки, щоб зсунути блок на одну позицію вище або нижче.
Зміна типу блоку
Кожен блок можна перетворити на блок іншого подібного типу. Наприклад, змінити абзац на заголовок, список чи цитату.
Для цього натисніть значок зліва у панелі інструментів блоку. Відкриється вікно із можливими варіантами перетворення.
Видалення блоку
Щоб видалити блок, виберіть його та натисніть кнопку з трьома крапками на панелі інструментів над ним. Ви побачите параметри, де є опція видалення цього блоку. Виберіть опцію і блок буде видалено
Навігація по вкладеним блокам
Деякі блоки можуть бути вкладені в інші блоки. Блоки, у яких їх вкладено, будуть їм так звані «батьківські» блоки. Наприклад, у блок колонки можете додати блок абзац. Для абзацу колонка буде батьківським блоком
Якщо натиснути на окрему колонку, відобразиться панель інструментів блоку, вставленого в цю колонку.
Щоб вибрати налаштування батьківського блоку, наведіть курсор на блок. У пенелі інструментів блоку вгорі або зліва з’явиться знак батьківського блоку. Клацніть курсором миші та отримайте доступ до інструментальної панелі батьківського блоку.
Інший спосіб: можна використовувати пункт верхнього меню «Перегляд списком», щоб перемикатися між доданими на сторінку блоками для доступу до налаштувань батьківського блоку.
Шаблони блоків (паттерни) редактора Гутенберг
Редактор Гутенберг має вже готові шаблони блоків (вони ж патерни). Патерни – це колекції вже налаштованих блоків, які можна вставити на сторінку.
Наприклад, за допомогою шаблонів можна вставити та розташувати поряд кілька зображень.
Для вставки шаблону на сторінку
- Натисніть піктограму “+” у верхньому меню.
- Перейдіть на вкладку Паттерни.
- Виберіть шаблон і по клацанню миші він буде вставлений на сторінку в місці розташування курсору.
Кожен патерн має передогляд, на якому можна побачити, як саме він виглядає при додаванні в публікацію.
Як додати блок або секцію до «Багаторазових блоків»
Якщо ви плануєте повторно використовувати блоки або секції блоків в різних статтях або на різних сторінках – то можете зберегти іх в розділ “Багаторазові блоки”. Після збереження вам не прийдеться щоразу створювати її заново або копіювати з іншої публікації. Надалі можна буде просто вставити її в редактор із загального списку блоків.
Все, що вам потрібно зробити: створити блок або секцію в тому вигляді, в якому вона повинна бути, обрати її мишкою, натиснути на три крапки у спливаючому меню з параметрами і натиснути «Додати до багаторазових блоків».
Потім придумати ім’я, за яким ви потім знаходитимете блок чи секцію в списку блоків, і натиснути «Зберегти».
Редактор Гутенберг: лайфхаки для ефективнішої роботи
У цьому розділі буде декілька порад, які допоможуть покращити роботу в редакторі Гутенберг.
1. Використовуйте / (косу риску) для швидкого додавання нових блоків
Так вам не доведеться щоразу відкривати панель із блоками та прокручувати її, щоб знайти потрібний блок. Введіть з нового рядка косу риску / і почніть вводити назву блоку.
По ходу введення у спливаючому вікні з’являтимуться варіанти. Коли побачите потрібний, виберіть його за допомогою стрілок на клавіатурі та натисніть «Enter».
2. Закріпіть спливаючу панель із параметрами блоку
Іноді спливаюча панель інструментів блоку перекриває вміст у блоку, що стоїть вище.
Якщо вам це не подобається, її можна закріпити на окремому рядку під верхньою панеллю Gutenberg. Для цього натисніть на верхній панелі праворуч трикрапку та клацніть по першій же опції «Верхня панель інструментів».
3. Використовуйте редактор коду для редагування вмісту в HTML-форматі
Так ви зможете відредагувати HTML-атрибути блоку, надати свій CSS-клас або написати для блоку вбудований код.
Щоб перейти в редактор коду, виберіть блок, клацніть на три крапки на спливаючій панелі праворуч і виберіть опцію «Редагувати як HTML».
Щоб повернутись назад : виберіть в тому ж меню опцію “Візувльний редактор”
до змісту ↑4. Швидко знайдіть потрібний блок за допомогою змісту
Це зручно, якщо у вас у публікації є секції, в яких багато вкладених блоків і не виходить мишкою вибрати потрібний.
У цьому випадку натисніть на верхній панелі Gutenberg кнопку “Перегляд списком” з трьома горизонтальними смужками та виберіть потрібний блок у змісті, який з’явиться на бічній панелі.
5. Перетягуйте зображення в редактор прямо з комп’ютера
Так вам не доведеться щоразу додавати блок «Зображення» та натискати додаткові кнопки.
А синя лінія допоможе розташувати картинку одразу в потрібному місці.
6. Використовуйте гарячі клавіші
Працювати в редакторі записів WordPress стане набагато простіше, якщо ви запам’ятаєте прості комбінації клавіш для популярних дій:
- Ctrl+S — зберегти публікацію;
- Ctrl + Z — скасувати дію;
- Ctrl + Shift + Z — повторити скасовану дію;
- Ctrl+K — вставити посилання на виділений текст;
- Ctrl + Shift + K — Видалити посилання;
- Ctrl + Shift + D — дублювати вибраний блок;
- Ctrl + Shift + , — показати/приховати бічну панель;
- Ctrl + Alt + T — додати новий блок перед вибраним блоком;
- Ctrl+Alt+Y — додати новий блок після вибраного блоку.
Якщо у вас Mac, замініть Ctrl на Command (⌘), а Alt на Option (⌥).
Також ви відкриєте повний список гарячих клавіш, якщо натиснете таку комбінацію:
- Shift + Alt + H — для Windows;
- Control (⌃) Option (⌥) + H — для Mac.
Альтернативний спосіб відкрити список гарячих клавіш — натиснути на кнопукнопка меню “Параметри” у вигляді трьох вертикальних крапок і у спливаючому вікні вибрати опцію «Гарячі клавіші».
Наприклад у мене не спрацьовує Ctrl + Shift + D
Висновок
Візульний редактор Гутенберг поєднав в собі кращі ідеї з класичного редактора WordPress та візуальних редакторів типу Elementor, Divi, та інших. Витрати часу на освоєння роботи з редактором Гутенберг буде хорошою інвестицією в себе і дасть змогу підвищити ефективність роботи з контентом сайту надалі.
Я попрошу вашого зворотного зв’язку в коментарях щодо приведеного в статті матеріалу, про ваш досвід використання редактора, з якими труднощами ви стикалися і як їх побороли.
Ставте запитання, пишіть пропозиції та коментарі, ділитесь посиланням на статтю в соціальних мережах.
Успіхів!
Олександр Коваль
