Replication of core column block produces different markup

Question

I've scaffolded a custom block via the official create-block package, I then went and pulled the code from the core block column from Github. And it seems to be working with some minor issues. For some reason my custom block gets a slightly different element structure where the block parent element gets nested within itself:

Whereas the core column block does not:

Any idea why this is happening? Relevant code below.

index.js

/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { __, _x } from '@wordpress/i18n';
import { column as icon } from '@wordpress/icons';

/**
 * Internal dependencies
 */
// import deprecated from './deprecated';
import edit from './edit';
import metadata from '../block.json';
import save from './save';

const { name } = metadata;

export { metadata, name };

export const settings = {
  title: _x( '12 Column', 'block title' ),
  icon,
  description: __( 'A single column within a columns block.' ),
  edit,
  save,
  // deprecated,
};

registerBlockType( 'wav/twelve-column', settings );

edit.js

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import {
  InnerBlocks,
  BlockControls,
  BlockVerticalAlignmentToolbar,
  InspectorControls,
  useBlockProps,
  __experimentalUseInnerBlocksProps as useInnerBlocksProps,
  store as blockEditorStore,
} from '@wordpress/block-editor';
import {
  PanelBody,
  __experimentalUnitControl as UnitControl,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { CSS_UNITS } from './utils';

function ColumnEdit( {
  attributes: { verticalAlignment, width, templateLock = false },
  setAttributes,
  clientId,
} ) {
  const classes = classnames( 'block-core-columns', {
    [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
  } );

  const { hasChildBlocks, rootClientId } = useSelect(
    ( select ) => {
      const { getBlockOrder, getBlockRootClientId } = select(
        blockEditorStore
      );

      return {
        hasChildBlocks: getBlockOrder( clientId ).length > 0,
        rootClientId: getBlockRootClientId( clientId ),
      };
    },
    [ clientId ]
  );

  const { updateBlockAttributes } = useDispatch( blockEditorStore );

  const updateAlignment = ( value ) => {
    // Update own alignment.
    setAttributes( { verticalAlignment: value } );
    // Reset parent Columns block.
    updateBlockAttributes( rootClientId, {
      verticalAlignment: null,
    } );
  };

  const widthWithUnit = Number.isFinite( width ) ? width + '%' : width;
  const blockProps = useBlockProps( {
    className: classes,
    style: widthWithUnit ? { flexBasis: widthWithUnit } : undefined,
  } );
  const innerBlocksProps = useInnerBlocksProps( blockProps, {
    templateLock,
    renderAppender: hasChildBlocks
      ? undefined
      : InnerBlocks.ButtonBlockAppender,
  } );

  return (
    <>
      <BlockControls>
        <BlockVerticalAlignmentToolbar
          onChange={ updateAlignment }
          value={ verticalAlignment }
        />
      </BlockControls>
      <InspectorControls>
        <PanelBody title={ __( 'Column settings' ) }>
          <UnitControl
            label={ __( 'Width' ) }
            labelPosition="edge"
            __unstableInputWidth="80px"
            value={ width || '' }
            onChange={ ( nextWidth ) => {
              nextWidth =
                0 > parseFloat( nextWidth ) ? '0' : nextWidth;
              setAttributes( { width: nextWidth } );
            } }
            units={ CSS_UNITS }
          />
        </PanelBody>
      </InspectorControls>
      <div { ...innerBlocksProps } />
    </>
  );
}

export default ColumnEdit;

save.js

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
  const { verticalAlignment, width } = attributes;

  const wrapperClasses = classnames( {
    [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
  } );

  let style;

  if ( width ) {
    // Numbers are handled for backward compatibility as they can be still provided with templates.
    style = { flexBasis: Number.isFinite( width ) ? width + '%' : width };
  }

  return (
    <div
      { ...useBlockProps.save( {
        className: wrapperClasses,
        style,
      } ) }
    >
      <InnerBlocks.Content />
    </div>
  );
}

Answer 1

Setting apiVersion: 2 while registering the block resolved this issue.