Редактор блоков
На учебном стенде есть страница «Как учиться» со слагом study. Сейчас она хранит короткий текст, но ещё не объясняет маршрут читателя. Превратим её в небольшой документ: вводный абзац, раздел о выборе курса, последовательность действий и ссылку на контакты. Цель урока — научиться собирать содержание из блоков с понятной семантикой, сохраняя отдельность текста и будущего шаблона сайта.
Блок — единица содержимого, у которой есть тип, атрибуты и представление. Абзац, список, изображение и заголовок являются разными блоками. Их можно перемещать в редакторе, но на выходе они должны образовать связный документ. Поэтому начнём не с декоративных колонок, а с текста, который остаётся понятным без оформления. В документации редактора описаны режимы редактирования и инструменты выбора блоков; подписи отдельных кнопок могут зависеть от языка установленного интерфейса.
Содержание внутри страницы
Откройте черновик study и оставьте название «Как учиться» в поле заголовка записи. Не добавляйте такой же H1 первым блоком: шаблон позже выведет название страницы отдельно. Во внутреннем содержимом используем H2 «Выберите маршрут» и H2 «Порядок работы». Эти заголовки обозначают два соседних раздела. Заголовок не выбирают по нужному размеру шрифта: внешний вид настраивает тема, а уровень описывает структуру документа.
Ниже приведено полное содержимое страницы для режима редактора кода. Оно не является шаблоном темы и не содержит общий хедер или футер. Если вы предпочитаете визуальный режим, создайте те же четыре смысловые части штатными блоками и сравните порядок через представление списка.
<!-- wp:paragraph -->
<p>Веб-мастерская помогает освоить разработку небольшого сайта. Начните с подходящего курса и сохраняйте результаты каждого шага.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Выберите маршрут</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Если HTML пока незнаком, начните с разметки. После этого переходите к JavaScript, публикации из Markdown и диагностике скорости.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading">Порядок работы</h2>
<!-- /wp:heading -->
<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>Прочитайте объяснение и запишите ожидаемый результат.</li>
<!-- /wp:list-item --><!-- wp:list-item -->
<li>Измените учебный пример в собственной копии.</li>
<!-- /wp:list-item --><!-- wp:list-item -->
<li>Сравните наблюдаемое поведение с объяснением.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->
<!-- wp:paragraph -->
<p>Вопросы о программе можно задать через страницу <a href="/contacts/">«Контакты»</a>.</p>
<!-- /wp:paragraph -->Комментарии wp:... описывают блоки WordPress; обычные HTML-теги задают сохранённое представление. В некоторых блоках структура сложнее и зависит от версии. Не удаляйте комментарии ради «чистого HTML», если материал должен оставаться редактируемым набором блоков. После изменения в режиме кода вернитесь к визуальному редактору. Ожидается отсутствие сообщения о недействительном блоке; такое сообщение требует разобрать изменённую разметку, а не механически подтвердить восстановление.
Ссылка /contacts/ в примере относится к установке WordPress в корне выбранного хоста. Мы планируем такую структуру постоянных адресов в уроке о ссылках. Если ваш стенд пока использует ?page_id=..., замените адрес через штатный выбор страницы в редакторе и зафиксируйте это временное отличие. При установке в подкаталоге ручная корневая ссылка может вести мимо WordPress. Такой нюанс удобнее заметить на учебной странице, чем после переноса всего сайта.
Представление списка и вложенность
Теперь выделите раздел «Порядок работы» и откройте список блоков. Он должен показывать заголовок, упорядоченный список и последующий абзац, а внутри списка — три элемента. Визуальный отступ панели показывает вложенность, а не наличие пробелов в тексте. Если последний абзац оказался четвёртым пунктом, переместите его за пределы списка. Внешне обе версии иногда похожи, но смысл отличается: ссылка на контакты не является обязательным учебным действием.
Добавим группу вокруг двух разделов только в том случае, если появляется общая задача оформления, например ограничить ширину содержимого. Группа хранит несколько дочерних блоков и позволяет применять общие свойства. Она не должна становиться универсальной обёрткой вокруг каждого предложения. Чем глубже дерево, тем труднее редактору выбрать нужный элемент. В небольшом документе разумная вложенность помогает видеть смысловые части; бессистемная вложенность скрывает их за контейнерами.
Попробуйте поменять местами разделы через список блоков, затем верните исходный порядок. В правильном варианте перемещается заголовок вместе с относящимися к нему абзацами, если они предварительно объединены или выделены. Перемещение только заголовка создаёт документ, в котором текст объясняет другую тему. Это редакционная ошибка, а не ошибка движка. После любой крупной перестановки перечитайте страницу сверху вниз без подсказки дерева: посетитель увидит именно этот порядок.
Если в объяснении понадобится фрагмент программы, добавьте отдельный блок кода. Не вставляйте HTML-пример в блок «Пользовательский HTML», когда его нужно показать читателю как текст: такой блок предназначен для разметки страницы. Символы угловых скобок в учебном коде должны отображаться буквально. Для будущей статьи о запросе HTML это принципиальная разница между объяснением программы и добавлением исполняемой разметки. Предварительный просмотр поможет заметить, что пример превратился в невидимый элемент или неожиданно изменил соседний текст.
Редактор также должен оставаться управляемым с клавиатуры. Попробуйте перейти к блоку, открыть его инструменты и вернуться к тексту без мыши. Не требуется запоминать все сочетания сразу: важнее видеть фокус и понимать текущий выбранный элемент. Когда сложная группа мешает попасть к абзацу, используйте представление списка. Мы оцениваем удобство подготовки содержания отдельно от доступности опубликованной страницы. Первое помогает редактору внести правильную структуру, второе определяет возможность читателя воспользоваться результатом.
Что проверять в предварительном просмотре
Сохраните черновик и откройте предварительный просмотр. Ожидается один заголовок страницы, затем вводный текст, два раздела и список из трёх пунктов. Если H1 виден дважды, найдите его второй источник: внутренний блок или шаблон. Не скрывайте дубликат CSS, потому что текст и структура останутся в документе. Заголовки должны объяснять связь частей даже при отключённых стилях или использовании программы чтения с экрана.
Проверьте страницу на узкой ширине. Для нашего текста не требуется горизонтальная прокрутка, а ссылка должна оставаться различимой без наведения мышью. Если выбранная тема делает все абзацы слишком широкими, это повод исправить ширину содержимого на уровне темы, не вставлять ручные переносы строк в каждую запись. Ручные переносы под один экран распадутся на другом устройстве и затруднят последующее редактирование текста.
Отдельно посмотрите сохранение и повторное открытие страницы. Ожидаемое состояние — прежний порядок блоков и отсутствие случайных пустых абзацев между разделами. В этом уроке редактор не запускался; приведённая разметка и сценарии являются подготовленными материалами, а не результатами выполненного просмотра. При прохождении запишите фактические предупреждения и версию WordPress. Полученная страница станет общей редакционной основой: следующий урок добавит иллюстрацию, сохраняя смысл документа и не превращая её в замену текстового объяснения.