Question

我有两个短代码，它们在前端呈现响应列。但是这些短代码现在需要转换为古腾堡块。

现有的简码看起来像这样：

/**
 * [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} }。

但是我陷入了两个领域。 1.如何将列块放置在RichText组件内。 2.即使指定了allowedBlocks = { [ 'core/column' ] }，列块也不会出现在“插入器”对话框中。

截至目前的代码如下：

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();

尽管我已经将一些基本的短代码转换为块，但是我仍然是古腾堡开发的新手。我不知道该怎么做。

古腾堡开发-转换自定义列简码以阻止

0 个答案: