WordPress 5.9 – блок-теми и цялостно редактиране на сайта

WordPress 5.9 „Джозефин“ е тук и новостите в тази версия се очертават като много голяма промяна в начина, по който досега се създаваха и използваха темите за платформата. 

Цялостното редактиране на сайта с блок-теми е най-голямата новост в тази версия, други са – новата тема Twenty Twenty-Two (2022) и новият блок Навигация.

Започваме с най-интересното.

Блок-теми в WordPress 5.9

Първата стъпка към цялостното редактиране на сайта с блокове беше направена в предишната версия 5.8 на WordPress – с редактирането на джаджите с блок-редактора.

В тази версия 5.9 освен джаджите с блок-редактора може да се редактира цялата тема на сайта. Което означава и цялостно редактиране на сайта. Това ще е възможно само ако той използва блок-тема. Каквато е новата тема Twenty Twenty-Two.

Какво е блок-тема?

Блок-темата съдържа отделни блок-темплейти (Templates), в които има блокове. Темплейтите може да включват други под-темплейти, наричани – части (Template Parts). 

Темплейти са например основните типове страници в сайта – single, page, category, archive и други. Части са по-малки блок-темплейти като header, footer, sidebar, които се добавят в основните темплейти.

Най-малката градивна единица е блокът. Групирането на няколко блока се прави в блок-темплейтите. Групиране на по-високо ниво (на блокове и блок-темплейти) се извършва в основните темплейти на темата.

Само една от разликите с досегашните (наричани вече класически) теми е в кода, който се съдържа в темплейтите.

Темплейтните файлове вече не са PHP, но HTML файлове. Ето примерна структура на блок-тема:

theme
|__ style.css
|__ theme.json
|__ functions.php
|__ templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

Примерен код на блок-темплейта header.html:

<!-- wp:site-title /-->
<!-- wp:image {"sizeSlug":"large"} -->
  <figure class="wp-block-image size-large">
   <img src="https://mysupersite.com/image.jpg" />
  </figure>
<!-- /wp:image -->
<!-- wp:group -->
<div class="wp-block-group">
  <!-- wp:post-title /-->
  <!-- wp:post-content /-->
<!-- /wp:group -->
</div>

За още технически подробности вижте официалната документация за блок-темите: Block Theme | developer.wordpress.org 

Блок-теми в официалната директория

В директорията за теми в wordpress.org вече има няколко блок-теми: https://wordpress.org/themes/tags/full-site-editing/.

За да видите всички блок-теми, филтрирайте резултатите по тага Full Site Editing.

Все още са малко на брой, на фона на класическите теми, но тези 37 блок-теми бяха налични още преди пускането на новата версия 5.9 на WordPress (от която реално може да се използват блок-теми в сайта).

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

Twenty Twenty-Two – първата блок-тема в WordPress

С WordPress 5.9 идва и нова тема по подразбиране – Twenty Twenty-Two. Тази тема е изградена изцяло от блокове. С нея можете да тествате новата функционалност за цялостно редактиране на сайта.

Тествайте новите функционалности в WordPress на тестово копие на сайта. Вижте как можете да създадете такова през cPanel: Работно копие на сайта – Staging (Softaculous) | Help

Цялостно редактиране на сайта (блокове и стилове)

Редактиране на сайта през Site Editor

Ако вече сте редактирали съдържание с блок-редактора, например сте добавяли и размествали блокове в статия, то редактирането на блок-темата е почти същото нещо, само че на по-високо глобално ниво, на ниво сайт.

Голямата разлика с редактирането на статия е, че за блок-темата има няколко специални блока, които може да се използват като например: Site Title, Template Part, Post Content, Post Title, Post Date.

Редактирането на целия сайт (блок-темплейтите) се извършва през Site Editor (достъпен през Apperance » Editor или през Edit site от фронтенд-а). 

В редактора има три режима – редактиране на сайта, редактиране на темплейтите и редактиране на частите.

Редакцията на сайта и темплейтите става по същия начин, както когато редактираме например съдържанието на една статия или страница – добавяме блокове, разместваме ги, групираме ги и всички други манипулации, които можем да правим с блоковете.

Вижте повече: Всичко, което трябва да знаете за WordPress блоковете | Blog

Темплейтните части се добавят в блок-темплейта със специален блок – Temlpate Parts.

Дизайн настройки на блок-темата

Освен структурата на сайта и страниците през редактора на блок-темата може да се управляват и глобалните настройки на стила.

Опциите се намират в Styles. 

Целият дизайн на сайта може да се редактира от тази опция – цветове, шрифтове, параметри на детайлите в оформлението.

Отделно от това може да се извършва персонализация на настройките на самите блокове. Зададените тук настройки за блоковете са глобални за сайта. 

Блок-редакторът

Новостите в блок-редактора идват от 12 версии (10.8-11.9) на Gutenberg.

Има много подобрения и интересни новости, ето само малка част от тях:

• Нов блок Навигация;

• Добавени са нови опции за дизайна на текста в блоковете: интервал между буквите, височина на реда, стил на шрифта (плътност), регистър на буквите (само големи, само малки, големи и малки);

• Нова опция за добавяне на очертание (border) на блока Група/Group;

• Превю (преглед) на препратките в редактора – при кликване върху препратката се отваря малък прозорец с преглед на страницата;

• Пренареждане на блоковете в Списъка с блокове чрез drag & drop;
• Блок Галерия/Gallery използва блокове Изображение;
• И още много подобрения по блоковете и настройките им: WordPress Field Guide.

Интересните новости в други версии на WordPress: 6.1, 6.0, 5.9, 5.8, 5.7.