Поскольку команда Гутенберга в настоящее время перемещает много кода, который, скорее всего, будет повторно использован в модулях npm, это делает его очень простым для повторного использования компонентов Гутенберга в приложении React, даже если это не в WordPress. Это не единственный способ импортировать Гутенберг компонентов или утилит для вашего проекта, если он находится в WordPress, который я буду обсуждать в этой должности.
На этом посту будет уотена доля компонентов React между блоками Gutenberg, не-Gutenberg wp-админ экранами, работающими на приложениях React, и React. Это основано на работе, которую я в настоящее время делает, чтобы сделать мой плагин Caldera Формы Гутенберг дружественных и переписать много пользовательского интерфейса в React.
Приведение Модулей Гутенберга в сферу действия
Кодовая база Гутенберга разбита на различные модули, например, «данные» для управления состоянием или «компоненты» для компонентов uI, из которые построен редактор. Этот шаблон помогает ориентироваться в базе кода, так как каждый модуль является каталогом верхнего уровня. Это также помогает нам рассказать нам, как импортировать модуль или компонент. Например, если мы хотим использовать компонент SelectControl, мы получаем к нему доступ через модуль компонентов — wp.components.SelectControl.
Рассмотрим три варианта доступа к этим модулям. Первый не требует веб-пакета. Два других требуют webpack или быть адаптированы к какой-либо другой системы сборки.
Использование wp Global
Все библиотеки Гутенберга доступны через глобальную переменную «wp». Это означает, что самый простой способ привести компоненты в сферу действия — это доступ к глобальному wp. Это работает просто отлично, если активы управляются с помощью wp’enqueue-скрипта и вы установите правильную зависимость устанавливается для вашего скрипта.
В этом примере функция визуализации WordPress, создать элемент доступен через WP:
Ну вот. Работает в файле JS блока или где-либо еще в WordPress, если вы установите «элемент» в качестве зависимости при запросе вашего скрипта.
Использование WP как веб-пакет Внешний
Если вы посмотрите на источник Гутенберга, и вы должны, это большое читать, вы увидите веб-пакет импорта, как это
Это на самом деле то же самое, как доступ к wp.element глобальной. Гутенберг устанавливает веб-пакет external для каждой из точек входа и пакетов. Это хороший шаблон, который служит традиционным WordPress и более современный веб-пакет хорошо.
Вы можете настроить аналогичный веб-пакет, чтобы выступать в качестве псевдонима в плагине. Я построил блок плагин для оповещения сообщений в качестве примера код для моих переговоров WordCamp. Веб-пакет конфигурации имеет внешние для нескольких пакетов Гутенберга установки.
Затем можно импортировать модуль элемента с тем же синтаксисом Гутенберга и использованием документации Гутенберга.
Использование npm
Как я уже говорил ранее в этой должности, модули Гутенберга являются или будут установлены через систему управления зависимостью JavaScript npm. Если вы устанавливаете пакет WordPress ina WordPress плагин, вы, вероятно, следует установить его в качестве зависимости развития. Таким образом, вы можете использовать импорт веб-пакета, иметь модуль работы в тестах, но не добавлять модуль для сборки производства. В WordPress зависимость загружается с помощью wp’enqueue-скриптов. Если вы не разрабатываете для WordPress окружающей среды, отменить этот совет.
Например, для установки элементного модуля WordPress в плагин WordPress:
Или установить для использования за пределами среды WordPress:
Затем, чтобы привести зависимость в область, импортируйте ее с помощью веб-пакета:
Это то же самое, что и последние несколько примеров. В том-то и дело. Эта линия кода работает в любом контексте — Гутенберг блоков, другие WP-админ экраны, приложения, развернутые за пределами среды WordPress и с немного большей осторожностью, тесты.
Управление wp Global
WordPress использует глобальное государство. Это делает вещи сложными, но Гутенберг атакжем использования WP глобальной переменной является наиболее управляемым глобальным состоянием мы когда-либо были, как WordPress разработчиков. Давайте посмотрим на некоторые gotchas я столкнулся из-за непредсказуемости глобального государства и как я исправил эти вопросы.
Для не-Гутенберг wp-админ экраны
В WordPress плагин, используя WordPress Вавилон пресет делает много смысла для меня. Он держит Вавилон конфигурации довольно просто:
|
1
2
3
|
{
«пресеты»: «@wordpress/дефолт»
}
|
Одна вещь, что это делает, это использование WordPress ‘элемент для компиляции JSX. Это хорошо, до тех пор, как глобальная переменная wp.element установлен. Это на экранах Гутенберга. Это может быть проблемой, если ваши компоненты импортируют React.
Я столкнулся с этой проблемой при использовании компонентов React для экрана wp-admin, который разделяет компоненты с моим блоком Gutenberg. Решение, в то время @wordpress /элемент не был на npm, было делать то, что Гутенберг делает — определить wp.element равна React.element
Это не масштабируемое решение, но оно работает. Я буду рефакторинг этого кода использовать @wordpress / элемент, как я описал выше. Но, это, вероятно, будет проблемой для тех, кто поддерживает React и WordPress код вместе.
В тестах
Одна большая причина использовать React является Jest. Я люблю Джеста. Jest является самым простым инструментом тестирования, который я когда-либо использовал. Это не учебник по Jest, но я хочу, чтобы покрыть настройки тестов для компонентов, совместно между Гутенбергом и другими приложениями React.
Поскольку мы используем Jest в формах Кальдеры, мы должны убедиться, что wp.element определен. В настоящее время мы используем шим,скопированный с Гутенберга, чтобы предотвратить ошибки в наших тестах. Вот оно:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
глобальный. wp и
шорт-код:
},
apiЗапрос:
}
};
Объект. определитьНедвижимость (глобальная . wp, ‘элемент’,
получить: ()
} );
|
Выглядит знакомо не так ли? Это то же самое WordPress делает. В самом деле, Есть модули на npm опубликованы в последнее время, чтобы обеспечить простой, повторяемое решение для этого. Следите за тем, что публикуется в npm, в @wordpress организации области.
Мы должны сказать Jest использовать этот файл настройки. Вот полная настройка Jest, чтобы добавить к package.json:
Реагировать и WordPress
Я написал совсем немного о выборе между React и VueJS. До Гутенберга я был в команде VueJS. Но изучение разработки Гутенберга потребовало от меня глубокого погружения в React и переоценки моих оригинальных негативных мнений о JSX — языке шаблонов, который обычно используется для компонентов React.
Вам не нужно знать React развиваться для Гутенберга, но это действительно помогает. Вы также не должны использовать React. Я использовал Vue для блок-uI, используя Гутенберга для поставки состояния компонентов Vue. Это довольно прохладно на самом деле, но это ненужный слой осложнений, которые потребуют много веских причин, чтобы держать как Vue и React в вашем пакете расслоения и должны думать о обеих рамках.
Vue и React управляют состоянием очень по-разному, поэтому соблюдение правил обоих и различных синтаксисов шаблонных языков не масштабируется мысленно.
Redux (-как) государственное управление с wordPress данных
Так, я люблю Vue много, но как только WordPress сделало меня пересмотреть JSX снова и увидеть как оно смогло быть использовано действительно наилучшим образом в плагине WordPress, я был продан на реакции. Одной болью для меня с Vue было государственное управление. Я чувствовал, что Vuex, рекомендуемое решение для управления государством, требует слишком много шаблонов и трудно интегрироваться с компонентами без эффективного создания глобального государства. Я, вероятно, делал это неправильно, но Vuex просто никогда не нажал на меня.
Redux, который является стандартом — на данный момент — для государственного управления в приложениях React, делает гораздо больше смысла для меня, чем Vuex. Это моя #2 причина для перехода к React. Поскольку WordPress теперь использует абстракцию на вершине React для Гутенберга, использование Vue и React не кажется практичным. Чем больше мы интегрируемся с Гутенбергом, тем больше использование React является самым простым решением. Мне также нравится, как шаблон использования контейнерных и презентационных компонентов с React и Redux помощь держит проблемы отдельных и единицы испытаний просто.
Абстракция Redux в Гутенберге, доступная на npm как @wordpress/данные, делает Redux проще. Регистрация «магазина» с @wordpress/данных действия и редукторы связаны и Есть утилиты для подписки на изменения, выбор данных, что делает Запросы API и более высокого порядка компонентов для инъекционного состояния.
В моем последнем посте для крутящего момента,я покрыл основы государственного управления для Redux с WordPress. Пример кода был взят из библиотеки процессоров Caldera Forms, над которой я работаю. Это пример случая использования, который должен работать в почтовом редакторе, в других экранах wp-админ и за пределами среды WordPress, так как Caldera Forms Pro является приложением Laravel и Node.
Например, вот презентационный компонент, который инкапсулирует весь процессор ный процессор, без какого-либо государственного управления.
Мы можем назвать этот компонент «контролируемым». Он не знает о состоянии, его состояние полностью контролируется какой-то другой системой. Этот компонент получает «завернутый» в компонент свыбором более высокого заказа, так что он может получить доступ к данным из магазина.
Этот компонент представляет собой контейнер для компонентов, составляющих uI. Это ответственность состоит в том, чтобы составить uI с детскими компонентами, которые используют реквизит контейнера.
Обратите внимание, что я использую библиотеку типов реквизита, чтобы сообщить React, какие типы реквизита должен получить компонент. Я люблю это делать. Использование типов реквизита обеспечивает сильную ввод компонентов React без необходимости обучения и настройки потока или шрифта. Я использую поток на некоторых проектах, но по большей части я считаю, реквизит типов быть более чем достаточно проверки.
Что мне действительно нравится в проп-типов, если я не в состоянии следовать правилам, мой Jest снимок тесты не будет работать, и ошибки, которые они поднимают, когда они не скажут мне, какой компонент проходит неправильный реквизит и где.
Этот презентационный компонент получает «завернутый» в компонент свыбором более высокого заказа (HOC), чтобы он мог получать данные из магазина и предоставлять их компоненту презентации.
WithSelect HOC позволяет нам читать данные из состояния. Мы также должны отправить изменения в магазин. Мы делаем это, обернув компонент с сDispatch HOC:
Вот полный завернутый компонент, который может выбрать из состояния и отправки изменений в состоянии:
Между Redux и магазином нет связи. Правила соединения, за которые несет ответственность компонент обертки, определяются на основе компонентного реквизита, которые являются лишь аргументами, передаваемыми классу. Презентационный компонент передается реквизит с функцией обработчика изменений и вызывает ее. Эта функция отвечает за другой компонент. До тех пор, пока общедоступный API компонента и функция обработчика изменений остаются неизменными, любое изменение может произойти в компоненте или функции с этой ответственностью. Единие тесты с Jest обнаружить эти изменения.
С Jest мы не хотим тестировать React. Мы хотим проверить, что наш компонент имеет правильный реквизит, и если есть обработчики изменений, они стреляют и излучают нужные данные. Jest имеет большой инструмент тестирования моментального снимка. Этот инструмент отображает компонент и хранит его как JSON. Затем в будущем выполняется моментальный снимок, воссозданный и сравниваемый с сохраненным моментальным снимком. Любые изменения и тест не удается.
Когда эти типы тестов не удается, что означает, что различные реквизиты были переданы компоненту или одному из его детей. Это может быть преднамеренным, и это нормально, вы можете просто сохранить новый снимок. Или это означает, что они, как ваши компоненты подключены друг к другу, изменились непреднамеренно и была введена ошибка регрессии.
Ну вот
Здесь нет ничего необычного. Настройка импорта веб-пакетов и их использование, устанавливая зависимости по мере необходимости. Если вы научились использовать npm и использовать его для разработки React, вы знаете, как это сделать. Это интересно увидеть WordPress начинают работать больше как современный веб-приложение таким образом. Много DUX.
После того как у вас есть все установки для импорта с webpack и WP глобального управления, в какой среде вы находитесь в Гутенберге, WordPress других или нет WordPress на самом деле не имеет значения. Это действительно здорово.
Источник: torquemag.io
