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

Обновите кое -что.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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