我已经通过官方create-block 包,然后我从核心块中提取代码column
来自Github。它似乎在处理一些小问题。出于某种原因,我的自定义块得到的元素结构略有不同,其中块父元素嵌套在其自身中:
而核心柱块不:
知道为什么会这样吗?相关代码如下。
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 );