时间戳

首页 > 解决方案 > 在编辑器中向 Gutenberg 核心块添加内联样式

wordpress - 在编辑器中向 Gutenberg 核心块添加内联样式

问题描述

在古腾堡编辑器中，我试图为编辑器中的所有（包括核心）块添加内联样式。使用editor.BlockEdit，可以对编辑器中的所有块进行更改。例如，如果我想将它们全部包装并在包装器中添加一些内联样式（在这种情况下为红色），我可以这样做：

const withColorControl = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    return (
      <div style={{color: 'red'}}>
        <BlockEdit {...props}/>
      </div>
    );
  };
}, 'withColorControl');

addFilter('editor.BlockEdit', 'example/with-color-control', withColorControl);

我的问题是，虽然这会产生一个额外的div，我不想要的。我想要的是实际块接收内联样式，如下所示：

<Fragment>
  <BlockEdit {...props} style={{color: 'red'}}/>
</Fragment>

这不起作用，因此我的问题是：如何在编辑器中将内联样式添加到古腾堡块而不包装块？

PS 保存内联样式之类的不是问题，这仅与编辑器有关。

PS2 也editor.BlockListBlock不起作用。虽然这可用于向元素添加类，但我无法添加内联样式。

标签： wordpresswordpress-gutenberg

解决方案

碰巧有一个wrapperProps你可以传递给组件。文档中没有提到，但是我在这个问题中偶然发现了一些东西。那么你可以做些什么来将内联样式传递给编辑器中的块：

const withInlineStyle = createHigherOrderComponent(
  ( BlockListBlock ) => {
    return ( props ) => {
      return (
        <BlockListBlock
          { ...props }
          wrapperProps={{style: {color: 'red'} }}
        />
      );
    }
  },
  'withInlineStyle'
);

wp.hooks.addFilter(
  'editor.BlockListBlock',
  'my-plugin/with-inline-style',
  withInlineStyle
);

在此示例中，所有具有内联样式的块color: red.

推荐阅读