1

我正在构建具有以下要求的古腾堡街区。它已经作为经典在现场工作，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 天，但找不到任何合适的文章/线程，这可能会给我带来一些启示。

4

1 回答 1

0

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

柱状图截图

于 2019-11-19T06:38:28.843 回答