Вы когда-нибудь хотели создать собственный модуль или блок, который работал бы как в Beaver Builder, так и в Gutenberg? Что ж, теперь вы можете!

Начиная с версии Beaver Builder 2.7, блоки, созданные с помощью Advanced Custom Fields Pro (ACF), будут доступны для использования как в Beaver Builder, так и в Gutenberg.

В этом посте мы расскажем обо всем, что связано с использованием блоков ACF в Beaver Builder, в том числе о том, почему это полезно, как это работает и как создать свой первый блок.

Почему блоки ACF в Beaver Builder?

С появлением Gutenberg в качестве редактора WordPress стало проще, чем когда-либо, добавлять богатый контент в сообщения. Прощайте, короткие коды! Даже добавить что-то простое, например кнопку, теперь стало приятнее. Однако блоки в редакторе не работают в Beaver Builder и наоборот.

Блоки ACF пригодятся, если вы используете Beaver Builder для создания сайтов и макета страниц, а для публикации контента используете редактор WordPress. Они позволяют создавать один тип настраиваемого контента, который можно использовать в обоих местах.

ACF также упрощает создание блоков, предоставляя графический интерфейс для создания формы и структуру для их быстрого создания. Судя по тому, что мы обнаружили, это очень похоже на кодирование модуля Beaver Builder.

Представьте себе создание модуля Beaver Builder, который отображает собственный макет галереи. Это именно то, что я сделал на последнем созданном мной сайте. Теперь представьте, что вы хотите использовать тот же модуль галереи в сообщении в блоге. До выхода Beaver Builder 2.7 это было невозможно. Но теперь, с блоками ACF, это можно сделать.

Как блоки ACF работают в Beaver Builder?

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

Одним из заметных отличий является то, что все ваши поля ACF будут отображаться на вкладке «Настройки» в формах настроек Beaver Builder. Если вам нужно больше вкладок, вы можете использовать вкладки ACF, как показано в примере выше.

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

Помимо этого, блоки ACF должны работать в Beaver Builder так же, как модули. Это включает в себя использование всех настроек интервалов и отображения, которые вы получаете бесплатно на вкладке «Дополнительно» .

Создание блока ACF для Beaver Builder

О создании блока ACF для Beaver Builder вам нужно знать не так уж много того, что вы не можете узнать из документации ACF и руководства WordPress. Блоки, созданные с помощью ACF, должны работать.

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

• Поддержка JSX . Блоки, в которых заявлена ​​поддержка JSX, в настоящее время не поддерживаются в Beaver Builder и не будут доступны. При использовании block.json вам необходимо явно установить для этого параметра значение false, как показано в примере ниже.
• Функции блоков . Beaver Builder в настоящее время не поддерживает дополнительные функции блоков, которые можно настроить в block.json, включая такие вещи, как выравнивание, цвета и варианты. Мы поддерживаем только основы, показанные в примере.

Минимум, необходимый для создания блока ACF, — это два файла: block.json и template.php . Также можно загрузить файлы стилей и сценариев, специфичные для вашего блока, определив их в файле block.json, как вы увидите.

Настройка блока.json

Это стандартный файл WordPress block.json с добавлением параметра acf для определения местоположения вашего шаблона. Без этого вы не сможете выбрать его в ACF при создании формы.

Кроме того, здесь вам необходимо установить для поддержки JSX значение false, иначе ваш блок не загрузится в Beaver Builder.

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

Пути к файлу шаблона (а также файлам стилей или сценариев) относятся к вашему файлу block.json и должны храниться в том же месте.

 { "name": "acf/bb-example-acf-block", "title": "ACF Example Block", "description": "An example ACF block that can be used in Beaver Builder.", "category": "bb-example-acf-blocks", "icon": "admin-appearance", "script": "file:./js/scripts.js", "style": "file:./css/styles.css", "supports": { "jsx": false }, "acf": { "mode": "preview", "renderTemplate": "template.php" }, "beaverBuilder": { "group": "ACF Blocks" } }

Настройка шаблона.php

В этот PHP-файл вы выводите содержимое вашего блока. В нем вы можете запрашивать поля ACF как обычно с помощью get_field и использовать результаты в своих выходных данных. Если вы привыкли работать с ACF, это должно показаться вам очень знакомым.

 <?php $heading = get_field( 'heading' ); $content = get_field( 'content' ); ?> <div> <h3><?php echo $heading; ?></h3> <p><?php echo $content; ?></p> </div>

Загрузка блока

После того, как вы создали код для своего блока, вам необходимо загрузить его с помощью основной функции register_block_type . Ваш блок не будет доступен для выбора в ACF при создании формы, пока вы это не сделаете.

 add_action( 'init', function() { register_block_type( 'path/to/block.json' ); } );

Создание формы блока

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

Мы обнаружили, что все типы полей ACF работают для блоков как в Beaver Builder, так и в Gutenberg. Если вы уже создавали форму ACF, все должно быть довольно стандартным. Просто создайте форму, укажите местоположение вашего блока и вуаля, все готово!

Экспорт формы блока

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

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

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

Если вы заинтересованы в такой работе с полями, вот как мы загружаем их в примере плагина…

 add_action( 'acf/init', function() { $fields = json_decode( file_get_contents( 'path/to/fields.json' ), 1 ); /** * Only load if no fields exist in the database with this key. * This allows you to work on the fields if they have been imported. */ if ( empty( acf_get_fields( $fields[0]['key'] ) ) ) { acf_add_local_field_group( $fields[0] ); } } );

Подведение итогов

Мы были большими поклонниками ACF еще до появления Beaver Builder. Это мощный инструмент, который всегда давал нам возможность легко создавать сложные индивидуальные решения. Благодаря этой интеграции мы рады этому больше, чем когда-либо, и надеемся, что вы тоже найдете ее полезной для своих проектов!