古腾堡定制柱块开发答案

【问题标题】：Gutenberg custom column block development古腾堡定制柱块开发
【发布时间】：2019-08-02 17:04:49
【问题描述】：

我正在构建具有以下要求的古腾堡街区。它已经作为经典的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>
}

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

渲染的输出看起来像这样（在现场）

<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 天，但找不到任何合适的文章/线程，这可能会给我一些启示。

【问题讨论】：

为什么需要data-span 属性？

标签： gutenberg-blocks

【解决方案1】：

古腾堡已经有一个选项。您首先需要创建一个组。然后在布局中选择该组后添加列。然后你必须增加列值。

【讨论】：