Font Size Control – Native Custom Fields

PHP Field Configuration Reference

Parameter	Required	Type	Default	Choices	Description
`fieldType`	Yes	`string`	`font_size`	`font_size`	Sets control type.
`name`	Yes	`string`			Sets control name. Use snake_case.
`fieldLabel`	Yes	`string`			Sets control label.
`default`	No	`string`			Sets control default value.
`required`	No	`bool`	`false`	`true`, `false`	Sets control required.
`disabled`	No	`bool`	`false`	`true`, `false`	Sets control disabled.
`hideLabelFromVision`	No	`bool`	`false`	`true`, `false`	Sets control hide label from vision.
`fieldHelpText`	No	`string`			Sets control help text.
`className`	No	`string`			Sets control css class name.
`fieldLabelPosition`	No	`string`	`top`	`top`, `left`	Sets control label position.
`fieldLabelTextTransform`	No	`string`	`uppercase`	`uppercase`, `capitalize`, `lowercase`	Sets control label text transform.

2) Font Size Specific Parameters

Parameter	Required	Type	Default	Choices	Description
`size`	No	`string`	`default`	`default`, `__unstable-large`	Sets control size.
`units`	No	`string`	`["px","em","rem","vw","vh"]`	`px`, `em`, `rem`, `vw`, `vh`	Available units for custom font size selection. Accepts a JSON array of unit strings.
`disableCustomFontSizes`	No	`bool`	`false`	`true`, `false`	If true, the user is forced to pick one of the pre-defined font sizes from fontSizes.
`withReset`	No	`bool`	`true`	`true`, `false`	If true, a reset button will be displayed alongside the input field when a custom font size is active.
`withSlider`	No	`bool`	`false`	`true`, `false`	If true, a slider will be displayed alongside the input field when a custom font size is active.
`fallbackFontSize`	No	`int`			If no value exists, defines the starting position for the font size picker slider. Only relevant if withSlider is true.
`valueMode`	No	`string`		`literal`, `slug`	Determines how the value prop should be interpreted. `literal`: contains the actual font size value. `slug`: contains the slug of the selected font size.
`fontSizes`	No	`string`			JSON array of font size objects. Example: `[{"name": "Small", "size": 12, "slug": "small"}]`

3) PHP Array Schema

Here is an example of how to use the font size control in a post meta configuration:

[
    'fieldType' => 'font_size',
    'name' => 'post_font_size',
    'fieldLabel' => 'Post Font Size',
    'required' => false,
    'disabled' => false,
    'hideLabelFromVision' => false,
    'fieldHelpText' => 'Set the font size.',
    'className' => 'custom-class',
    'fieldLabelPosition' => 'top',
    'fieldLabelTextTransform' => 'uppercase',
    'size' => 'default',
    'units' => '["px","em","rem","vw","vh"]',
    'disableCustomFontSizes' => false,
    'withReset' => true,
    'withSlider' => false,
    'fontSizes' => '[{"name": "Small", "size": 12, "slug": "small"}, {"name": "Normal", "size": 16, "slug": "normal"}]',
]

3) Hook-Based Example (Post Meta Config)

It is available to use this control in post meta fields, term meta fields and user settings page and options page fields.

Available hooks:

native_custom_fields_post_meta_fields
native_custom_fields_term_meta_fields
native_custom_fields_user_meta_fields
native_custom_fields_options_page_fields

add_filter( 'native_custom_fields_post_meta_fields', function( array $configs ): array {
    $post_type = 'book';

    if ( ! isset( $configs[ $post_type ] ) || ! is_array( $configs[ $post_type ] ) ) {
        $configs[ $post_type ] = [
            'post_type' => $post_type,
            'sections'  => [],
        ];
    }

    $configs[ $post_type ]['sections'][] = [
        'meta_box_id'       => 'design_settings',
        'meta_box_title'    => 'Design Settings',
        'meta_box_context'  => 'side',
        'meta_box_priority' => 'default',
        'fields'            => [
            [
            'fieldType' => 'font_size',
            'name' => 'post_font_size',
            'fieldLabel' => 'Post Font Size',
            'required' => false,
            'disabled' => false,
            'hideLabelFromVision' => false,
            'fieldHelpText' => 'Set the font size.',
            'className' => 'custom-class',
            'fieldLabelPosition' => 'top',
            'fieldLabelTextTransform' => 'uppercase',
            'size' => 'default',
            'units' => '["px","em","rem","vw","vh"]',
            'disableCustomFontSizes' => false,
            'withReset' => true,
            'withSlider' => false,
            'fontSizes' => '[{"name": "Small", "size": 12, "slug": "small"}, {"name": "Normal", "size": 16, "slug": "normal"}]',
            ],
        ],
    ];

    return $configs;
} );

4) Stored Value Type

Field Type	Meta Value Type
font_size	string (font size value with unit, for example `"16px"`)