Elementor Typography Control Default Values

[gho5t7m]

I'm developer and I want to add Typography Control with its default values for title (h3) to my widget.

$this->add_group_control(
	Group_Control_Typography::get_type(),
	[
		'name' => 'title_typography',
		'label' => __( 'Title Typography', 'my-plugin-domain' ),
		'scheme' => Scheme_Typography::TYPOGRAPHY_1,
		'selector' => '{{WRAPPER}} h3',
		'default' => [
		                       'font_weight' => '500',
		                       'font_family'  => 'Rubik',
                                       'font_size'      => '14px',
				   ]
	]
);

I want to enter all typography control default values as:
Font Family, Font Size, Font Weight, TextTransform, Font Style, Text Decoration, Line Height and Letter Spacing.

Please, help with this.

[bainternet]

@gho5t7m

Typography control is a field control so it accepts a fields_options parameter where you can define individual settings to the controls inside the group control including a default value, ex:

$this->add_group_control(
	Group_Control_Typography::get_type(),
	[
		'name' => 'title_typography',
		'label' => __( 'Title Typography', 'my-plugin-domain' ),
		'scheme' => Scheme_Typography::TYPOGRAPHY_1,
		'selector' => '{{WRAPPER}} h3',
		'fields_options' => [
			// Inner control name
			'font_weight' => [
				// Inner control settings
				'default' => '500',
			],
			'font_family' => [
				'default' => 'Rubik',
			],
			'font_size'   => [
				'default' => '14px',
			],
		],
	]
);

But you should set the defaults in CSS like we do so you don't store default values in the database.

[pmallek]

Whole idea behind this solution is fine just provided example contain an error, you can't define:
'font_size' => [ 'default' => '14px', ],
This will cause error.

It should be:
'font_size' => [ 'default' => [ 'unit' => 'px', 'size' => 14 ] ]

[sabuz]

This is not loading the custom typography until you click on Typography edit icon. Any help?

[entrey]

So, the solution i figured out is the following:

$this->add_group_control(
    Group_Control_Typography::get_type(),
    [
        'name' => 'title',
        'selector' => '{{WRAPPER}} .title',
        'fields_options' => [
            // first mimic the click on Typography edit icon
            'typography' => ['default' => 'yes'],
            // then redifine the Elementor defaults
            'font_size' => ['default' => ['size' => 22]],
            'font_weight' => ['default' => 600],
            'line_height' => ['default' => ['size' => 1]],
        ],
    ]
);

[yinjinit]

@bainternet , why are the default values stored in database? Aren't they fetched when the page loads?

[Bhavna93]

how to add a new option (small caps) in Typography >> Transform drop down. Is there any hook in elementor to inject this option ? I am doing this with my custom elementor widget