Код, предварительно отформатированный и абзац блоков Гутенберга в WordPress —

Редактор блоков Gutenberg позволяет добавлять контент на ваши страницы и записи в WordPress. Существует множество различных типов блоков, которые вы можете использовать для создания и оформления вашего контента. Однако некоторые блоки имеют схожий характер, что пользователи путаются, где именно использовать соответствующий блок. В этой статье мы рассмотрим три наиболее распространенных типа блоков, доступных в редакторе блоков Gutenberg: блоки кода, предварительно отформатированных и абзацев. Мы объясним, чем они отличаются друг от друга, а также подходящие сценарии использования каждого из них.

Код против предварительно отформатированных блоков против блоков абзаца

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

Текстовые блоки Гутенберга

1. Кодовый блок

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

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

Кодовый блок

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

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

• Изменить стиль или тип блока: Этот параметр позволит вам изменить блок кода на предварительно отформатированный, пользовательский HTML, изменить столбцы или создать группу, стиль, цвет и интервалы которой можно дополнительно настроить.
• Тащить: Это говорит само за себя, и вы можете удерживать этот значок, чтобы переместить блок, перетащив его в любое место на странице.
• Двигаться вверх и вниз: Этот параметр работает так же, как и предыдущий, с той лишь разницей, что вместо перетаскивания блока вы можете вручную перемещать блок вверх или вниз по блоку.
• Параметры шрифта: Верхняя панель инструментов также предоставляет параметры для применения жирного шрифта и курсива к написанному коду.
• Связь: Этот параметр позволяет сделать гиперссылку любого написанного кода на определенный URL-адрес.
• Больше настроек: Этот параметр позволит вам использовать такие параметры, как встроенный код, встроенное изображение, ввод с клавиатуры, зачеркивание, нижний индекс, верхний индекс и цвет текста.

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

2. Предварительно отформатированный блок

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

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

Предварительно отформатированный блок

На верхней панели инструментов большинство опций такие же, как и на блоке кода. Вы также можете преобразовать предварительно отформатированный блок в код и другие блоки, как описано выше. Основное различие между предварительно отформатированным блоком и блоком кода заключается в параметрах боковой панели блока и, в частности, в параметрах цвета. Предварительно отформатированный блок позволяет вам изменить цвет текста, добавить цвет фона, а также изменить цвет ссылки, если есть какие-либо тексты, на которые есть гиперссылки. В то время как блок кода предоставляет возможность изменить цвет текста на вкладке «Дополнительные параметры» на верхней панели инструментов, дополнительные параметры настройки цвета, представленные в предварительно отформатированных блоках, выделяют его.

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

 или предварительно отформатированным тегом, который включает тег .  Например, плагин добавит подсветку синтаксиса при добавлении кода в формате 
ваш код
.  Однако некоторые плагины также могут использовать только предварительно отформатированные или кодовые блоки.  Если вы разработчик или кодер и хотите продемонстрировать свои навыки кодирования, мы рекомендуем использовать один из этих плагинов подсветки синтаксиса, чтобы использовать код по умолчанию и предварительно отформатированные блоки в Gutenberg.
3. Блок абзаца
И, наконец, у нас есть блок абзаца, который является типом блока по умолчанию для добавления контента и текста через редактор блоков.  Это блок, который вы наверняка будете использовать чаще всего, поскольку этот блок является самым основным и основополагающим блоком.  Введенный текст будет отформатирован с помощью тегов абзаца HTML, и нажатие клавиши ввода создаст новый блок абзаца.
Другие ключевые различия между блоком абзаца и двумя другими заключаются в его уникальных параметрах настройки.  С помощью верхней панели инструментов, в отличие от двух других блоков, блок абзаца можно преобразовать в столбцы, группы, предварительно отформатированный блок, заголовок, список, цитаты, цитату и стих.  Остальные параметры верхней панели инструментов одинаковы между тремя блоками.  Кроме того, глядя на параметры боковой панели блока, он предоставляет параметры цвета текста и фона, такие как предварительно отформатированный блок, но также имеет уникальную опцию под названием «Настройки текста».  Этот параметр позволяет отображать буквицу (большую начальную букву) в абзаце, как показано в примере ниже.
Блок абзаца
Кроме того, у вас есть возможность добавить буквицу и изменить высоту строки.  Однако разница здесь в том, что вы можете преобразовать абзац в предварительно отформатированный, но не в блок кода.
Различия — код против предварительно отформатированного против абзаца
Вот краткое изложение различий между этими блоками.
Блок Usage/BlockParagraphCodePreformattedPurposeParagraph используется для создания контента и является блоком по умолчанию для добавления текста через редактор блоков. Блок Code используется для отображения кода как части контента. Блок Preformatted используется для отображения текста точно так, как вы его вводите. Тег HTML
 
……
……
……
ПреобразованиеВ предварительно отформатированный и многие другиеВ предварительно отформатированныйВ код Цвет текстаДаДаДаФонДаНет по умолчанию, вы можете использовать группу для добавления фонаДаИспользуется в выделении синтаксисаНетДаДаШрифт ИспользуетсяШрифт основного текста по умолчаниюПользовательский моноширинный шрифтПользовательский моноширинный шрифтРазрыв строкиНетДаДаПробелДаДаДаКомментарии HTMLНетДаДаВкладкаНетДаДаБуквицаДаНетНетВысота строкиДаНетНет
Заключительные слова
И вот оно.  Все три блока служат своей цели с точки зрения добавления определенных типов контента через редактор блоков.  Стили этих блоков зависят от используемой вами темы, и большинство тем и плагинов используют комбинацию pre/code для подсветки синтаксиса.  Кроме того, вы можете использовать пользовательский блок HTML, чтобы вставить результат кода.
 
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)