Гутенберг поставляется с набором «основных» блоков по умолчанию — абзац, заголовок, последние сообщения, изображения, блокчейн и т.д. Если вы используете Gutenberg для создания контента, вы используете те блоки или пользовательские блоки, которые предоставляются плагинами WordPress, которые вы устанавливаете на вашем сайте.
Gutenberg — это интерфейс, управляемый JavaScript. В частности, он построен с использованием facebook с открытым исходным кодом пользовательского интерфейса библиотеки «React». Этот пост объясняет немного о создании собственных пользовательских блоков для использования в редакторе Гутенберга с помощью JavaScript. Для создания блоков не нужно использовать JavaScript. Расширенный пользовательских полей (ACF) недавно объявил аккуратный глядя системы для создания пользовательских блоков с PHP.
Что такое реакция?
В переднем конце развития, наименее исполнительские вещи, которые вы делаете, читают и пишете из DOM. Очень трудно сделать, последовательно в разных браузерах, является ссылка и обновление DOM. React обеспечивает лучшую систему для этого, путем реализации реактивной модели программирования и виртуальной абстракции DOM.
Вместо того, чтобы взаимодействовать с DOM напрямую, например, с помощью j’ery.html() или j’ery.val(), React создает виртуальное представление DOM. Мы называем это виртуальным DOM или VDOM. VDOM — это объект JavaScript, представляющий структуру DOM. Когда ваш код React сообщает об изменении любой из данных, VDOM пересчитывается. После этого React вычисляет разницу между DOM, как она существовала до изменения и после изменения. Затем React (действительно ReactDOM или React Native) обновляет только те части DOM, которые нужны. Как это делает это не имеет значения на самом деле.
Как react используется в Гутенберге?
React — это библиотека для создания многоразовых компонентов. Поскольку они многоразовые, мы можем составить интерфейсы из компонентов. Это проект с открытым исходным кодом, созданный на Facebook.
Все это блок. Текст, изображения, галереи, виджеты, короткие коды и даже куски пользовательского HTML, независимо от того, если он добавлен плагинами или иным образом. Нужно только научиться осваивать один интерфейс: интерфейс блока, и тогда вы знаете, как все делать. — Справочник Гутенберга
Блоки являются основной единицей Гутенберга. Мы сочиняем контент из одного или нескольких блоков.
Компоненты являются атомной единицей React, мы сочиняем приложения React из компонентов. Гутенберг создается с помощью React, поэтому каждый блок состоит из одного или нескольких компонентов.
Важно отметить, и я расскажу об этом больше в этой серии сообщений, но Гутенберг добавляет тонкий слой абстракции над React. В нашем коде Гутенберга мы будем использовать wp.createElement вместо React.createElement. Он работает так же, но когда API React изменения, WordPress может решить, когда для поддержки этих изменений и обеспечить обратную совместимость обертку или решил не делать этого.
Это хорошее планирование на будущее, но на данный момент, это просто реагировать.
Нужно ли мне знать, реагировать на развитие с Гутенбергом?
Итак, это подводит нас к большому вопросу, вам нужно научиться React? Нет, не надо. Ничего из этого не имеет значения, если вы не хотите сделать свои собственные блоки. Если вы просто хотите использовать блоки, предоставляемые основными или плагинами, вам никогда не нужно делать свои собственные типы блоков.
Нет. Но…
Вы можете создать базовый блок, не зная много JavaScript. Взгляните на этот основной пример блока, упрощенный из официальных примеров Гутенберга:
Единственное, что может быть новым, это использование wp.createElement — в этом примере, это в переменной «эль» — для создания HTML. Это причудливый способ создать html элемент типа «p». Я расскажу, что в моей следующей статье в этой серии.
WordPress имеет слой абстракции над React, так что все, что вам действительно нужно знать, это несколько функций: wp.createElement, который создает HTML и setAttribute(), который используется для обновления атрибутов блока.
Я рекомендую пройти через Создание блоков разделе Гутенберг руководство, а затем, глядя на примеры репо, а также пример кода из WordCamp Майами 2018 Гутенберг семинара. Это все код, который можно использовать, не копаясь в React на всех.
Да, если…
Если вам нужно сделать просто просто блоки, возможно с одним или 2 управлениями, то вам не нужно знать React больше чем те 2 принципиальные схемы я упомянул раньше. Но, если вы хотите создать более сложный блок, совместное использование компонентов между Gutenberg и другими приложениями React, например, экраном настроек wp-admin или мобильным приложением для вашего плагина.
React это действительно весело библиотека, чтобы играть с и мастерство с React является очень рыночным навыком иметь. Что еще более важно, как только вы узнаете React, вы сможете легче понять более продвинутые концепции Гутенберга — государственное управление, модульные тесты и т.д.
Как научиться реагировать на WordPress и Гутенберг
Это начало серии по развитию React для Гутенберга. На следующей неделе я расскажу об основах React, а затем о том, как применить их в блоках Гутенберга. Оттуда мы сделаем динамические блоки, а затем рассмотрим управление состоянием и тестирование.
У меня есть список переговоров разработчиков Гутенберга на моем сайте, который вы можете найти полезным. В этой серии я объясню концепции React, но если вы хотите узнать JavaScript и React глубоко, Ус Бос и Зак Гордон имеют отличные курсы по React и JavaScript, чтобы начать работу.
Источник: torquemag.io
