Джейми Марсленд воссоздает домашнюю страницу WordPress.org за 20 минут с помощью редактора блоков

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

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

«Это такой простой макет, что трудно представить, что одному человеку потребуется больше дня на Squarespace, Wix, Webflow или одном из конструкторов страниц WP», — сказал Малленвег.

Marsland решил принять вызов, используя Gutenberg. Для этого упражнения он использовал самую последнюю стандартную тему WordPress, Twenty Twenty-Two. Его результаты не идентичны новым дизайнам WordPress, но очень близки к ним, и он смог создать домашнюю страницу примерно за 20 минут.

В видеоролике (прикрепленном ниже) Marsland демонстрирует процесс создания каждого раздела главной страницы. Его можно назвать опытным пользователем редактора блоков. Он может быстро перетасовывать строки, столбцы и группы, регулируя отступы и поля по мере необходимости, и назначать каждому разделу соответствующий цвет дизайна. На данный момент это не то, что могли бы сделать большинство обычных пользователей WordPress, поэтому видео вызвало такой сильный отклик у зрителей. Канал Marsland на YouTube сосредоточен на том, чтобы помочь пользователям освоить создание страниц с помощью Gutenberg и магазинов с помощью WooCommerce.

«Я пришел к выводу, что довольно легко быстро выполнить 95% проекта, но, по моему опыту, именно последние 5% всегда занимают больше всего времени», — сказал Марсланд. «Я предполагаю, что причиной задержек был скорее внутренний процесс, но без участия трудно сказать наверняка. Я действительно хотел показать, что это не проблема Гутенберга при создании дизайна (как Мэтт Малленвег упомянул Wix, Squarespace и другие конструкторы страниц WP)».

Алекс Шилс, участник проекта, спонсируемый Automattic, упомянул несколько элементов, не связанных с редактором блоков, которые вызвали задержки, в том числе работу над «разумными стандартами для а11у, отзывчивости, совместимости браузеров, SEO и производительности», а также сотрудничество с авторами на разных континентах.

В ответ на попытку Marsland разработчик WordPress Патрик Бонер прокомментировал, что мелкие детали остаются чрезвычайно важными. «Вы можете определенно сказать, что было разработано в первую очередь, а что было разработано в редакторе», — сказал Бонер.

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

«Сегодня остается принципиально трудным или даже невозможным взять традиционно смоделированный дизайн страницы и реализовать этот дизайн с использованием блоков», — сказал разработчик WordPress Джон Браун. "Это проблема.

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

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

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

«Я создавал полноценную тему FSE с нуля и был удивлен тем, как много из моего дизайна я смог успешно воспроизвести с помощью редактора, theme.json и минимального пользовательского CSS, — сказал опытный разработчик темы Майк Макалистер. . «Конечно, потребовалось много возни, но тем не менее я был впечатлен.

«Однако, как упоминает Джон, во-вторых, когда вам нужно что-то настроить для меньшего экрана (или большего экрана, если вы осмелитесь попробовать мобильный дизайн в редакторе), вы упираетесь в стену. Это особенно заметно с полями, отступами и промежутками между блоками, которые еще не имеют адаптивных элементов управления. Вы можете увидеть это с помощью CSS в новой теме на .org».

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

«Тем не менее, есть намеки на улучшение отклика», — прокомментировал Макалистер. «Гибкая типографика и clip(), безусловно, помогли контролировать типографику, но всегда будут обстоятельства, когда вам потребуется еще более точный контроль. Любой другой конструктор сайтов решил эту проблему, нет причин думать, что WordPress не может или не хочет. (Я, конечно, на это надеюсь, так как в наши дни примерно 50-60% трафика приходится на мобильные устройства!)

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

Небольшое упражнение Марсленда показывает, насколько близко вы можете приблизиться к воссозданию дизайна WordPress.org за короткий промежуток времени, если хорошо разбираетесь в редакторе блоков. Ему удалось доказать, что пользовательский интерфейс для построения страниц Gutenberg не является препятствием для воспроизведения проектов, созданных в других приложениях. Скорее, это все другие связанные элементы контрольного списка, которые разработчики обычно должны решать вне редактора, включая доступность, отзывчивость и соображения SEO. Чем ближе Gutenberg сможет сократить дополнительную работу, связанную с отзывчивостью и доступностью, тем более доступным он будет для обычных пользователей, пытающихся создавать проекты, которые они придумывают самостоятельно.