GP Global Color Grid (for Styleguide)

gp_global_color_grid.php

<?php
/**
 * Remove this opening PHP tag when adding to your theme's functions.php
 * It's included here for proper syntax highlighting in the gist.
 */

/**
 * Displays an grid of the GeneratePress global color palette with color blocks.
 * Built to use on website style guides with Beaver Builder but can be used anywhere.
 * Global Colors must be set in the GP Customiser
 * 
 * This shortcode creates a responsive grid layout showing all colors from the GeneratePress
 * global color palette. Each color is displayed as a full-width block with:
 * - The entire block showing the color
 * - Color information centered within the block
 * - Automatically contrasting text (black or white) based on color brightness
 * - The color name, CSS variable, and hex value stacked vertically
 *
 * Usage: [gp_global_color_grid]
 * 
 * @since 1.0.0
 * @author G Bissland, Weave Digital Studio
 * @return string The HTML output of the immersive color grid
 */
add_shortcode('gp_global_color_grid', function() {
     // Bail early if GeneratePress isn't active
     if (!function_exists('generate_get_option')) {
         return '<p>GeneratePress not active</p>';
     }
 
     /**
      * Helper function to determine optimal text color based on background color
      * Uses W3C recommendations for contrast calculations
      */
     function get_readable_text_color($hexcolor) {
         $hex = ltrim($hexcolor, '#');
         $r = hexdec(substr($hex, 0, 2));
         $g = hexdec(substr($hex, 2, 2));
         $b = hexdec(substr($hex, 4, 2));
         
         // Calculate relative luminance using W3C formula
         $luminance = (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
         return $luminance > 0.5 ? '#000000' : '#ffffff';
     }
 
     // Define styles once, outside the shortcode output
     if (!wp_style_is('gp-color-grid-styles')) {
         wp_register_style(
             'gp-color-grid-styles',
             false,
             array(),
             '1.0.0'
         );
         wp_add_inline_style('gp-color-grid-styles', '
             .gp-color-grid-alt {
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
                 gap: 20px;
                 margin-block: 40px;
             }
 
             .gp-color-box {
                 height: 190px;
                 padding: 20px;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
                 text-align: center;
             }
 
             .gp-color-info-alt {
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
                 align-items: center;
             }
 
             .gp-color-label-alt {
                 font-size: 1.4em;
                 font-weight: bold;
                 margin: 0;
                 color: inherit;
             }
 
             .gp-color-var-alt,
             .gp-color-hex-alt {
                 font-family: ui-monospace, Menlo, Monaco, "Courier New", monospace;
                 font-size: 0.9em;
                 background: inherit;
             }
         ');
         wp_enqueue_style('gp-color-grid-styles');
     }
 
     // Get GeneratePress settings once and cache the result
     static $global_colors = null;
     if ($global_colors === null) {
         $gp_settings = get_option('generate_settings');
         $global_colors = isset($gp_settings['global_colors']) ? $gp_settings['global_colors'] : array();
     }
 
     ob_start();
 
     echo '<section class="gp-style-guide-alt">';
     echo '<h2>Global Colors</h2>';
     echo '<div class="gp-color-grid-alt">';
 
     if (!empty($global_colors)) {
         foreach ($global_colors as $color_slug => $color_data) {
             if (empty($color_data['color']) || empty($color_data['name'])) {
                 continue;
             }
 
             $var_name = '--' . sanitize_title(strtolower($color_data['name']));
             $label = esc_html($color_data['name']);
             $hex = esc_attr($color_data['color']);
             $text_color = get_readable_text_color($hex);
             
             printf(
                 '<article class="gp-color-box" style="background-color: var(%1$s)">
                     <div class="gp-color-info-alt" style="color: %4$s">
                         <h3 class="gp-color-label-alt">%2$s</h3>
                         <code class="gp-color-var-alt">var(%1$s)</code>
                         <code class="gp-color-hex-alt">%3$s</code>
                     </div>
                 </article>',
                 $var_name,
                 $label,
                 $hex,
                 $text_color
             );
         }
     } else {
         echo '<p>No global colors found in GeneratePress Customizer color settings.</p>';
     }
 
     echo '</div>';
     echo '</section>';
 
     return ob_get_clean();
 });