Support » Developing with WordPress » Column block not appearing. allowedBlocks is set to ‘core/column’

  • Subrata Sarkar

    (@subrataemfluence)


    First of all I would like to say that I am an absolute beginner in Gutenberg block development. I Googled a lot for similar type of example but was unable to find one.

    I want to covert two of my following two short codes into Gutenberg blocks. The shortcodes are for placing multi-column contents.

    /**
     * [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');

    and

    
    /**
     * [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');

    I need to convert these two shortcodes into Gutenberg blocks. I added the <RangerControl min={2} max={6} />. But I don’t know how to I place the columns inside the editor itself or change the number of columns when I change the value in RangeControl.

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

    One more thing. Although allowedBlocks={ [ 'core/column ] }is set to<InnerBlocks />`, I cannot see the column block coming up in the inserter dialog. It is empty. Screenshot: https://prnt.sc/ml3nki

    Please consider my beginner level of Gutenberg block development.

    • This topic was modified 8 months, 1 week ago by  Steve Stern.
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Column block not appearing. allowedBlocks is set to ‘core/column’’ is closed to new replies.