Wordpress 扩展gutenberg编辑器的内置图像块

我在wodpress 5.2上，主题为210。这意味着有很多地方古腾堡生成的内容被破坏。我可以在子主题css中修复很多东西，但我希望嵌入的图像看起来像旧的。我正在寻找一种简洁明了的方法来继承内置图像块提供的内容，并使用相同的编辑器选项制作自定义图像，同时稍微修改该块生成的HTML片段，首先将自定义类应用于

figure

和

figcaption

。

您有两个选项（至少）

做你自己的积木 您可以在github上抓取块并开始从中创建自己的块，例如使用。您需要一些时间（约1-2小时）才能使其正常工作，因为一些导入语句和其他内容必须进行调整，而不仅仅是复制和过时

=>如果您需要对图像块所能提供的内容进行大量自定义，并且您希望进入块创建的核心，改变功能、行为、外观等，请使用它

编辑过滤器中的现有块 古腾堡提供了许多新的过滤器，例如

块.getSaveContent.extraProps

过滤器。它允许您操作块特性，例如类

function addBlockClassName( props, blockType ) {
    if(blockType.name === 'core/image') {
        return Object.assign( props, { class: 'wp-caption' } );
    }
    return props;
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'some-custom-name/add-block-class-name',
    addBlockClassName
);

你有两个选择（至少）

做你自己的积木 您可以在github上抓取块并开始从中创建自己的块，例如使用。您需要一些时间（约1-2小时）才能使其正常工作，因为一些导入语句和其他内容必须进行调整，而不仅仅是复制和过时

=>如果您需要对图像块所能提供的内容进行大量自定义，并且您希望进入块创建的核心，改变功能、行为、外观等，请使用它

编辑过滤器中的现有块 古腾堡提供了许多新的过滤器，例如

块.getSaveContent.extraProps

过滤器。它允许您操作块特性，例如类

function addBlockClassName( props, blockType ) {
    if(blockType.name === 'core/image') {
        return Object.assign( props, { class: 'wp-caption' } );
    }
    return props;
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'some-custom-name/add-block-class-name',
    addBlockClassName
);

---

我会先试试看它是否适用于一个新的主题。它在新的主题中工作吗？它现在变得很老了，不是吗？我知道它很老了，但我的孩子主题是如此的定制，以至于我产生了这样一个想法：修复最后一个成分（图像块）比使用新主题并再次定制所有内容更容易。顺便说一句，图像块现在工作良好（在新的和旧的主题），它只是看起来没有'宝丽来'框架在旧版本裸体。因此，我的想法是将

wp caption

类以自动方式添加到这两个标记中，使其看起来与以前完全相同。我将首先尝试看看它是否适用于较新的主题。它在新的主题中工作吗？它现在变得很老了，不是吗？我知道它很老了，但我的孩子主题是如此的定制，以至于我产生了这样一个想法：修复最后一个成分（图像块）比使用新主题并再次定制所有内容更容易。顺便说一句，图像块现在工作良好（在新的和旧的主题），它只是看起来没有'宝丽来'框架在旧版本裸体。因此，我的想法是以自动化的方式将

wp caption

类添加到这两个标记中，使其看起来与以前完全一样。Thanx有关提示，只要我有更多时间设置工具集并熟悉整个过程，我将回到这个主题。我希望有一种更简单的方法，像以前一样，手工创建php代码。在wordpress上使用webpack和whotnot听起来像是拿着大锤敲开坚果一样。@andy如果答案正确，请将其标记为正确并投票表决，向社区展示技巧的价值，一旦我有更多时间设置工具集并熟悉整个过程，我将回到这个主题。我希望有一种更简单的方法，像以前一样，手工创建php代码。将webpack和whotnot用于wordpress听起来像是拿着大锤敲碎坚果。@andy如果答案正确，请将其标记为正确并投票表决，以向社区展示其价值