Полное руководство по шаблонам блоков Гутенберга (I)

На прошлой неделе Мэтт Малленвег, по ежегодной традиции, провел свою презентацию (в данном случае виртуальную) State of The Word , в которой представил краткий обзор текущего состояния и новых возможностей WordPress.

Мэтт больше, чем когда-либо, сосредоточен на том, чтобы заставить нас полюбить опыт, который предоставляет редактор блоков Gutenberg. Одной из новых функций, которую выделил Мэтт, которая появилась в WordPress версии 5.5, являются блочные шаблоны . Я подумал, что было бы интересно сделать по ним полное руководство.

Руководство разделено на три поста, и мы рассмотрим следующие темы:

1. Введение в шаблоны блоков
2. Вставка шаблона на страницу
3. Предопределенные шаблоны и другие доступные в каталогах
4. Добавьте шаблоны, доступные в каталогах, на свой сайт
5. Как создать выкройку с нуля
6. Как создать шаблон, если вы не разработчик
7. Как преобразовать многоразовые блоки в шаблоны блоков
8. Темы с использованием шаблонов блоков
9. Официальная документация.

Итак, без дальнейших проволочек, приступим!

1. Введение в шаблоны блоков

Когда появился Гутенберг, большим изменением по сравнению с классическим редактором, который мы использовали в WordPress, стало введение концепции «блока». Все должно было быть блоком: заголовок поста, его абзацы, списки, изображения… каждый из них был блоком со своими собственными настройками для настройки размера шрифта, заголовка, выравнивания и так далее.

Блоки быстро стали более сложными, и теперь у нас есть галереи изображений, мультимедийные/текстовые блоки или даже блоки, содержащие другие блоки.

В то же время многие разработчики также предоставили большой набор блоков с уникальными функциями, чтобы вы могли улучшить дизайн своих страниц. Например, в Nelio мы разработали Nelio Compare Images для сравнения двух изображений с помощью простого ползунка:

Мало того, что произошел взрыв блоков, которые можно найти в плагинах и темах, их возможности также развивались с различными версиями WordPress. Таким образом, в настоящее время вы можете создавать повторно используемые блоки и даже создавать с их помощью шаблон страницы или поста.

Продолжая идею иметь предопределенные дизайны, которые можно быстро и легко повторно использовать, в WordPress версии 5.5 появились блочные шаблоны. Идея блочного шаблона очень проста: это предопределенные разделы или фрагменты, образованные группой блоков, которые вы можете использовать при создании страниц и постов. Эти шаблоны могут быть чем-то простым, например, раздел с двумя кнопками или раздел цен с привлекательным и сложным дизайном.

2. Вставьте шаблон на страницу

Давайте начнем с основ, как вставить новый шаблон на страницу? Очень просто! Как и в случае с блоками, чтобы вставить шаблон, вам просто нужно нажать кнопку + в левом верхнем углу вашего редактора и вместо добавления блока выбрать вкладку « Шаблоны ». Там вы увидите небольшой раскрывающийся список с типами шаблонов, которые вы можете выбрать, предопределенными шаблонами WordPress, теми, которые вы установили, и любыми другими, которые вы установили с помощью плагина.

Выберите понравившийся шаблон и посмотрите, как набор блоков, из которых он состоит, вставляется на вашу страницу:

После вставки шаблона вы можете изменить каждый из блоков, как делали это до сих пор. Кроме того, если блоки этого шаблона сгруппированы, вы также можете изменить свойства группы в целом. Просто, верно?

3. Шаблоны по умолчанию и другие шаблоны из сторонних каталогов

Версия WordPress 5.5 поставляется с набором предопределенных шаблонов блоков, которые вы теперь можете использовать для создания своих страниц. Вам просто нужно нажать кнопку + , о которой я упоминал выше, чтобы увидеть шаблоны, доступные на вашем сайте.

Кроме того, ваша активная тема может также определять свои собственные шаблоны блоков. Например, тема WordPress Twenty Seventeen или Twenty Twenty-One включает в себя некоторые шаблоны блоков, а также GoDaddy и Genesis Blocks, если упомянуть пару примеров.

После выпуска WordPress 5.0 у нас произошел взрыв блоков, и теперь мы наблюдаем тот же результат, если блочные шаблоны: вы можете очень легко загружать и устанавливать блоки и шаблоны на свой веб-сайт, как я объясню позже. Вот вам две паутины блоков и узоров, которые в вашем распоряжении, хотя я уверен, что скоро их будет больше:

• Шаблоны Shareablock от Джеффри Каранданга . Фантастический веб-сайт, где вы можете поделиться и получить множество блоков, шаблонов и шаблонов для загрузки и установки на свой сайт.

• Gutenberg Hub Мунира Камала, где вы также найдете множество блоков, шаблонов и узоров.

Существует также плагин Redux Framework , который предлагает библиотеку с более чем 1000 сторонних блоков, шаблонов и шаблонов (в том числе доступных в каталогах выше) для вставки на ваши страницы. Плагин позволяет загрузить до 5 бесплатных шаблонов, а затем вы можете перейти на платную версию.

4. Добавьте шаблоны, доступные в каталогах, на свой сайт

Как я уже упоминал, вы можете использовать плагин Redux Framework, чтобы легко добавлять шаблоны из Shareablock и GutenbergHub. Если вы профессиональный дизайнер веб-сайтов WordPress, это, безусловно, хороший вариант, чтобы всегда быстро находить столько шаблонов, сколько вы хотите. Но вы также можете использовать новые шаблоны блоков, не требуя плагина премиум-класса. Посмотрим, как.

Добавьте шаблон Shareablock

В случае с Shareablock, чтобы установить шаблон (и, конечно же, блок или шаблон), вам просто нужно выбрать его в Интернете и нажать кнопку « Загрузить сейчас» .

В первый раз вас попросят ввести адрес электронной почты, чтобы вы могли получить имя пользователя и пароль.

В письме есть ссылка для входа на их сайт; войдите в систему, и теперь вы сможете загрузить интересующий вас шаблон. Просто выберите его и снова нажмите « Загрузить сейчас », чтобы получить шаблон блока по электронной почте.

Нажав на ссылку, указанную в электронном письме, вы можете получить доступ к Интернету, чтобы загрузить файл шаблона .json . После загрузки просто перетащите его в редактор блоков WordPress, и вы автоматически увидите все блоки, составляющие шаблон.

Это трудоемкий процесс, но он выполняет свою работу. К сожалению, вы заметите, что шаблон блока не отображается в вашей библиотеке…

Добавьте шаблон концентратора Гутенберга

Добавить шаблон из Gutenberg Hub проще. Как и прежде, сначала выберите паттерн, который хотите скопировать.

Справа от шаблона вы увидите кнопку « Копировать код» . Нажмите кнопку, чтобы скопировать его в буфер обмена, а затем вставьте в редактор Гутенберга. Это вставит блок в ваш редактор, но пропустит библиотеку.

Но ждать! Не так быстро. Если вы хотите полностью настроить получившийся блок (блоки), Мунир Камаль рекомендует вам установить их бесплатный плагин EditorPlus, который добавляет новые блоки в редактор и расширяет возможности Gutenberg с помощью расширенных элементов управления дизайном, шрифтов, значков, разделителей, анимации и многого другого. Особенности.

Если вы это сделаете, вы увидите на правой боковой панели редактора дополнительные элементы управления для изменения дизайна скопированного рисунка.

Теперь вы знаете, что такое шаблоны блоков, где их найти и как вставить их на свой веб-сайт, чтобы создать отличный дизайн. Не пропустите следующий пост, в котором вы научитесь создавать свои собственные узоры!

Избранное изображение Рауля Качо Осеса на Unsplash .