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.