gebruederheitz/wp-gutenberg-blocks

帮助您快速使用您的块

v1.6.0 2023-07-25 10:53 UTC

This package is auto-updated.

Last update: 2024-09-25 13:24:47 UTC


README

帮助您快速使用您的块

在packagist上找到它: https://packagist.org.cn/packages/gebruederheitz/wp-gutenberg-blocks

帮助您注册和渲染自定义Gutenberg块,并作为提供额外块的库的通用接口。

安装

通过Composer

> composer require gebruederheitz/wp-gutenberg-blocks

确保您有Composer自动加载或备选类加载器。

使用方法

初始化块注册器

初始化注册器单例(通常在您的 functions.php 文件中)

<?php

use Gebruederheitz\GutenbergBlocks\BlockRegistrar;

BlockRegistrar::getInstance();

您可以将替代处理程序和编辑器脚本的路径传递给构造函数

<?php

use Gebruederheitz\GutenbergBlocks\BlockRegistrar;

BlockRegistrar::getInstance()
    ->setScriptPath('/scripts/gutenberg.js')
    ->setScriptHandle('my-gutenberg-blocks')
;

脚本处理程序默认为 ghwp-gutenberg-blocks,脚本路径为 /js/backend.js。脚本路径相对于主题根目录(get_template_directory_uri())。

设置允许的块

有三种方式可以设置编辑器中显示的块。如果您想跳过所有这些,并简单地允许所有块类型,请将 true 作为第一个参数传递给注册器的构造函数

BlockRegistrar::getInstance()->setAllowedBlocks(true);

通过数组动态设置

您还可以通过一个数组 提供允许的块列表(默认为空数组,最初不允许任何块)

BlockRegistrar::getInstance()->setAllowedBlocks(
    ['core/columns', 'core/column', 'core/paragraph']
);

使用配置文件

或者,您可以使用一个 YAML配置文件

# wp-content/themes/my-theme/config/example.yaml
gutenbergAllowedBlocks:
  - core/columns
  - core/column
  - core/paragraph

该值需要是一个字符串数组,并在顶级下以键 gutenbergAllowedBlocks。然后,您可以将文件的路径(相对于由 get_theme_root() 返回的主题根目录或作为绝对文件系统路径)作为字符串传递给注册器构造函数

BlockRegistrar::getInstance()->setAllowedBlocks('/my-theme/config/example.yaml');

通过过滤器钩子更动态地设置

第三种选择是使用过滤器钩子来添加允许的块(这是 DynamicBlock 类用于自动设置其可用性的方式)。即使您通过上述方法之一提供了自定义列表,过滤器钩子也始终会被调用

use Gebruederheitz\GutenbergBlocks\BlockRegistrar;

function allowCustomBlock(array $allowedBlocks): array {
    $allowedBlocks[] = 'my/block';
    return $allowedBlocks;
}

add_filter(BlockRegistrar::HOOK_ALLOWED_BLOCKS, 'allowCustomBlock');

$allowedBlocks 参数将包含通过任何其他方法已经允许的任何块。

注册动态块

这都假设您已经在编辑器脚本中定义了编辑器组件、属性等,并使用 wp.blocks.registerBlockType() 在那里注册了该块。您的 save 组件返回 null - 这就是您想要注册由PHP渲染的动态块的地方。

您可以通过第五个参数允许主题覆盖您默认的块模板部分(即使默认的部分文件位于主题源目录之外)。

# functions.php or your block component library (or anywhere, really, but called on every request)
use Gebruederheitz\GutenbergBlocks\DynamicBlock;
use Gebruederheitz\GutenbergBlocks\BlockRegistrar;

BlockRegistrar::getInstance();

$myblock = new DynamicBlock(
    // Required: Block name needs to match the name the block was registered with in JS
    'namespace/block-name',
    // Required: Absolute path to the template partial rendering the block
    dirname(__FILE__) . '/templates/my-block.php', 
    // List of block attributes with type and default value.
    // You don't need to provide all attributes, only those that should receive
    // default values. Defaults to [].
    [                               
        'attributeName' => [
            'type' => 'string',
            'default' => 'default value',
        ],       
    ],
    // List of required attributes. If any of these are not set, the block will 
    // not be rendered. Make sure not to provide a default value for these
    // attributes! Defaults to [].
    [
        'requiredAttributeName',
    ],
    // A path to allow a (child) theme to override the default template used for
    // rendering the block (as provided by the second parameter). This allows a 
    // theme to render modified markup or different classnames for the same
    // block. The path needs to be relative to the theme's root, as you would 
    // use it in get_template_part(). Defaults to null (theme can not override
    // the default template partial).
    'template-parts/blocks/block-name.php'
);

// Set up the hook listeners to automagically register & render the block
$myblock->register();

作为替代,您可以使用工厂方法创建动态块

DynamicBlock::make('ghwp/example', get_template_directory() . '/template-parts/blocks/example.php')
    ->register();

可用钩子

开发

待办事项