Как внести свой вклад в Gutenberg в качестве разработчика WordPress

Вам это более или менее понравится, но Gutenberg, редактор блоков WordPress, никуда не денется. Хорошо то, что, будучи открытым исходным кодом, вы можете изменять его по своему усмотрению (если знаете, как).

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

Знаете ли вы, как внести свой вклад в базовый код Гутенберга? Вероятно, ваш ответ - нет. То же самое случилось со мной, и я должен был исследовать это. Итак, я объясню, как продолжить, чтобы вам было проще и быстрее понять весь процесс, а затем внести свой вклад в улучшение Гутенберга (если вы хотите) с помощью собственного кода в качестве разработчика.

Есть многое, что нужно сделать и улучшить, но в ваших руках помочь решить те проблемы, которые вы обнаружите с помощью редактора блоков WordPress.

Шаги, чтобы внести свой вклад в развитие Гутенберга

Прежде чем я начну, я предполагаю, что у вас есть минимальные знания о Git и у вас есть учетная запись GitHub. Если это не так, просто создайте одну учетную запись и ознакомьтесь с этим руководством, чтобы изучить основы.

Создайте вилку Гутенберга

Первое, что вам нужно знать, это то, что исходный код Gutenberg размещен на GitHub в этом репозитории кода. Там происходит эволюция проекта.

Здесь у вас есть код Гутенберга в виде плагина WordPress. Для каждой новой версии плагина стабильная версия кодовой базы переносится на следующую версию ядра WordPress. И это путь.

Чтобы внести свой код в репозиторий Gutenberg, первое, что нам нужно сделать, это создать форк в нашей учетной записи GitHub. Для этого мы нажимаем на кнопку « Вилка », которая появляется в правом верхнем углу, которую вы можете видеть на предыдущем изображении.

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

Клонировать репозиторий

Теперь у вас есть собственный репозиторий Gutenberg, подключенный к оригиналу. Пришло время скачать его на свой компьютер и поработать над ним. Для этого откройте терминал и выполните следующую команду:

 git clone https://github.com/your-user/gutenberg.git

Не забудьте заменить your-user на имя пользователя, которое вы используете на GitHub. Это создаст папку gutenberg на вашем компьютере, загружая все содержимое вашего репозитория GitHub локально.

Создать новую ветку

Если вы получите доступ к новой папке, вы увидите, что она содержит все, что появляется в главной ветке репозитория (или в основной ветке). Не стоит трогать эту ветку модификациями, поэтому, прежде чем перейти к модификации кода Гутенберга, давайте посмотрим, как создать новую ветку.

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

Если я захочу добавить новую функциональность, я создам новую ветку, имя которой указывает на то, что я собираюсь делать, а затем разработаю там эту функциональность. После завершения и когда весь мой измененный код станет стабильным, я могу объединить эту ветку с основной веткой ( master , помните) и все.

Команды Git для создания новой ветки и загрузки ее в репозиторий следующие:

 git checkout -b fix/clone-block git push -u origin fix/clone-block

Это создаст ветку fix/clone-block . Не забудьте изменить имя в соответствии с тем, что вы собираетесь делать. Согласно руководству для участников Gutenberg, вы должны использовать имя для своей ветки с префиксом и описанием, например: [type]/[change] .

Обычно хороший префикс:

• add/ добавить новый функционал
• try/ экспериментальная функциональность для целей тестирования
• update/ обновить существующий функционал
• fix/ решить проблему

Например, fix/clone-block указывает, что мы собираемся предложить исправление при клонировании блоков.

Применить изменения к коду

Теперь у вас есть все готово, чтобы открыть файлы в редакторе, который вам больше всего нравится, и начать программировать. Но прежде чем сделать это, вы должны знать некоторые вещи…

Во-первых, весь код Gutenberg следует определенному руководству по стилю, которое вы также должны соблюдать. Конкретные детали того, как вы пишете код, описаны здесь.

Существуют правила для CSS, JavaScript и PHP. Придерживайтесь этих правил, иначе у вас наверняка возникнут проблемы с размещением вашего кода в официальном репозитории.

К вашему сведению, в моем случае модификация, которую я сделал, состояла в том, чтобы использовать lodash.cloneDeep() в атрибутах блока, когда вы клонируете блок с помощью wp.blocks.cloneBlock() , чтобы копия выполнялась в глубину, чтобы избежать мелкая копия блока, который мы клонировали. Вы можете увидеть изменения, которые я сделал здесь.

Загрузить изменения в новую ветку

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

 git add your-file

И теперь пришло время зафиксировать изменения с помощью этой команды:

 git commit -am "Use cloneDeep when cloning a block"

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

 git push

После этого, если вы зайдете в репозиторий на GitHub, вы увидите свои изменения, загруженные в созданную вами ветку. Идеально! Мы почти там…

Создайте запрос на извлечение в репозитории Gutenberg

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

Чтобы наши изменения были обсуждены и утверждены как часть (или не часть) кодовой базы Gutenberg, нам нужно сделать запрос на извлечение . Запрос на вытягивание — это запрос, который владелец форка репозитория делает владельцу исходного репозитория, чтобы последний включил коммиты, находящиеся в форке.

Для этого мы идем в наш репозиторий форков Gutenberg и нажимаем кнопку New pull request . Это приводит нас к представлению, в котором можно выбрать ветку, которую мы только что загрузили с нашими изменениями. Это сделает сравнение с основной веткой оригинального репозитория Gutenberg:

Когда мы выбираем нашу ветку в раскрывающемся списке справа, как вы видите на предыдущем изображении, GitHub показывает нам сводку изменений, сделанных в этой ветке по отношению к исходному репозиторию Gutenberg.

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

Как вы видите на следующем изображении, у нас уже есть шаблон контента, который нас просят заполнить:

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

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

Когда вы закончите, нажмите кнопку « Создать запрос на вытягивание », чтобы ваш запрос на вытягивание наконец стал общедоступным. Теперь вам просто нужно подождать, пока другие рецензенты посмотрят и в конечном итоге одобрят ваш код и внесут его в официальный репозиторий.

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

Если вы считаете, что в Гутенберге есть что-то, что должно измениться, и вы с нетерпением ждете изменения этого в коде, теперь вы знаете, на что похож этот процесс. Кроме того, все, что я здесь объяснил, справедливо не только для Гутенберга. Большинство проектов программного обеспечения с открытым исходным кодом работают одинаково (или очень похоже).

Не стесняйтесь вносить свой вклад. Наверняка вы многому научитесь на этом пути.

Избранное изображение Майка Эрскина в Unsplash .