Как создавать собственные блоки Гутенберга с помощью Advanced Custom Fields Pro

Начиная с версии 5.8 Advanced Custom Fields (ACF) Pro вы можете использовать ACF для создания пользовательских блоков Гутенберга. Все, что вам нужно сделать, это шаблоны PHP. Это позволяет разработчикам, которые еще не имеют опыта работы с современным Javascript, очень легко создавать пользовательские блоки для Gutenberg с любым из типов полей, которые может предложить ACF. Имейте в виду, что эта функция доступна только в платной версии (Pro) Advanced Custom Fields. Он недоступен в бесплатной версии, поэтому вам необходимо приобрести лицензию.

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

Создайте блок Гутенберга с помощью ACF

По сути, создание пользовательского блока Гутенберга с расширенными пользовательскими полями состоит из трех простых шагов. Первое легко и, вероятно, знакомо; настройка полей (настроек), которые вы хотите иметь в своем блоке. Второй шаг — использование функции ACF для регистрации блока Гутенберга. И третий шаг — написание PHP-шаблона для блока. Вы просто пишете HTML и управляете настройками точно так же, как если бы вы делали это с полями ACF. Вот и все! (Хорошо, может быть, есть четвертый шаг: стилизация вашего блока. Но я не буду вдаваться в подробности в этом посте).

Создайте свои настройки/поля

Если вы использовали расширенные настраиваемые поля до того, как вы, вероятно, знаете, как настраивать поля. Для этого вы можете использовать пользовательский интерфейс администратора Advanced Custom Field. Или, если вы хотите, чтобы настройки блока были встроены в ваш плагин или тему, запишите настройки с помощью PHP. У меня есть полный справочный пост о том, как добавить настройки ACF с помощью PHP.

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

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

В коде вашей темы functions.phpили плагина вам нужно написать функцию, привязанную к acf/init, и вызвать [acf_register_block](https://www.advancedcustomfields.com/resources/acf_register_block_type/)()для регистрации блока. Поскольку эта функция довольно новая в ACF и зависит от плагина, который нужно активировать, я рекомендую вам обернуть свой код внутри if-check, чтобы убедиться, что ваша тема или плагин не приведет к сбою вашего WordPress.

Регистрация блока с помощью ACF на самом деле похожа на то, как мы регистрируем пользовательский блок Gutenberg вручную. С помощью ACF вам необходимо предоставить уникальное имя для вашего блока в файлах name. Я рекомендую использовать понятное имя, например, ctaдля блока призыва к действию или author-cardдля блока, показывающего авторов и т.п. Если вы немного знакомы с Гутенбергом, вы, возможно, знаете, что все блоки должны быть зарегистрированы с пространством имен, /, а затем их слаг-именем. Например, пространство имен WordPress — core, поэтому, например, блок абзаца в WordPress называется core/paragraph. С ACF пространством имен будет acf, поэтому, например, указанный выше блок будет зарегистрирован в Gutenberg как acf/yourblock. Если вы регистрируете свои поля с помощью PHP, как вы увидите позже, нам нужно помнить об этом.

В categoryвы определяете, в какой категории Гутенберга вы хотите, чтобы ваш блок отображался. На данный момент возможные значения: common, formatting, layout, widgetsили embed. Если вы создаете собственные категории Гутенберга, вы можете добавить их к ним, если хотите. Что касается iconимени значка из WordPress Dashicons (за исключением «dashicons-»).

Чтобы сообщить ACF, как отображать этот блок, у вас есть два варианта: либо указать имя функции для ключа render_callback(как указано выше), либо указать имя шаблона в вашей теме для ключа render_template. Поэтому, если вы предпочитаете обращаться непосредственно к шаблону, например, template-parts/block-yourblock.phpв своей теме, просто сделайте это так и удалите render_callback:

Подключите свою группу полей к зарегистрированному блоку

Когда вы удовлетворены своим кодом регистрации блока, пришло время подключить ваш блок к настройкам, которые вы сделали ранее. Если вы создали поля в админке, просто вернитесь назад и выберите свой блок в Location. И если вы добавили группу полей с помощью PHP, в местоположении укажите значение ‘ acf/yourblock‘, где yourblockто, что вы указали, как nameуказано выше.

Напишите шаблон

Последний и самый интересный шаг — написание шаблона для вывода блока!

Расположение вывода рендеринга вашего блока зависит от того, что вы решили использовать при регистрации блока, render_callbackили render_template.

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

Первый параметр $blockсодержит определенную информацию от Гутенберга. Например, каждый блок Гутенберга почти всегда будет иметь className, который вы должны установить как класс в самой внешней оболочке. $block['align']для выравнивания также можно установить и что-то, что вы хотите добавить. Второй параметр $contentвсегда будет пустым с ACF (он будет заполнен, если вы добавите вложенные блоки, но это невозможно с ACF). Логическое значение $is_previewбудет истинным, если мы сейчас смотрим на рендеринг блока в режиме предварительного просмотра в редакторе Гутенберга. И, наконец $post_id, пост, в который добавлен этот блок.

Что касается полей, которые вы извлекаете, как обычно, с помощью get_field(). Вывод HTML полностью зависит от вас и от того, как вы хотите выводить свои поля.

Если вместо этого вы предоставили файл шаблона render_template, просто создайте файл в указанном месте в вашей теме. Внутри него у вас есть доступ к тем же самым глобальным переменным, что и в функции выше (например $block). Например:

И это все, что нужно. Вот как просто создавать собственные блоки Гутенберга с помощью ACF.

Вывод

Как бы легко это ни было, использование плагина, особенно платного, не является хорошим конечным решением, если вы хотите разрабатывать темы или плагины. Имейте в виду, что ваши блоки перестанут работать, если вы перенесете код своей темы в другой WordPress без ACF Pro. Или если параметры вашего поля не были настроены (если вы не внедрили их в свой код с помощью PHP или не экспортировали и не импортировали их). Как разработчик темы (или плагина), который распространяет код, вы не можете ожидать, что каждый пользователь купит собственную лицензию ACF Pro, чтобы заставить вашу тему работать! Но это хорошее временное решение для тех, кто не может или не хочет кодить.

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