云策 WordPress 开发者社区

块编辑器开发文档

DimensionControl

查看官方原文 ↗
💡 云策文档标注

概述

DimensionControl 是一个用于控制间距或尺寸的 UI 组件，目前处于实验性阶段，已弃用，可能发生重大变更。

关键要点

  • 组件已弃用，属于实验性功能，使用时需注意潜在破坏性变化。
  • 提供标签、值、尺寸数组、图标、回调函数等 Props 来定制 UI 行为。
  • 支持 __next40pxDefaultSize 和 __nextHasNoMarginBottom 等未来版本特性选项。

代码示例

import { useState } from 'react';
import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';

export default function MyCustomDimensionControl() {
    const [ paddingSize, setPaddingSize ] = useState( '' );

    return (
        <DimensionControl
            __nextHasNoMarginBottom
            __next40pxDefaultSize
            label={ 'Padding' }
            icon={ 'desktop' }
            onChange={ ( value ) => setPaddingSize( value ) }
            value={ paddingSize }
        />
    );
}

注意事项

  • 默认情况下，如果不提供初始值 Prop，则不会选择任何值（即无默认尺寸设置）。
  • 尺寸数组默认提供相对大小（如 small、medium），可参考 packages/block-editor/src/components/dimension-control/sizes.ts。
📄 原文内容
This component is deprecated.
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

DimensionControl is a component designed to provide a UI to control spacing and/or dimensions.

Usage

import { useState } from 'react';
import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';

export default function MyCustomDimensionControl() {
    const [ paddingSize, setPaddingSize ] = useState( '' );

    return (
        <DimensionControl
            __nextHasNoMarginBottom
            __next40pxDefaultSize
            label={ 'Padding' }
            icon={ 'desktop' }
            onChange={ ( value ) => setPaddingSize( value ) }
            value={ paddingSize }
        />
    );
}

Note: by default, if you do not provide an initial value prop for the current dimension value, then no value will be selected (ie: there is no default dimension set).

Props

label

  • Type: string
  • Required: Yes

The human readable label for the control.

value

  • Type: string
  • Required: No

The current value of the dimension UI control. If provided the UI with automatically select the value.

sizes

  • Type: { name: string; slug: string }[]
  • Default: See packages/block-editor/src/components/dimension-control/sizes.ts
  • Required: No

An optional array of size objects in the following shape:

[
    {
        name: __( 'Small' ),
        slug: 'small',
    },
        {
        name: __( 'Medium' ),
        slug: 'small',
    },
    // ...etc
]

By default a set of relative sizes (small, medium…etc) are provided. See packages/block-editor/src/components/dimension-control/sizes.js.

icon

  • Type: string
  • Required: No

An optional dashicon to display before to the control label.

onChange

  • Type: ( value?: string ) => void;
  • Required: No
  • Arguments::
    • size – a string representing the selected size (eg: medium)

A callback which is triggered when a spacing size value changes (is selected/clicked).

className

  • Type: string
  • Default: ''
  • Required: No

A string of classes to be added to the control component.

__next40pxDefaultSize

  • Type: Boolean
  • Required: No
  • Default: false

Start opting into the larger default height that will become the default size in a future version.

__nextHasNoMarginBottom

  • Type: Boolean
  • Required: No
  • Default: false

Start opting into the new margin-free styles that will become the default in a future version.