README

使用 ACF 和 WordPlate 扩展 ACF 快速声明您的 Gutenberg 块

要求

此包需要以下插件

• 高级自定义字段 Pro
• WordPlate 扩展 ACF（包含在 ACF 块包中）

安装

使用 Composer，在项目的根目录中需要此包。

composer require amphibee/acf-blocks

用法

声明一个块

use \AmphiBee\AcfBlocks\Block;
use \Extended\ACF\Fields\Text;
use \Extended\ACF\Fields\Textarea;

Block::make('My beautiful block', 'my_beautiful_block')
    ->setFields([
        Text::make('Title', 'title'),
        Textarea::make('Content', 'content'),
    ])
    ->disableCustomClasseName()
    ->setAllowedBlocks([
        'core/paragraph',
        'core/heading',
    ])
    ->setJsxTemplate([
        ['core/heading', [
            'level' => 2,
            'placeholder' => 'Title Goes Here',
        ]],
        ['core/paragraph', [
            'placeholder' => 'Content goes here',
        ]]
    ])
    ->loadAllFields()
    ->setMode('edit')
    ->setIcon('format-aside')
    ->setAlign('full')
    ->enableJsx()
    ->setRenderTemplate('partials/my-beautiful-block.php');

ACF 块也与 Blade 视图兼容！

use \AmphiBee\AcfBlocks\Block;
use \Extended\ACF\Fields\Text;
use \Extended\ACF\Fields\Textarea;

Block::make('My beautiful block', 'my_beautiful_block')
    ->setFields([
        \Extended\ACF\Fields\Text::make('Title', 'title'),
        \Extended\ACF\Fields\Textarea::make('Content', 'content'),
    ])
    ->setMode('preview')
    ->setIcon('editor-code')
    ->setAlign('wide')
    ->enableJsx()
    ->setView('partials.my-beautiful-block', [
        'key' => 'value',
    ]);

渲染一个块

原始 PHP 模板

<div class="p-4">
    <?php var_dump($viewData); ?>
    <h1><?php echo $field->title; ?></h1>
    <p><?php echo $field->content; ?></p>
    <?php echo $innerBlocks ?>
</div>

Blade 视图

<div class="p-4">
    <h1>{{$field->title}}</h1>
    <p>{{$field->content}}</p>
    <p>{{$viewData['key']}}</p>
    {!! $innerBlocks !!}
</div>

声明一个类别

use \AmphiBee\AcfBlocks\BlockCategory;

BlockCategory::make('My beautiful category', 'my_beautiful_category')
    ->setIcon('wordpress')