WordPress.org
Русский
Gutenberg
Описание
«Gutenberg» — это кодовое название совершенно новой парадигмы для создания сайтов на WordPress, которая призвана произвести революцию во всём издательском деле так же, как Гутенберг произвел революцию в печатном слове. Проект состоит из четырех этапов, которые затронут основные части WordPress — редактирование, персонализацию, совместную работу и многоязычность.
Редактор блоков представляет модульный подход ко всем частям вашего сайта: каждый фрагмент содержимого в редакторе, от абзаца до галереи изображений и заголовка, является отдельным блоком. И точно так же, как физические блоки, блоки WordPress можно добавлять, упорядочивать и переставлять, позволяя пользователям WordPress создавать мультимедийный контент визуально интуитивно понятным способом — и без обходных путей, таких как шорткоды или произвольный HTML.
Редактор блоков впервые стал доступен в декабре 2018 года. Мы постоянно работаем над улучшением его работы, создаем все больше и больше блоков и закладываем основу для будущих этапов работы. Каждый выпуск WordPress поставляется с готовыми стабильными функциями из нескольких версий плагина Gutenberg, поэтому вам не нужно использовать плагин, чтобы извлечь пользу из работы, проделанной здесь. Однако, если вы более авантюрны и технически подкованы, плагин Gutenberg предоставит вам самые последние и лучшие возможности, так что вы можете присоединиться к нам в тестировании новейших функций, начать играть с блоками и, возможно, вдохновиться на создание своих собственных.
Узнать больше
Пользовательская документация: смотрите документацию редактора WordPress для получения подробных инструкций по использованию редактора в качестве автора, создающего записи, страницы и многое другое.
Документация для разработчиков: изучите документацию для разработчиков для получения обширных руководств, документации и ссылок на API по расширению редактора.
Участникам: Gutenberg является проектом с открытым исходным кодом и приветствует всех участников от тех кто занимается кодом до дизайнеров и специалистов по документации. Смотрите руководство участника со всеми подробностями о том, как вы можете помочь.
Центр разработки проекта Gutenberg находится по адресу https://github.com/wordpress/gutenberg. Обсуждение проекта ведется на Make Core Blog и в канале #core-editor в Slack, включая еженедельные встречи. Если у вас нет аккаунта в Slack, вы можете зарегистрироваться здесь.
Часто задаваемые вопросы
Как отправить отзыв или получить помощь при обнаружении ошибки?
Мы будем рады увидеть ваши отчёты об ошибках, предложения по функционалу и любые другие отзывы! Перейдите на страницу запросов GitHub, чтобы посмотреть существующие или создать новый. Хотя мы попытаемся сортировать проблемы, описанные здесь на форуме плагинов, вы получите более быстрый ответ (и уменьшите дублирование), описав все детали в репозитории GitHub.
Должен ли я использовать плагин Gutenberg, чтобы получить доступ к этим функциям?
Это зависит от того, какую функцию вы хотите использовать! Имейте в виду, что каждая версия WordPress после 5.0 поставляется с плагином Gutenberg, автоматически содержащим новые функции и изменения. Если вам нужны самые современные функции, включая экспериментальные, вам придется использовать плагин. Вы можете прочитать здесь о том, подходит ли вам использование плагина.
Где я могу увидеть, какая версия плагина Gutenberg включены в тот или иной выпуск WordPress?
Просмотрите версии WordPress, чтобы ознакомиться с таблицей, показывающей, какая версия Gutenberg’а включена в тот или иной выпуск WordPress.
Какие дальнейшие планы проекта?
Четыре фазы проекта: редактирование, настройка, совместная работа и многоязычность. Подробнее о проекте и фазах вы можете узнать из выступлений Мэтта в его докладах о состоянии Word для 2020 года, 2019 года и 2018 года. Кроме того, вы можете следить за еженедельными заметками о релизах и ежемесячными обновлениями плана проекта на блоге Make WordPress Core для получения более актуальной информации о том, что происходит сейчас.
Все о Gutenberg WordPress. Плюсы и минусы нового редактора
Бессменный визуальный редактор, с которым привыкли работать пользователи по всему миру на протяжении уже долгих лет, скоро потеснит новый — Gutenberg WordPress. Давайте разберем все плюсы и минусы, потому что отзывы в инете весьма неоднозначны.
Gutenberg WordPress и будущее самой популярной CMS
«Сделать процесс добавления контента простым и понятным» — главная цель, которую ставила перед собой большая команда разработчиков.
А вот так отреагировали на Gutenberg в официальном каталоге WordPress.org.
В общем, давайте смотреть, что там не так. Почему реакция столь бурная.
Что такое Gutenberg?
Gutenberg — это новый редактор для WordPress. Он назван в честь Иоганна Гутенберга, первого немецкого печатника, который в 1440-х годах изобрел печатную машину с подвижными литерами (Википедия).
В текущем визуальном редакторе используются шорткоды и HTML, что приводит в ужас новичков: «Ой, че-то непонятно.. ну его нафиг».
Так вот разработчики и решили сделать Gutenberg, который будет понятен всем.
Уже сейчас, достигнув отметки в 100000 активных установок, плагин стал доступным в виде редактора, который можно установить в админке.
Как установить Gutenberg?
Либо сразу через админку, либо как обычный плагин из официального каталога WordPress.org.
Если вы не знаете, как установить плагин, посмотрите наше видео о 3-х способах установки плагина.
Изучаем редактор Gutenberg WordPress
Теперь под элементами Страница и Запись есть отдельные ссылки для редактирования в привычном редакторе.
Важно: с выпуском версии WordPress 5.0 Gutenberg станет редактором по умолчанию. Но вы все-равно сможете использовать классический редактор.
А вот 2 способа как отключить Gutenberg: с помощью плагина Classic Editor или Disable Gutenberg.
Как видим, в административной панели появилась новая вкладка Gutenberg, в которой расположены следующие пункты: демо, поддержка, обратная связь и документация.
Уже по Демо понятно, насколько отличается новый редактор.
Если мы сравним Gutenberg WordPress и текущий визуальный редактор, то увидим, насколько больше окно для записей у Gutenberg, особенно на небольших экранах. Для людей, работающих за ноутбуком, это, безусловно, удобно.
В новом редакторе вы можете нажать колесико «Настройки публикации», чтобы удалить правую боковую панель.
Чтобы переключиться между режимом визуального редактора и текстовым редактором (кодом), в верхнем правом углу можно нажать иконку с 3-мя точками — появится выпадающее меню.
Это позволяет создавать блоки непосредственно из режима текстового редактора.
Если вы наведете курсор на текстовый блок, то слева появятся стрелки, с помощью которых можно будет переместить текстовый блок вверх или вниз.
А справа появится иконка с 3-мя точками и выпадающее меню со следующими возможностями:
Gutenberg также круто выглядит с мобильного — теперь добавление текста или изображения стало еще удобнее.
Еще один важный момент.
Похоже, Gutenberg избавился от тесной интеграции с плагином TinyMCE, который увеличивал возможности родного визуального редактора.
Теперь привычную панель инструментов заменили на одну кнопку Вставить (иконка Плюс в левом углу).
Вот что говорит об этом Мэтт Мулленвег.
«Сейчас, чтобы работать с разными областями WordPress, вам нужно изучить шорткоды, виджеты, да тот же TinyMCE.. И пользователи задаются вопросом, почему они не могут использовать единые элементы везде и не тратить лишнее время. То, что мы пытаемся сделать — это чтобы вам было достаточно одного раза узнать, как, например, работает блок изображения. Как только вы узнали, вы сможете добавлять блок изображения по одному и тому же принципу везде: на странице, в записи, в сайдбаре».
И вот мнение Эндрю Робертса, руководителя команды TinyMCE.
«С самого начала я был в команде Gutenberg WordPress. Это совместные усилия. Поскольку TinyMCE управляет большинством блоков, например, Таблицей, скорее всего, мы оставим его для дальнейшего использования.
Кроме того, блок Classic Text по существу является редактором TinyMCE… Но все, конечно, зависит от фидбэка пользователей..»
Вернемся к блокам Gutenberg.
Блок таблицы и блок текстовых столбцов
Теперь создавать простые таблицы стало намного проще — вы можете вставлять их с помощью блоков и редактировать как угодно.
А раньше это можно было делать с помощью стороннего плагина или HTML кода.
Разработчики также реализовали возможность добавлять адаптивные текстовые колонки. Вы можете выбирать количество, передвигая курсор в правой боковой панели.
Но пока сам элемент помечен Beta.
Я вообще не сразу додумалась, как менять количество колонок:)
Блок HTML с функцией предпросмотра
Вы можете вставить код и сразу посмотреть результат.
Вставка изображений
Вы можете перетаскивать изображения без переходов и нажатия кнопки Добавить изображение, как это происходит в визуальном редакторе.
И, конечно, можно добавлять CSS стили.
Недавние блоки
Чтобы ускорить процесс создания сайта, разработчики добавили функцию Недавние блоки.
Помните, чуть выше мы разбирали элемент Иконку с 3-мя точками, где был параметр Reusable Blocks?
Вы можете включить любой элемент в Недавние блоки. Удобно.
И при добавлении нового блока через кнопку Вставить появится раздел Reusable blocks.
Форматирование текста
Вы можете настраивать размер шрифта, цвет шрифта и фона, делать заглавную букву большой.
Появилась даже размерная сетка текста:) S, M, L, XL=14, 16, 36, 48.
Структура текста и количество слов и блоков
Разработчики также добавили быстрый доступ к просмотру структуры текста.
На панели сверху нажмите иконку Информация — перед вами появится структура документа: количество слов, заголовков, параграфов и пр.
Поддержка анкоров
Еще одна функция, которую вы теперь можете использовать в новом редакторе — это якори. То, чего нет в визуальном редакторе. Добавление якорей позволяет вам напрямую ссылаться на определенный раздел или заголовок в статье.
Кнопки
В редакторе также есть возможность добавления кнопки. Теперь призыв к действию можно будет делать без использования HTML, плагина, шорткода.
Параметры вставки
Gutenberg упростил вставку медиаконтента с YouTube, SoundCloud, Flickr, Twitter и пр.
В визуальном редакторе для многих новичков это было весьма проблематично, потому что об этом нигде не упоминалось.
А теперь давайте посмотрим, что думают о редакторе пользователи.
Мнения о Gutenberg WordPress
Плюсы редактора Gutenberg
Минусы редактора Gutenberg
И вот несколько минусов. Хотя редактор до сих пор находится на стадии тестирования, поэтому многие из этих вещей, вероятно, будут исправлены или добавлены.
Личное мнение, если вам интересно.
Ехали мы как-то летом на поезде Санкт-Петербург-Киев. Поездка оказалась спонтанной, билеты были в плацкарт.
Ладно, чего там, потерпим.
Но, как оказалось, терпения хватило совсем на чуток. Уже в поезде договорились с проводником и перешли в купе. Ночь прошла в купе.
Так вот, с утреца, на остановке Гомель, я встречаю мужичка, бывшего соседа по плацкарту. Спрашиваю:
– Та там п…..ц, – отвечает мужичок.
В целом, очень похоже на Gutenberg WordPress.
Но, как известно, все приходит с опытом. Может через полгода мы уже и забудем о нашем привычном и простом редакторе.
Вы уже попробовали Gutenberg? Интересно услышать ваше мнение:) Пишите в комментариях.
Вам может понравиться:
Инструкция по оптимизации статьи с плагином Yoast SEO: объяснение всех подсказок плагина + весь процесс оптимизации на примере!
Я очень надеюсь, что статья была для вас полезной.
Если есть вопросы, пишите в комментариях.
Если вам понравилась статья, пожалуйста, сделайте репост:)
И подписывайтесь на нас в Facebook, Instagram и Twitter.
Обзор редактора блоков Gutenberg
Когда появился Gutenberg, разработчики сайтов WordPress поделились на два лагеря – любители TinyMCE (предыдущий редактор), которые были против нового редактора, и те разработчики, которые с удовольствием начали использовать обновление при работе с сайтами. Почему любителям старого редактора Gutenberg не понравился и почему это обновление – настоящий прорыв в мире разработки сайтов WordPress- разберемся в этом обзоре.
Что такое Gutenberg
Gutenberg – это относительно новый блочный редактор, который во много раз расширяет возможности пользователя при создании страниц сайта и добавлении контента. Разработчики добавили обновление с версии WordPress 5.0. Основная особенность этого продукта заключается в том, что вы сразу добавляете элементы сайта и расставляете их на нужные места методом Drag & Drop. Такой же принцип используется при работе с конструкторами страниц, вроде Elementor или WP Page Builder, но в случае с Gutenberg вам не нужно скачивать дополнений, так как этот редактор уже встроен в систему. При создании продукта разработчики старались сделать его таким образом, чтобы пользователям было проще с ним работать.
Почему Gutenberg
Редактор был назван в честь мастера Иогана Гутенберга. Этот мастер создал печатный станок, который стал прорывом в типографии. Печатный станок позволил выпускать книги гораздо быстрее и в большем количестве, чем раньше. Разработчики ассоциируют свое творение с этим станком, так как Gutenberg считается прорывом в мире WordPress. Благодаря нему при создании страниц можно использовать гораздо меньше кода и дать больше воли творческой фантазии. Также это обновление значительно ускоряет работу с макетом и расширяет возможности пользователей во много раз.
Основные преимущества и характеристики Gutenberg
В принципе, сравнивать Gutenberg с прежним редактором – не самый лучший выбор. Все-таки, это не просто два редактора – это два совершенно разных подхода к редактированию контента на сайте. Но все же можно выделить некоторые преимущества, которые имеет Gutenberg перед TinyMCE. Это следующие пункты:
Некоторые из этих особенностей будут подробно расписаны в этом обзоре.
Полностью обновленный дизайн Gutenberg
Дизайн нового редактора по всем параметрам отличается от предыдущего. Большую часть экрана занимает контент будущей страницы. Вместо старых полей, в которые нужно добавлять контент, вы получаете полноценное полотно страницы. На это полотно вы можете добавлять элементы, при этом сразу задавая им нужные параметры и расставляя так, как они должны отображаться на готовом сайте. Таким образом, вы сразу будете видеть конечный результат и процесс создания новой страницы или добавления контента займет гораздо меньше времени, чем при работе со старым редактором.
Блочная система как способ ускорить разработку сайта
Основное, что отличает Gutenberg от старого редактора – разработчики добавили блочную систему. Это означает, что каждый элемент страницы, будь то кнопки или галерея, становится блоком. Из-за того, что каждый отдельный элемент воспринимается редактором как блок, вы можете добавлять на сайт любые типы контента (изображения, видео, аудио, кнопки и т.д.)
Самое главное в этой системе то, что она упрощает работу с контентом страницы. Чтобы поместить текст определенным образом, выровнять картинки или поместить их в определенные колонки, не нужно углубляться в HTML или CSS. Благодаря функциям, которыми располагает Gutenberg, можно быстро делать даже макеты высокой сложности. Вы можете просто перемещать блоки туда, куда вам нужно, пока не найдете их оптимальную расстановку.
Настройка элементов происходит достаточно просто. В боковой панели с правой стороны можно выбрать нужные параметры для блоков. У каждого из них имеются свои определенные параметры.
Если вам недостаточно тех блоков, которые предоставляет Gutenberg, из репозитория WordPress можно скачать расширения, которые добавят необходимые элементы в редактор.
Схожесть с визуальными конструкторами
Если сравнивать функционал Gutenberg, то сравнивать его нужно не с редакторами, а с системами для построения страниц вроде Elementor, SiteOrigin и другими. Функции редактора позволяют делать структуру страницы без использования конструкторов. Полотно для размещения контента – это уже элемент визуального конструктора. Это значит, что создание страницы будет проходить гораздо проще и быстрее. Даже если вы до этого никогда не работали с панелью администратора, вы сможете быстро разобраться со всеми функциями редактора.
Быстрый доступ к блокам
Для ускорения работы с макетом и выбора необходимых блоков разработчики добавили две важные функции – поиск блоков и панель с часто используемыми блоками контента. При раскрытии панели со всеми элементами, в первую очередь вы видите панель поиска, которая позволяет найти любой блок контента по его названию. Просто начинайте вводить ключевые слова, и система автоматически будет подбирать блоки под ваш запрос. Под поисковой строкой располагаются блоки, которые чаще всего были задействованы при редактировании или создании страниц.
Для более удобного доступа разработчики разделили блоки на несколько групп:
Форматирование блоков
Чтобы вызвать панель форматирования блоков, нужно кликнуть мышью на область с левой стороны от контента. В зависимости от вида блока, изменяются и инструменты, которые используются для его редактирования. Например, если взять текстовый блок, то к нему можно будет добавить ссылки, изменить начертание текста и выравнивание.
В правом верхнем углу экрана есть шестеренка, если кликнуть на нее, откроется панель с дополнительными настройками редактирования. Так же, как и в случае с панелью форматирования блоков, здесь отображаются те настройки, которые характерны для выбранного блока.
Справа от шестеренки с дополнительными настройками редактирования блоков можно заметить три точки. Нажав на них, вы откроете меню, которое поделено на три группы:
Добавление собственных CSS стилей
Иногда возможностей редактора может быть недостаточно, поэтому для каждого блока предусмотрено добавление CSS стилей. Это дает возможность создавать основу страницы при помощи редактора, а стилизовать ее через отдельный CSS файл. Также, с помощью этой функции вы можете изменять любые элементы страницы под потребности бренда. Например, базовые функции Gutenberg не предусматривают изменение шрифта кнопок, поэтому его можно изменить посредством дополнительных CSS стилей.
Большое количество элементов страницы
Gutenberg позволяет добавлять на страницу любые типы элементов. Это делает его похожим на визуальные конструкторы сайтов. Из основных типов контента, вы можете добавить следующие элементы:
Структура записи
При создании записи система автоматически определяет заголовки по тегам. Увидеть их можно в боковой панели. Таким образом, получается определенная схема документа, которая упрощает работу и навигацию по записям.
Чтобы переместиться в определенную часть статьи, нужно кликнуть на заголовок. Удобство этой опции больше всего заметно при работе с большими текстами, а в особенности, при редактировании текста на мобильных устройствах, где чтобы добраться до нужной части текста, нужно долго скролить экран.
Добавление якорных ссылок (анкоров)
Если статья очень длинная, пользователю будет трудно ориентироваться по ней. Поэтому стоит добавить анкоры на страницу. Они позволят быстрее переходить к определенным частям записи, без нужды постоянно скролить. Лучше всего размещать якорные ссылки в заголовках. Сделать анкор в редакторе Gutenberg достаточно просто. Нужно просто выбрать заголовок нужного блока, затем в боковой панели появится поле для якоря, в которое и нужно поместить текст для ссылки.
Виджеты
Помимо большого количества возможностей, разработчики добавили пять основных виджетов, которые добавляют еще больше вариантов отображения контента и помогают сделать сайт более уникальным. Вот список этих виджетов:
Мобильная версия Gutenberg
Если вам срочно нужно что-то отредактировать на сайте, но нет доступа к ноутбуку или компьютеру, это можно сделать и со смартфона. Мобильный редактор выглядит почти также как и настольный. Для того чтобы вызвать панель форматирования, нужно просто коснуться пальцем нужного блока. Единственный минус, который очень сильно мешает работе с макетом – слишком маленькие размеры элементов настройки. Также следует заметить, что панель с дополнительными настройками разворачивается на весь экран из-за чего необходимо закрывать ее каждый раз, когда нужно посмотреть изменения. Несмотря на эти небольшие неудобства, сам факт того, что редактировать сайт можно даже с телефона – уже прорыв. Так как это избавляет от необходимости постоянно таскать с собой ноутбук и позволяет добавлять новые функции в любое время.
Доступность TinyMCE
Несмотря на преимущества в работе, которые предоставляет Gutenberg, некоторые вебмастера все же предпочитают использовать старый редактор. Хорошо, что разработчики подумали об этом и оставили возможность использовать TinyMCE.
Этот редактор включен в набор блоков Gutenberg и называется «Классик «. При его выборе появится блок с интерфейсом старого редактора. Это поможет быстрее привыкнуть к Gutenberg и создавать сайты без лишних трудностей.
Также эта функция помогает работать с постами, которые были сделаны еще до Gutenberg. Это означает, что все старые записи будут отображаться так же, как они выглядели до этого. Помимо этого, вы сможете редактировать их как блоки «Классик «.
Поговорим об адаптивности
Если говорить об адаптивности, то следует заметить, что Gutenberg не позволяет создавать адаптивные сайты. Это обосновывается одной важной причиной – это просто редактор блоков, а не полноценный конструктор страниц. Соответственно, чтобы сайт был адаптивным, нужно задавать параметры адаптивности через код, либо использовать конструкторы страниц для WordPress.
Если Gutenberg вам не подходит
Gutenberg имеет очень большой функционал и выводит WordPress на новый уровень. Но что, если все-таки вам не подходит этот редактор? Такие случаи бывают. Это не говорит о том, что Gutenberg – плохой редактор. Просто многим разработчикам достаточно и тех настроек и возможностей, который предоставляет старый редактор. И если вам достаточно функционала старого редактора, а также вы не хотите тратить время на обучение работе с новым редактором, можно выбрать один из двух путей – использовать блок «классик « в Gutenberg или установить расширение «Classic Editor «.
Расширение достаточно быстро устанавливается, как и все остальные плагины WordPress и после установки и активации полностью восстанавливает старую панель редактирования контента сайта.
Недостатки Gutenberg
Несмотря на то, что Gutenberg – это прорыв, все же он имеет и свои недостатки. Главный недостаток заключается в том, что если вы перешли на него со старого редактора, то будет трудно привыкнуть к новому интерфейсу. Старый редактор был больше похож на Microsoft Word, а новый работает по совершенно другому принципу. Gutenberg имеет большое количество функций, но проблема в том, что их поиск может вызвать затруднения. Например, чтобы просто удалить блок, нужно нажать на значок “скрыть параметр” (он находится на плавающей панели инструментов) и там выбрать пункт “удалить блок”. Это достаточно распространенная опция, но почему-то разработчики решили спрятать ее так далеко.
Команда разработчиков сделала Gutenberg максимально совместимым со всеми темами и плагинами, которые использовались до него. Но все равно некоторые старые темы и дополнения могут поломаться при использовании их вместе с Gutenberg.
Заключение
Это был обзор нового редактора блоков WordPress – Gutenberg. Можно сказать, что этот редактор действительно стал прорывом в области создания сайтов на WordPress. Конечно, многие разработчики предпочитают старый метод редактирования и добавления контента на сайт. Ведь это не просто несколько нововведений, а полное изменение подхода к работе с макетом страницы. В целом, Gutenberg можно считать удачным обновлением, которое значительно расширило функционал WordPress и сделало разработку сайтов более простой и доступной.
