Dashboard API tab content grouping

Support
#1

Hello guys,

I need some directions/help regarding the Dashboard API, I’m kind of hitting a wall with available documentation for extending the options.

I would like to have options for my headings and the different breakpoints so I can set them individually for h1-h5. Then I’m going to use these values inside our custom heading component where I’m loading these values for site wide usage with an option to set a custom size if needed. The only option I see right now is using the Dashboard API. Please correct me if there is a cleaner way to add custom option values which we can either add inside cornerstone settings, either inside the builder itself or in the WordPress admin > Cornerstone settings. We could also use the component itself to register the size, but whenever the component is loaded and values are not the default values, changing the components default values will have no effect on the already loaded components (correct me if I’m wrong).

First of all the link to the element api documentation returns a 404:

I was wondering if its possible to group the settings inside the tab?
The code provided here prints all fields as a single list, where I would like to group the different heading types with their own breakpoint values.

   add_action('init', function() {
    if (function_exists('cs_dashboard_register_options')) {
        cs_dashboard_register_options([
            'values' => [
                'h1_size_base' => '3rem', 'h1_size_xl' => '2.8rem', 'h1_size_lg' => '2.5rem', 'h1_size_md' => '2.2rem', 'h1_size_sm' => '2rem',
                'h2_size_base' => '2.5rem', 'h2_size_xl' => '2.3rem', 'h2_size_lg' => '2rem', 'h2_size_md' => '1.8rem', 'h2_size_sm' => '1.6rem',
                'h3_size_base' => '2rem', 'h3_size_xl' => '1.8rem', 'h3_size_lg' => '1.6rem', 'h3_size_md' => '1.4rem', 'h3_size_sm' => '1.2rem',
                'h4_size_base' => '1.5rem', 'h4_size_xl' => '1.4rem', 'h4_size_lg' => '1.3rem', 'h4_size_md' => '1.2rem', 'h4_size_sm' => '1.1rem',
                'h5_size_base' => '1.25rem', 'h5_size_xl' => '1.2rem', 'h5_size_lg' => '1.15rem', 'h5_size_md' => '1.1rem', 'h5_size_sm' => '1rem',
            ],
        ]);
    }
    if (function_exists('cs_dashboard_add_tab')) {
        $controls = [];
        $headings = ['h1', 'h2', 'h3', 'h4', 'h5'];

        foreach ($headings as $h) {
            $controls[] = [
                'type'  => 'info', 
                'label' => '--- ' . strtoupper($h) . ' ---'
            ];
            
            // Individual controls
            $controls[] = ['key' => "{$h}_size_base", 'type' => 'text', 'label' => strtoupper($h) . ': Desktop'];
            $controls[] = ['key' => "{$h}_size_xl",   'type' => 'text', 'label' => strtoupper($h) . ': Laptop'];
            $controls[] = ['key' => "{$h}_size_lg",   'type' => 'text', 'label' => strtoupper($h) . ': Tablet'];
            $controls[] = ['key' => "{$h}_size_md",   'type' => 'text', 'label' => strtoupper($h) . ': Mobile Landscape'];
            $controls[] = ['key' => "{$h}_size_sm",   'type' => 'text', 'label' => strtoupper($h) . ': Mobile Portrait'];
        }

        cs_dashboard_add_tab('custom_heading_settings_tab', [
            'label'    => __('Heading values'),
            'controls' => $controls,
        ]);
    }
});

If I need to clarify more regarding this use case/idea let me know. If you guys could point me to the right info, that would be awesome too. If I’m approaching this wrongly, please show me docs on how to achieve this.

#2

Hey @100leiden,

The https://theme.co/docs/dashboard-api#creating-controls is working. It might have been down or being updated when you checked.

Element API docs also work:


To that, yes, that is likely possible but it would require custom development which is beyond the scope of our theme support. You might want to subscribe to our One service to get custom development advice.

Thanks.

#3

Hi! Thanks for the reply.
The page works normally, that wasn’t what I ment.
Inside the paragraph you reference the Element API, that link is dead.
https://theme.co/docs/element-api

We do, however not require custom development. It’s just a question regarding the documentation you offer and clarification. You reference the Element API and leave it at that. I understand the offer for custom work, but offering that on a question regarding Themeco’s own documentation is a bit too much if I’m honest and kind of defeats the purpose of documentation if you ask me.

Have a nice day :slight_smile:

#4

I’ve fixed the Element API link.

When it comes to grouping controls take a look at the group type control. More info here.

Have a great day.

#5

Thanks Charlie, will look into that!

1 Like
#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.