title: "编辑器中的区块" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Fundamentals - Getting Started - Repos
编辑器中的区块
区块编辑器是一个 React 单页应用程序（SPA）。编辑器中的每个区块都是通过一个 React 组件显示的，该组件定义在用于在客户端注册区块的设置对象的 edit 属性中。
区块的 Edit React 组件接收到的 props 对象包括：
attributes: 包含区块所有属性的对象。setAttributes: 用于更新属性对象的方法。isSelected: 一个布尔值，表示区块当前是否被选中。
WordPress 提供了许多内置的标准组件，可用于在编辑器中定义区块界面。这些内置组件可通过 @wordpress/components 和 @wordpress/block-editor 等包获取。
区块工具栏或设置侧边栏中的自定义设置控件也可以通过这个 Edit React 组件使用内置组件来定义，例如：
内置组件
@wordpress/components 包包含一个通用的 WordPress 组件库，用于为区块编辑器和 WordPress 仪表盘创建常见的 UI 元素。该包中最常用的一些组件包括：
@wordpress/block-editor 包包含一个用于区块编辑器的组件和钩子库，包括用于为区块定义自定义设置控件的组件。该包中最常用的一些组件包括：
@wordpress/block-editor 包还提供了创建和使用独立区块编辑器的工具。
在区块编辑器中使用组件时，一个良好的工作流程是：
- 从 WordPress 包中导入组件。
- 以 JSX 格式将组件的对应代码添加到你的项目中。
- 大多数内置组件将用于设置区块属性，因此在
block.json中定义任何必要的属性，并在你的组件中创建事件处理程序，使用setAttributes来更新这些属性。 - 如果需要，调整代码以进行序列化并存储在数据库中。
区块控件：区块工具栏与设置侧边栏
为简化区块定制并确保一致的用户体验，内置了多种 UI 模式来辅助生成区块的编辑器预览。
下图详细展示了选中段落区块时的区块工具栏与设置侧边栏。
区块工具栏
当用户选中某个区块时，工具栏会出现在该区块上方并显示若干控制按钮。部分区块级控件会自动包含在内，但您也可以自定义工具栏，添加针对特定区块类型的控件。如果区块类型 Edit 函数的返回值包含 BlockControls 元素，这些控件将显示在选中区块的工具栏中。
export default function Edit( { className, attributes: attr, setAttributes } ) {
const onChangeContent = ( newContent ) => {
setAttributes( { content: newContent } );
};
const onChangeAlignment = ( newAlignment ) => {
setAttributes( {
alignment: newAlignment === undefined ? 'none' : newAlignment,
} );
};
return (
<div { ...useBlockProps() }>
<BlockControls>
<ToolbarGroup>
<AlignmentToolbar
value={ attr.alignment }
onChange={ onChangeAlignment }
/>
</ToolbarGroup>
</BlockControls>
<RichText
className={ className }
style={ { textAlign: attr.alignment } }
tagName="p"
onChange={ onChangeContent }
value={ attr.content }
/>
</div>
);
}
请注意：BlockControls 仅在区块被选中且处于可视化编辑模式时可见。在 HTML 编辑模式下编辑区块时不会显示 BlockControls。
Settings Sidebar
The Settings Sidebar is used to display less-often-used settings or those that require more screen space. The Settings Sidebar should be used for block-level settings only and is shown when a block is selected.
If a setting only affects selected content inside a block, such as "bolding" text, do not place the setting inside the Settings Sidebar. Use a toolbar instead. The Settings Sidebar is displayed even when editing a block in HTML mode, so it should only contain block-level settings.
Similar to rendering a toolbar, if you include an InspectorControls component in the return value of your block type's Edit function, those controls will be shown in the Settings Sidebar region.
export default function Edit( { attributes, setAttributes } ) {
const onChangeBGColor = ( hexColor ) => {
setAttributes( { bg_color: hexColor } );
};
const onChangeTextColor = ( hexColor ) => {
setAttributes( { text_color: hexColor } );
};
return (
<div { ...useBlockProps() }>
<InspectorControls key="setting">
<div>
<fieldset>
<legend className="blocks-base-control__label">
{ __( 'Background color', 'block-development-examples' ) }
</legend>
<ColorPalette // Element Tag for Gutenberg standard color selector
onChange={ onChangeBGColor } // onChange event callback
/>
</fieldset>
<fieldset>
<legend className="blocks-base-control__label">
{ __( 'Text color', 'block-development-examples' ) }
</legend>
<ColorPalette
onChange={ onChangeTextColor }
/>
</fieldset>
</div>
</InspectorControls>
<TextControl
__next40pxDefaultSize
value={ attributes.message }
onChange={ ( val ) => setAttributes( { message: val } ) }
style={ {
backgroundColor: attributes.bg_color,
color: attributes.text_color,
} }
/>
</div>
);
}
See the full block example of the code above.
Block controls rendered in both the toolbar and sidebar will also be available when multiple blocks of the same type are selected.