Урок 1

Настройка Webpack / Babel без воды

Если зайти в официальную документацию WordPress по Gutenberg, то можно заметить, что код в ней в основном представлен в двух синтаксисах:

Сразу могут возникнуть вопросы – а в чём разница? Какой лучше использовать?

Когда Gutenberg только появился (а точнее стал частью WordPress), это был декабрь 2018, его уже нельзя было игнорировать. И не знаю с чем это связано, но почему-то с 1-го января любого года у меня появляется большое количество энергии, чтобы делать что-то новое. И делать много. И вот в январе 2019 я уже полностью освоил создание блоков для Gutenberg и других модулей для него на… чистом JavaScript ES5. Если сказать, что код получается некрасивый – ничего не сказать. Поэтому рано или поздно, разрабатывая под Gutenberg, приходишь к пониманию того, что надо настраивать сборку, и кодить нормально на JSX.

Но дело в том, что если просто добавить синтаксис JSX в свой JavaScript код, то браузер не сможет его интерпретировать и поэтому придётся использовать сборку. Cборки проектов для WordPress чаще всего осуществляются на Webpack.

Что будет в этом уроке

• Установим и настроим Webpack.
• Настроим Babel для преобразования JSX кода в JavaScript.

Для того, чтобы скачать мой webpack.config.js, нужно приобрести курс.

Список уроков

• Вступление04:14
• Настройка Webpack / Babel21:22
• Сайдбары / панели12:47
• Компоненты полей09:05
• Получение / Сохранение значений14:55
• PluginDocumentSettingPanel06:05