19 особенностей Гуттенберга, о которых вы могли не знать

Приветствую вас, обожатели WordPress!

Сегодня, в этой статье, я бы хотел поговорить о некоторый особенностях блочного редактора Gutenberg, о которых вы скорее всего могли и не знать, но должны были!

Давайте я сразу и перейду к сути статьи!

Гуттенберг вышел довольно давно, но вы обнаружите, что все еще есть много новых навыков, которые нужно изучить, и возможностей, которые нужно открыть.

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

Хотя Гуттенберг продвигает себя как более простой способ создания веб-сайтов, чем классический редактор WordPress, в нем все еще есть кривая обучения.

Однако откройте для себя все эти скрытые функции, и вы будете на верном пути к овладению инструментом.

Давайте приоткроем завесу над тайнами Гуттенберга.

Вот 19 функций Гуттенберга, о которых вы, возможно, еще не знаете, и как начать их использовать.

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

Возможности Гуттенберга, о которых вы, возможно, не знали

Особенности в этом посте не о том, как изменился макет редактора и что нового.

Это больше о скрытых функциях, которые заставят вас сказать «ого, это круто!».

И первый из них действительно меняет правила игры.

1. Команды с косой чертой

Начнем с того, что у нас есть чит, который очень легко пропустить, но он революционизирует ваш опыт написания.

Вы когда-нибудь работали над чем-то в редакторе постов, и вам пришлось полностью разрушить свою подачу материала, чтобы найти нужный вам блок?

Больше не надо этого делать!

Просто введите / (слэш), и мгновенно должно появиться выпадающее меню с блоками Гуттенберга.

Хотите добавить изображение?

Попробуйте «/image».

Заголовок? «/heading».

Это так просто.

Больше не нужно прекращать писать, чтобы иметь дело с неуклюжим интерфейсом.

Просто введите косую черту, и вы сэкономите драгоценные секунды.

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

2. Режим подсветки и полноэкранный режим

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

Вы можете включить и отключить оба из них, нажав на три точки в правом верхнем углу экрана.

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

Если интерфейс вас перегружает, обязательно включите его.

В полноэкранном режиме отключаются как верхняя, так и левая панели инструментов администратора (вы также можете отключить правую панель вручную), оставляя вас наедине со своим контентом.

Это действительно помогает сосредоточиться на работе.

Вы можете включить один или оба из них одновременно.

3. Краткое содержание документа

Навигация по длинным сообщениям в редакторе может быть затруднена.

К счастью, у Гуттенберга есть функция схемы вашего контента.

Найдите обведенный i в верхнем левом углу, который помечен как «Структура содержимого» или просто «Подробности».

Щелкните его, и вместе с основной информацией, такой как количество слов и абзацев, вы увидите структуру документа.

Это показывает ваши заголовки, правильно структурированные.

Щелкните любой из этих заголовков, и вы перейдете прямо к этому разделу.

Навигация стала намного проще.

4. Многоразовые блоки

Вы всегда заканчиваете статью одним и тем же абзацем?

Или обнаружите, что повторно используете одну и ту же галерею, цитату или таблицу в разных местах на вашем сайте?

Многоразовые блоки для вас.

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

Чтобы сохранить один блок, щелкните его, коснитесь трех точек на панели над ним и добавьте его в свои собственные блоки.

Дайте ему имя, и все готово.

Это идеально, если вы всегда включаете отказ от ответственности, плагины для социальных сетей или что-то подобное в конце своего сообщения.

Вы можете найти блоки многократного использования в меню блоков (кнопка с плюсом в верхнем левом углу) в разделе «Многоразовые».

Что, если вам нужно сразу несколько блоков? Без проблем.

Вы можете сохранить абзац и изображение, разделитель или что-то еще.

Для этого выберите несколько блоков, щелкнув и перетащив или удерживая клавишу «Shift» и щелкнув блоки, которые вы хотите сохранить.

Затем вы можете сохранить свой многоразовый блок в трехточечном меню, как обычно.

5. Скопируйте и вставьте из Google Документов контент

Это одна из функций Гуттенберга, которую легко упустить, потому что это даже не вариант.

Если вы когда-либо пытались копировать и вставлять контент на разные платформы (например, от Word до текстового редактора веб-сайта), вы знаете, что чаще всего текст превращается в беспорядок.

И нет, если вы пишете в Google Документах.

Просто вставьте свой контент, и все красиво разместится в своем собственном блоке.

Абзацы, изображения и все остальное должны отображаться правильно.

Я знаю, что это работает, потому что я фактически скопировал эту самую статью из Google Docs.

В старом редакторе вставка из Google Docs обычно была не такой красивой.

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

6. Перетаскивайте изображения с рабочего стола

Знаете ли вы, что вы можете перетаскивать изображения прямо в Гуттенберг, и они автоматически попадут в вашу медиатеку?

Больше нет необходимости иметь дело с медленным процессом загрузки изображений.

Все, что вам нужно сделать, это захватить изображение на рабочем столе или в проводнике Windows, а затем перетащить его оттуда прямо в окно Гуттенберга.

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

7. Предварительный просмотр блочного преобразования

Гуттенберг обладает способностью преобразовывать один блок в другой.

Например, вы можете превратить абзац в цитату, изображение в карусель или что-нибудь еще совместимое.

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

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

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

8. Глобальные стили

Хотите попробовать что-нибудь немного экспериментальное?

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

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

Глобальные стили позволяют изменять визуальные аспекты вашего сайта прямо в редакторе Гуттенберга.

Они видны как во фронт-энде, так и на бек-энде сайта и являются универсальными, за исключением блоков с индивидуальным стилем.

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

Ознакомьтесь с моим обзором Twenty Twenty-One, чтобы узнать, как протестировать эту функцию.

9. Добавьте медиа с помощью копирования и вставки

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

Они будут автоматически вставлены как доступный для просмотра контент.

Например, сообщения в социальных сетях отображаются как правильные вставки, в новостных статьях отображается их изображение и образец текста, а видео можно воспроизводить.

Это позволяет сэкономить время при написании статей.

Нет необходимости вставлять их вручную.

10. Надежные варианты шаблонов блоков

Шаблоны блоков работают аналогично многоразовым блокам.

Разница в том, что они предустановлены вместе с вашей темой или могут быть добавлены в качестве функций, загрузив плагины Gutenberg.

Темы, такие как Twenty Twenty-One, также могут иметь свои собственные шаблоны блоков.

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

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

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

Они похожи на шаблоны веб-страниц, но имеют небольшой размер.

Разработчики добавили довольно много шаблонов в стандартный Gutenberg, как он есть.

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

11. Вертикальное расположение кнопок

Ранее блоку кнопок не хватало большой настройки, особенно если вы хотели, чтобы ваши кнопки располагались в столбце, а не в строке.

Было довольно неприятно заставлять ваш макет выглядеть так, как вы хотели.

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

Это похоже на то, как блок навигации обрабатывает это, поэтому он должен быть знаком вам.

12. Блочные темы

Это для редакторов тем.

Блочные темы — это специализированные темы WordPress, полностью основанные на блочной системе.

Полное редактирование сайта по-прежнему является экспериментальной функцией, но вы можете начать играть с ней прямо сейчас.

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

Вам также необходимо включить полное редактирование сайта в «Gutenberg — Experiments».

Будьте осторожны и убедитесь, что вы делаете это на тестовом сервере, а не на своем реальном сайте.

13. Блок навигации

Одна из функций Гуттенберга, которую вы, возможно, пропустили — это блок навигации.

Это позволяет вам создавать навигационное меню на основе уже настроенных вами или заполненных новыми ссылками по вашему выбору.

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

14. Варианты блоков

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

Они есть только в нескольких блоках, например в блоках столбцов.

После вставки блока столбцов у вас есть возможность выбрать один из нескольких различных стилей.

Теперь вы можете легко переключаться между этими вариациями.

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

15. Виджеты работают как блоки

Помните «Внешний вид — Виджеты», где вы управляете такими областями, как боковая панель и подвал сайта?

Он только что подвергся капитальному ремонту.

Теперь вместо областей виджетов вы работаете с областями блоков.

Это означает, что такие области, как боковая панель, больше не исключаются из новой системы блоков.

Теперь все работает вместе, поэтому легко вставлять блоки в области виджетов на вашем сайте.

Конечно, это зависит от вашей темы.

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

Просто обратите внимание, что есть некоторые ошибки со старыми сторонними виджетами из определенных плагинов.

Не забывайте сообщать обо всех обнаруженных ошибках.

16. Медиа и текст

Один из часто упускаемых из виду блок — это блок «Медиа и текст».

Это простой способ, который позволяет вам добавлять медиа (например, изображение или видео) и текст рядом.

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

Найдите его в разделе «Элементы макета» на экране «Добавить блоки» или просто введите «Медиа», и он должен появиться.

Вы всегда можете попробовать команды с косой чертой, чтобы вызвать это прямо сейчас!

17. Преобразование нескольких блоков в столбцы

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

Раньше вам приходилось копировать и вставлять свой контент в новый блок столбцов, но теперь это просто, как щелчок, просто преобразовать ваши блоки в столбцы.

Все, что вам нужно сделать, это выделить нужные блоки мышью или щелкнуть с зажатой клавишей «Shift».

Затем откройте меню и щелкните, чтобы преобразовать его в блок столбцов.

Они должны равномерно разделиться на нужное количество столбцов.

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

18. Блок покрытия

Блок покрытия — малоиспользуемый, но великолепный способ сделать ваши сообщения или страницы популярными.

Он работают так же, как изображение обложки, которое вы назначаете сообщениям в блоге, но с гораздо большим количеством настроек.

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

Хотя вы можете использовать его по назначению, как изображение обложки для сообщения, на практике он может делать все, что угодно.

Продемонстрируйте рекламное искусство, объедините несколько обложек с блоком столбцов для получения интересного эффекта или просто немного украсьте свою страницу.

С этим блоком можно сделать одну интересную вещь — создать повторяющийся фоновый узор.

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

Это лишь одна из многих уникальных настроек, которые может предложить блок «Cover».

Поэкспериментируйте и посмотрите, что вы можете с этим сделать!

19. Блок запросов

И последнее, но не менее важное — это блок запросов.

Сначала вы можете быть сбиты с толку тем, что делает этот блок.

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

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

Наконец, у вас есть настраиваемый список ваших сообщений, которые вы можете вставить на любую страницу, которую хотите, или даже в области виджетов, такие как боковые панели.

Имейте в виду, что в настоящее время вы можете использовать этот блок только с экспериментальными темами, такими как Twenty Twenty-One.

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

Какие функции Гуттенберга я пропустил?

Гуттенберг стремится сделать редактирование ваших записей и страниц WordPress (а вскоре и всего вашего сайта) полностью визуальным процессом.

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

Надеюсь, эта статья помогла вам разобраться в некоторых функциях Gutenberg, о которых вы, возможно, все еще не знали.

Следуйте моим советам о том, как максимально использовать их, и вы быстро станете мастером Гуттенберга.

Сообщите нам в разделе комментариев ниже, какие из них вы скоро будете использовать!

А я на этом буду заканчивать — до скорых встреч, заходите чаще и берегите себя!