Plugin de WordPress que permite insertar cajas de cita rectangulares personalizadas en el editor clásico mediante shortcodes y un botón dedicado en la barra de herramientas de TinyMCE.

Información del Plugin

• Nombre: Botones en el Editor clásico
• Versión: 1.0
• Autor: Santos R. Guerra F.
• URI del Autor: https://santosguerra.com/plugins
• Requiere WordPress: 5.6 o superior
• Requiere PHP: 7.4 o superior
• Licencia: GPL v2 o posterior
• Licencia URI: https://www.gnu.org/licenses/gpl-2.0.html

Descripción

Este plugin añade funcionalidad al editor clásico de WordPress para insertar cajas de cita con estilo rectangular personalizable. Las cajas son ideales para destacar contenido importante, citas o información relevante dentro de tus publicaciones y páginas.

⚠️ IMPORTANTE: Este plugin requiere que tengas instalado y activado el plugin Classic Editor ya que está diseñado específicamente para trabajar con el editor clásico de WordPress, NO con el editor de bloques Gutenberg.

Características

• ✅ Botón personalizado en la barra de herramientas del editor clásico
• ✅ Inserción de cajas de cita mediante shortcode [cita_caja]
• ✅ Personalización de color de fondo
• ✅ Alineación izquierda o derecha con texto flotante
• ✅ Diseño responsivo adaptado a dispositivos móviles
• ✅ Estilos CSS personalizables
• ✅ Compatible con el editor clásico de WordPress

Requisitos Previos

Este plugin requiere:

• WordPress 5.6 o superior
• PHP 7.4 o superior
• Plugin Classic Editor instalado y activado

Instalación

1. Asegúrate de tener el plugin Classic Editor instalado:

   • Ve a Plugins > Añadir nuevo
   • Busca "Classic Editor"
   • Instala y activa el plugin oficial de WordPress
   • O descárgalo desde: https://es.wordpress.org/plugins/classic-editor/

2. Descarga este plugin o clónalo en tu directorio de plugins

3. Sube la carpeta bttn-classic-editor a /wp-content/plugins/

4. Activa el plugin a través del menú 'Plugins' en WordPress

5. El botón "»» Añadir Caja Violeta ««" aparecerá automáticamente en el editor clásico

Uso

Usando el Botón del Editor

1. Abre una página o entrada en el editor clásico
2. Haz clic en el botón "»» Añadir Caja Violeta ««" en la barra de herramientas
3. Rellena el formulario modal:
   • Texto: Contenido de la caja de cita
   • Alineación: Izquierda o Derecha
   • Color de Fondo: Código hexadecimal (ej: #634877)
4. Haz clic en "Aceptar" para insertar el shortcode

Usando el Shortcode Manualmente

[cita_caja align="left" color="#634877"]Tu texto aquí[/cita_caja]

Parámetros del Shortcode

• align (opcional): Alineación de la caja
  • left (predeterminado): Alinea la caja a la izquierda
  • right: Alinea la caja a la derecha
• color (opcional): Color de fondo en formato hexadecimal
  • Valor predeterminado: #634877 (violeta)

Ejemplos

Caja alineada a la izquierda con color predeterminado:

[cita_caja]Este es un texto destacado[/cita_caja]

Caja alineada a la derecha con color personalizado:

[cita_caja align="right" color="#2c5f8d"]Cita importante en azul[/cita_caja]

Diseño Responsivo

El plugin incluye estilos responsivos automáticos:

• Escritorio: Caja con ancho del 30% y texto flotante
• Móvil (< 768px): Caja de ancho completo sin flotación

Licencia

Este plugin es software libre: puedes redistribuirlo y/o modificarlo bajo los términos de la Licencia Pública General de GNU publicada por la Free Software Foundation, ya sea la versión 2 de la Licencia o (a tu elección) cualquier versión posterior.

Este plugin se distribuye con la esperanza de que sea útil, pero SIN NINGUNA GARANTÍA; incluso sin la garantía implícita de COMERCIABILIDAD o IDONEIDAD PARA UN PROPÓSITO PARTICULAR. Consulta la Licencia Pública General de GNU para más detalles.

Deberías haber recibido una copia de la Licencia Pública General de GNU junto con este plugin. Si no es así, consulta https://www.gnu.org/licenses/gpl-2.0.html

Soporte

Para reportar problemas o sugerencias, contacta al autor a través de santosguerra.com/plugins

Changelog

1.0

• Lanzamiento inicial
• Implementación de shortcode [cita_caja]
• Botón personalizado en TinyMCE
• Estilos CSS responsivos
• Modal de configuración en el editor

---

Documentación para Desarrolladores

Esta sección proporciona información técnica para programadores que deseen modificar o extender el plugin.

Arquitectura del Plugin

Estructura de Archivos

bttn-classic-editor/
├── bttn-classic-editor.php     # Archivo principal del plugin
├── saint-tinymce-plugin.js     # Plugin de TinyMCE para el botón
├── saint-admin-modal.css       # Estilos del modal (no utilizado actualmente)
└── README.md                   # Este archivo

Clase Principal: Saint_Cita_Caja_Classic_Editor

El plugin utiliza programación orientada a objetos con una única clase principal que maneja toda la funcionalidad.

Constructor

public function __construct() {
    add_action('init', array($this, 'init'));
    register_activation_hook(__FILE__, array($this, 'activate'));
}

Registra los hooks principales:

• init: Inicialización del plugin
• Hook de activación para configuración inicial

Métodos Principales

init()

Ejecuta la inicialización del plugin:

• Registra el shortcode [cita_caja]
• Añade filtros de TinyMCE en el área de administración
• Encola estilos en el frontend

activate()

Ejecutado durante la activación del plugin:

• Crea el CSS predeterminado
• Almacena los estilos en la opción saint_cita_css

shortcode_cita_caja($atts, $content = null)

Procesa el shortcode y genera el HTML de la caja de cita.

Parámetros:

• $atts: Array de atributos del shortcode
• $content: Contenido entre las etiquetas del shortcode

Retorna: String HTML con la estructura de la tabla

add_tinymce_button($buttons)

Añade el botón personalizado a la barra de herramientas de TinyMCE.

add_tinymce_plugin($plugins)

Registra el plugin JavaScript de TinyMCE.

frontend_styles()

Encola los estilos CSS personalizados en el frontend usando wp_add_inline_style().

Estructura HTML Generada

El shortcode genera una estructura basada en tabla HTML para máxima compatibilidad:

<table class="saint-cita-table saint-cita-left">
    <tr>
        <td class="saint-cita-celda" style="background-color:#634877;">
            Contenido de la cita
        </td>
    </tr>
</table>

Clases CSS:

• .saint-cita-table: Contenedor principal (tabla)
• .saint-cita-celda: Celda con estilos de la caja
• .saint-cita-left: Modificador de alineación izquierda
• .saint-cita-right: Modificador de alineación derecha

Plugin de TinyMCE

Ubicado en saint-tinymce-plugin.js, implementa la funcionalidad del botón en el editor.

Estructura del Plugin

tinymce.create('tinymce.plugins.saint_cita', {
    init : function(ed, url) {
        ed.addButton('saint_cita', {
            text : '»» Añadir Caja Violeta ««',
            onclick : function() {
                // Abre modal de configuración
            }
        });
    }
});

Modal de Configuración

El modal utiliza la API nativa de TinyMCE con los siguientes campos:

1. content (textbox multiline): Texto de la cita
2. align (listbox): Alineación (izquierda/derecha)
3. color (textbox): Color en formato hexadecimal

Al enviar el formulario, inserta el shortcode en el editor.

Estilos CSS

Los estilos predeterminados se almacenan en la opción saint_cita_css de WordPress y se generan en el frontend usando wp_add_inline_style().

Variables de Estilo Predeterminadas

width: 30%
background-color: #634877
color: #F7F4F5
padding: 80px 45px
font-size: 16px
font-family: "Segoe UI", sans-serif

Breakpoint Responsivo

@media (max-width: 768px) {
    .saint-cita-table {
        width: 100% !important;
        float: none !important;
        margin: 20px 0 !important;
    }
}

Hooks y Filtros Utilizados

WordPress Core

• init: Inicialización del plugin
• wp_enqueue_scripts: Encolar estilos frontend
• mce_buttons: Añadir botón a TinyMCE
• mce_external_plugins: Registrar plugin JavaScript

Shortcodes

• cita_caja: Shortcode principal del plugin

Seguridad

El plugin implementa las siguientes medidas de seguridad:

1. Prevención de acceso directo:

   if (!defined('ABSPATH')) exit;

2. Escape de atributos:

   esc_attr($atts['align'])
   esc_attr($atts['color'])

3. Escape de contenido:

   esc_html($content)

Personalización y Extensión

Modificar Estilos Predeterminados

Los estilos se almacenan en la opción saint_cita_css. Para modificarlos:

$custom_css = '.saint-cita-celda { padding: 60px 30px !important; }';
update_option('saint_cita_css', $custom_css);

Añadir Nuevos Atributos al Shortcode

1. Modifica el array de atributos en shortcode_cita_caja():

   $atts = shortcode_atts(array(
       'align' => 'left',
       'color' => '#634877',
       'width' => '30%' // Nuevo atributo
   ), $atts);

2. Actualiza la lógica de generación HTML

3. Modifica el modal de TinyMCE para incluir el nuevo campo

Añadir Nuevas Alineaciones

Modifica el método shortcode_cita_caja() para soportar valores adicionales de align:

switch($atts['align']) {
    case 'center':
        $align_class = 'saint-cita-center';
        break;
    case 'right':
        $align_class = 'saint-cita-right';
        break;
    default:
        $align_class = 'saint-cita-left';
}

Añade los estilos CSS correspondientes en el método activate().

Crear Variantes de Cajas

Para crear diferentes tipos de cajas (ej: caja de advertencia, caja de información):

1. Duplica el método shortcode_cita_caja() con un nuevo nombre
2. Registra un nuevo shortcode en init():

   add_shortcode('caja_advertencia', array($this, 'shortcode_caja_advertencia'));

3. Crea un nuevo botón en TinyMCE duplicando la lógica del plugin JavaScript

Base de Datos

El plugin utiliza la tabla wp_options para almacenar:

• saint_cita_css: Estilos CSS personalizados (TEXT)

Nota: No requiere tablas personalizadas.

Desinstalación

Actualmente el plugin no incluye un archivo uninstall.php. Para implementar limpieza completa:

Crea uninstall.php en la raíz del plugin:

<?php
if (!defined('WP_UNINSTALL_PLUGIN')) exit;

delete_option('saint_cita_css');

Compatibilidad

• WordPress: 5.6+
• PHP: 7.4+
• Editor: Editor Clásico (Classic Editor) - OBLIGATORIO
• TinyMCE: Versión 4.x incluida en WordPress

Dependencias Requeridas

Este plugin REQUIERE el plugin oficial Classic Editor de WordPress para funcionar correctamente.

¿Por qué? Este plugin añade botones personalizados a la barra de herramientas de TinyMCE, el cual solo está disponible en el editor clásico. El editor de bloques Gutenberg utiliza una arquitectura completamente diferente.

Nota: Si tu sitio WordPress utiliza el editor de bloques Gutenberg por defecto, este plugin NO funcionará a menos que instales y actives Classic Editor.

Debugging

Para activar logging de errores, añade al archivo principal:

if (defined('WP_DEBUG') && WP_DEBUG) {
    error_log('Saint Cita: ' . print_r($data, true));
}

Testing

No existen tests automatizados. Para testing manual:

1. Activa el plugin en un entorno de desarrollo
2. Verifica que aparezca el botón en el editor clásico
3. Inserta una caja de cita usando el botón
4. Verifica el shortcode generado en el editor HTML
5. Previsualiza la entrada/página en frontend
6. Verifica responsividad en diferentes dispositivos

Contribuciones

Para contribuir al desarrollo del plugin:

1. Contacta al autor en https://santosguerra.com/plugins
2. Documenta cualquier cambio propuesto
3. Mantén el estilo de código existente
4. Asegura compatibilidad hacia atrás

Roadmap Sugerido

Posibles mejoras futuras:

• [ ] Panel de administración para editar CSS sin código
• [ ] Múltiples estilos predefinidos (info, warning, success)
• [ ] Soporte para Gutenberg mediante bloque personalizado
• [ ] Importar/exportar configuraciones
• [ ] Vista previa en tiempo real en el modal
• [ ] Soporte para imágenes de fondo
• [ ] Selector de color visual (color picker)

Recursos Adicionales

• WordPress Plugin Handbook
• TinyMCE Documentation
• WordPress Coding Standards

---

Desarrollado por Santos R. Guerra F. | santosguerra.com/plugins