使用InnerBlocks

Question

我想创建一个行/列Gutenberg块，类似于Gutenberg使用的已经建立的columns块。

我希望功能大致相同，但是要在列上使用我的自定义样式。例如，每行将有3列，您可以选择在每列中显示在前端的帖子。第一列的样式将增强文本和img等，以将其标识为“功能部件”。

我想自定义构建它，而不仅仅是出于各种原因设置模板，所以这是一个自定义代码解决方案。

我最初尝试通过使用<InnerBlocks />来实现此目的，例如以下代码：

const { __ } = wp.i18n;
const { registerBlockType, InspectorControls } = wp.blocks;
const { InnerBlocks } = wp.editor;
// const { withSelect } = wp.data;
const { SelectControl } = wp.components;
const { Component } = wp.element;
import { ReactComponent as Logo } from "../ga-logo.svg";

const TEMPLATE = [
  ['ga/select-post', {placeholder: 'Enter featured article...'}, []],
  ['ga/select-post', {placeholder: 'Article 2'}, []],
  ['ga/select-post', {placeholder: 'Article 3'}, []]
]

registerBlockType("ga/select-post-nested", {
  title: "Select Post Nested",
  icon: { src: Logo },
  category: "gourmet-artist",

  edit: props => {
    // return "engage";
    const { className } = props;
    return [
      <div className={className}>
        <InnerBlocks template={TEMPLATE} />
      </div>
    ];
  },

  save: props => {
    return (
      <div className={props.className}>
        <InnerBlocks.Content />
      </div>
    );
  }
});

但是，这不会返回行/列格式的帖子选择器。

当我尝试将<InnerBlocks />包裹在flex容器中，然后通过模板传递我已标识为.featuredBlock的具有以下样式的类作为className时，这些样式不会生效，并且帖子仍以列表的形式列出，而不是按预期的行形式列出：

editor.css

.featuredContainer {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  align-items: center;
}

.featuredBlock {
  width: 30%;
  margin-left: 2%;
  border: 1px solid black;
}

index.js

const TEMPLATE = [
      ['ga/select-post', {className: "featuredBlock"}, []],
      ['ga/select-post', {className: "featuredBlock"}, []],
      ['ga/select-post', {className: "featuredBlock"}, []]
    ]

    registerBlockType("ga/select-post-nested", {
      title: "Select Post Nested",
      icon: { src: Logo },
      category: "gourmet-artist",

      edit: props => {
        return [
          <div className="featuredContainer">
            <InnerBlocks template={TEMPLATE} />
          </div>
        ];
      },

      save: props => {
        return (
          <div className={props.className}>
            <InnerBlocks.Content />
          </div>
        );
      }
    });

我想知道为什么这没有生效？或者，也许有更好的方法来解决这个问题？