alex-boom · October 21, 2019 07:15
diff --git a/create-gutenberg-plugin.txt b/create-gutenberg-plugin.txt
 Источник: https://code.tutsplus.com/tutorials/wordpress-gutenberg-block-api-an-introduction--cms-31039

 Необходимые компоненты
 Это серия учебников среднего и продвинутого уровня, поэтому предполагается, что вы не новичок в разработке WordPress. Чтобы получить максимальную отдачу от этой серии, вы должны иметь, по крайней мере, рабочие знания о следующем:

 JavaScript (ES6+)
 React (and ReactDom)
 JSX
 Command line
 Node/NPM
 PHP
 WordPress plugin/theme development
 Локальная среда разработки WordPress

 Если вам нужно освежить в памяти любую из этих тем, это может быть хорошей идеей, чтобы сделать это, прежде чем продолжить. Я объясню концепции, как мы идем вперед, но это выходит за рамки учебника, чтобы объяснить каждую маленькую деталь.

 Это обычная практика для создания пользовательских блоков в WordPress с помощью JSX, но это ни в коем случае не требуется. Если вы привыкли разрабатывать компоненты React в vanilla JavaScript, вы можете сделать это и в WordPress. Выбор полностью за вами. Тем не менее, большая часть блочного кода, с которым вы столкнетесь, будет написана в JSX (включая этот учебник), поэтому вам будет легче понять концепции, если вы тоже используете JSX.

 Гутенберг: все еще идет работа
 Проект Гутенберга все еще очень развивается, поэтому некоторые вещи могут быть подвержены изменениям даже к тому времени, когда вы читаете этот учебник. Это может включать в себя изменения в интерфейсе редактора, новые основные компоненты и т.д.

 Тем не менее, новый редактор теперь довольно стабилен, и недавно добавленные функции, такие как вложенные блоки и переупорядочивание перетаскивания/падения, довольно интересны. Даже если некоторые незначительные детали того, как вы реализуете блоки, могут измениться, важно помнить общую концепцию блоков и то, как вы можете использовать их для создания любого типа контента.

 Если вы застряли , я бы рекомендовал взглянуть на официальный справочник Гутенберга, который постоянно обновляется с последними изменениями. Также проверьте проект Gutenberg на GitHub, чтобы проверить исходный код и регистрировать любые проблемы, с которыми вы можете столкнуться.

 Это только поможет проекту стать сильнее, чем больше людей его тестируют. Это еще одна отличная причина, чтобы начать разрабатывать блоки сейчас, прежде чем они официально станут частью WordPress!

 Настройка Среды
 Чтобы следовать вместе с кодом в этом учебнике, вам потребуется следующее:

 местная среда развития
 последняя версия WordPress
 Автономный плагин Gutenberg
 редактор кода
 Если у вас еще нет локальной среды разработки, то вы можете использовать что-то вроде Local by Flywheel или DesktopServer, поскольку они оба имеют бесплатные версии и поддерживают несколько операционных систем.

 Убедитесь, что вы используете последние версии WordPress и плагин Gutenberg, чтобы убедиться, что вы используете все последние функции. Кроме того, есть некоторые отличные редакторы кода там , так что если вы еще не установили один, то посмотрите на Бесплатные редакторы, такие как Visual Studio Code или Atom, которых должно быть более чем достаточно.

 Чтобы легко создавать новые блоки, мы будем использовать относительно новый инструментарий под названием create-guten-block. Это позволяет быстро раскрутить новый плагин, содержащий все настройки и стартовый код, необходимые для создания блоков. Это набор инструментов нулевой конфигурации тоже, поэтому он работает прямо из коробки аналогично create-react-appнабору инструментов для создания новых приложений React с минимальными усилиями. Так что если вы когда-либо использовали create-react-app, вы будете знать, чего ожидать.

 Давайте теперь посмотрим, как мы можем использовать этот инструмент для создания блоков Гутенберга. Откройте окно терминала в папке плагина ( /wp-content/plugins/) для вашего локального сайта разработки и введите следующее:

 1 npx create-guten-block my-custom-block
 2 cd my-custom-block
 3 npm start

 (Примечание: npm v5.2+ требуется для использования npxкоманды.)

 Через несколько минут новый плагин будет создан в папке с именемmy-custom-block, содержащей все файлы и инструменты, необходимые для создания блоков с помощью React! Неплохо, а?

 Имя плагина в WordPress admin будет my-custom-block-Cgb Gutenberg Block Plugin .
 Идите вперед и активируйте его.
	Источник: https://code.tutsplus.com/tutorials/wordpress-gutenberg-block-api-an-introduction--cms-31039

	Необходимые компоненты
	Это серия учебников среднего и продвинутого уровня, поэтому предполагается, что вы не новичок в разработке WordPress. Чтобы получить максимальную отдачу от этой серии, вы должны иметь, по крайней мере, рабочие знания о следующем:

	JavaScript (ES6+)
	React (and ReactDom)
	JSX
	Command line
	Node/NPM
	PHP
	WordPress plugin/theme development
	Локальная среда разработки WordPress

	Если вам нужно освежить в памяти любую из этих тем, это может быть хорошей идеей, чтобы сделать это, прежде чем продолжить. Я объясню концепции, как мы идем вперед, но это выходит за рамки учебника, чтобы объяснить каждую маленькую деталь.

	Это обычная практика для создания пользовательских блоков в WordPress с помощью JSX, но это ни в коем случае не требуется. Если вы привыкли разрабатывать компоненты React в vanilla JavaScript, вы можете сделать это и в WordPress. Выбор полностью за вами. Тем не менее, большая часть блочного кода, с которым вы столкнетесь, будет написана в JSX (включая этот учебник), поэтому вам будет легче понять концепции, если вы тоже используете JSX.

	Гутенберг: все еще идет работа
	Проект Гутенберга все еще очень развивается, поэтому некоторые вещи могут быть подвержены изменениям даже к тому времени, когда вы читаете этот учебник. Это может включать в себя изменения в интерфейсе редактора, новые основные компоненты и т.д.

	Тем не менее, новый редактор теперь довольно стабилен, и недавно добавленные функции, такие как вложенные блоки и переупорядочивание перетаскивания/падения, довольно интересны. Даже если некоторые незначительные детали того, как вы реализуете блоки, могут измениться, важно помнить общую концепцию блоков и то, как вы можете использовать их для создания любого типа контента.

	Если вы застряли , я бы рекомендовал взглянуть на официальный справочник Гутенберга, который постоянно обновляется с последними изменениями. Также проверьте проект Gutenberg на GitHub, чтобы проверить исходный код и регистрировать любые проблемы, с которыми вы можете столкнуться.

	Это только поможет проекту стать сильнее, чем больше людей его тестируют. Это еще одна отличная причина, чтобы начать разрабатывать блоки сейчас, прежде чем они официально станут частью WordPress!

	Настройка Среды
	Чтобы следовать вместе с кодом в этом учебнике, вам потребуется следующее:

	местная среда развития
	последняя версия WordPress
	Автономный плагин Gutenberg
	редактор кода
	Если у вас еще нет локальной среды разработки, то вы можете использовать что-то вроде Local by Flywheel или DesktopServer, поскольку они оба имеют бесплатные версии и поддерживают несколько операционных систем.

	Убедитесь, что вы используете последние версии WordPress и плагин Gutenberg, чтобы убедиться, что вы используете все последние функции. Кроме того, есть некоторые отличные редакторы кода там , так что если вы еще не установили один, то посмотрите на Бесплатные редакторы, такие как Visual Studio Code или Atom, которых должно быть более чем достаточно.

	Чтобы легко создавать новые блоки, мы будем использовать относительно новый инструментарий под названием create-guten-block. Это позволяет быстро раскрутить новый плагин, содержащий все настройки и стартовый код, необходимые для создания блоков. Это набор инструментов нулевой конфигурации тоже, поэтому он работает прямо из коробки аналогично create-react-appнабору инструментов для создания новых приложений React с минимальными усилиями. Так что если вы когда-либо использовали create-react-app, вы будете знать, чего ожидать.

	Давайте теперь посмотрим, как мы можем использовать этот инструмент для создания блоков Гутенберга. Откройте окно терминала в папке плагина ( /wp-content/plugins/) для вашего локального сайта разработки и введите следующее:

	1 npx create-guten-block my-custom-block
	2 cd my-custom-block
	3 npm start

	(Примечание: npm v5.2+ требуется для использования npxкоманды.)

	Через несколько минут новый плагин будет создан в папке с именемmy-custom-block, содержащей все файлы и инструменты, необходимые для создания блоков с помощью React! Неплохо, а?

	Имя плагина в WordPress admin будет my-custom-block-Cgb Gutenberg Block Plugin .
	Идите вперед и активируйте его.