块编辑器是一个反应式单页应用程序（SPA）。编辑器中的每个块都通过在编辑用于的设置对象的属性注册块在客户端上。
这个道具块接收的对象编辑反应组分包括：
属性:具有块的所有属性的对象。集合属性:更新属性对象的方法。已选择:一个布尔值，用于传递块当前是否被选中
WordPress提供了许多内置的标准组件，可用于在编辑器中定义块界面。这些内置组件通过以下软件包提供@wordpress/组件和@wordpress/块编辑器.
WordPress Gutenberg项目使用故事书记录WordPress包中可用的用户界面组件。
块工具栏或设置提要栏中块的自定义设置控件也可以通过此定义编辑通过内置组件反应组件，例如：
包裹@wordpress/组件包括一个通用WordPress组件库，用于为块编辑器和WordPres仪表板创建通用UI元素。此软件包中最常用的组件包括：
包裹@wordpress/块编辑器包含块编辑器的组件和挂钩库，包括用于定义块的自定义设置控件的组件和钩子。此软件包中最常用的一些组件包括：
在块编辑器中使用组件时，一个好的工作流是：
- 从WordPress软件包导入组件。
- 以JSX格式将组件的相应代码添加到项目中。
- 大多数内置组件将用于设置块属性，因此在中定义任何必要的属性
块.json并创建事件处理程序来更新这些属性集合属性在您的组件中。
- 如果需要，调整代码以序列化并存储在数据库中。
为了简化块自定义并确保一致的用户体验，有几个内置UI模式可帮助生成块的编辑器预览。
下图详细介绍了所选段落块的块工具栏和设置侧边栏。
当用户选择块时，所选块上方的工具栏中可能会显示许多控制按钮。其中一些块级控件可能会自动包含，但您也可以自定义工具栏以包含特定于块类型的控件。如果块类型的返回值编辑函数包括一个块控件元素中，这些控件将显示在所选块的工具栏中。
导出默认函数Edit（{className，attributes:attr，setAttributes}）{const onChangeContent=（newContent）=>{setAttributes（{content:newContent}）；};const onChangeAlignment=（newAlignment）=>{集合属性（{alignment:newAlignment===未定义？'无'：newAlignment，} );};返回(<div{…useBlockProps（）}><块控制><工具栏组><对齐工具栏值={attr.alignment}onChange={onChangeAlignment}/></工具栏组></块控制><RichTextclassName={className}style={{textAlign:属性对齐}}tagName=“p”onChange=｛onChangeContent｝值={attr.content}/></div>);}
请参阅完整块示例的以上代码.
请注意区块控制仅当当前选中块并处于可视化编辑模式时才可见。块控件在HTML编辑模式下编辑块时不显示。
设置提要栏用于显示较少使用的设置或需要更多屏幕空间的设置。设置提要栏应用于仅限块级设置选择块时显示。
如果设置仅影响块内的选定内容，例如“粗体”文本，不要将设置放在设置提要栏中。请改用工具栏。即使在HTML模式下编辑块，也会显示设置提要栏，因此它应该只包含块级设置。
与渲染工具栏类似，如果包含检查员控制中的组件返回块类型的值编辑功能，这些控件将显示在设置提要栏区域中。
导出默认函数Edit（{attributes，setAttributes}）{const onChangeBGColor=（hexColor）=>{集合属性（{bg_color:hexColor}）；};const onChangeTextColor=（hexColor）=>{集合属性（{text_color:hexColor}）；};返回(<div{…useBlockProps（）}><InspectorControls key=“setting”><div><字段集><legend className=“blocks-base-control__label”>{__（'背景色'，'区块开发示例'）}</图例><ColorPalette//古腾堡标准颜色选择器的元素标记onChange={onChangeBGColor}//onChange事件回调/></fieldset><字段集><legend className=“blocks-base-control_label”>{__（“文本颜色”，“块开发示例”）}</图例><调色板onChange={onChangeTextColor}/></fieldset></div></InspectorControls><文本控件值={attributes.message}onChange=｛（val）=>集合属性（｛message:val｝）｝样式={{背景颜色：attributes.bg_color，颜色：属性.text_color，} }/></div>);}
请参阅完整块示例的以上代码.
当选择同一类型的多个块时，工具栏和侧栏中呈现的块控件也将可用。
对于常见的自定义设置，包括颜色、边框、间距等，您可以依赖砌块支撑而不是自定义解决方案。块支持提供与其他核心块具有相同功能的一致UI。