Разработка пользовательского блока колонок Gutenberg - PullRequest
Новая
       7

Разработка пользовательского блока колонок Gutenberg

0 голосов
/ 12 марта 2019

Я строю блок Гутенберга со следующим требованием. Он уже работает на живом сайте как классический 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 дня, но не могу найти какую-либо подходящую статью / ветку, которая может показать мне немного света.

...