Gutenberg — это новый редактор WordPress, основанный на React.
На скриншоте видно сравнение старого классического и нового редактора WordPress:
1. Новый опыт редактирования
Gutenberg — это редизайн WYSIWYG редактора WordPress .
Редактор WordPress традиционно имел одно поле для редактирования контента, которое сохраняло все содержимое поста в колонке post_content в
таблице wp_posts базы данных. Gutenberg не изменяет этого: он сохраняет весь контент записи в таблицу post_content, которую можно получить, вызвав the_content()из шаблона PHP.
Gutenberg представляет совершенно новый способ мышления о контенте в WordPress. Он не только предоставляет разработчикам собственный способ обработки содержимого в виде блоков (на самом деле мы будем называть их блоками, что является их официальным названием), но и позволяет конечным пользователям создавать полнофункциональные динамические макеты страниц с помощью WordPress из коробки. Без Gutenberg это потребовало бы использования сторонних плагинов (излишние шорткоды и нагрузка на сервер), как в настоящее время имеет место с так называемым редактором WordPress «Classic».
Для целей этой статьи и обучения, знайте: Gutenberg не меняет работу WordPress по своей сути. Это на 99% изменение пользовательского интерфейса редактора. Нажав кнопку «Опубликовать», вы все равно сохраняете содержимое записи в post_content— просто теперь есть намного больше возможностей для создания пользовательского опыта написания и редактирования контента.
2. SPA
Gutenberg — это одностраничное приложение в WordPress.
В одностраничном приложении ( SPA ) приложение выполняется при загрузке одной страницы, и последующие взаимодействия на 100% управляются запросами JavaScript и Ajax. Gutenberg (в настоящее время) не влияет на какую-либо часть WordPress за пределами редактора. По сути, Gutenberg заменяет WYSIWYG редактор TinyMCE на SPA. Это означает, что написание контента в Gutenberg стало быстрым и удобноым.
Важные ресурсы
- Репозиторий Gutenberg на GitHub — в основном для поиска проблем, когда они возникают во время разработки, чтобы увидеть, были ли они уже поданы.
- Справочник Gutenberg — перевод документации Gutenberg.
Настройка окружения
- Настройте локальную установку WordPress.
- Активируйте любую тему.
- Создайте новый пост.
У вас должно быть что-то похожее на это:
Как показано на изображении выше, при наборе /открывается список блоков.
Обратите внимание на панель справа с вкладками для «Документа» и «Блока». Вкладка «Блок» называется «Инспектор блоков» и предоставляет удобную область для определенных параметров блока, например, для блока абзаца:
После того, как вы создали публикацию, заполненную блоками из пяти элементов различного типа, сохраните и опубликуйте публикацию, а затем посмотрите на нее из внешнего интерфейса.
При отключенном редакторе Gutenberg содержимое записи будет выглядеть примерно так:
Все эти комментарии — то блоки. Они соответствуют блокам, которые вы выбрали при создании поста.
Под капотом блоки — это фрагменты HTML, которые можно узнать по окружающим их комментариям HTML. В приведенном выше примере вы заметите несколько имен блоков, то wp:block-name. Когда мы указали некоторые параметры настройки в инспекторе блоков, они были сохранены вместе с идентификатором блока, так что теперь, когда мы снова активируем Gutenberg, настройки не будут потеряны; они сохраняются вместе с самим определением блока.
Теперь давайте посмотрим, откуда берутся эти стили. Когда мы проверяем блок абзаца из внешнего интерфейса, мы видим несколько встроенных стилей — результат опций, выбранных в инспекторе блоков, — а также некоторые структурные стили из файла style.css).
Теперь попробуйте осмотреть этот блок абзаца в представлении редактора. Вы должны увидеть тот же набор встроенных стилей и тот же селектор p.has-background, примененный к блоку в представлении редактора.
Блоки могут иметь общие стили между внешним интерфейсом темы и редактором. До Gutenberg у нас были стили или интерфейсные стили, и мы могли отдельно ставить в очередь editor-style.cssдля добавления CSS в область администрирования WordPress. Однако теперь наши блоки по умолчанию делят стили между внешним интерфейсом и представлением редактора.
Где JavaScript?
Нам понадобится JavaScript, чтобы создать блок в Gutenberg . Итак, давайте сделаем блок. Это тема следующего поста в этой серии.
