使用 block.json 添加 ACF 块 - 显示预览悬停图像

Question

ACF 支持要求我以他们喜欢的方式呈现我的块...添加此；

function register_acf_blocks() {
    register_block_type(__DIR__ . '/blocks/primary-thin-banner');
}
add_action('init', 'register_acf_blocks');

到我的 functions.php ，然后将每个 .php template 文件放入各自命名的文件夹中，在名为 BLOCKS 的文件夹中，并在其中添加一个 block.json 文件，如下所示；

{
    "name": "acf/primary-thin-banner",
    "title": "Primary Thin Banner",
    "description": "To add a thin banner. Can be used on any page.",
    "category": "formatting",
    "icon": "align-pull-left",
    "keywords": ["page", "post", "primary", "thin", "banner"],
    "acf": {
        "mode": "edit",
        "renderTemplate": "primary-thin-banner.php"
    },
    "supports": {
        "align": false,
        "anchor": true,
        "customClassName": false,
        "jsx": false,
        "multiple": true,
        "mode": true,
        "inserter": true
    },
    "example": {
        "attributes": {
            "title": "Example Title",
            "description": "Example description text that displays in the preview.",
            "backgroundImage": "https://url-to-the-image.jpg"
        }
    }
}

一切都工作正常尽管现在我的悬停在插入器图标上不起作用。我已将用于渲染这些的代码添加到我的新 block.json 文件中（示例/属性），但它现在无法像以前那样工作。我在论坛中阅读的建议都不是使用 block.json 来解决这个新的首选方法，所有内容都引用了解决此问题的旧方法。

现在实现这一目标的最佳实践是什么？

需要添加什么json？

Answer 1

我终于以正确的方式添加了我的 ACF 块，并通过我的预览图像拉出了大 ACF 块预览和小插入器悬停预览。

请参阅 ACF 文档；

https://www.advancedcustomfields.com/resources/create-your-first-acf-block/

1）将其添加到functions.php

function register_acf_blocks() {
    register_block_type(__DIR__ . '/blocks/example-block');
}
add_action('init', 'register_acf_blocks');

2. 将您的 .php 块模板 (example-block.php) 放入相同名称的文件夹 (example-block) 中，并放置在主题文件中名为 blocks 的文件夹中。

3. 在文件夹（example-block）中，放置一个block.json文件来处理块的配置。这就是我的配置方式。请注意“示例”json（我一直在努力解决），它通过可悬停的插入器图像进行拉动。

{
    "name": "acf/example-block",
    "title": "Example Block",
    "description": "To add an example block.",
    "category": "formatting",
    "icon": "align-pull-left",
    "keywords": ["page", "post", "example"],
    "acf": {
        "mode": "edit",
        "renderTemplate": "example-block.php"
    },
    "supports": {
        "align": false,
        "anchor": true,
        "customClassName": false,
        "jsx": false,
        "multiple": true,
        "mode": true,
        "inserter": true
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "_is_preview": "true"
            }
        }
    }
}

最后为该块创建一个 预览图像 1500x844px 并将其添加到主题资源中的文件夹中。

然后将以下内容添加到 (example-block.php) 模板的顶部（确保创建正确的图像路径），保存后，预览图像大和小可悬停都应该完美工作。

// Check For A Preview Image
if (!empty($is_preview) || !empty($block['data']['_is_preview'])) { 
    // Define Styles Based On Context (Modal vs. Main Preview)
    $block_figure_style = !empty($block['data']['_is_preview']) 
        ? 'width: 450px;'  // Specific Width For Modal Preview
        : '';               // Default Styling For Main Preview
?>
<!-- Block Preview Image -->
<figure style="<?php echo esc_attr($block_figure_style); ?>">
    <img style="width: 100%; height: 100%; object-fit: cover;" src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/assets/img/blocks/p-thin-banner-preview.jpg" alt="<?php echo esc_attr('Preview of the primary thin banner block.'); ?>">
</figure>
<?php return;
}