Elementor Global Colors To TinyMCE WordPress and Gutemberg

elementor_global_colors_to_tinymce4_and_gutenberg-options.php

<?php

// Function to get Elementor colors
function get_elementor_colors() {
    // For exporting global settings
    $default_post_id = get_option('elementor_active_kit');
    $global_data = get_post_meta($default_post_id, '_elementor_page_settings', true);

    $colors = [];

    // Adding system colors
    foreach ($global_data['system_colors'] as $color) {
        $colors[] = [
            'name'  => $color['title'],
            'slug'  => sanitize_title($color['title']),
            'color' => $color['color'],
        ];
    }

    // Adding custom colors
    foreach ($global_data['custom_colors'] as $color) {
        $colors[] = [
            'name'  => $color['title'],
            'slug'  => sanitize_title($color['title']),
            'color' => $color['color'],
        ];
    }

    return $colors;
}

// Add Elementor colors to TinyMCE
function elementor_colors_to_mce4_options($init) {
    $elementor_colors = get_elementor_colors();
    $custom_colours = '';

    foreach ($elementor_colors as $color) {
        $custom_colours .= '"' . ltrim($color['color'], '#') . '", "' . $color['name'] . '",';
    }

    // Setting up the color grid
    $init['textcolor_map'] = '[' . $custom_colours . ']';

    // Change the number of rows in the grid if the number of colors changes
    $init['textcolor_rows'] = 4;

    return $init;
}
add_filter('tiny_mce_before_init', 'elementor_colors_to_mce4_options');

// Add custom colors to Gutenberg
function add_elementor_colors_to_gutenberg() {
    add_theme_support('editor-color-palette', get_elementor_colors());
}
add_action('after_setup_theme', 'add_elementor_colors_to_gutenberg');

?>