Эта статья о том, нужно ли вам знать React как разработчика WordPress, была первоначально опубликована журналом Torque Magazine и воспроизводится здесь с разрешения.
Новая система редактирования контента WordPress Гутенберг будет работать с редактором постов WordPress в WordPress 5.0. Гутенберг — «блочный» редактор. При создании контента все является блоком. Если у вас есть пост, состоящий из одного абзаца, одного заголовка и двух абзацев, то это четыре блока.
Gutenberg поставляется с набором «основных» блоков по умолчанию — абзац, заголовок, последние сообщения, изображения, цитаты и т. Д. Если вы используете Gutenberg для создания контента, вы используете те блоки или пользовательские блоки, которые предоставляются плагинами WordPress, которые вы устанавливаете. на Вашем сайте.
Гутенберг является JavaScript-управляемым интерфейсом. В частности, он построен с использованием библиотеки пользовательского интерфейса с открытым исходным кодом Facebook «React». В этом посте рассказывается о создании собственных блоков для использования в редакторе Гутенберга с использованием JavaScript. Вам не нужно использовать JavaScript для создания блоков. Advanced Custom Fields (ACF) недавно анонсировала аккуратную систему для создания пользовательских блоков с помощью PHP.
Что такое реакция?
В разработке переднего плана наименее производительные вещи, которые вы делаете, это чтение и запись из DOM. Очень непросто, постоянно в разных браузерах, ссылаться и обновлять DOM. React предоставляет лучшую систему для этого, реализуя модель реактивного программирования и виртуальную абстракцию DOM.
Вместо непосредственного взаимодействия с DOM, например, с помощью jQuery.html()jQuery.val() Мы называем это виртуальным DOM или VDOM. VDOM — это объект JavaScript, который представляет структуру DOM. Всякий раз, когда ваш код React сообщает React об изменении каких-либо данных, VDOM пересчитывается. После этого React вычисляет разницу между DOM, существовавшую до изменения и после изменения. Затем React (на самом деле ReactDOM или React Native) обновляет только те части DOM, которые необходимо изменить. Как это происходит, на самом деле не имеет значения.
Как Реакт используется в Гутенберге?
React — это библиотека для создания повторно используемых компонентов. Поскольку они могут использоваться повторно, мы можем составлять интерфейсы из компонентов. Это проект с открытым исходным кодом, созданный на Facebook.
Все это блок. Текст, изображения, галереи, виджеты, шорткоды и даже фрагменты пользовательского HTML, независимо от того, добавлен ли он с помощью плагинов или иным образом. Вам нужно только научиться владеть одним интерфейсом: интерфейсом блока, и тогда вы знаете, как все делать. — Справочник Гутенберга
Блоки являются основной единицей Гутенберга. Мы составляем контент из одного или нескольких блоков.
Компоненты — это элементарный элемент React, мы составляем приложения React из компонентов. Gutenberg создается с помощью React, поэтому каждый блок состоит из одного или нескольких компонентов.
Важно отметить, и я расскажу об этом подробнее в этой серии публикаций, но Гутенберг добавляет тонкий слой абстракции над React. В нашем коде Гутенберга мы будем использовать wp.createElement вместо React.createElement Он работает так же, но при изменении API React WordPress может решить, когда поддерживать эти изменения и предоставить оболочку с обратной совместимостью, или решил не делать этого.
Это хорошее планирование на будущее, но сейчас это просто React.
Нужно ли знать реакцию на развитие с Гутенбергом?
Итак, это подводит нас к большому вопросу, нужно ли изучать React? Нет, ты не. Ничего из этого не имеет значения, если вы не хотите делать свои собственные блоки. Если вы просто хотите использовать блоки, предоставляемые ядром или плагинами, вам никогда не нужно создавать собственные типы блоков.
Нет, но…
Вы можете создать базовый блок, не зная много JavaScript. Взгляните на этот базовый пример блока, упрощенный из официальных примеров Гутенберга:
( function( blocks, element ) {
var el = element.createElement;
blocks.registerBlockType( 'namespace/block-name', {
title: __( 'Example: Basic', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el(
'p',
{},
'Hello World, step 1 (from the editor).'
);
},
save: function() {
return el(
'p',
{},
'Hello World, step 1 (from the frontend).'
);
},
} );
}(
window.wp.blocks,
window.wp.element
) );
Единственное, что может быть новым, — это использовать wp.createElement — в этом примере он находится в переменной «el» — для создания HTML. Это причудливый способ создать HTML-элемент типа «р». Я расскажу об этом в моей следующей статье в этой серии.
WordPress имеет слой абстракции над React, поэтому все, что вам действительно нужно знать, это несколько функций: wp.createElementsetAttribute() .
Я рекомендую просмотреть раздел «Создание блоков» справочника Гутенберга, а затем просмотреть репозиторий примеров, а также пример кода из мастерской WordCamp Miami 2018 Gutenberg . Это весь код, который вы можете использовать, не углубляясь в React.
Да, если…
Если вам нужно сделать простые блоки, возможно, с одним или двумя элементами управления, вам не нужно знать React больше, чем те две концепции, которые я упоминал ранее. Но если вы хотите создать более сложный блок, поделитесь компонентами между Gutenberg и другими приложениями React, например, экраном настроек wp-admin или мобильным приложением для вашего плагина.
React — это действительно забавная библиотека, с которой можно играть, а владение React — очень востребованный навык. Что еще более важно, изучив React, вы сможете легче понять более продвинутые концепции Гутенберга — управление состоянием, модульные тесты и т. Д.
Как научиться реагировать на WordPress и Gutenberg
Это начало серии по разработке React для Гутенберга. В следующий раз я расскажу об основах React и о том, как их применять в блоках Гутенберга. Оттуда мы сделаем динамические блоки, затем рассмотрим управление состоянием и тестирование.
У меня есть список бесед с разработчиками Гутенберга на моем сайте, которые вы можете найти полезными. В этой серии я буду объяснять концепции React, но если вы хотите глубоко изучить JavaScript и React, Уэс Бос и Зак Гордон предложат вам отличные курсы по React и JavaScript.