Изучаем Gutenberg — 2 часть — Что же такое Gutenberg

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

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 стало быстрым и удобноым. 

Важные ресурсы

  1. Репозиторий Gutenberg на GitHub — в основном для поиска проблем, когда они возникают во время разработки, чтобы увидеть, были ли они уже поданы.
  2. Справочник Gutenberg — перевод документации Gutenberg.

Настройка окружения

  1. Настройте локальную установку WordPress.
  2. Активируйте любую тему. 
  3. Создайте новый пост.

У вас должно быть что-то похожее на это:

Как показано на изображении выше, при наборе /открывается список блоков. 

Обратите внимание на панель справа с вкладками для «Документа» и «Блока». Вкладка «Блок» называется «Инспектор блоков» и предоставляет удобную область для определенных параметров блока, например, для блока абзаца:

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

При отключенном редакторе Gutenberg содержимое записи будет выглядеть примерно так:

Все эти комментарии — то блоки. Они соответствуют блокам, которые вы выбрали при создании поста.

Под капотом блоки — это фрагменты HTML, которые можно узнать по окружающим их комментариям HTML. В приведенном выше примере вы заметите несколько имен блоков, то wp:block-name. Когда мы указали некоторые параметры настройки в инспекторе блоков, они были сохранены вместе с идентификатором блока, так что теперь, когда мы снова активируем Gutenberg, настройки не будут потеряны; они сохраняются вместе с самим определением блока.

Теперь давайте посмотрим, откуда берутся эти стили. Когда мы проверяем блок абзаца из внешнего интерфейса, мы видим несколько встроенных стилей — результат опций, выбранных в инспекторе блоков, — а также некоторые структурные стили из файла style.css).

Теперь попробуйте осмотреть этот блок абзаца в представлении редактора. Вы должны увидеть тот же набор встроенных стилей и тот же селектор p.has-background, примененный к блоку в представлении редактора.

Блоки могут иметь общие стили между внешним интерфейсом темы и редактором. До Gutenberg у нас были стили или интерфейсные стили, и мы могли отдельно ставить в очередь editor-style.cssдля добавления CSS в область администрирования WordPress. Однако теперь наши блоки по умолчанию делят стили между внешним интерфейсом и представлением редактора.

Где JavaScript?

Нам понадобится JavaScript, чтобы создать блок в Gutenberg . Итак, давайте сделаем блок. Это тема следующего поста в этой серии.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll to top