Default text / font sizes in custom modules

[nitras]

Problem Description

As with following the tutorial, I wonder how to add the default text such as "your title goes here" or for buttons "click" here.

I've searched for it in the files and found out that these reside in helpers.php

I can't, however, seem to find a way to add this.

The same is true for font sizes, I can see for example a slider has an H1 size of 46px.

For my custom modules, I'd love to know how to set these defaults.

Pardon for my questions, but searching the docs don't help me.

Thank you.

[xxtesaxx]

For the button text you can simply use the 'default' => esc_html__("Click", "my_domain") option on your button text textfield setting. For the default font its pretty much the same. You can configure defaults or change the range settings:

$advanced_fields['fonts']['field_link'] = [
    'label' => esc_html__('Field Link', 'ds-suit-toolset'),
    'toggle_slug' => 'toolset_text',
    'sub_toggle' => 'link',
    'css' => array(
        'main' => "%%order_class%% .dss_toolset_field a",
        'important' => 'all',
    ),
    'line_height' => array(
        'default' => '1em',
        'range_settings' => array(
            'min' => '0.1',
            'max' => '10',
            'step' => '0.1',
        ),
    ),
    'font_size' => array(
        'default' => '1em',
        'range_settings' => array(
            'min' => '0.1',
            'max' => '10',
            'step' => '0.1',
        ),
    ),
];

One thing to note is that apparently if you set a default font size or line height, it does not always get applied by default so you would need to use ET_Builer_Element::set_style() in php and the corresponding react functions in static css(props) to apply the default value. I could imagine though that not applying default values is a bug and will be fixed soon.

ET_Builder_Element::set_style($function_name, array(
    'selector' => '%%order_class%% .some-class ',
    'declaration' => sprintf('background-color: %1$s;', $this->props['some_bg_color']),
));

static css(props){
    const additionalCss = [];

    additionalCss.push([{
        selector: '%%order_class%% .some-class ',
        declaration: `background-color: ${props.some_bg_color};`,
    }]);

    return additionalCss;
}

To find out what the slug for the font setting is you can for example console.log(this.props) in render()

[lots0logs]

Just want to add one thing to @xxtesaxx's great explanation. For settings that correlate directly to css styles, the builder expects that the css stylesheet holds all the default styles. Therefore, if you set a default the builder is not going to generate CSS for that value. The style should be in your plugin's frontend CSS stylesheet for the default value.