Создание публичной студии: использование компонентов WordPress и Tailwind CSS в нашем локальном приложении для разработки 

В WordPress.com наша цель – предоставить лучшие инструменты для разработчиков WordPress и агентств. 

Мы строили именно по этой причине. Несколько месяцев назад была запущена наша бесплатная локальная среда разработки WordPress; она основана на Electron и в настоящее время доступна для Mac и Windows. Кроме того, скоро у нас будут большие интересные обновления для пользователей Studio.

Это одна из уникальных особенностей Studio, и так было с самого первого дня. Это напрямую связано с движущей силой, стоящей за тем, что мы делаем в WordPress.com (и во всех других наших брендах):

Я знаю, что открытый исходный код – одна из самых мощных идей нашего поколения.

По этой причине мы любим строить на публике. В нашей новой серии “Building Studio in Public” мы хотим поделиться некоторыми знаниями и инсайтами, которые мы получили в building Studio, и надеемся, что некоторые из них помогут вам создавать более качественные продукты.

Если вам нужны более подробные статьи о том, почему мы выбрали Electron, почему это проект с открытым исходным кодом, или у вас есть какие-либо другие вопросы о Studio, оставьте комментарий ниже, и мы это сделаем.

Сначала в этой серии мы рассмотрим, как мы решили использовать Tailwind CSS и компоненты WordPress, из которых состоит Studio, и почему это решение дало нам дополнительную гибкость для будущего Studio.

Компоненты WordPress повсюду

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

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

Не путайте компоненты WordPress с блоками Gutenberg. В то время как последние используются для создания интерфейсных веб-сайтов WordPress, первые предназначены для создания интерфейса администратора редактора сайта WordPress. Они основаны на React, что делает их универсальными и применимыми в любом интерфейсе администратора плагина WordPress или темы. Они также пригодятся для создания различных приложений, выходящих за рамки WordPress; единственное требование – чтобы проект использовал React.

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

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

Чтобы быстро найти нужный компонент и поэкспериментировать с ним, вы можете воспользоваться инструментом с открытым исходным кодом для разработки системных проектов и создания изолированных компонентов. Storybook даже дает вам возможность заглянуть внутрь и взаимодействовать с компонентами из других пакетов npm WordPress, таких как @wordpress/dataviews. Этот компонент предназначен для дальнейшего использования при управлении списками записей, страниц и загрузок мультимедиа.

Компоненты в Studio

Интегрируя компоненты WordPress в Studio, мы обеспечиваем привычный пользовательский опыт для пользователей WordPress – вы создаете WordPress с помощью инструмента, который выглядит и ощущается как WordPress. 

Большинство кнопок, выпадающих списков и меню будут знакомы пользователям WordPress, а поскольку Studio – это инструмент с открытым исходным кодом, любому, у кого есть опыт работы с Gutenberg, будет намного проще разобраться в коде Studio и внести свой вклад, если это его заинтересует.

Несмотря на то, что Studio – это настольное приложение, использующее Electron, а не сайт на WordPress, мы рекомендуем не переопределять стили компонентов WordPress. Мы хотели, чтобы они были как можно ближе к ядру, начиная с этапа разработки. Такой подход также уменьшает несоответствия при обновлении зависимостей WordPress. Для стилизации наших пользовательских компонентов React мы использовали .

Tailwind CSS – это популярный CSS-фреймворк, который мы используем для настройки стилей наших пользовательских компонентов и изменения внешних стилей, таких как интервалы между компонентами WordPress, используя только классы CSS.

Использование мощных компонентов WordPress и Tailwind CSS делает приложение Studio перспективным; эти компоненты легко использовать повторно для создания новых функций и обновлений приложения, поскольку они уже импортированы в проект в стиле, подходящем для приложения.

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

Вот как мы использовали компоненты WordPress и Tailwind CSS для создания Studio (и как вы можете использовать их в своих собственных проектах).:

Шаг 1: Настройте Tailwind CSS и установите компоненты WordPress

После этого в вашем проекте вам нужно будет установить компоненты WordPress. Просто запустите следующую команду:

npm install @wordpress/components –сохранить

Шаг 2: Импортируйте стили компонентов WordPress

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

В ваш основной CSS-файл импортируйте стили компонентов Gutenberg:

@import `@wordpress/components/build-style/style.css`;

Шаг 3: Настройте компоненты React с помощью Tailwind CSS

Используйте свойство className, чтобы применить стили Tailwind CSS. Иногда в настройках React-компонентов используется Tailwind CSS. ! модификатор необходим, чтобы отметить стиль как важный и переопределить существующие стили WordPress.

Возьмем, к примеру, стили Studio:

Мы используем:

• @wordpress/react-i18n для перевода.
• @wordpress/icons для отображения значков.
• @wordpress/компоненты для базовых компонентов, таких как кнопка, панель вкладок и другие.

Чтобы использовать Tailwind CSS в любом компоненте, вам нужно передать служебные классы для стилизации элементов в className React prop. Иногда нам требовалось переопределить внешние интервалы между определенными компонентами, для чего мы использовали восклицательный знак (!).

Шаг 4: Доступ к вложенным элементам для использования в вашем проекте

С помощью Tailwind CSS вы можете использовать сложные селекторы для настройки взаимодействия с пользователем и вложенных элементов в компоненте. Это позволит вам динамически изменять стили в вашем проекте в зависимости от поведения пользователя и приложения.

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

Для динамического оформления этого компонента мы используем [&_.badge]:текст-красный, где & означает текущий элемент, а _ – любой дочерний элемент. Вы можете применить определенные стили к прямому дочернему элементу, используя оператор greater-than, например: [&>div]:text-red.

Готовы к сборке?

Используя компоненты WordPress и несколько пользовательских компонентов с помощью Tailwind CSS, вы можете значительно улучшить процесс разработки, обеспечивая бесперебойный и профессиональный пользовательский опыт. 

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

Если вы создаете сайты на WordPress, то . Это бесплатно и без особых усилий впишется в ваш рабочий процесс разработки. 

Как только вы загрузите Studio: обязательно получите доступ (бесплатный или платный) к таким функциям, как.

И если вы хотите помочь нам в создании Studio, вот несколько вопросов на GitHub, которые вы можете решить прямо сейчас.: