Для кого это руководство
Эта серия статей больше рассчитана на разработчиков, которые интересуются новым WordPress и хотят начать работать с ним. Читать ее не обязательно владельцам сайтов, которые хотят знать, как Gutenberg повлияет на их сайт.
Ясно, что у Gutenberg много возможностей . Да, он нацелен на улучшение качества редактирования, но он также может изменить то, что люди думают о возможностях WordPress. С пользовательскими «блоками», из которых будет создаваться контент, новый редактор WordPress становится полноценным конструктором сайтов.
Что нужно знать для создания блоков Gutenberg на WordPress
Вы, вероятно, лучше всего справитесь с этой серией, обладая такими навыками:
- Концепции разработки WordPress, такие как actions, filters и template-tags
- Основополагающие (не глубокие) знания JavaScript, например, понимание различия между объектом и массивом и что такое функции обратного вызова.
- Использование командной строки для навигации по каталогам и запуска задач сборки
Если вы писали свои собственные модули npm, чувствуете себя комфортно при написании коммитов в Vim, или вы знакомы с React, то эта серия может показаться вам излишне подробной и простой.
В ближайшие годы распространеие Gutenberg приведет к тому, что WordPress перерастет свою неудачную репутацию как устаревший, небезопасный, недружественный разработчикам, движок для ведения блогов.
WordPress наверстывает упущенное, и он несет в себе все то хорошее, что вы можете себе представить в JavaScript: Gutenberg — это управляемый React опыт редактирования SPA. Он перевернет экосистему WordPress с ног на голову и, надеемся, уступит место новым поколениям тем и плагинов, работающих на блоках — явление, которое другие системы управления контентом уже давно используют.
Мы создадим блок, но по пути мы отойдем от построения блоков и узнаем о настройке среды, об API, а также о других концепциях и терминологиях разработки, которые понадобятся для понимания.
Мы собираемся углубиться в некоторые основные концепции JavaScript и создать собственный блок, который послужит основой для классического шаблона проектирования.
Прежде чем мы углубимся в это, мы рассмотрим новый стек JavaScript и инструменты, которые он нам предоставляет. Мы также рассмотрим компонент React, чтобы познакомить нас с реактивным, управляемым состоянием JavaScript и JSX.
Со всеми знаниями и инструментами, с которыми мы работали, в конце этой серии уроков у нас будет солидный пользовательский блок карточек. Это также может служить основой для многих других типов блоков для поддержки содержимого веб-сайта.
Прежде чем приступить к работе, настроим окружение с помощью подходящих инструментов для выполнения этой работы. Поскольку мы используем современный стек JavaScript, есть некоторые браузеры, которые еще не поддерживают языковые функции. Из-за этого мы будем использовать некоторые инструменты Node JS для компиляции этого кода в более совместимую форму.
Установите Node JS
Скачайте и установите последнюю версию Node.JS с официального сайта, где вы найдете установщики для вашей системы. Там также есть полезная страница, которая объясняет, как можно использовать популярные менеджеры пакетов.
Запустите терминал
Мы собираемся использовать терминал для запуска некоторых команд позже в этой серии, так что настройте его. Вот некоторые ресурсы для пользователей Mac и Windows:
- Mac : вы можете использовать терминал по умолчанию, который находится в Приложения> Терминал
- Windows : Вы можете запустить подсистему Linux, использовать командную строку или получить программное обеспечение, такое как Hyper.
Установите WordPress локально
Поскольку мы используем современный стек JavaScript, важно, чтобы экземпляр WordPress работал на вашем компьютере локально. Для запуска веб-сервера можно использовать MAMP, XAMP, или OpenServer.
Сначала мы рассмотрим некоторые основные элементы современной версии JavaScript, известной как ES6. Затем мы познакомимся с React и JSX, а также настроим webpack и babel для сборки.
