Это краткое изложение встречи Hallway Hangout, организованной в канале #fse-outreach-experiment в рамках программы FSE Outreach. Спасибо всем, кто присоединился!
Участники:
@elblakeo31 @beckej @annezazu @paaljoachim @rbest Lauren Gray, @FahimMurshed, James Riordon, Micro.
Видеозапись:
Заметки:
Введение
Мы начали звонок со вступления от @elblakeo31, участника программы FSE Outreach, который уже давно стремится использовать всё самое новое и лучшее как можно раньше и как можно шире. Будучи одним из первых пользователей, он также помогает другим осваивать новые технологии.
Клиенты уже обращаются ко мне по поводу возможностей FSE и хотят их использовать. Мы начинаем замечать переход от сильной настороженности к настоящему желанию использовать возможности ядраЯдро Ядро — это набор программного обеспечения, необходимого для работы WordPress. Команда разработки ядра создаёт WordPress., которые предлагает WordPress.
@elblakeo31
Общий подход
У них семь разных сайтов переводятся на редактор сайта в рабочей среде. Они намеренно не пытаются создавать темы для этих проектов и стараются использовать редактор сайта по максимуму. Сейчас для некоторых проектов они используют дочерние темы, но в основном просто берут Twenty Twenty-Three и используют её напрямую. Блейк видит огромное преимущество в использовании редактора сайта непосредственно как инструмента дизайна, вместо создания макета в Figma с последующим воспроизведением его в WordPress. Здесь есть определённые сложности: люди привыкли к Figma, а у редактора сайта есть кривая обучения и некоторые ограничения (например, более динамичная навигация). Кроме того, много работы уходит на оценку необходимых для сайта плагинов и проверку того, что всё, что они хотят использовать, поддерживается редактором сайта. В целом они стараются не создавать много пользовательских блоков, а вместо этого полагаются на паттерны, уделяя особое внимание максимально широкому применению рекомендаций из документа по настройке интерфейса редактора. Особенно это актуально для крупных организаций, например большого университета, где требуется сильнее ограничивать возможности пользователей.
Как выглядит веб-агентство во вселенной редактора сайта?
Как предоставлять услуги, если клиенты могут так много делать самостоятельно с помощью редактора сайта? Естественно, это стало одной из тем разговора: Блейк рассказал, как стремится обучать клиентов использовать возможности редактора сайта и как «много времени, которое раньше тратилось на разработку, теперь уходит на обучение».
Сейчас главная сложность — обучить людей работе с новым инструментом. При переходе к GutenbergGutenberg Проект Gutenberg — это новый интерфейс редактора WordPress. Редактор улучшает процесс и опыт создания нового контента, значительно упрощая написание содержательных материалов. Вместо шорткодов, пользовательского HTML и т. п. он использует «блоки», чтобы сделать контент более насыщенным.
https://wordpress.org/gutenberg/ люди уже иногда испытывают «опасения и раздражение». С каким бы сайтом ни работал клиент, если он уже пользовался WordPress, он немного устал от обилия возможностей. Чтобы помочь преодолеть это и привести клиентов в будущее, они тратят много времени на вовлечение их в культуру сотрудничества и экспериментов, чего люди обычно не хотят. Поэтому они целенаправленно выбирают клиентов, которые ценят определённый уровень экспериментов, связанный с внедрением новых технологий.
Сейчас, с последним релизом, мы достигли момента, когда я могу переводить проекты в рабочую среду и быть уверенным, что они там останутся.
@elblakeo31
Когда вы решаете использовать дочернюю темуДочерняя тема Дочерняя тема — это настроенная тема, основанная на родительской теме. Считается хорошей практикой создавать дочернюю тему, если вы хотите изменить CSS своей темы. https://developer.wordpress.org/themes/advanced-topics/child-themes/ вместо TT3? Что определяет это решение?
Блейк рассказал, что обсуждал лучшие практики со многими людьми и стремится делать как можно больше непосредственно в редакторе. Он также знает, что получит больше поддержки от сообщества, если будет расширять возможности Twenty Twenty-Three, а не другой темы. По мере работы он документирует все места добавления кода, чтобы отслеживать возможные будущие изменения. Шрифты — отличный пример, который часто всплывает. В будущем шрифты будут управляться более непосредственно в ядре, но сейчас они используют плагин Create BlockБлок Блок — это общий термин для обозначения единиц разметки, которые, будучи объединёнными, формируют содержимое или макет веб-страницы с помощью редактора WordPress. Эта концепция объединяет в единый согласованный API и пользовательский интерфейс идеи, которые раньше могли реализовываться с помощью шорткодов, пользовательского HTML и обнаружения встраиваемого содержимого. Theme pluginПлагин Плагин — это программное обеспечение, содержащее набор функций, которые можно добавить на сайт WordPress. Плагины расширяют функциональность или добавляют новые возможности сайтам WordPress. Плагины WordPress написаны на языке программирования PHP и бесшовно интегрируются с WordPress. Они могут быть бесплатными в каталоге плагинов WordPress.org https://wordpress.org/plugins/ или платными плагинами сторонних разработчиков..
Какой процесс вы используете, чтобы применять редактор сайта непосредственно как инструмент дизайна вместо Figma?
Ещё с первых дней использования редакторов WYSIWYGWhat You See Is What You Get «Что видишь, то и получаешь». Чаще всего используется в отношении редакторов, где изменения, внесённые в режиме редактирования, точно отражаются на опубликованной странице. Блейк мечтал использовать для создания макетов только редактор и отказаться от таких инструментов, как Adobe. Использование нескольких источников истины кажется пустой тратой времени, если всё может находиться в одном редакторе. Что касается процесса, они придерживаются примерно следующего порядка:
- Добавить контент в WordPress, используя Twenty Twenty-Three без изменений стилей.
- Добавить элементы стиля с помощью редактора сайта и напрямую объяснить клиенту различные части стиля, а также доступные ему дальнейшие варианты в зависимости от желаемого результата.
- Создать всё пользовательское, например пользовательские элементы, или добавить плагины для улучшения доступностиДоступность Доступность (часто сокращённо a11y) относится к проектированию продуктов, устройств, услуг или среды для людей с ограниченными возможностями. Концепция доступного дизайна обеспечивает как «прямой доступ» (то есть без посторонней помощи), так и «косвенный доступ», то есть совместимость со вспомогательными технологиями пользователя (например, программами чтения с экрана). (https://en.wikipedia.org/wiki/Accessibility) сайтов.
На семи-восьми сайтах, использующих редактор сайта, они ещё не сталкивались с ситуацией, когда клиент говорил бы, что это ему не подходит. Поскольку они не создавали макетов, в итоге им буквально приходилось проводить клиентов через редактор сайта. Поэтому умение управлять ожиданиями клиентов стало одним из главных профессиональных инструментов: «Это новая технология, которая в будущем даст вам преимущество, но одновременно у неё есть ограничения».
Я могу отнести себя ко всему, о чём говорит Блейк. Я всего лишь агентство из одного человека, но использую точно такой же подход во всех своих проектах, включая использование TT3 или темы Frost от Brian Gardner в качестве основы. Я создаю макеты в редакторе сайта. Совместная работа ведётся через P2P2 P2 или O2 — термин, которым называют блог Make WordPress. Его можно найти по адресу https://make.wordpress.org или созданную мной страницу для коммуникации, поскольку это даёт клиентам удобную возможность поработать с блоками и освоиться с ними.
Micro в чате Zoom
С какими типами клиентов вы работаете и как меняется ваш подход в зависимости от типа клиента?
В целом есть три типа клиентов:
- Создание по шаблону: кто-то приходит с полностью готовым макетом и говорит, что хочет X. Это становится всё более редким случаем, поскольку их агентство известно созданием проектов с нуля. Часто они берут дизайн и используют либо пользовательский блок, либо блок HTMLHTML HTML — аббревиатура от Hyper Text Markup Language (язык гипертекстовой разметки). Это язык разметки, используемый при разработке веб-страниц и веб-сайтов., если требуется пиксельное соответствие.
- Небольшой проект: клиент хочет сайт, спроектированный и созданный с нуля, но не для крупной организации. Они помогают клиентам перенести весь контент в WordPress. Назначают звонки продолжительностью от одного до трёх часов, чтобы обсудить контент, посмотреть разные сайты на WP и понять, чего хочет клиент (добавить материалы в Google Doc или сразу перейти к редактору WP). Затем проводят встречу, больше посвящённую дизайну, чтобы выделить и создать паттерны, найти понравившиеся сайты и т. д. После этого процесс итераций продолжается.
- Крупная организация, например университет. На этом уровне больше внимания уделяют функциям и выступают почти как консультанты, работая вместе с ИТ-командой, знакомой с WP. Для крупных организаций всё зависит от их пожеланий. Недавно они создали 80% сайта, затем провели обучение, а в дальнейшем выполнят финальную доработку. Для других организаций важнее уроки и рекомендации по использованию сайта с соблюдением лучших практик. Такие проекты часто занимают больше времени.
В рамках обучения много времени уделяется тому, чтобы люди, включая дизайнеров, освоились с редактором. Нужно помочь им привыкнуть к редактору сайта, в том числе дизайнерам. У каждого блока разные элементы управления и т. д.; когда основа уже заложена, можно дать людям полную свободу. Блейк рассказал, что старается приучить людей мыслить как дизайнеры самого редактора блоков и воспринимать блоки как фундаментальный уровень дизайна.
Что помогло вам почувствовать уверенность в использовании редактора сайта в рабочей среде?
Один из других участников задал этот вопрос, и Блейк рассказал, что при каждом новом релизе тратит огромное количество собственного времени на тестирование. Часто он посвящает выходные тому, чтобы проверить, можно ли реализовать проект в редакторе сайта, и заранее показывает его клиенту, чтобы понять, подойдёт ли такой вариант. Он всё чаще убеждается, что всё работает, и может просто передать результат клиенту. С последним релизом он окончательно отказался от использования плагина Gutenberg в качестве временного решения («Освободиться от него было очень приятно»).
Другое
Мы обсудили некоторые аспекты обслуживания, более широкое внедрение редактора сайта в сообществе WordPress и заглянули в будущее, рассмотрев несколько вопросов на GitHubGitHub GitHub — это веб-сайт, предлагающий онлайн-реализацию репозиториев git, которыми другие разработчики могут легко делиться, копировать и изменять. Публичные репозитории можно размещать бесплатно, а для частных репозиториев требуется платная подписка. GitHub представил концепцию «запроса на включение», при которой изменения кода, сделанные участниками в ветках, можно просматривать и обсуждать до их объединения владельцем репозитория. https://github.com/. Это включало более подробное обсуждение частей шаблонов, паттернов и повторно используемых блоков, а также обзор недавнего обсуждения способов их унификации.
Общие ресурсы:
Была предоставлена следующая документация:
Были предоставлены следующие ссылки на GitHub:
- Репозиторий VIP’s design system bridge, содержащий инструмент для простой синхронизации значений дизайн-системы Figma с файлом темы.jsonJSON JSON, или JavaScript Object Notation, — это минималистичный читаемый формат структурирования данных. Он используется главным образом для передачи данных между сервером и веб-приложением как альтернатива XML..
- Добавление типа макета сетки в PR.
- Расширение блока wp:pattern.
Следующие шаги:
Несколько кратких последующих шагов от меня:
- Организовать ещё одну встречу Hallway Hangout на эту тему, поскольку участники хотели продолжить обсуждение.
- Изучить, какие ресурсы было бы полезно добавить в Learn WP о проектировании в редакторе сайта.