Компоненты G2, переосмысление компонентов WordPress с нуля

Обновите некоторые вещи.

Это была цель, которую Джон Куах, главный дизайнер Automattic, изложил в дорожной карте интеграции проекта G2 Components в Gutenberg и, в конечном итоге, в ядро ​​​​WordPress. Проект представляет собой переосмысление частей, из которых состоит редактор блоков, капитальный ремонт системы компонентов «с нуля». Обновление всех вещей или даже многих вещей одновременно рискует все сломать.

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

Это план интеграции компонентов G2 в Gutenberg.

«Компоненты G2 — это проект, воплощающий в себе идею улучшения пользовательского интерфейса и пользовательского опыта для других, — сказал Квач. «На данный момент он материализован как система компонентов, предназначенная для работы в контексте и средах Gutenberg и WordPress».

Цель состоит в том, чтобы предоставить ресурсы для улучшения пользовательского интерфейса проекта Gutenberg. Компоненты должны упрощать создание новых пользовательских интерфейсов без необходимости ломать код. Квач сказал, что последовательность и возможности системы компонентов должны масштабироваться и иметь волновой эффект на всей платформе WordPress. Это также распространяется на сторонних разработчиков блоков.

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

Quach считает, что платформы выиграли от подобных подходов. Он упомянул, что Material Design от Google поднял платформу Android и объединил продукты компании.

Команда Gutenberg уже начала интегрировать компоненты G2 в проект. Эта интеграция заменяет компоненты WordPress (@wordpress/components) контролируемым образом, что не должно нарушать существующие реализации в основном редакторе или сторонних проектах. Новые компоненты будут заменяться по мере их готовности. — Все равно что щелкнуть выключателем, — сказал Квач.

Следующее видео представляет собой часовой обзор компонентов G2, который Quach разместил на YouTube:

Он регулярно публикует обновления в блоге G2 Components. Наряду с этим более глубокое погружение в его дизайн-мышление над проектом. Он также почти ежедневно рассказывает о проекте в своем стриме на Twitch.

Что такое компоненты?

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

«Нынешние компоненты созданы не для системы, а для удовлетворения насущных потребностей», — сказал Квач. «Эта конкретная деталь дизайна имеет решающее значение. Системный подход легче поддерживает добавление новых функций и, что более важно, настройку!»

Новый подход заключается в создании собственной системы дизайна для WordPress. Такая система позволила бы любому строить на ее основе и создавать собственный опыт.

Квач сказал, что один из самых простых способов посмотреть на это — с точки зрения внутренней темы — система компонентов также имеет подсистему темы. «Вместо традиционного метода написания CSS как «оболочки» для верхнего слоя, эстетику пользовательского интерфейса можно настроить с помощью значений конфигурации — аналогично тому, как WordPress можно настроить с помощью определений в файле wp-config.php », — сказал он. «Это различие важно, поскольку эти значения напрямую связаны с системой стилей, что позволяет правильно загружать стили в нужном месте и в нужное время. Все это не влияет на стили текущей среды и, что более важно, не зависит от стилей текущей среды».

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

«Зачем переосмысливать, перестраивать и улучшать элементы ввода, кнопки, модальные окна, раскрывающиеся списки и другие элементы?» возразил Квач в ответ. «Чтобы вам, разработчику, не пришлось».

Что это значит для разработчиков?

Уважение обратной совместимости — это то, к чему, по словам Куаха, он относился невероятно серьезно при разработке архитектуры проекта G2 Components. Он также сказал, что это часть предложенной им стратегии интеграции.

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

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

«Новая система компонентов определенно поможет в отделе пользовательского интерфейса», — сказал Квач. «Меня особенно волнует область быстрой разработки/прототипирования. Поскольку эти компоненты являются автономными единицами, их можно использовать на таких платформах, как CodeSandbox, и они… просто… работают. Вы можете сразу же приступить к делу и быстро создавать и делиться прототипами (от крошечных, но мощных до больших и ответственных)».

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

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