Если это современная разработка темы WordPress, зарегистрируйтесь

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

Вдохновение для этой темы пришло от нескольких других людей и проектов. Эксперимент Кьелла Рейгстада с целевой страницей с двумя столбцами, проведенный в октябре 2020 года, впервые спровоцировал его. Недавний вопрос в колонке «Спросите бармена» о компактных и уютных темах снова разбудил мои творческие соки. Однако то, что команда Themes Team одобрила аналогичную блочную тему Miniblock OOAK от Каролины Наймарк, означало, что правила теперь были достаточно слабыми, чтобы можно было выпустить что-то подобное в мир.

Одна из проблем заключается в том, что блочная тематика раньше меня обжигала. В прошлом году я потратил месяцы на создание нового проекта в свое драгоценное свободное время только для того, чтобы через несколько недель обновления плагина Gutenberg стерли мой прогресс. Я знал, что с нестабильным фундаментом программного обеспечения альфа-уровня все может измениться, но он все еще сдувался. Излишне говорить, что я никогда не мог найти мотивацию, чтобы поднять его обратно.

С WordPress 5.9 и более стабильной системой блочной тематики всего за несколько дней пришло время сделать еще один шанс.

Я хотел глубоко изучить тематику блоков . Единственный способ сделать это — вернуться к началу. Мне нужно было заново ознакомиться с этими основополагающими элементами простого HTML, CSS и PHP. И забудьте все, что, как мне казалось, я знал о создании современной сети. Мне нужно было снова стать нубом .

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

Могу ли я запустить тему WordPress без сложной сети зависимостей, охватывающей более 900 проектов в моей папке /node_modules ?

Могу ли я создать что-то, не загружая свои базовые PHP-скрипты через Composer?

Могу ли я, знаете ли , просто создать тему WordPress?

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

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

У меня были беспокойные выходные. У меня есть четыре, может быть, пять часов крепкого сна между пятницей и субботой. Возможно, у меня было так много проектов и дел, что мой разум не мог их вычеркнуть. Несмотря на это, я снова проснулся в 3:30 утра в воскресенье, уставший, но неспособный успеть на эти столь необходимые Z. Итак, я взломал свой редактор кода и создал новый тематический проект.

Через час все заработало. Он был в достаточно приличном состоянии, чтобы поделиться им с друзьями через Twitter.

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

Это блочный паттерн под названием «Отражения». Фотография горы, отражающейся в озере, взята из WordPress Photos и снята Энн Маккарти. Градиент, используемый для фона, также является отражением цветов изображения, что мне показалось приятным штрихом.

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

Что я узнал из опыта

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

Я создал тему с нуля, используя только свой редактор кода и локальную установку WordPress. Модулей Node нет. Нет PHP-библиотек. Никакой настройки сборки.

Я, вероятно, буду использовать эти вещи до того, как этот проект будет завершен. Некоторые инструменты просто упрощают разработку. Однако отсутствие необходимости в них или погружение в более сложные API-интерфейсы PHP снизило входной барьер.

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

Есть много проблем с базовой системой. Такие странности, как дополнительные элементы-обертки вокруг выровненных по ширине блоков, все еще существуют в редакторе. И несколько блоков нуждаются в обновлении — я смотрю на ваш блок File за то, что вы не используете повторно существующий блок Button .

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

Я не решаюсь делиться незавершенной работой, но я также должен предъявить доказательства. Те, кто заинтересован, могут проверить репозиторий GitHub на дату этой статьи, по крайней мере, до того, как я сделаю с ним что-то слишком сумасшедшее.

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

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

Упущенная возможность

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

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

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

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

Например, вот шаблоны заголовков, которые Twenty Twenty Two регистрирует, когда они появляются в пункте меню панели инструментов «Заменить»:

Однако это не весь набор шаблонов заголовков темы — всего их 18. Я предполагаю, что большинство конечных пользователей никогда не обнаружат их.

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

Авторы тем могут дублировать свои усилия, скопировав код шаблона в часть шаблона, предполагая, что в нем нет смешанного PHP. Или они могут создать эти части и извлечь связанный шаблон через блок Pattern:

 <!-- wp:pattern { "slug":"namespace/slug" } -->

Проблема с этим подходом заключается в том, что редактор сайта не отображает содержимое шаблона в раскрывающемся списке «Заменить» ( я только что обнаружил ошибку? ):

Решение должно быть простым. Шаблоны, зарегистрированные для части шаблона, должны быть взаимозаменяемыми через пользовательский интерфейс. Или части, которые используют блок шаблона, должны правильно отображаться в раскрывающемся списке «Заменить».