在编辑器中向古腾堡核心块添加内联样式

Question

在古腾堡编辑器中，我尝试向编辑器中的所有（包括核心）块添加内联样式。使用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不起作用。虽然这可以用来向元素添加类，但我无法添加内联样式。

Answer 1

恰好有一个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。