Блоковият редактор

Модул 4: Създаване на съдържание · Време за четене: 8 минути

Учебна цел: След този урок ще можете да изграждате страница с блокове и макети и ще знаете как работят конспектите, планирането и версиите.

Ключови понятия: блок, настройки на блок, лента с инструменти, изглед в списък, група, колони, макет, синхронизиран макет, конспект, лична, планиране, версии, преглед

Всичко е блок

От WordPress 5.0 (края на 2018 г.) създавате съдържание в блоковия редактор (наричан още Gutenberg, по името на проекта). Една страница се състои от отделни блокове: заглавие, абзац, изображение, бутон, списък, таблица, вградено видео. Всеки блок има свои собствени настройки. Поставяте блокове един под друг, един до друг (в колони) или един в друг (в група).

Защо блокове? В стария редактор една страница беше едно голямо текстово поле. Ако искахте две колони или бутон, Ви трябваше конструктор на страници, shortcodes или HTML. С блоковете това е възможно направо в WordPress, а резултатът е чист HTML, който темата оформя.

Зад кулисите WordPress съхранява блоковете като HTML с коментарни маркери преди и след:

<!-- wp:heading -->
<h2 class="wp-block-heading">Работно време</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Отворени сме от вторник до събота включително.</p>
<!-- /wp:paragraph -->

Това е полезно да знаете: съдържанието остава четим HTML, дори и по-късно да смените темата или даден блок вече да не съществува. Виждате това, ако за даден блок изберете „Редактиране като HTML“, или в редактора на код (Ctrl+Shift+Alt+M).

Редакторът в три части

1. Платното (canvas) в средата: Вашата страница приблизително такава, каквато ще изглежда.
2. Лентата с инструменти над избран блок: удебелен и курсивен текст, връзка, подравняване и превръщане на блока в друг тип (абзац става списък, изображение става галерия).
3. Страничната лента вдясно с два раздела: Страница (или Публикация) с настройки за цялата страница и Блок с настройки на избрания блок, като цвят, разстояние и размер на шрифта.

Две помощни средства, които значително улесняват работата Ви:

• Изглед в списък (иконата с три чертички горе вляво): структурата на страницата Ви като дърво. С него избирате точно блока, който искате, дори ако е в група в колона.
• Команди с наклонена черта (slash): напишете на празен ред / и името на блок (/heading, /button, /image) и натиснете Enter.

Изграждане с групи и колони

Добрата страница има ясна структура. За това използвате три градивни елемента:

• Група: рамка около няколко блока, със собствен фон или разстояние. Например цветен блок със заглавие, изречение и бутон.
• Колони: блокове един до друг. На телефон се подреждат един под друг.
• Ред и Стек: варианти на група, които подреждат блоковете хоризонтално или вертикално.

Използвайте заглавията по правилния начин: едно H1 (заглавието на страницата, което обикновено се задава от темата), под него H2 за главите и H3 за частите в тях. Не избирайте заглавие заради размера на шрифта, него настройвате в настройките на блока. Екранните четци и търсачките използват заглавията, за да разберат страницата (урок 9.2).

Макети: не започвайте всеки път отначало

Един макет е готова група от блокове: заглавие с текст и изображение, ценова таблица, три колони с икони. Добавяте ги чрез бутона за добавяне (плюса), раздел Макети. Вашата тема често предоставя няколко, а в библиотеката с макети на wordpress.org има стотици.

Можете и сами да създавате макети: изберете няколко блока, в лентата с инструменти изберете трите точки и Създаване на макет. При това избирате дали макетът е синхронизиран:

• Не са синхронизирани: всеки път, когато го добавяте, получавате отделно копие. Ако го промените, се променя само това копие. Полезно като шаблон.
• Синхронизиран: навсякъде, където е поставен, е еднакъв. Ако го промените на едно място, се променя навсякъде. Полезно за блок „Контакти и работно време“, който стои на десет страници. (По-рано те се наричаха „многократно използваеми блокове“.)

Един капан: синхронизиран макет, който „само малко“ промените на една страница, се променя и на всички останали страници. Ако искате нещо различно на едно място, превърнете това конкретно копие в обикновена група (разделяне, losmaken).

Запазване, публикуване и планиране

Една страница има статус:

Използвайте Преглед, за да разгледате страницата така, както я вижда посетител, включително на мобилен телефон и таблет, преди да публикувате.

Версии: връщане във времето

Всеки път, когато запазвате, WordPress съхранява версия: състоянието към този момент. В страничната лента при страницата виждате колко версии има. Щракнете върху тях, за да видите с плъзгач разликите между две версии и да възстановите по-стара версия.

Версиите са Вашата първа защитна мрежа при грешка („случайно изтрих половината страница“). Те обаче всички се съхраняват в базата данни. Сайт с хиляди версии става по-голям и понякога по-бавен. Можете да ограничите броя им в wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Урок 6.3 разглежда почистването на стари версии.

Докъде стига редакторът

Блоковият редактор създава съдържанието на страница. Това, което е около съдържанието (заглавката на сайта, менюто, долния колонтитул), принадлежи на темата. При блок тема го редактирате в редактора на сайта (Изглед > Редактор) със същите блокове; при класическа тема, в Настройки (Customizer) и при Джаджи (урок 5.1). Ако използвате конструктор на страници като Elementor или Divi, работите в тази програма вместо в блоковия редактор; недостатъците на това се обсъждат в урок 5.1.

Обобщение

• Една страница се състои от блокове, които поставяте под, до и един в друг; WordPress ги съхранява като HTML с коментарни маркери.
• Изгледът в списък и командите с наклонена черта правят изграждането бързо и точно.
• Използвайте заглавията за структурата (H2, H3), не за размера на шрифта.
• Макетите спестяват работа; синхронизиран макет се променя навсякъде едновременно.
• Конспект, планиране, лична страница и версии Ви дават контрол над това какво кога е видимо и път назад.

Тест

Задача

Задача D4.1: Изградете страница с блокове. Създайте конспектна страница „За нас“ с: едно H2 и едно H3, поне два абзаца, изображение с alt текст, блок с колони с две колони, бутон с връзка и макет от библиотеката. Превърнете една група в собствен синхронизиран макет и го добавете на втора конспектна страница. След това го променете на едно място и вижте какво се случва на другата страница. Накрая възстановете по-ранна версия. Отбележете всяка стъпка и опишете в две изречения кога бихте използвали синхронизиран макет и кога не.

Допълнително четене

За работата в самия WordPress все още нямаме собствени статии; официалната документация на WordPress е обширна.

• Блоковият редактор (wordpress.org, на английски): https://wordpress.org/documentation/article/wordpress-block-editor/
• Макети (wordpress.org, на английски): https://wordpress.org/documentation/article/block-pattern/
• Версии (wordpress.org, на английски): https://wordpress.org/documentation/article/revisions/