Разработка Gutenberg - Преобразование шорткода пользовательского столбца в блок - PullRequest
Новая
       16

Разработка Gutenberg - Преобразование шорткода пользовательского столбца в блок

0 голосов
/ 18 февраля 2019

У меня есть два шорткода, которые отображают отзывчивые столбцы в интерфейсе.Но эти шорткоды теперь необходимо преобразовать в блок Гутенберга.

Существующие шорткоды выглядят так: 

/**
 * [hall-columns-wrap]
 * [hall-column span="2"]Column one-third[/hall-column]
 * [hall-column span="4"]Column two-thirds[/hall-column]
 * [/hall-columns-wrap]
 */
function hall_shortcode_columns($atts, $content = null) {

  // Rspanove any HTML around / between columns
  $content = explode('hall-column', $content);
  array_pop($content);
  $out = array();
  for($i=0; $i<count($content); $i++) {
    if($i % 2 === 0) {
      $out[] = '[hall-column';
    } else {
      $out[] = $content[$i] . 'hall-column]';
    }
  }

  return '<div class="hall-columns">' . do_shortcode(implode('', $out)) . '</div>';
}
add_shortcode('hall-columns-wrap', 'hall_shortcode_columns');

и 

/**
 * [hall-columns]
 * [hall-column span="2"]Column one-third[/hall-column]
 * [hall-column span="4"]Column two-thirds[/hall-column]
 * [/hall-columns]
 */
function hall_shortcode_column($atts, $content = null) {
  $content = hall_clean_shortcode_content($content);
  if((intval($atts['span']) > 5) || (intval($atts['span']) < 1)) {
    return 'Column must have a span between 1 and 6.';
  }
  return '<div class="hall-column" data-span="' . intval($atts['span']) . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('hall-column', 'hall_shortcode_column');

Моя первоначальная мысль быласоздайте блок с RangeControl и поместите core/column внутри компонента RichText, используя InnerBlock с ограничением размещения блоков на allowedBlocks={ [ 'core/column' ] }.

Но я застрял в двух областях.1. Как разместить блок столбца внутри компонента RichText.2. Даже если указан allowedBlocks = { [ 'core/column' ] }, блок столбца не отображается в диалоговом окне Inserter.

Код блока на данный момент выглядит следующим образом: 

const { __ } = wp.i18n;
const { PanelBody, RangeControl, G, SVG, Path } = wp.components;
const { Fragment } = wp.element;
const { registerBlockType } = wp.blocks;
const { InspectorControls, InnerBlocks, RichText } = wp.editor;

function hall_block_custom_shortcode_column(){
    registerBlockType( 'hallmark/custom-column-add', {
        title: 'Custom Column Formatting',
        icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M4,4H20a2,2,0,0,1,2,2V18a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4ZM4 6V18H8V6Zm6 0V18h4V6Zm6 0V18h4V6Z" /></G></SVG>,
        category: 'hallmark-blocks',
        keywords: [
            __( 'Hallmark Column' ),
            __( 'Hallmark Custom Column' ),
            __( 'Hallmark' )
        ],
        attributes: {
            columnCount: {
                type: 'number',
                default: 2
            }
        },
        edit: function( props ) {

            const columnCount = props.attributes.columnCount;

            return(
                <div className={props.className}>
                    <Fragment>
                        <InspectorControls>
                            <PanelBody>
                                <RangeControl
                                    label={ __( 'Columns' ) }
                                    value={ columnCount }
                                    min={2}
                                    max={6}
                                />
                            </PanelBody>
                        </InspectorControls>
                        <InnerBlocks allowedBlocks={ [ 'core/column' ] }/>
                    </Fragment>
                </div>
            );
        },
        save: function( props ) {
            return null;
        }
    } );
}

export default hall_block_custom_shortcode_column();

Хотя я преобразованнекоторые основные шорткоды для блоков уже, я все еще новичок в разработке Гутенберга.Я не могу понять, как это сделать.

...