Разработка Gutenberg с примерами: Карты Google (часть 1)

Несколько дней назад мы опубликовали новый плагин в каталоге плагинов WordPress.org: Nelio Maps. Как видно из названия, это плагин карт , который добавляет новый тип блока в редактор WordPress. С его помощью мы можем легко добавить карту Google на наши страницы или сообщения. Вот как это выглядит:

Nelio Maps — один из наших первых плагинов, полностью разработанный для Gutenberg. Несмотря на то, что это относительно простой плагин, это очень полезный продукт. С одной стороны, потому что любой пользователь, который хочет добавить карты на свой веб-сайт, теперь может сделать это, установив простой и легкий плагин. С другой стороны, потому что у любого разработчика, который хочет разрабатывать в Гутенберге, теперь есть реальный пример того, как создать плагин «с нуля», просто прочитав этот пост.

Поскольку я знаю, что разработка такого плагина — не самая простая вещь в мире, я разделил это руководство на три разные части. Сегодня я объясню, как создать плагин «с нуля» , чтобы у нас получился скелет, который мы будем использовать для создания конечного продукта. Во втором посте я объясню, как получить интерактивную карту в редакторе блоков WordPress, и мы увидим все компоненты, которые я создал для создания плагина. Наконец, в третьем и последнем посте мы увидим , как сохранить карту в базе данных и как мы можем показать ее во внешнем интерфейсе .

Определение нашего проекта и плагина, который мы хотим

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

Это требования проекта:

1. Нужно иметь возможность добавлять карту (или более одной) на свои страницы или сообщения.
2. Должна быть возможность центрировать карту в любом месте,
   
   • либо перетащив карту мышкой
   • или поиск местоположения в окне поиска.
3. Размер карты должен регулироваться как по ширине, так и по высоте.
4. Карта должна включать различные стили (черно-белые, настраиваемые цветовые палитры и т. д.).
5. Пользователь должен иметь возможность добавить маркер на карту.
6. При наличии маркера карта должна сопровождаться текстовым полем с дополнительной информацией о маркере.

Амбициозно, правда? Что ж, приступим!

Как создать плагин Gutenberg «с нуля»

Если вы следите за нашим блогом, вы, вероятно, видели, что несколько дней назад Антонио опубликовал пост, объясняющий, как создавать плагины с помощью шаблона плагинов, который мы создали в Nelio. Если вы еще не читали его пост, я рекомендую вам сначала прочитать его, потому что наш плагин будет основан на шаблоне плагина wp-beb , который Антонио объясняет там.

Чтобы начать наш проект, первое, что мы сделаем, это отразим шаблонный плагин Nelio. Сначала создайте новый репозиторий в своей учетной записи GitHub. Затем выполните шаги, описанные на страницах справки Github, чтобы отразить наш шаблон:

 git clone --bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git push --mirror https://github.com/your-username/your-repo.git

Как только ваш проект будет готов, следуйте инструкциям на README.md , чтобы скомпилировать проект и, таким образом, увидеть его на своем сайте WordPress.

Как преобразовать шаблон плагина в свой плагин

Как указано в шаблонной документации плагина, первое, что нам нужно сделать, это изменить имя проекта в исходном коде. То есть вы должны заменить все вхождения wp-beb (как прописные, так и строчные, с дефисами или подчеркиваниями) на имя нашего плагина (в моем случае nelio-maps ).

Для этого мы можем использовать следующий скрипт:

Просто имейте в виду, что вам придется заменить строки nelio maps int в строках 5, 8, 9 и 10 на любое имя вашего плагина.

С другой стороны, сейчас самое время изменить документацию плагина. С одной стороны, вы должны отредактировать файлы README.md и readme.txt , чтобы отразить назначение вашего нового плагина (конечно, не забывая упомянуть тот факт, что вы используете наш шаблон в качестве основы). С другой стороны, вы должны изменить первый комментарий в основном файле PHP, так как это данные, которые WordPress использует для отображения плагина на экране плагинов .

Вы можете увидеть, как я внес все эти изменения в первый коммит проекта Nelio Maps.

Как очистить шаблон плагина от ненужных вещей

Шаблонный плагин Nelio по умолчанию включает несколько компонентов: (а) демонстрационный блок и (б) плагин Гутенберга. Поскольку нас интересует только создание блока (карты), мы удалим все, что осталось (плагин Gutenberg).

Этот шаг довольно прост, так как в основном он основан на «удалении» из плагина лишнего. В частности, мы должны:

1. Избавьтесь от всего содержимого, которое появляется в папке с assets (куда был добавлен плагин Gutenberg, его стиль и значок).
2. Очистите файл webpack.config.js , так как есть пара правил, которые использовали файлы в assets что удаленных ресурсах.
3. Очистите основной файл плагина, так как он ставит в очередь таблицу стилей и файл JavaScript, которых больше не существует.

Вы можете увидеть все изменения в этом коммите. Если вы снова скомпилируете код, вы увидите, что блок Demo все еще существует, а плагин Gutenberg, появившийся в правом верхнем углу экрана, — нет.

Резюме

В сегодняшней статье мы увидели, как создать плагин для Гутенберга. Во-первых, мы определили тип проекта, который хотим создать, и определили его требования. Далее мы рассмотрели шаги, необходимые для адаптации стандартного плагина от Nelio к новому проекту. То есть мы увидели, как клонировать шаблонный проект Нелио и очищать его для удовлетворения наших конкретных потребностей.

Увидимся на следующей неделе во второй части этого урока, где мы изменим демо -блок, чтобы он выполнял все функции, которые мы описали в начале этого поста.

Избранное изображение Бретта Зека на Unsplash .