古腾堡定制柱块开发

Question

我正在构建具有以下要求的古腾堡街区。它已经可以作为经典shortcode在实时站点中使用，但是现在我需要将其转换为块。

• 该块将有两列。
• 其他列（我已经开发的本地块和自定义块）都可以添加到这两列中。
• 我需要向单独的列添加单独的属性，以便它们在左侧的列中呈现为data-span="4"，在右侧的列中呈现为data-span="2"，反之亦然。

我创建了一个自定义JSX布局，以在编辑器中用两列呈现该块，并在每列中添加了<InnerBlocks>，即我有两个<InnerBlocks>。但是不允许使用多个<InnerBlocks>，所以我不得不将其丢弃。

我第一次尝试过

...
save: function ( props ) {
   return(
     <div className={props.className}>
       <div className="column-container">
          <div className="left-column">
             <InnerBlocks allowedBlocks={ [ 'core/paragraph', 'core/image', 'core/list' ] } />
          </div>
          <div className="right-column">
             <InnerBlocks allowedBlocks={ [ 'core/paragraph', 'core/image', 'core/list' ] } />
          </div>
       </div>
     </div>
   );
}

下一步，我尝试了以下操作

...
edit: function( props ) {
   <div className={props.className}>
      <InnerBlocks allowedBlocks={ [ 'core/columns', 'core/paragraph' ] } />
   </div>
}

以上内容使我添加了一个列块，然后在每列内部。我还可以添加其他块，包括我的自定义块。我不知道如何为原生data-span="x"块添加的每一列放置上述属性（column）。

渲染的输出看起来像这样（在实时站点中）

<div class="hall-columns">
   <div class="hall-column" data-span="4">
     <p>Lorem ipsum dolor sit amet, ei vim persequeris liberavisse.</p>
   </div>
   <div class="hall-column" data-span="2">
     <p>
        <img class="alignnone wp-image-338" src="http://local.hall.com/wp-content/uploads/2019/03/book.jpg" alt="" width="322" height="182" />
     </p>
   </div>
</div>

我正在搜索最近3天，但找不到任何合适的文章/主题，可能会给我一些启发。

Answer 1

古腾堡（Gutenberg）已选择。您首先需要创建一个组，然后在选择该组后将其添加到布局列中，然后必须增加列值。