Question

我很难为wordpress块的各个组件修改或添加其他类。我本质上只是想在组成某些核心wordpress块的某些部分中添加一个或多个类，以进行诸如添加引导样式的操作。

图像画廊块就是一个例子。就我的目的而言，它已经足够好用了，但是我可能想做一些类似的事情，例如向该图库中的图像添加“ img-fluid”或“ img-thumbnail”类。

我已经浏览了documentation中的块过滤器，感觉好像我的答案将放在那儿的某个地方，我不确定现在在哪里。

我尝试使用blocks.getBlockDefaultClassName过滤器，但这会向整个块添加一个类名，而不是组成该块的单个块（例如，我的图库示例中的图像）。

这是他们在文档中提供的示例：

 // Our filter function
function setBlockCustomClassName( className, blockName ) {
    return blockName === 'core/code' ?
        'my-plugin-code' :
        className;
}

// Adding the filter
wp.hooks.addFilter(
    'blocks.getBlockDefaultClassName',
    'my-plugin/set-block-custom-class-name',
    setBlockCustomClassName
);

我觉得blocks.getSaveContent.extraProps可能会满足我的需要，但是我不确定如何以这种方式使用它。他们使用的示例如下所示：

function addBackgroundColorStyle( props ) {
    return lodash.assign( props, { style: { backgroundColor: 'red' } } );
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'my-plugin/add-background-color-style',
    addBackgroundColorStyle
);

但是，即使我要添加一个额外的属性（如类名），我也会认为我需要修改实际的保存和编辑功能（我想使用更多的块过滤器），以便在显示时使用该类名。这些片段（在本例中为图像），我也不知道该怎么做。

任何对此的想法或建议，将不胜感激。

Answer 1

有两种更改，一种是结构更改，另一种是样式更改。在您的方案中，您需要样式更改，但实际上您正在寻找结构更改。您可以编写自己的CSS，以在编辑器视图和前端上处理块样式。

这些是您需要使样式enqueue_block_editor_assets（仅在后端编辑器中使样式入队）和enqueue_block_assets（使您的样式在后端和前端均入队）的钩子。

修改类或将类添加到核心wordpress块中的各个组件

1 个答案: