复制核心列块会产生不同的标记

时间:2021-03-10 作者:INT

我已经通过官方create-block 包,然后我从核心块中提取代码column 来自Github。它似乎在处理一些小问题。出于某种原因,我的自定义块得到的元素结构略有不同,其中块父元素嵌套在其自身中:

enter image description here

而核心柱块不:enter image description here

知道为什么会这样吗?相关代码如下。

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

1 个回复
SO网友:INT

背景apiVersion: 2 注册块时解决了此问题。

相关推荐