---
title: "Блочный редактор WordPress: добавление контента блоками"
description: "Как работать с блочным редактором (Gutenberg): добавление блоков, контент, Site Title, Post Content, CSS-классы — практическое руководство."
---

## Что такое блочный редактор

Блочный редактор (Gutenberg) — основной редактор контента в WordPress с версии 5.0. Каждый элемент страницы или записи — это **блок**: абзац, заголовок, изображение, видео, колонки, кнопка и т.д.

Доступен через: **Записи → Добавить** или **Страницы → Добавить**.

## Как добавить блок

Три способа:

1. **Кнопка + (добавить блок)** — появляется в интерфейсе при наведении между блоками или в верхней панели.
2. **Слеш-команда `/`** — начните вводить `/заголовок` или `/изображение` в пустом абзаце.
3. **Быстрая вставка** — нажмите Enter на пустой строке для вызова меню блоков.

### Добавление блока в конкретную позицию

- Наведите мышь между существующими блоками — появится разделитель с кнопкой **+**.
- Или используйте **List View** (иконка списка) для точного позиционирования.

## Основные блоки

### Текстовые блоки

| Блок                | Назначение                          |
| ------------------- | ----------------------------------- |
| Абзац (Paragraph)   | Основной текст                      |
| Заголовок (Heading) | Заголовки H1-H6                     |
| Список (List)       | Маркированные и нумерованные списки |
| Цитата (Quote)      | Оформленные цитаты                  |
| Код (Code)          | Фрагменты кода с подсветкой         |
| Таблица (Table)     | Данные в табличной форме            |

### Медиа-блоки

| Блок                | Назначение                 |
| ------------------- | -------------------------- |
| Изображение (Image) | Вставка картинок           |
| Галерея (Gallery)   | Сетка изображений          |
| Видео (Video)       | Встроенное видео           |
| Аудио (Audio)       | Аудиоплеер                 |
| Файл (File)         | Ссылка на скачивание файла |

### Дизайн-блоки

| Блок                    | Назначение                              |
| ----------------------- | --------------------------------------- |
| Колонки (Columns)       | Многоколоночный макет                   |
| Группа (Group)          | Контейнер для группировки других блоков |
| Разделитель (Separator) | Горизонтальная линия                    |
| Спейсер (Spacer)        | Вертикальный отступ                     |
| Иконка (Icon)           | SVG-иконка из коллекций (WordPress 7.0+). Кастомные иконки — через [Icons API](https://wpcraft.ru/kb/stacks/wordpress/block-editor/icons-api.md) (7.1+) |

### Блоки темы (Theme Blocks)

Некоторые блоки работают только в Site Editor и шаблонах:

### Служебные блоки

Для вставки произвольного HTML-кода (виджеты, embed-коды, трекеры) используйте блок **Custom HTML** — добавляется слеш-командой `/html`, с WP 7.0 имеет панели HTML/CSS/JS, с WP 7.1 поддерживает редактируемые внутренние блоки. Подробнее: [Блок Custom HTML](https://wpcraft.ru/kb/stacks/wordpress/block-editor/custom-html-block.md).

#### Site Title Block

Отображает название сайта. Настройки:

- **Тег HTML** — H1 (главная), P или Div (остальные страницы).
- **Ссылка** — делает название кликабельной ссылкой на главную.
- **Выравнивание** — по левому краю, по центру, по правому.
- **Цвет и типографика** — настраиваются через панель «Стили».

#### Post Content Block

Отображает содержимое записи/страницы в шаблоне. Используется в шаблонах Single (Запись) и Page (Страница) для указания, где выводить контент.

**Как добавить в шаблон:**

1. Откройте **Site Editor → Шаблоны**.
2. Выберите шаблон (например, Single).
3. Добавьте блок **Post Content** в нужное место.

## Дополнительные CSS-классы блоков

Каждому блоку можно задать произвольный CSS-класс для стилизации:

1. Выделите блок → боковая панель → **Дополнительно**.
2. В поле **Дополнительные классы CSS** введите имя класса.
3. Пропишите стили в Customizer или child theme:

```css
.highlight-box {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 1.5rem;
}
```

Несколько классов указываются через пробел: `highlight-box shadow rounded`.

## Сочетания клавиш

| Сочетание                   | Действие                             |
| --------------------------- | ------------------------------------ |
| `/`                         | Быстрый поиск блока                  |
| `⌘Z` / `Ctrl+Z`             | Отменить                             |
| `⌘Shift+Z` / `Ctrl+Shift+Z` | Повторить                            |
| `⌘Shift+D` / `Ctrl+Shift+D` | Дублировать блок                     |
| `⌘⌥T` / `Ctrl+Alt+T`        | Вставить блок до/после               |
| `Esc`                       | Выйти из режима редактирования блока |

## Связанные страницы

- [Страницы, записи, категории и теги: базовая модель контента](https://wpcraft.ru/kb/practices/web/content/pages-posts-and-taxonomies-basics.md)
- [Блок Custom HTML: вставка кода и редактируемые слоты](https://wpcraft.ru/kb/stacks/wordpress/block-editor/custom-html-block.md)
- [Icons API: SVG-иконки в WordPress](https://wpcraft.ru/kb/stacks/wordpress/block-editor/icons-api.md)
- [Site Editor: визуальное редактирование](https://wpcraft.ru/kb/stacks/wordpress/block-editor/site-editor.md)
- [Кастомный CSS в WordPress](https://wpcraft.ru/kb/stacks/wordpress/faq/custom-css.md)
- [Меню в WordPress](https://wpcraft.ru/kb/stacks/wordpress/faq/how-to/menus.md)
- [PHP-only block registration: блоки без JavaScript](https://wpcraft.ru/kb/stacks/wordpress/block-editor/php-only-block-registration.md)

## Материалы и источники

- [WordPress.com: WordPress Editor](https://wordpress.com/support/wordpress-editor/)
- [WordPress.com: Add content using blocks](https://wordpress.com/support/wordpress-editor/add-content-blocks/)
- [WordPress.com: Add additional CSS classes to blocks](https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/)
- [WordPress.com: Post Content block](https://wordpress.com/support/wordpress-editor/blocks/post-content-block/)
- [WordPress.com: Site Title block](https://wordpress.com/support/wordpress-editor/blocks/site-title-block/)