Повторно используйте компоненты React из Gutenberg в своих плагинах WordPress

Несколько дней назад Дэвид закончил серию из четырех сообщений в блоге, посвященных React. Там он объяснил вам, как начать работу с React, чтобы легко создавать пользовательские интерфейсы в WordPress. В частности, во второй части этой серии сообщений Дэвид объяснил, как подготовить среду разработки и как создать простой компонент React. Сегодня мы увидим, что помимо создания собственных компонентов React очень хорошей идеей является повторное использование существующих компонентов.

С тех пор как Гутенберг появился в WordPress, JavaScript и фреймворк React стали ключевой частью стека разработки WordPress. Поэтому, если вы еще не привыкли к этим технологиям, вам следует как можно скорее их освоить. Мы так и сделали и полностью перекодировали наши премиальные плагины с помощью React. Это подразумевало преобразование всех пользовательских интерфейсов, которые у нас уже были, с компонентами React.

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

Компоненты React, включенные в WordPress

WordPress предоставляет более 80 компонентов React, которые вы можете повторно использовать в своей разработке с помощью пакета Gutenberg @wordpress/components :

В каждой из папок компонентов, которые вы найдете здесь, на Github проекта Gutenberg, у вас есть исходный код JavaScript каждого компонента, а также его стили CSS и документация, чтобы знать, как и когда их использовать.

Среди компонентов, которые мы в Nelio использовали для наших новых интерфейсов React, стоит выделить Button и ButtonGroup для определения кнопок. Все контроллеры для полей и опций, таких как InputControl , CheckboxControl , NumberControl , RadioControl , RangeControl , SelectControl или TextControl . Или даже TabPanel для интерфейсов с вкладками или Popover и Modal для плавающих диалогов. И еще много…

Если бы нам пришлось разрабатывать эти компоненты с нуля, мы бы, конечно, до сих пор программировали новые интерфейсы React для наших премиальных плагинов. Повторное использование существующих компонентов — лучшее, что вы как разработчик можете сделать для экономии времени. А те, которые предоставляет Gutenberg для WordPress, идеально подходят для ваших плагинов.

Как повторно использовать компоненты WordPress React

Представьте, что вы хотите использовать кнопку в своем интерфейсе, разработанном в React. Благодаря существующим компонентам в Gutenberg вы можете напрямую использовать компонент Button , как показано в следующем примере:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

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

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

Чтобы повторно использовать существующий компонент Gutenberg, вам просто нужно проверить, существует ли этот компонент, и импортировать его в свой код через пакет @wordpress/components . Как видно из приведенного выше фрагмента кода, мы импортировали компонент Button из этого пакета. И чтобы пакет был доступен в вашем проекте, вы должны установить его с помощью команды npm install @wordpress/components в терминале. Но это уже объяснял Дэвид в своих постах, так что я не буду повторяться.

Что вы должны иметь в виду, так это то, что для того, чтобы эти компоненты могли принимать стили WordPress, вы должны установить wp-components как зависимость вашего файла стилей CSS, когда вы ставите его в очередь в WordPress с помощью PHP-функции wp_enqueue_style .

Если ваши потребности не покрываются компонентами React, предоставляемыми Gutenberg, не изобретайте велосипед и не используйте их. Преимущества повторного использования существующих компонентов намного больше, чем использование ваших собственных компонентов.

Книга рассказов Гутенберга о компонентах React

Одной из новинок Гутенберга является сборник рассказов, который мы можем найти на Github. Storybook — это инструмент с открытым исходным кодом, который предоставляет изолированную программную среду для разработки и просмотра компонентов. В случае с WordPress он, среди прочего, служит документацией для компонентов.

Среди различных опций, включенных в сборник рассказов Гутенберга, у нас есть возможность попробовать редактор блоков через меню Playground . Но самый интересный вариант — иметь возможность посмотреть документацию компонентов Гутенберга в дружественной форме.

Вам просто нужно открыть меню « Компоненты », и там вы найдете список компонентов, которые WordPress предоставляет через пакет @wordpress/components . Вы можете изучить каждый компонент React и увидеть примеры использования с их полным кодом JavaScript.

Например, на следующем снимке экрана вы видите примеры компонента Button с различными свойствами, которые могут иметь кнопки. Затем на вкладке Story у вас есть исходный код полного примера:

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

Одним из таких компонентов является TextControl , который используется для добавления текстового поля. На следующем снимке экрана мы видим вкладку Knob с различными параметрами, позволяющими скрыть метку компонента или изменить текст как метки, так и справки. Таким образом, мы можем увидеть, как компонент будет выглядеть с изменениями, и решить, как мы хотим использовать его в наших интерфейсах React:

Не все компоненты пакета @wordpress/components имеют полную документацию в Storybook, поэтому вам придется перейти в раздел пакетов компонентов на Github, чтобы увидеть последнюю версию статуса компонентов React в Gutenberg.

Однако по мере того, как документация Gutenberg Storybook будет завершена, она будет становиться все более и более интересной для разработчиков. Иметь документацию такого типа в WordPress — это роскошь. Его полезность не подлежит сомнению.

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

Избранное изображение от Morning Brew на Unsplash.