Creación del class-adminpanel

Es te archivo al ser más extenso lo divideremos por funiones explicando cada una de ellas para ver su explicación.

namespace ManagerBlock;

defined('ABSPATH') || exit;

class AdminPanel {

}

Las dos primeras lineas de código siempre deberán ir en nuestras clases, así que como ya se han explicado no es necesario volver a hacerlo.

Se crea la clase adminPanel() y dentro sus métodos. Empecemos:

public static function init() {
        add_action('admin_menu', [__CLASS__, 'add_admin_menu']);
        add_action('admin_init', [__CLASS__, 'register_settings']);
    }

Inicialización y Conexión con WordPress

  • init(): Este método estático se llama desde la clase principal (ManagerBlock) para dar inicio a la configuración del panel de administración.
  • add_action('admin_menu', ...): Conecta el método add_admin_menu al hook de WordPress que se encarga de crear nuevos elementos en el menú de navegación del escritorio.
  • add_action('admin_init', ...): Conecta el método register_settings al hook que se ejecuta cuando se inicializa la zona de administración, ideal para registrar configuraciones.
public static function add_admin_menu() {
        add_menu_page(
                'Manager Block Ultra Pro', //Page Title
                'Manager Block',  // Menu Title
                'manage_options', //Capabilicity
                'manager-block-ultra-pro-settings', //menu slugs
                [__CLASS__, 'admin_page'],
                'dashicons-layout', //icon
                90 //Position
        );
    }

Creación del Menú Principal

  • add_menu_page(): Esta función registra un nuevo elemento de menú principal llamado “Manager Block” en el escritorio de WordPress.
  • Le asigna el icono de dashicons-layout y lo coloca en la posición 90 (cerca de la parte inferior).
  • Especifica que la función admin_page es la encargada de renderizar el contenido de esta página.
public static function register_settings() {
        register_setting('manager_block_settings_group', 'manager_block_enabled_blocks');

        add_settings_section(
                'manager_block_general_section', //id
                'Ajustes de Bloques Activos',  //title
                null, //callback
                'manager-block-ultra-pro-settings' //page
        );

        add_settings_field(
                'manager_block_enabled_blocks', //id
                'Bloques disponibles',  //title
                [__CLASS__, 'enabled_blocks_callback'],
                'manager-block-ultra-pro-settings',  //page
                'manager_block_general_section'  //section
        );
    }

Registro de Configuraciones (Settings API)

Esta sección utiliza la Settings API de WordPress para crear una sección donde el usuario puede guardar sus preferencias:

  • register_setting(): Registra la opción manager_block_enabled_blocks en la base de datos de WordPress (tabla wp_options).
  • add_settings_section(): Crea una sección visual llamada “Ajustes de Bloques Activos” dentro de la página del plugin.
  • add_settings_field(): Define un campo de formulario llamado “Bloques disponibles”, usando la función enabled_blocks_callback para dibujar el contenido del formulario (los checkboxes).
public static function get_available_blocks() {
        return [
            'box-images' => 'Imagen + Información',
            'title-subtitle' => 'Titulo y Subtitulo',
            'slider-premium' => 'Carousel',
            'section-boxed' => 'Doble imagen con texto',
            'list-block' => 'Listados',
            'banner-text' => 'Textos',
            'box-color' => 'Cajas de información',
            'banner-premium' => 'Información del Proyecto',
            'fixed-block' => 'Bloque Fijo e Imagenes',
            'grid-main' => 'InfoGrid',
            'images-effect' => 'Efectos de Imagenes',
        ];
    }

    public static function enabled_blocks_callback() {
        $enabled_blocks = get_option('manager_block_enabled_blocks', []);
        if (!is_array($enabled_blocks)) {
            $enabled_blocks = [];
        }

        $blocks = self::get_available_blocks();

        foreach ($blocks as $slug => $label) {
            $checked = in_array($slug, $enabled_blocks) ? 'checked' : '';
            echo '<label style="display:block; margin-bottom:8px;">';
            echo '<input type="checkbox" name="manager_block_enabled_blocks&#91;&#93;" value="' . esc_attr($slug) . '" ' . $checked . '> ' . esc_html($label);
            echo '</label>';
        }
    }

Lógica de Activación de Bloques

  • get_available_blocks(): Un método que devuelve un array con todos los bloques creados (box-images, slider-premium, etc.) y sus nombres amigables.
  • enabled_blocks_callback(): Esta función renderiza el grupo de casillas de verificación (checkboxes).
  • Recupera los bloques que el usuario guardó previamente con get_option().
  • Itera sobre todos los bloques disponibles.
  • Si un bloque está en el array guardado, marca el checkbox como checked. Esto permite al usuario seleccionar qué bloques quiere usar en su editor de Gutenberg.
public static function admin_page() {
        $tab = isset($_GET['tab']) ? $_GET['tab'] : 'settings';

        echo '<div class="wrap">';
        echo '<h1>Manager Block Ultra Pro</h1>';
        echo '<nav class="nav-tab-wrapper">';
        echo '<a href="?page=manager-block-ultra-pro-settings&tab=settings" class="nav-tab ' . ($tab == 'settings' ? 'nav-tab-active' : '') . '">Ajustes</a>';
        echo '<a href="?page=manager-block-ultra-pro-settings&tab=examples" class="nav-tab ' . ($tab == 'examples' ? 'nav-tab-active' : '') . '">Ejemplos de bloques</a>';
        echo '<a href="?page=manager-block-ultra-pro-settings&tab=documentation" class="nav-tab ' . ($tab == 'documentation' ? 'nav-tab-active' : '') . '">Documentación</a>';
        switch ($tab) {
        case 'documentation':
            self::render_documentation_tab();
            break;
    }
        echo '</nav>';

        if ($tab == 'settings') {
            echo '<form method="post" action="options.php">';
            settings_fields('manager_block_settings_group');
            do_settings_sections('manager-block-ultra-pro-settings');
            submit_button();
            echo '</form>';
        } elseif ($tab == 'examples') {
            self::show_block_examples();
        }

        echo '</div>';
    }

public static function show_block_examples() {

        $blocks = self::get_available_blocks();
        echo '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(333px, 1fr)); gap: 20px; margin-top: 20px;">';
        foreach ($blocks as $slug => $label) {
            $image_url = plugin_dir_url(__FILE__) . 'examples/' . $slug . '.png'; // o .png, según prefieras
            echo '<div style="border:1px solid #ddd; padding:15px; text-align:center; border-radius:8px; background:#fff;">';
            echo '<h3>' . esc_html($label) . '</h3>';
            echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($label) . '" style="max-width:100%; height:auto; border-radius:6px;">';
            echo '</div>';
        }
        echo '</div>';
    }

    public static function render_documentation_tab() {
        $readme_file = plugin_dir_path(__FILE__) . '../docs/readme.md';

        if (file_exists($readme_file)) {
            require_once plugin_dir_path(__FILE__) . 'Parsedown.php';
            $parsedown = new \Parsedown();
            $markdown = file_get_contents($readme_file);
            $html = $parsedown->text($markdown);
            echo '<div class="manager-block-docs">' . $html . '</div>';
        } else {
            echo '<p>No se encontró el archivo de documentación.</p>';
        }
    }

Renderizado de la Página con Pestañas

  • admin_page(): Esta función genera todo el HTML de la página de administración, implementando un sistema de pestañas (Ajustes, Ejemplos de bloques, Documentación) para organizar la información.
  • Si la pestaña es settings, renderiza el formulario con settings_fields y do_settings_sections para mostrar los checkboxes de activación.
  • Si la pestaña es examples, llama a show_block_examples(). Este método se encarga de generar una cuadrícula visualmente atractiva en el panel de administración, mostrando una miniatura (captura de pantalla) para cada bloque disponible, lo que ayuda al usuario a identificar la apariencia de cada componente.
  • Si la pestaña es documentation, llama a render_documentation_tab(). Este método se encarga de cargar y mostrar el archivo de documentación de tu plugin, que está escrito en formato Markdown (un formato de texto plano simple y popular para documentación).

Categorias