1

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:

enter image description here

Whereas the core column block does not: enter image description here



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>
  );
}
2
  • Is this a column or a columnS block that you're comparing with? Also is your version inside a columnS block or is it elsewhere? I don't see anything to restrict it so its only allowed inside a columns block, or can only contain column blocks
    – Tom J Nowell
    Mar 11 at 1:48
  • 1
    I've created my own columns and column block (from the core blocks). The issue here was that I was not setting apiVersion: 2 when registering my blocks. It works as expected now!
    – INT
    Mar 11 at 9:00
1

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

1
  • 2
    argh how did I miss this!
    – Tom J Nowell
    Mar 11 at 11:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.