开发Gutenberg自定义视频块：如何取消默认BlockProps渲染？

要取消Gutenberg自动渲染默认根元素，完全自定义BlockProps的应用位置，只需两步操作：

1. 修改block.json，禁用自动根元素渲染 #

在supports配置中添加"html": false，告诉Gutenberg不要自动生成块的根容器，所有DOM结构由我们的组件完全控制：

export default {
  name: `sage/video`,
  title: `视频`,
  category: `fb`,
  icon: CustomIcon,
  attributes: {
    // ... 原有属性保持不变
  },
  supports: {
    align: ['wide', 'full'],
    spacing: {
      margin: false,
      padding: false,
    },
    html: false // 关键配置：禁用自动根元素渲染
  },
  edit: Edit,
  save: () => null,
};

2. 在Edit组件中手动应用useBlockProps #

首先引入useBlockProps，然后将其应用到你指定的根元素上，确保所有块属性（包括样式、对齐类）都只作用于这个元素：

修改Edit.jsx的引入部分： #

import {
  InspectorControls,
  BlockControls,
  MediaUpload,
  MediaUploadCheck,
  useBlockProps // 新增引入useBlockProps
} from '@wordpress/block-editor';

修改组件返回的JSX结构： #

const EditVideo = ({ attributes, setAttributes }) => {
  // ... 原有逻辑保持不变
  const blockProps = useBlockProps(); // 获取块的属性集合

  return (
    <div {...blockProps}> {/* 将属性应用到自定义根元素 */}
      <BlockControls>
        {/* ... 原有工具栏内容保持不变 */}
      </BlockControls>
      <InspectorControls>
        {/* ... 原有侧边栏设置内容保持不变 */}
      </InspectorControls>
      {isEditing ? (
        <>
          {/* ... 原有编辑模式表单内容保持不变 */}
        </>
      ) : (
        videoId && (
          // 若需将样式应用到视频播放器，可将blockProps传递给VideoPlayer或其外层容器
          <div {...blockProps}>
            <VideoPlayer
              videoId={videoId}
              thumbnailUrl={thumbnailUrl}
              autoplay={autoplay}
              loop={loop}
              muted={muted}
              controls={controls}
              playsInline={playsInline}
            />
          </div>
        )
      )}
    </div>
  );
};

原理说明 #

• supports.html: false 会关闭Gutenberg自动生成根容器的逻辑，避免默认根元素与手动设置的元素重复渲染。
• 手动调用useBlockProps()获取块的所有属性（包括对齐类、样式对象等），并展开到指定元素上，就能实现属性的自定义位置控制，彻底解决重复问题。

内容的提问来源于stack exchange，提问作者aitor