Почему и как создать блок Гутенберга — учебник для начинающих

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

Даже если вы вернулись к классическому редактору, есть хорошие шансы, что в какой-то момент в ближайшие несколько лет вы также начнете создавать веб-страницы в виде блоков.

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

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

Что такое блоки Гутенберга?

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

Примеры блока Гутенберга

Основное изменение, которое Гутенберг ввел в создание контента в WordPress является то, что, вместо того, чтобы один большой кусок контента (как это было с классическим редактором), веб-страницы в настоящее время сегментированы на более мелкие части, называемые блоками.

Это может быть много разных вещей:

• Пунктах
• Заголовки
• Блок-цитаты
• Изображения и галереи
• Списках
• Встроенные носители
• Кнопки
• Таблицы

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

Почему изменения?

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

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

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

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

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

Итак, зачем создавать свой собственный блок Гутенберга?

Одна из самых интересных вещей о WordPress является то, что это так настраиваемый. Практически все о платформе адаптируется к вашим потребностям.

Например, классический редактор полностью настраивается. Так почему бы не сделать то же самое со своим новым коллегой?

Особенно, если Есть содержание блоков, которые вам нужно часто, но что редактор, плагины или темы не предлагают (пока), создавая свой собственный имеет смысл. Вместо того, чтобы каждый раз вводить пользовательский код, практичнее иметь возможность выбирать его из встроенного меню. Ты не согласен?

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

Это легко?

С технической точки зрения важно отметить, что большинство компонентов блоков Гутенберга написаны в JavaScript. Это идет рука об руку с Мэттом Mullenweg 2015 советы, чтобы узнать язык программирования — глубоко (если вы хотите сделать это, проверьте эти полезные ресурсы).

Сдвиг в сторону JavaScript был очевиден в последние годы, например, в Калипсо. Язык программирования поставляется с тонной преимуществ и JavaScript питаниевеб-приложений, построенных на AIS (как Гутенберг) являются будущим в Интернете.

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

Тем не менее, я должен признаться, что я боролся с завершением задача я поставил ам-пост. Я надеюсь, что, закладывая процесс шаг за шагом, я могу открыть его для других людей, которые не зарабатывают себе на жизнь письменного кода. Посмотрим, ладно?

Как создать блоки для WordPress Гутенберг редактор

Хорошо, теперь, когда у нас есть теория в сторону, давайте поговорим о том, как создать блок Гутенберга.

Для этого учебника мы будем использовать Двадцать девятнадцать тему, первая тема, которая была специально сделана для нового редактора. Из коробки, он предлагает несколько пользовательских блоков, среди них крышка, виджеты, цитата, pullquote и многое другое. К этому мы добавим простой призыв к действию блока с настраиваемым содержанием и пользовательским укладкой.

Для того, чтобы не начать полностью с нуля, мы будем использовать создать guten блок Dev инструментарий Ахмад Аваис. Все, что вы собираетесь прочитать, основано на нем. Кроме того, будет ссылка на официальную документацию Гутенберга, где я считаю это разумным или необходимым.

1. Подготовьте окружающую среду

Одной из первых задач создания блока Gutenberg является настройка среды разработки. Хотя это легко настроить локальную установку WordPress, для того, чтобы возиться с новым редактором вам нужны вещи, как webpack, React, ESLint, Babel, и многое другое.

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

Тем не менее, для того, чтобы использовать его, сначала необходимо установить node.js и npm. Для этого перейдите на официальный сайт node.js и загрузите правильный файл установки для вашей системы.

Как только это будет сделано, выполните и запустите установку. Готов? Отлично, ты только что выполнил первый шаг.

2. Настройка файлов Plugin с созданием guten блок

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

Первое, что вам нужно сделать, это открыть консоль. В Windows нажмите кнопку Windows, ищите запрос командыи откройте ее. Если вы находитесь на Mac, используйте Cmd’F, а затем ищите консоль. Оба должны открыть что-то вроде этого:

Здесь, первое, что вы хотите сделать, это перейти к плагин каталог вашего местного сайта. Вы можете сделать это с командой CD. Ввод CD «имя каталога» открывает каталог, cd.. восходит к одному каталогу.

Вы также можете скопировать путь к плагину каталог из верхней части окна и просто вставить его после команды CD, чтобы пойти туда непосредственно.

Оказавшись там, вы хотите запустить следующую команду:

Убедитесь в том, чтобы заменить мой блок с именем блока вы хотите создать. Например, в моем случае, я пошел с cta-блок.

Затем машина создаст каталог с тем же именем, загрузит всю необходимую информацию и наставит файлы плагинов, необходимые для блока Гутенберга.

Это займет некоторое время, но когда он будет закончен, вы в конечном итоге с этим:

После того, как сделать с этим, следуйте советам создать guten блок и введите плагин папку (помните, CD «имя каталога»)) и введите npm start .

Последний запустит блок в режиме разработки, будет следить за изменениями и сообщать об ошибках в коде.

3. Активировать плагин и тест-драйв

После того как вы зашли так далеко, вы уже можете использовать плагин вы только что создали. Для этого войдите на свой сайт WordPress, перейдите в меню Plugins и активируйте его там.

Когда вы сейчас идете в редактор, нажмите символ плюс и поиск названия блока, вы также найдете его включены.

Вы даже можете ввести его на страницу, чтобы найти это на экране:

Неплохо, правда?

4. Отодвитьplugin.php

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

Важные файлы для любых изменений находятся plugin.php внутри плагина каталога, а также три файла внутри src/block blocks.js называется, и editor.scss style.scss .

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

Проще всего изменить plugin.php . Здесь вы найдете плагин заголовок, который содержит всю информацию, увиденную в меню плагина в задней части.

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

После того, как сделано и сохранены, вы также видите изменения в WordPress.

5. Зарегистрируйте свой блок Гутенберга

После этого вы хотите сделать то же самое для того, как ваш блок отображается в редакторе Гутенберга. Для этого, обратиться к block.js . Он содержит весь код для регистрации блока на сайте WordPress и за то, что он делает на переднем и заднем конце.

Файл по умолчанию для создания guten block очень хорошо аннотирован. Он говорит вам, какая часть несет ответственность за то, что так что вы можете сделать свои собственные изменения. registerBlockTypeявляется то, что регистрирует блок. Функции, следующие edit: и save: описывают содержание и поведение блока внутри Гутенберга и на странице соответственно. Более подробная информация здесь и здесь.

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

Однако для того, чтобы работать с тем, что мы создали до сих пор, мы должны изменить эту часть:

В частности, вы хотите изменить:

• Путь регистрации — Это относится к пути, который появляется после blocks.registerBlockType . Он должен соответствовать вашей текущей среде.
• title:— Название блока, как он появится в Гутенберге.
• icon:— значок, связанный с блоком в редакторе. Вы можете использовать дашики. Обязательно вставьте имя без dashicons- префикса. Кроме того, используйте свой собственный файл SVG.
• category:— Под какой категорией появится ваш блок. Некоторые из стандартных категорий: common , formatting , и layout widgets embed .

В моем случае, я просто изменил его на это:

После этого он появляется в редакторе так:

И вот как это выглядит на странице:

Я оставила остальную часть кода, как я его нашел.

6. Отрегулируйте укладку блока

После этого пришло время настроить отображение нового блока. Это происходит внутри editor.scss и style.scss .

Как показывают имена файлов, первый контролирует то, как выглядит ваш блок внутри редактора Гутенберга, второй вывод на переднем конце.

В примере по умолчанию из create guten block вы можете увидеть, что вывод зеленый в редакторе, но красный на странице. Это является следствием использования двух различных наборов разметки.

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

В моем случае я добавляю следующее в оба файла:

И вот результат в редакторе:

И на переднем конце:

Кстати, Гутенберг автоматически присваивает классы CSS блокам в зависимости от их имени, и вы можете узнать, что они с вашими инструментами браузера. Тем не менее, листы стилей из блока guten уже будут содержать имена правильных классов. Кроме того, вы можете определить свой собственный.

7. Закончить

Хорошо, как только вы удовлетворены своим блоком, Есть еще несколько шагов. Первое, что вы хотите сделать, это вернуться к консоли и нажмите Ctrl / Cmd’C, чтобы остановить npm от мониторинга файлов.

После этого запустите следующую команду:

Это будет компилировать необходимые файлы для производства кода (не волнуйтесь, это не остановит ваш блок от работы, я проверил).

Если вы считаете, что не хотите использовать этот блок в блоке guten, вы также можете ввести npm run eject в . Однако это означает, что отныне вам придется поддерживать проект самостоятельно.

Готовы ли вы создать блок Гутенберга?

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

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

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

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

Кроме того, создатели Расширенный пользовательских полей работают над способом сделать создание блоков гораздо проще. Функция в настоящее время в бета-версии, но как только она доступна, вы можете ожидать, чтобы прочитать об этом здесь.

Вы уже создавали блок Гутенберга? Каков был ваш опыт? Любые дополнительные советы или комментарии? Препятствуйте нам знать в разделе комментария ниже!