Редактор Gutenberg – це інтуїтивно зрозумілий вбудований візуальний редактор WordPress, який став доступним у 2018 році з версії WordPress 5.0 і вище. Цей редактор значно спрощує створення сторінок сайту , статей та віджетів. У цій статті ми розповімо про його можливості, правильну роботу з блоками та приховані можливості.

Огляд візуального редактора WordPress

При переході в Gutenberg ви відразу помітите, що стандартне бічне меню WordPress поступається місцем зручному повноекранному режиму. Вікно редактора можна умовно поділити на три частини:

• Візуальний редактор: займає основну частину екрана ліворуч і дозволяє створювати контент, який виглядатиме на вашому сайті так само, як у редакторі.
• Верхня панель: містить спільні функції, такі як додавання нових блоків, скасування/повторення дій, збереження чернетки, попередній перегляд та публікація.
• Бічна панель: знаходиться праворуч і містить додаткові параметри, включаючи налаштування публікації сторінки/запису та налаштування зовнішнього вигляду блоків.

Налаштування редактора Gutenberg

Крім стандартного набору функцій, у Gutenberg є можливість персонального налаштування під себе. Ви можете вибирати кращі блоки, налаштовувати їх зовнішній вигляд та розташування для зручнішого редагування.

У Gutenberg передбачені зручні інструменти, такі як автозбереження, можливість переходу до HTML-редактора для більш глибокого налаштування, а також підказки та шаблони блоків для швидкого створення контенту.

Основна фішка Gutenberg – це робота з контентом блоками. Ви можете легко додавати, переміщати та настроювати блоки тексту, зображень, відео, таблиць, форм та багато інших для створення контенту.

Щоб максимально ефективно використовувати Gutenberg, не забувайте про клавіатурні комбінації, які дозволяють швидко керувати блоками та виконувати різні дії без зайвих кліків мишею.

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

Базові блоки редактора

За замовчуванням у стандартному функціоналі редактора є більше 20 блоків. На сьогодні вже є багато плагінів, які розширюють базовий функціонал редактора. Основний набір блоків включає:

• абзац,
• заголовок,
• підзаголовок,
• цитата,
• зображення,
• галерея,
• зображення обкладинки,
• відео,
• аудіо,
• стовпці,
• файл,
• код,
• список,
• кнопка,
• об’єкти, що вбудовуються.

Нові інструменти веб-дизайну роблять легше і гнучкішимкерування елементами сторінки. Всі елементи тепер представлені у вигляді окремих блоків, що дозволяє переміщати та легко їх налаштовувати. Перетягування блоків на сторінці здійснюється простим рухом миші. Можна змінювати не тільки колір тексту, але й колір фону кожного абзацу. І це ще не все – розмір шрифту теж піддається індивідуальному налаштуванню для кожного абзацу.

Налаштування робочої області

Налаштування Gutenberg відображаються у правій частині верхньої панелі візуального редактора, доступ до яких можна отримати через іконку з трьома точками. Тут представлено низку корисних опцій:

• Верхня панель інструментів: Додає додаткову панель із параметрами налаштування вибраного блоку, що спрощує його кастомізацію.
• Режим підсвічування: Потім знімає решту вмісту в редакторі, сфокусувавши увагу на поточному блоці.
• Повноекранний режим: Дозволяє перемикатися між повноекранним відображенням редактора та стандартним бічним меню WordPress.
• Візуальний редактор/Редактор коду: Дві опції для роботи з контентом – у зручному візуальному режимі та в редакторі коду для використання HTML-структур.
• Менеджер блоків: Дозволяє керувати блоками, за винятком тих, які не потрібні на сайті, для більш чистого та зручного інтерфейсу.
• Управління «Моїми блоками»: Створення та зберігання патернів із блоків для швидкого додавання на сайт, що особливо корисно для стандартних елементів дизайну.
• Гарячі клавіші: Список комбінацій клавіш для швидкої та ефективної роботи в редакторі.
  Початкова інструкція: Короткий посібник із чотирьох кроків для ознайомлення з основними функціями Gutenberg при першому використанні.
• Копіювати вміст: Дозволяє копіювати вміст сторінки для перенесення на інший сайт або створення дубліката сторінки на поточному сайті.
• Допомога: Посилання на англомовний посібник з Gutenberg на офіційному сайті WordPress.
• Уподобання: Налаштування зовнішнього вигляду редактора, де можна приховати непотрібні розділи або налаштувати відображення блоків, що часто використовуються, для більш комфортної роботи.

Важливі функції редактора

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

#1  Скасування та повтор дій

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

#2  Збереження процесу

Один із значних плюсів використання редактора Gutenberg – це автоматичне збереження змін, яке відбувається щохвилини. Ця корисна функція дозволяє зберегти вашу роботу без зайвого клопоту та необхідності натискати кнопку «Зберегти чернетку» щоразу після внесення змін.

Завдяки автозбереженню, ви можете бути впевнені, що ваша робота завжди залишиться зафіксованою та збереженою, навіть якщо щось трапиться з вашим браузером або пристроєм. Тепер ви можете спокійно продовжувати свою творчу роботу, знаючи, що ваші дані завжди у безпеці.

Якщо ваша публікація знаходиться в режимі чернетки, для збереження змін достатньо натиснути кнопку «Зберегти чернетку». Ця дія збереже не лише внесені зміни, а й створить редакцію — версію вашої роботи, до якої ви зможете повернутися будь-якої миті.

Коли ваш запис або сторінку вже опубліковано, кнопка «Зберегти чернетку» змінює свою функцію. Натиснувши на неї, ви скасуєте публікацію і переведете її назад у статус чернетки. Якщо вам потрібно зберегти прогрес вже опублікованої сторінки або запису, просто використовуйте синю кнопку «Оновити». Таким чином, ваш контент завжди буде актуальним.

#3  Відновлення попередньої редакції

Зберігання попередніх версій вашої роботи стало простіше з розділом «Редакції» в Gutenberg. Він розташований на бічній панелі, розташованій під блоком “Статус і видимість” на вкладці “Сторінка” або “Запис”.

При виборі блоку та переході до розділу «Редакції», ви виявите дві колонки: «Було» та «Стало», що відображають зміни, з можливістю перемикання між версіями через кнопки «Попередня» та «Наступна».

Коли ви знаходитесь на потрібній редакції, у правому верхньому кутку з’явиться кнопка «Відновити цю редакцію». Просто натисніть її, щоб повернутись до попередньої версії вашого творіння. Цей інструмент дозволяє вам впевнено редагувати сайт, знаючи, що ви завжди можете повернутися до колишніх змін.

#4  Приховування контенту від загального доступу

Контроль доступу до вашої публікації стає простішим із розділом «Статус і видимість» на бічній панелі Gutenberg. Тут, у розділі «Видимість», представлено три рівні доступу:

• Відкрито: Ваша сторінка буде доступна для перегляду всіх користувачів.
• Особисте: Тільки авторизовані користувачі WordPress з ролями Адміністратор або Редактор зможуть переглядати вашу сторінку.
• Захищено паролем: Доступ до сторінки отримають лише ті, хто введе пароль, який ви встановите.

#4  Зміна URL-адреси

Зміна URL вашої публікації здійснюється в розділі «Постійне посилання» на бічній панелі за допомогою опції «Ярлик URL». Просто під цією опцією ви побачите перегляд посилання з вашим доменним ім’ям. Натиснувши на це посилання, ви відкриєте попередній перегляд сторінки, аналогічний натисканню кнопки «Переглянути» у верхній панелі.

У ярлику URL можна використовувати як латинські, так і символи кирилиці. Однак латиниця зазвичай зручніша, оскільки багато програм при копіюванні кириличних посилань можуть спотворювати їх.

6 Вибір рубрики для запису

У блоковому редакторі можна присвоїти статті певну рубрику за допомогою однойменного розділу «Рубрики» на бічній панелі. Тут ви можете вибрати вже існуючу рубрику або створити нову, просто натиснувши кнопку «Додати нову рубрику». Ця опція дозволяє статті перебувати одночасно в кількох рубриках.

7 Задати основне фото для запису

Процес налаштування головного зображення виконується у розділі “Зображення сторінки” або “Зображення запису” на бічній панелі редактора. Це зображення відображатиметься при посиланні статті у соціальних мережах і також буде видно на сторінці рубрики.

Як працювати з блоками редактора

Візуальний редактор WordPress ґрунтується на концепції блоків, де кожен елемент публікації представлений як окремий блок. Це означає, що абзаци, кнопки, списки, заголовки та зображення – всі вони є індивідуальними блоками. Давайте розглянемо основні дії з блоками, які можуть стати вам у нагоді при роботі над вашим сайтом.

Додавання нового блоку

Щоб додати новий блок, натисніть кнопку «+» у лівій частині верхньої панелі Gutenberg. Потім виберіть потрібний блок зі списку, який з’явиться зліва, і він автоматично додасться до кінця вашого редактора.

Можна також натиснути кнопку «+» між двома існуючими блоками, щоб додати новий блок між ними. При цьому з’явиться спливаюче вікно з вибором блоків або рядок пошуку для швидкого доступу до потрібного елемента.

Форматування тексту

Як тільки ви оберете будь-який із блоків, прямо над ним з’явиться спливаюча панель з його налаштуваннями. Опції на ній відрізнятимуться залежно від типу блоку. Наприклад, у блоку «Абзац» це будуть стандартні кнопки для роботи з текстом: виділити жирним, курсивом, додати посилання, змінити колір тексту або тла.

Перетягування блоку

Ви можете легко змінити порядок блоків на сторінці. Для цього вам достатньо виділити потрібний блок і стрілками вгору вниз перемістити його в потрібне місце. Також ви можете затиснути кнопку поряд із покажчиками та просто перетягнути цей блок.