Основы разработки для WordPress Gutenberg для начинающих

Этот пост призван помочь вам понять ключевые концепции разработки нового редактора в WordPress; Гутенберг. На момент написания этой статьи Гутенберг все еще был довольно новым. И, как и в случае со всеми новыми технологиями на этапе их зарождения, документации и стандартов, к сожалению, немного не хватает.

На сайте документации WordPress есть большой раздел, посвященный Гутенбергу для разработчиков; называется справочником редактора Гутенберга. Он уже содержит довольно много информации. Но это может быть немного запутанным или пугающим для тех, кто плохо знаком с технологиями на основе Javascript. Для разработчиков, ориентированных на PHP, которые могут иметь только базовые знания Javascript/jQuery, новые технологии WordPress могут показаться пугающими. Но поверьте мне, как только вы изучите ключевые концепции, вы увидите, какие новые возможности у вас теперь есть как у разработчика WordPress.

Начнем с абсолютных основ. Какие языки программирования и инструменты вам нужно использовать или изучить, чтобы наилучшим образом разрабатывать для Gutenberg?

Язык и библиотеки, которые вам нужно знать

Короткий ответ на вопрос, какой язык вам нужно использовать для разработки в Гутенберге: Javascript. Однако в мире Javascript есть довольно много концепций, расширений и инструментов, о которых вам следует знать.

В первую очередь речь идет о версии Javascript. Существует официальная стандартизация Javascript; ECMAScript. ECMAScript 5 (часто сокращаемый до ES5) вышел около 10 лет назад и является версией Javascript, с которой большинство разработчиков знакомы. Затем у нас есть ECMAScript 6 (часто сокращаемый до ES6 ), который вышел в 2015 году. Некоторые называют эту версию ES2015. И, наконец, есть ESNext, динамическое имя, охватывающее будущую версию, содержащее предложения, которые, как мы надеемся, будут включены в любую следующую стандартизированную версию Javascript.

Вы можете думать примерно так: «Итак, все в порядке, новые версии Javascript просто означают больше возможностей. Так что я просто воспользуюсь самой новой." Но есть очень важная вещь, которую вам нужно знать о версиях Javascript, и она заключается в следующем: большинство браузеров сегодня могут понимать только ES5.

Это означает, что если вы хотите писать Javascript в ES6 или ESNext, вам нужно настроить инструменты, которые преобразуют ваш код в ES5, чтобы браузеры могли его понять. Но прежде чем вы начнете думать о том, чтобы вообще пропустить изучение ES6 и ESNext, помните, что ES5 уже 10 лет. И это потребует от вас написания намного большего количества кода. Кроме того, он будет гораздо менее читаемым и более сложным, чем если бы вы написали его на ES6 или ESNext.

Кроме того, для концепций Гутенберга вы также хотите использовать JSX — расширение синтаксиса для Javascript. JSX также является языком, который браузеры не могут понять без его преобразования.

Так зачем возиться с ES6, ESNext или JSX?

Если вы все еще не уверены, что ES6/ESNext стоит дополнительного шага по его преобразованию, позвольте мне показать вам сравнение кода. С ES6 и JSX вы можете написать это для возврата простого абзаца; с классом и динамическим выводом из переменной;

return <p className="example">Hello, my name is {name}</p>;

Для тех из вас, кто плохо знаком с этим и думает, что я забыл цитаты — нет, не забыл. В этом простота JSX. Давайте сравним вышеизложенное с тем, как вы будете писать с помощью библиотек Javascript ES5 и WordPress:

return wp.element.createElement(
    'p',
    { className: 'example' },
    'Hello, my name is ' + name
);

Весь приведенный выше код необходим для вывода того, что могут делать ES6 и JSX, в единственной очень легко читаемой строке! Представьте себе создание более сложного пользовательского интерфейса с событиями и условиями, когда для простого абзаца требуется этот громоздкий фрагмент кода.

Убежденный? Хороший!

Инструменты трансформации и React JS

Самый распространенный инструмент, используемый WordPress для преобразования ES6/ESNext, — это Babel. Обычно вы используете Babel в качестве плагина к Webpack, инструменту, который связывает и минимизирует ваши файлы Javascript. Оба инструмента используют Node.js, что дает вам некоторые инструменты для запуска скриптов для Webpack и Babel в командной строке. Если это звучит запутанно, у меня есть пост, в котором подробно объясняется, как настроить все эти инструменты для разработки Gutenberg.

Второе, что вам нужно знать о технологиях, это то, что Gutenberg основан на слое абстракции поверх React JS. React JS — это библиотека Javascript с открытым исходным кодом, поддерживаемая Facebook, которая была выпущена примерно в 2013 году. Поскольку React существует уже некоторое время, существует множество руководств, руководств и документации для этой библиотеки. На официальном сайте React есть хорошее подробное руководство для новичков в React. Вам определенно не нужно быть экспертом в React, чтобы разрабатывать для Гутенберга, но основы того, как он работает с компонентами и состояниями, очень помогут вам понять Гутенберг.

Заключить:

• Изучение React JS будет иметь большое значение для понимания того, как разрабатывать для Gutenberg. Особенно, если вы хотите создать свои собственные блоки или настроить существующие.
• Вы можете использовать только ES5 Javascript, но определенно рекомендуется изучить ES6, ESNext и JSX.
• Ознакомьтесь с инструментами, необходимыми для преобразования кода ES6/ESNext/JSX. Этими инструментами являются npm, Webpack и Babel.

Новый способ хранения контента постов и почему

Одним из самых больших преимуществ Гутенберга является отказ от фиксированного HTML в содержании постов. WordPress, до Gutenberg, и большинство веб-CMS хранят содержимое статей в чистом HTML. Обычно это не проблема с простым содержимым (заголовки и абзацы). Но может быть большая проблема с более сложным и динамичным богатым контентом.

Любая CMS, которая разрешает динамическое содержимое в содержимом статьи, столкнется с проблемами при сохранении этого как допустимого HTML. Это может быть что угодно, от изображения, которое ссылается на свой идентификатор в системе вместо полного URL-адреса. Или виджет, который динамически отображает последние сообщения в данной категории. Обычно это решается путем вывода пользовательского загадочного HTML, который не имеет смысла выводить в обычном режиме. А затем позвольте синтаксическому анализатору CMS преобразовать эти фрагменты HTML во что-то осмысленное или динамическое. Недостатком этого является то, что если вы перенесете свой контент в другую CMS, это часто приведет к уродливому HTML. Содержимое будет заполнено не проанализированным HTML, который вам придется очищать вручную. Именно эту проблему и пытается решить Гутенберг.

В Gutenberg WordPress решил сохранять дополнительную и динамическую информацию в виде комментариев HTML. HTML-комментарии никогда не видны пользователям на веб-сайте, и практически все разрешено в блоке комментариев. Комментарий HTML начинается с <!--и заканчивается на -->, а Гутенберг хранит данные в определенной структуре в формате JSON. Каждый блок в Гутенберге обернут начальным HTML-комментарием и закрывающим HTML-комментарием после него.

Новый способ хранения контента публикации

Я не буду вдаваться в подробности о том, как устроены блоки комментариев — вы найдете подробное руководство по этому вопросу в Руководстве по редактору WordPress. Но, например, простой абзац в содержимом поста Гутенберга будет сохранен в базе данных как:

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
<!-- /wp:paragraph -->

Что касается динамического контента, обычно HTML вообще не выводится. Вся информация, необходимая WordPress для понимания того, что делает этот блок, содержится в комментариях HTML. Вот как Гутенберг хранит блок «Последние сообщения»:

<!-- wp:latest-posts {"categories":"17","displayPostContent":true,"excerptLength":30,"postLayout":"grid"} /-->

Поскольку все является комментарием HTML, перенос ваших сообщений в другой WordPress без Gutenberg или другой CMS гарантирует, что не будет выплевывать уродливый неразобранный HTML. Он будет просто проигнорирован и пропущен.

Как вы, наверное, уже поняли, блоки комментариев начинаются с имени блока с префиксом ‘ wp‘. Если есть какие-то пользовательские настройки, то они будут выводиться после имени в JSON, как вы можете видеть на примере Latest posts-block. Гутенберг называет их атрибутами, и с этой концепцией вы хорошо познакомитесь, когда начнете учиться разрабатывать для Гутенберга.

Полезно знать:
если вы хотите более подробно изучить, как сохраняется новый контент публикации, вы можете посмотреть в своей wp_postsтаблице в своей базе данных. Есть еще один более простой способ просмотреть полное значение базы данных из шаблонов WordPress. В вашем единственном шаблоне внутри цикла просто используйте «echo get_the_content()». Использование обычного «the_content()» выведет проанализированное содержимое сообщения, но повторение значения содержимого выведет именно то, что хранится в базе данных. Вы можете использовать инструмент Inspect или просмотреть исходный код в Chrome или Firefox, чтобы увидеть блоки комментариев.

Что вы, как разработчик, можете делать в Гутенберге

У вас есть несколько вариантов настройки тем или плагинов для Gutenberg. Ниже перечислены наиболее распространенные настройки, которые вы, вероятно, сделаете как разработчик.

Расширяйте и настраивайте существующие блоки

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

Самый распространенный метод расширения блока — добавление пользовательских стилей блока, которые представляют собой вариации стиля блока. Стили блоков не так распространены в WordPress по умолчанию, но некоторые из них есть. Взгляните на блок Quote. В редакторе Gutenberg у вас будет поле на правой боковой панели под названием «Стили».

Другой способ настройки существующих блоков — использование фильтров. Вы, вероятно, знакомы с фильтрами, использующими PHP в WordPress, но с Gutenberg теперь есть фильтры на основе Javascript для блоков. Например, вы можете добавить свои собственные атрибуты (настройки) ко всем или определенным типам блоков или отфильтровать, как они сохраняются или выводятся.

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

Создайте свои собственные пользовательские блоки

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

Написание собственных пользовательских блоков, пожалуй, самое сложное в настройке темы или плагина для Гутенберга. Но это также может быть самым полезным! Вы не только сможете создавать блоки, которые работают и выглядят именно так, как вы хотите, но это также отличный способ быстро изучить новую технологию на основе Javascript.

Убедитесь, что ваша тема готова к работе с Гутенбергом

Если вы являетесь разработчиком темы WordPress, вы должны знать, что вашей теме может потребоваться много настроек для Гутенберга, особенно в виде файлов add_theme_support(). В справочнике WordPress есть хороший обзор всех поддерживаемых тем, которые вам необходимо учитывать, чтобы ваша тема была готова к работе с Gutenberg.

По умолчанию WordPress сам обрабатывает большинство стилей блоков по умолчанию, поэтому вам не нужно слишком беспокоиться об их стилизации в вашей теме. Но разработчики тем обычно более требовательны к их дизайну и стилю. Поэтому вам, вероятно, потребуется изменить или добавить стиль блока. Вы можете добавить стили редактора только во внешний интерфейс, только в редактор или в оба. Справочник по WordPress Gutenberg содержит обзор стилей редактора и стилей блоков по умолчанию.

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

И, наконец, доступны функции для работы с парсером Гутенберга и способы извлечения блоков из постов. Поскольку весь контент сохраняется с полной информацией о типе контента, вы можете легко извлечь определенные части содержимого публикации. Хорошим примером является извлечение первого абзаца сообщений для отображения в виде отрывка. Очень полезной функцией PHP для этой концепции является [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), которая использует парсер Гутенберга для предоставленного контента поста, а взамен вы получите массив PHP со всей информацией о блоке и содержимым.

Вывод

Я надеюсь, что этот пост не только научил вас кое-чему о разработке для Гутенберга, но и вызвал у вас любопытство и желание узнать больше! Как разработчик WordPress, ориентированный на PHP, который изначально сопротивлялся идее перехода на технологию, основанную на Javascript, я могу сказать вам, что как только вы сделаете шаг, чтобы узнать о «новом пути», вы будете счастливы, что сделали это. Gutenberg действительно открывает новые способы настройки, дизайна и отображения контента WordPress без необходимости использования компоновщиков страниц или тем с тяжелыми библиотеками, чтобы обеспечить гибкий и красивый пост-контент. Нам просто нужно научиться работать с ним оптимально!