此模块允许您创建和使用独立的块编辑器。

安装

安装该模块

npm install @wordpress/block-editor --save

本包假定您的代码将在ES2015+环境中运行。如果您使用的环境对该语言特性和 API 的支持有限或完全不支持，则应在代码中包含@wordpress/babel-preset-default随附的 polyfill。

用法

import { useState } from 'react';
import {
    BlockCanvas,
    BlockEditorProvider,
    BlockList,
} from '@wordpress/block-editor';

function MyEditorComponent() {
    const [ blocks, updateBlocks ] = useState( [] );

    return (
        <BlockEditorProvider
            value={ blocks }
            onInput={ ( blocks ) => updateBlocks( blocks ) }
            onChange={ ( blocks ) => updateBlocks( blocks ) }
        >
            <BlockCanvas height="400px" />
        </BlockEditorProvider>
    );
}

// Make sure to load the block editor stylesheets too
// import '@wordpress/components/build-style/style.css';
// import '@wordpress/block-editor/build-style/style.css';

在此示例中，我们正在实例化一个块编辑器。块编辑器由 BlockEditorProvider 包装组件组成，在该组件中传递当前的块数组，并且在每次更改时，根据更改是否被视为持久性，会调用 onInput 或 onChange 回调函数。

在 BlockEditorProvider 内部，您可以嵌套任何可用的 @wordpress/block-editor UI 组件来构建编辑器的界面。

在上述示例中，我们渲染了 BlockList 以显示和编辑块列表。例如，我们可以添加一个自定义侧边栏，并使用 BlockInspector 组件来编辑当前选中块的高级设置。（请参阅 API 获取所有可用组件的列表）。

BlockTools 组件用于为选定的块呈现工具栏。

在上述示例中，没有注册任何块类型。为了成功使用块编辑器，请确保注册一些块类型。例如，注册核心块类型可以像这样完成：

import { registerCoreBlocks } from '@wordpress/block-library';

registerCoreBlocks();

// Make sure to load the block stylesheets too
// import '@wordpress/block-library/build-style/style.css';
// import '@wordpress/block-library/build-style/editor.css';
// import '@wordpress/block-library/build-style/theme.css';

API

本包中任何在 @wordpress/components 中有对应项的组件都是对这些组件的扩展。

除非您正在创建编辑器，否则建议使用 @wordpress/components 中的组件而不是本包中的组件，因为这些组件已针对编辑器用途进行了定制，如果在编辑器上下文之外使用可能会导致意外行为。

AlignmentControl

相关

AlignmentToolbar

相关

Autocomplete

相关

BlockAlignmentControl

相关

BlockAlignmentToolbar

相关

BlockBindingsAttributeControl

渲染用于查看和编辑块属性绑定的控件。

参数

  • root0 Object: 组件属性。
  • root0.attribute string: 块属性名称。
  • root0.binding [Object]: 当前块绑定。
  • root0.blockName string: 块类型名称。

返回

  • Element: 块属性绑定控件。

BlockBindingsSourceFieldsList

未记录的声明。

BlockBreadcrumb

块面包屑组件，以面包屑形式显示当前块选择层级的层次结构。

参数

  • props Object: 组件属性。
  • props.rootLabelText string: 面包屑路径根元素的翻译标签。

返回

  • Element: 块面包屑。

BlockCanvas

BlockCanvas 组件是一个用于显示块编辑器画布的组件。我们所说的画布是一个包含块列表的 iframe，您可以对其进行操作。该组件还负责连接所有必要的钩子，以启用编辑器中跨块的键盘导航，并将内容样式注入到 iframe 中。

用法

function MyBlockEditor() {
    const [ blocks, updateBlocks ] = useState( [] );
    return (
        <BlockEditorProvider
            value={ blocks }
            onInput={ updateBlocks }
            onChange={ persistBlocks }
        >
            <BlockCanvas height="400px" />
        </BlockEditorProvider>
    );
}

参数

  • props Object: 组件属性。
  • props.height string: 画布高度，默认为 300px。
  • props.styles Array: 注入到 iframe 中的内容样式。
  • props.children Element: 画布的内容，默认为 BlockList 组件。

返回

  • Element: 块面包屑。

BlockColorsStyleSelector

未记录的声明。

BlockContextProvider

将传入的值与当前消耗的块上下文合并的组件。

相关

参数

  • props BlockContextProviderProps:

BlockControls

未记录的声明。

BlockEdit

未记录的声明。

BlockEditorKeyboardShortcuts

未记录的声明。

BlockEditorProvider

未记录的声明。

BlockFormatControls

未记录的声明。

BlockIcon

相关

BlockInspector

相关

BlockList

未记录的声明。

BlockMover

相关

BlockNavigationDropdown

未记录的声明。

BlockPopover

相关

BlockPreview

BlockPreview 渲染块或块数组的预览。

相关

参数

  • preview Object: 预览显示方式的选项
  • preview.blocks Array|Object: 要预览的块实例（对象）或块数组。
  • preview.viewportWidth number: 预览容器的宽度，单位为像素。控制块在预览中渲染的尺寸大小。默认值：700。

返回

  • Component: 要渲染的组件。

BlockSelectionClearer

未记录的声明。

BlockSettingsMenu

未记录的声明。

BlockSettingsMenuControls

相关

参数

  • props Object: Fill props。

返回

  • Element: 元素。

BlockStyles

未记录的声明。

BlockTitle

将块配置的标题呈现为字符串，如果无法确定标题，则返回空字符串。

用法

<BlockTitle
    clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1"
    maximumLength={ 17 }
/>

参数

  • props Object:
  • props.clientId string: 块的客户端 ID。
  • props.maximumLength number|undefined: 块标题字符串在被截断前允许的最大长度。
  • props.context string|undefined: 传递给 getBlockLabel 的上下文。

返回

  • React.JSX.Element: 块标题。

BlockToolbar

呈现块工具栏。

相关

参数

  • props Object: 组件属性。
  • props.hideDragHandle boolean: 显示或隐藏用于拖放功能的拖动手柄。
  • props.variant string: 工具栏的样式变体，也传递给从 Block Toolbar Buttons 渲染的下拉菜单。

BlockTools

呈现块工具（块工具栏、选择/导航模式工具栏、插入点以及内联富文本工具栏的插槽）。必须包裹住块内容和编辑器样式包装器或 iframe。

参数

  • $0 Object: 属性。
  • $0.children Object: 块内容和样式容器。
  • $0.__unstableContentRef Object: 持有内容滚动容器的引用。

BlockVerticalAlignmentControl

相关

BlockVerticalAlignmentToolbar

相关

ButtonBlockAppender

相关

ButtonBlockerAppender

已弃用

请改用 ButtonBlockAppender。

ColorPalette

未记录的声明。

ColorPaletteControl

未记录的声明。

ContrastChecker

相关

CopyHandler

已弃用

参数

  • props Object:

createCustomColorsHOC

一个高阶组件工厂，用于创建 ‘withCustomColors’ HOC，该 HOC 处理类生成颜色值、检索和颜色属性设置的逻辑。

使用此高阶组件来处理自定义颜色集。

用法

const CUSTOM_COLORS = [
    { name: 'Red', slug: 'red', color: '#ff0000' },
    { name: 'Blue', slug: 'blue', color: '#0000ff' },
];
const withCustomColors = createCustomColorsHOC( CUSTOM_COLORS );
// ...
export default compose(
    withCustomColors( 'backgroundColor', 'borderColor' ),
    MyColorfulComponent
);

参数

  • colorsArray Array: 颜色对象数组（名称、slug、颜色等…）。

返回

  • Function: 高阶组件。

DefaultBlockAppender

未记录的声明。

DimensionControl

DimensionControl 呈现一个链接的单位控件和范围控件，用于调整块的尺寸。

相关

参数

  • props Object:
  • props.label ?string: 控件的标签。
  • props.onChange ( value: string ) => void: 当尺寸值更改时调用。
  • props.value string: 当前尺寸值。
  • props.placeholder ?string: 自定义值输入的占位符文本。
  • props.className ?string: 包装 fieldset 上的额外 CSS 类。
  • props.dimensionSizes ?Object: 可选的尺寸大小预设。回退到 store 中的设置。

返回

  • Component: 要渲染的组件。

FontSizePicker

相关

getBackgroundClassesAndStyles

提供块背景支持属性的 CSS 类名和内联样式。

参数

  • attributes Object: 块属性。

返回

  • Object: 源自背景块支持的 CSS 类 & 样式。

getColorClassName

根据颜色的使用上下文及其 slug 返回一个类名。

参数

  • colorContextName string: 颜色使用的上下文/位置，例如：background、text 等…
  • colorSlug string: 颜色的 slug。

返回

  • ?string: 包含所提供上下文中对应颜色的类的字符串。如果未提供 colorContextName 或 colorSlug，则返回 undefined。

getColorObjectByAttributeValues

提供由主题或编辑器默认值设置的颜色对象数组，以及定义的颜色或自定义颜色的值，返回描述该颜色的颜色对象。

参数

  • colors Array: 由主题或编辑器默认值设置的颜色对象数组。
  • definedColor ?string: 包含颜色 slug 的字符串。
  • customColor ?string: 包含 customColor 值的字符串。

返回

  • ?Object: 如果传递了 definedColor 且在 colors 中找到了该名称，则返回与主题或编辑器默认值完全一致的颜色对象。否则，定义一个仅设置颜色的对象。

getColorObjectByColorValue

提供由主题或编辑器默认值设置的颜色对象数组，以及一个颜色值，返回匹配该值的颜色对象或 undefined。

参数

  • colors Array: 由主题或编辑器默认值设置的颜色对象数组。
  • colorValue ?string: 包含颜色值的字符串。

返回

  • ?Object: colors 数组中包含 color 属性等于 colorValue 的颜色对象。如果没有颜色对象满足此要求，则返回 undefined。

getComputedFluidTypographyValue

计算使用 clamp() 的流式字体大小值。可以指定最小和最大字体大小，或者单个字体大小。

如果指定了单个字体大小，它将使用对数刻度进行缩放。

用法

// 从最小值和最大值计算流体字体大小值。
const fontSize = getComputedFluidTypographyValue( {
    minimumFontSize: '20px',
    maximumFontSize: '45px',
} );
// 从单个字体大小计算流体字体大小值。
const fontSize = getComputedFluidTypographyValue( {
    fontSize: '30px',
} );

参数

  • args Object:
  • args.minimumViewportWidth ?string: 文本开始具有流体特性的最小视口尺寸。如果指定了 fontSize，则为可选。
  • args.maximumViewportWidth ?string: 文本保持流体特性的最大尺寸。如果指定了 fontSize，则为可选。
  • args.fontSize [string|number]: 用于推导 maximumFontSize 和 minimumFontSize 的大小（如有必要）。如果指定了 minimumFontSize 和 maximumFontSize，则为可选。
  • args.maximumFontSize ?string: 任何 clamp() 计算的最大字体大小。可选。
  • args.minimumFontSize ?string: 任何 clamp() 计算的最小字体大小。可选。
  • args.scaleFactor ?number: 一个缩放因子，用于确定字体在边界内缩放的快慢。可选。
  • args.minimumFontSizeLimit ?string: 计算出的字体大小允许的最小值。可选。

返回

  • string|null: 使用 clamp() 的字体大小值。

getCustomValueFromPreset

将间距预设转换为自定义值。

参数

  • value string: 要转换的值
  • spacingSizes Array: 当前间距预设对象数组

返回

  • string: 间距预设到其等效自定义值的映射。

getDimensionsClassesAndStyles

为块级元素的 dimensions 支持属性提供 CSS 类名和内联样式。

参数

  • attributes Object: 块级属性。

返回

  • Object: 源自 Dimensions 块支持的 CSS 类及样式。

getFontSize

根据命名字体大小数组以及 namedFontSize 和 customFontSize 值返回字体大小对象。如果 namedFontSize 未定义或在 fontSizes 中未找到，则返回仅包含基于 customFontSize 的大小值的对象。

参数

  • fontSizes Array: 包含至少“name”和“size”值作为属性的字体大小对象数组。
  • fontSizeAttribute ?string: 字体大小属性的内容（slug）。
  • customFontSizeAttribute ?number: 自定义字体大小属性的内容（值）。

返回

  • ?Object: 如果设置了 fontSizeAttribute 并且在 fontSizes 中找到了相等的 slug，则返回该 slug 对应的字体大小对象。否则，返回仅包含基于 customFontSize 的大小值的对象。

getFontSizeClass

基于 fontSizeName 返回一个类名。

参数

  • fontSizeSlug string: fontSize 的 slug。

返回

  • string | undefined: 与传入的 fontSize 对应的字符串类名。该类名通过在 kebabCase 格式的 fontSizeSlug 前添加 ‘has-’ 并在末尾添加 ‘-font-size’ 生成。

getFontSizeObjectByValue

返回给定值对应的字体大小对象。

参数

  • fontSizes Array: 字体大小对象数组。
  • value number: 字体大小值。

返回

  • Object: 字体大小对象。

getGradientSlugByValue

按 slug 检索渐变 slug。

参数

  • gradients Array: 渐变调色板
  • value string: 渐变值

返回

  • string: 渐变 slug。

getGradientValueBySlug

按 slug 检索渐变值。

参数

  • gradients Array: 渐变调色板
  • slug string: 渐变 slug

返回

  • string: 渐变值。

getPxFromCssUnit

已弃用

此函数因意外暴露给 mobile/native 使用。

返回

  • string: 空字符串。

getSpacingPresetCssVar

将间距预设转换为自定义值。

参数

  • value string: 要转换的值。

返回

  • string | undefined: 给定间距预设值的 CSS var 字符串。

getStyleForState

返回所选块样式的状态样式对象。

用法

const state = { viewport: '@mobile' };
const stateStyle = getStyleForState( attributes.style, state ) || {};

参数

  • style Object: 块样式对象。
  • selectedState Object: 选定的块样式状态。

返回

  • Object: 如果找到，则为所选状态的样式对象。

getTypographyClassesAndStyles

为块级元素的 typography 支持属性提供 CSS 类名和内联样式。

参数

  • attributes Object: 块级属性。
  • settings Object|boolean: 合并后的 theme.json 设置

返回

  • Object: 源自 Typography 块支持的 CSS 类及样式。

HeadingLevelDropdown

用于选择标题级别（1 到 6）或段落（0）的下拉菜单。

参数

  • props WPHeadingLevelDropdownProps: 组件属性。

返回

  • ComponentType: 工具栏。

HeightControl

已弃用 请改用 DimensionControl。

HeightControl 渲染一个链接的单位控件和范围控件，用于调整块的高度。

相关

参数

  • props Object:
  • props.label ?string: 控件的标签。
  • props.onChange ( value: string ) => void: 当高度更改时调用。
  • props.value string: 当前高度值。

返回

  • Component: 要渲染的组件。

InnerBlocks

相关

Inserter

未记录的声明。

InspectorAdvancedControls

未记录的声明。

InspectorControls

相关

isValueSpacingPreset

检查给定值是否为间距预设。

参数

  • value string: 要检查的值

返回

  • boolean: 如果值是格式为 var:preset|spacing| 的字符串，则返回 true。

JustifyContentControl

相关

JustifyToolbar

相关

LineHeightControl

相关

LinkControl

渲染一个链接控件。链接控件是一个受控输入，它维护与链接（HTML 锚元素）关联的值以及有关该链接预期行为的相关设置。

用法模式

该组件不支持完全受控的实现，但支持可观察的实现。

不受控（默认）

组件管理其自己的搜索输入状态：

<LinkControl value={ link } onChange={ setLink } />

可观察

在不控制值的情况下观察输入更改：

<LinkControl
    value={ link }
    onChange={ setLink }
    onInputChange={ ( newValue ) => console.log( newValue ) }
/>

未受控且带有初始值

使用默认值预填充搜索输入框：

<LinkControl
    value={ link }
    onChange={ setLink }
    inputValue="wordpress"
    onInputChange={ ( newValue ) => console.log( newValue ) }
/>

参数

  • props WPLinkControlProps: 组件属性。

MediaPlaceholder

相关

MediaReplaceFlow

相关

MediaUpload

相关

MediaUploadCheck

相关

MultiSelectScrollIntoView

已弃用

如果多块选择范围尚未在视图中，则将其滚动到视图中。这在通过键盘进行选择后非常重要。

NavigableToolbar

未记录的声明。

ObserveTyping

相关

PanelColorSettings

未记录的声明。

PlainText

渲染一个自动增长的文本区域，允许用户填写任何文本内容。

相关

用法

import { registerBlockType } from '@wordpress/blocks';
import { PlainText } from '@wordpress/block-editor';

registerBlockType( 'my-plugin/example-block', {
    // ...

    attributes: {
        content: {
            type: 'string',
        },
    },

    edit( { className, attributes, setAttributes } ) {
        return (
            <PlainText
                className={ className }
                value={ attributes.content }
                onChange={ ( content ) => setAttributes( { content } ) }
            />
        );
    },
} );

参数

  • props Object: 组件属性。
  • props.value string: 文本区域的字符串值。
  • props.onChange Function: 当文本值更改时调用的函数。
  • props.ref [Object]: 组件将 ref 属性转发给 textarea 元素。

返回

  • Element: 纯文本组件

privateApis

私有 @wordpress/block-editor API。

RecursionProvider

一个 React context 提供者，用于与 useHasRecursion 钩子配合使用，以防止递归渲染。

使用此提供者包装块内容，并提供与 useHasRecursion 中使用的相同的 uniqueId 属性。

参数

  • props Object:
  • props.uniqueId *: 任何充当块实例唯一标识符的值。
  • props.blockName string: 可选的块名称。
  • props.children React.JSX.Element: React 子元素。

返回

  • React.JSX.Element: 一个 React 元素。

RichText

相关

RichTextShortcut

未记录的声明。

RichTextToolbarButton

未记录的声明。

setStyleForState

返回一个样式对象，其中选定的块样式状态已更新。

用法

const state = { viewport: '@mobile' };
const stateStyle = getStyleForState( attributes.style, state ) || {};
setAttributes( {
    style: setStyleForState( attributes.style, state, {
        ...stateStyle,
        dimensions: { ...stateStyle.dimensions, minHeight: '50vh' },
    } ),
} );

参数

  • style Object: 块样式对象。
  • selectedState Object: 选定的块样式状态。
  • newStyle Object: 选定状态的新样式。

返回

  • Object: 更新的样式对象。

SETTINGS_DEFAULTS

默认编辑器设置

类型定义

  • SETTINGS_DEFAULT Object

属性

  • alignWide boolean: 启用/禁用宽/全对齐
  • supportsLayout boolean: 在容器块中启用/禁用布局支持。
  • imageEditing boolean: 图像编辑设置设置为 false 以禁用。
  • imageSizes Array: 可用的图像尺寸
  • maxWidth number: 约束调整大小的最大宽度
  • allowedBlockTypes boolean|Array: 允许的块类型
  • hasFixedToolbar boolean: 编辑器工具栏是否固定
  • distractionFree boolean: 编辑器 UI 是否无干扰
  • focusMode boolean: 聚焦模式是否启用
  • styles Array: 编辑器样式
  • keepCaretInsideBlock boolean: 光标在编辑模式下是否应在块之间移动
  • bodyPlaceholder string: 空文章占位符
  • titlePlaceholder string: 空标题占位符
  • canLockBlocks boolean: 用户是否可以管理块锁定状态
  • codeEditingEnabled boolean: 用户是否可以切换到代码编辑器
  • blockStatesEditingEnabled boolean: 是否启用块样式状态编辑
  • generateAnchors boolean: 启用/禁用标题块的自动锚点生成
  • enableOpenverseMediaCategory boolean: 在插入器中启用/禁用 Openverse 媒体类别。
  • clearBlockSelection boolean: 当未点击块时，块编辑器是否应在鼠标按下时清除选择。
  • __experimentalCanUserUseUnfilteredHTML boolean: 用户是否应能够使用未过滤的 HTML，或者是否应对 HTML 进行过滤，例如移除被视为不安全的元素（如 iframe）。
  • __experimentalBlockDirectory boolean: 用户是否启用了块目录
  • __experimentalBlockPatterns Array: 表示块模式的对象数组
  • __experimentalBlockPatternCategories Array: 表示块模式类别的对象数组

SkipToSelectedBlock

相关

store

块编辑器命名空间的存储定义。

相关

storeConfig

块编辑器数据存储配置。

相关

ToolSelector

此组件已被弃用，不再渲染任何内容。

transformStyles

应用一系列 CSS 规则转换，根据传递的参数将选择器包装在给定类中并/或重写 URL。

参数

  • styles EditorStyle[]: CSS 规则。
  • wrapperSelector 包装选择器。
  • transformOptions TransformOptions: 样式转换的其他选项。

返回

  • 转换后的规则。

Typewriter

确保在此组件内的键盘事件期间，文本选择与视口的垂直距离保持不变。该垂直距离可能会有所不同，它对应的是最后一次点击或滚动到的位置。

URLInput

用于输入 URL 的文本字段，并提供匹配的文章、页面及其他链接建议的自动完成列表。

相关资源

参数

  • props Object: 组件属性。

URLInputButton

相关资源

URLPopover

相关资源

useBackgroundProps

从块的支持背景属性中派生出与背景相关的属性。

建议在编辑组件中使用此函数，以便编辑器设置可以在后续解析，而无需新的 API。

参数

  • attributes Object: 块属性。

返回

  • Object: 来自背景块支持的 ClassName & style 属性。

useBlockBindingsUtils

检索更新块 bindings 元数据所需的现有工具函数。它们可用于基于现有的块属性创建、修改或删除连接。

它包含以下工具函数：

  • updateBlockBindings: 更新连接到块属性的绑定值。可以通过将值设置为 undefined 来移除特定的绑定。
  • removeAllBlockBindings: 移除 metadata 属性的 bindings 属性。

用法

import { useBlockBindingsUtils } from '@wordpress/block-editor';
const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();

// 更新 url 和 alt 属性。
updateBlockBindings( {
    url: {
        source: 'core/post-meta',
        args: {
            key: 'url_custom_field',
        },
    },
    alt: {
        source: 'core/post-meta',
        args: {
            key: 'text_custom_field',
        },
    },
} );

// 从 url 属性中移除绑定。
updateBlockBindings( { url: undefined } );

// 从所有属性中移除绑定。
removeAllBlockBindings();

参数

  • clientId ?string: 可选的块客户端 ID。如果未设置，它将使用上下文中的当前块客户端 ID。

返回

  • ?WPBlockBindingsUtils: 包含块绑定工具函数的对象。

更新日志

6.7.0 在 WordPress 核心中引入。

useBlockCommands

未记录的声明。

useBlockDisplayInformation

用于尝试查找匹配的块变体并返回适当显示信息的钩子。为了尝试匹配，我们需要两件事：1. 块的客户端 ID 以提取其当前属性。2. 块变体应将 isActive 属性设置为适当的函数。

如果由于任何原因无法找到块变体匹配项，则返回的信息来自块类型。如果未找到具有提供的 clientId 的 blockType，则返回 null。

参数

  • clientId string: 块的客户端 ID。

返回

  • ?WPBlockDisplayInformation: 块的显示信息，如果未找到块或其类型，则返回 null。

useBlockEditContext

useBlockEditContext 钩子提供有关使用该钩子的块的信息。它返回一个包含块的 name、isSelected 状态和 clientId 的对象。如果您想创建需要访问当前块 clientId 但不希望依赖作为参数传入的数据的自定义钩子，这将非常有用。

返回

  • Object: 块编辑上下文

useBlockEditingMode

允许块限制用于编辑该块及其内部块的用户界面。

用法

function MyBlock( { attributes, setAttributes } ) {
    useBlockEditingMode( 'disabled' );
    return <div { ...useBlockProps() }></div>;
}

mode 可以是以下三个选项之一：

  • 'disabled': 完全阻止编辑该块，即无法
    选中它。
  • 'contentOnly': 隐藏所有非内容 UI，例如工具栏中的辅助控件、
    块移动器、块设置。
  • 'default': 允许正常编辑该块。

除非内部块有自己的模式，否则该模式会被块的所有内部块继承。

如果在块上下文之外调用，则该模式应用于所有块。

参数

  • mode ?BlockEditingMode: 要应用的编辑模式。如果为 undefined，则不更改当前的编辑模式。

返回

  • BlockEditingMode: 当前的编辑模式。

useBlockProps

此钩子用于轻量级地将元素标记为块元素。该元素应该是块的最外层元素。调用此钩子并将返回的属性传递给要标记为块的元素。如果您为元素定义了 ref，重要的是将此 ref 传递给此钩子，该钩子随后会通过其返回的属性将其传递给组件。此外，您还可以传递任何其他属性，它们将被合并并返回。

如果使用 API >= v2，则在块的最外层元素上使用此钩子是必需的。

用法

import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
    const blockProps = useBlockProps( {
        className: 'my-custom-class',
        style: {
            color: '#222222',
            backgroundColor: '#eeeeee',
        },
    } );

    return <div { ...blockProps }></div>;
}

参数

  • props Object: 可选。要传递给元素的属性。如果定义了 ref，则必须包含 ref。
  • options Object: 仅供内部使用的选项。
  • options.__unstableIsHtml boolean:

返回

  • Object: 要传递给元素以标记为块的属性。

useCachedTruthy

保持传入值的最新副本并返回它。如果值变为假值，它将返回最后一个真值副本。

参数

  • value any:

返回

  • any: 值

useHasRecursion

一个 React 钩子，用于跟踪块树上方之前渲染的块。容易受到递归影响的块可以在其 Edit 函数中使用此钩子以防止此类递归。

将此钩子与 RecursionProvider 组件一起使用，为钩子和提供者使用相同的 uniqueId 值。

参数

  • uniqueId *: 任何用作块实例唯一标识符的值。
  • blockName string: 可选的块名称。

返回

  • boolean: 描述提供的 ID 是否已被渲染的布尔值。

useInnerBlocksProps

此钩子用于轻量级地将元素标记为内部块包装器元素。调用此钩子并将返回的属性传递给要标记为内部块包装器的元素，自动将内部块渲染为子元素。如果您为元素定义了 ref，重要的是将此 ref 传递给此钩子，该钩子随后会通过其返回的属性将其传递给组件。此外，您还可以传递任何其他属性，它们将被合并并返回。

相关资源

参数

  • props Object: 可选。要传递给元素的属性。如果定义了 ref，则必须包含 ref。
  • options Object: 可选。内部块选项。

useSetting

已弃用 6.5.0 请改用 useSettings。

检索正在使用的块实例给定设置的钩子。

它首先在块实例层次结构中查找设置。如果未找到，它将在块编辑器设置中查找。

用法

const isEnabled = useSetting( 'typography.dropCap' );

参数

  • path string: 设置的路径。

返回

  • any: 返回为设置定义的值。

useSettings

用于检索当前使用的块实例中给定设置的钩子。

它首先在块实例层级中查找设置。如果未找到，则会在块编辑器设置中查找它们。

用法

const [ fixed, sticky ] = useSettings( 'position.fixed', 'position.sticky' );

参数

  • paths string[]: 设置的路径。

返回

  • any[]: 返回为设置定义的值。

useStyleOverride

覆盖块编辑器设置样式。将 ID 留空以创建新样式。

参数

  • override Object: 覆盖对象。
  • override.id ?string: 样式覆盖的 ID，留空以创建新样式。
  • override.css string: 要应用的 CSS。

Warning

相关

withColorContext

未记录的声明。

withColors

一个高阶组件，处理类生成颜色值、检索和颜色属性设置的颜色逻辑。

用于默认编辑器/主题调色板。

用法

export default compose(
    withColors( 'backgroundColor', { textColor: 'color' } ),
    MyColorfulComponent
);

参数

  • colorTypes ...(Object|string): 参数可以是字符串或对象。如果参数是对象，它应包含颜色属性名作为键，颜色上下文作为值。如果参数是字符串，则该值应为颜色属性名，颜色上下文通过对值应用 kebab-case 转换来计算。颜色上下文表示颜色将被使用的环境/位置。颜色类的名称是使用 ‘has’ 后跟颜色名称并以颜色上下文结尾生成的，全部采用 kebab-case 格式，例如：has-green-background-color。

返回

  • Function: 高阶组件。

withFontSizes

高阶组件，处理类生成、字体大小值检索和字体大小更改处理的字体大小逻辑。

参数

  • fontSizeNames ...(Object|string): 参数都应该是字符串。每个字符串包含字体大小属性名，例如：‘fontSize’。

返回

  • Function: 高阶组件。

WritingFlow

处理跨块的选择和导航。此组件应包裹在 BlockList 周围。

参数

  • props Object: 组件属性。
  • props.children Element: 要渲染的子元素。

贡献到此包

这是 Gutenberg 项目的一部分，是一个独立的包。该项目组织为 monorepo。它由多个自包含的软件包组成，每个包都有特定的用途。此 monorepo 中的包发布到 npm，并被 WordPress 以及其他软件项目使用。

要了解有关为此包或整个 Gutenberg 做出贡献的更多信息，请阅读项目的主要 贡献者指南。