{"id":134454,"date":"2021-03-09T08:38:20","date_gmt":"2021-03-09T08:38:20","guid":{"rendered":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/dimension-control\/"},"modified":"2025-12-08T10:46:16","modified_gmt":"2025-12-08T10:46:16","slug":"dimension-control","status":"publish","type":"blocks-handbook","link":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/dimension-control\/","title":{"rendered":"DimensionControl"},"content":{"rendered":"
\nThis component is deprecated.\n<\/div>\n
\nThis feature is still experimental. \u201cExperimental\u201d means this is an early implementation subject to drastic and breaking changes.\n<\/div>\n

DimensionControl<\/code> is a component designed to provide a UI to control spacing and\/or dimensions.<\/p>\n

Usage<\/h2>\n
import { useState } from 'react';\nimport { __experimentalDimensionControl as DimensionControl } from '@wordpress\/components';\n\nexport default function MyCustomDimensionControl() {\n    const [ paddingSize, setPaddingSize ] = useState( '' );\n\n    return (\n        <DimensionControl\n            __nextHasNoMarginBottom\n            __next40pxDefaultSize\n            label={ 'Padding' }\n            icon={ 'desktop' }\n            onChange={ ( value ) => setPaddingSize( value ) }\n            value={ paddingSize }\n        \/>\n    );\n}\n<\/code><\/pre>\n
Note:<\/em> by default, if you do not provide an initial value<\/code> prop for the current dimension value, then no value will be selected (ie: there is no default dimension set).<\/p>\n
Props<\/h2>\n
label<\/code><\/h3>\n
    \n
  • Type:<\/strong> string<\/code><\/li>\n
  • Required:<\/strong> Yes<\/li>\n<\/ul>\n
    The human readable label for the control.<\/p>\n
    value<\/code><\/h3>\n
      \n
    • Type:<\/strong> string<\/code><\/li>\n
    • Required:<\/strong> No<\/li>\n<\/ul>\n
      The current value of the dimension UI control. If provided the UI with automatically select the value.<\/p>\n
      sizes<\/code><\/h3>\n
        \n
      • Type:<\/strong> { name: string; slug: string }[]<\/code><\/li>\n
      • Default:<\/strong> See packages\/block-editor\/src\/components\/dimension-control\/sizes.ts<\/code><\/li>\n
      • Required:<\/strong> No<\/li>\n<\/ul>\n
        An optional array of size objects in the following shape:<\/p>\n
        [\n    {\n        name: __( 'Small' ),\n        slug: 'small',\n    },\n        {\n        name: __( 'Medium' ),\n        slug: 'small',\n    },\n    \/\/ ...etc\n]\n<\/code><\/pre>\n
        By default a set of relative sizes (small<\/code>, medium<\/code>…etc) are provided. See packages\/block-editor\/src\/components\/dimension-control\/sizes.js<\/code>.<\/p>\n
        icon<\/code><\/h3>\n
          \n
        • Type:<\/strong> string<\/code><\/li>\n
        • Required:<\/strong> No<\/li>\n<\/ul>\n
          An optional dashicon to display before to the control label.<\/p>\n
          onChange<\/code><\/h3>\n
            \n
          • Type:<\/strong> ( value?: string ) => void;<\/code><\/li>\n
          • Required:<\/strong> No<\/li>\n
          • Arguments:<\/strong>:\n
              \n
            • size<\/code> – a string representing the selected size (eg: medium<\/code>)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
              A callback which is triggered when a spacing size value changes (is selected\/clicked).<\/p>\n
              className<\/code><\/h3>\n
                \n
              • Type:<\/strong> string<\/code><\/li>\n
              • Default:<\/strong> ''<\/code><\/li>\n
              • Required:<\/strong> No<\/li>\n<\/ul>\n
                A string of classes to be added to the control component.<\/p>\n
                __next40pxDefaultSize<\/code><\/h3>\n
                  \n
                • Type:<\/strong> Boolean<\/code><\/li>\n
                • Required:<\/strong> No<\/li>\n
                • Default:<\/strong> false<\/code><\/li>\n<\/ul>\n
                  Start opting into the larger default height that will become the default size in a future version.<\/p>\n
                  __nextHasNoMarginBottom<\/code><\/h3>\n
                    \n
                  • Type:<\/strong> Boolean<\/code><\/li>\n
                  • Required:<\/strong> No<\/li>\n
                  • Default:<\/strong> false<\/code><\/li>\n<\/ul>\n
                    Start opting into the new margin-free styles that will become the default in a future version.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":134435,"menu_order":142,"template":"","meta":{"footnotes":""},"class_list":["post-134454","blocks-handbook","type-blocks-handbook","status-publish","hentry","type-handbook"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook"}],"about":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/types\/blocks-handbook"}],"version-history":[{"count":16,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134454\/revisions"}],"predecessor-version":[{"id":155745,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134454\/revisions\/155745"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134435"}],"wp:attachment":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/media?parent=134454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}