Breakdance Global Settings API Example

breakdance-global-settings-api-example.php

<?php

use function \Breakdance\Elements\controlSection;
use function \Breakdance\Elements\control;

add_filter('breakdance_global_settings_control_sections_append', function ($appendedControlSections) {

    $myControlSection = controlSection('my_section', 'My Section', [
        control(
            'my_control',
            'My Control',
            [
                'type' => 'color',
                'layout' => 'inline',
                'colorOptions' => ['type' => 'solidAndGradient']
            ]
        ),
        control(
            'orange_at',
            'Orange At',
            [
                'type' => 'breakpoint_dropdown',
                'layout' => 'inline',
            ]
        )
    ]);

    return array_merge($appendedControlSections, [$myControlSection]);
});

add_filter('breakdance_global_settings_css_twig_template_append', function ($appendedTwigTemplate) {

    $myGlobalSettingsCssTwig = "
        body {
            background-color: {{ settings.my_section.my_control }} !important;
        }

        {% if breakpoint == settings.my_section.orange_at %}
        body {
            background-color: orange !important;
        {% endif %}
        ";

    return $appendedTwigTemplate . $myGlobalSettingsCssTwig;
});

add_filter('breakdance_global_settings_property_paths_to_whitelist_in_flat_props_append', function ($appendedWhitelistedProps) {
    return array_merge(
        $appendedWhitelistedProps,
        ['settings.my_section.orange_at']
    );
});