Soporte » Guías – Resolución de problemas » Cambiar la fuente cuando estamos en modo editor HTML

  • Hola

    Tengo un cliente que quiere modificar la fuente del editor cuando esta en modo HTML.

    Repito, fuente del EDITOR no la fuente del tema.

    He tratado de localizar el medio pero no veo forma.

    Editor en modo HTML

Viendo 8 respuestas - de la 1 a la 8 (de un total de 8)
  • Moderador Jose Luis

    (@jose64)

    Hola

    Los estilos del backend no se manejan desde el tema. Puedes hacerlo con un plugin:

    Add Admin CSS

    O mediante código, como se explica, por ejemplo, en

    Agregar CSS personalizado al área de administración de WordPress

    Como no indicas que tema usas, te pongo un ejemplo con el tema Twenty Twenty:

    En un tema hijo creé el directorio admin-css (por mantener el orden) y en ese directorio el css personalizado está en el archivo admin.css (aumento de tamaño, cambio de tipografía y añadir color de fondo):

    .wp-block-html .block-editor-plain-text {
        font-size: 1rem;
        font-family: sans-serif;
        background-color: #eeeeee;
    }

    Finalmente añades en el archivo functions.php del tema hijo la función que encola el css:

    function admin_style() {
      wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/admin-css/admin.css');
    }
    add_action('admin_enqueue_scripts', 'admin_style');

    Si con esto queda aclarado, por favor, recuerda cerrar el debate marcándolo como resuelto, de esta forma nos ayudas a mantener el foro al día.

    Iniciador del debate abkrim

    (@abkrim)

    He probado y no funciona.

    Lo he probado usando el plugin y creando el child.

    Ademas añadí para probar .wp.editor-area, y probe tambien con el editor clasico.

    Nada.

    
    .wp-block-html .block-editor-plain-text .wp-editor-area{
    	font-size: 2rem;
    	font-family: sans-serif;
    	background-color: #eeeeee;
    }
    
    Moderador Jose Luis

    (@jose64)

    Hola

    Como te comenté antes, el ejemplo que te puse fue usando un tema hijo de Twenty Twenty y ubicando el archivo con el css en /twenty-twenty-child/admin-css/admin.css

    Con el código que te indiqué antes modificas el bloque HTML de Gutenberg, para modificar la edición en HTML del bloque clásico de Gutenberg tendrías que añadir:

    textarea.block-editor-block-list__block-html-textarea {
        font-size: 1rem!important;
        font-family: sans-serif!important;
        background-color: #eeeeee;
    }

    Lo tengo instalado y funcionando perfectamente en un WordPress con el tema hijo de Twenty Twenty y ningún plugin activado, por lo que si a ti no te funciona o bien no lo estás haciendo correctamente (puede ser algún error con las rutas que usé para el archivo css en el tema hijo) o no nos estamos refiriendo a los mismos bloques.

    También puede ser que tengas algún tema o plugin que modifique las clases de estos bloques, como te indiqué anteriormente, si me dices que tema/plugins usas no tengo ningún inconveniente en instalarlo y revisarlo, siempre y cuando pertenezca al repositorio de WordPress.

    Quedamos a la espera de tus comentarios

    Iniciador del debate abkrim

    (@abkrim)

    Hola

    Muchisimas gracias. No soy un experto en el tema de wordpress, y me esta costando.

    En principio como te dije probe modificando el css, (en el hijo), pero nada. Encima el template hijo me hacia perder algunas cosas que estaban dentro del tema, pero no es el caso.

    El tema es de pago, que ademas lo he actualizado. Hemlock

    Muy agradecido.

    • Esta respuesta fue modificada hace 11 meses, 1 semana por abkrim. Razón: Aññadir algo
    Moderador Jose Luis

    (@jose64)

    Hola.

    El hecho de que usando un tema hijo pierdas configuraciones del padre indica que algo estás haciendo incorrectamente, un tema hijo no modifica nada del padre si tú no haces ninguna personalización, esa justamente es la idea.

    Algo estás haciendo mal, si reproduces todo el proceso tal cual te expliqué dentro de tu tema debería funcionar exactamente igual, el código es independiente del tema que estés usando porque no modifica estilos del tema, sino los propios de WordPress.

    Otra cosa es que estés usando bloques que no sean nativos de Gutenberg, o que estés usando el editor clásico, prueba repitiendo todo con el tema a Twenty Twenty y cambiando temporalmente para verificar que lo haces correctamente (pon la web en modo mantenimiento previamente)

    Iniciador del debate abkrim

    (@abkrim)

    Bueno.

    Como programador suelo poner bastante enfasis en revisar las cosas, y hacer test. Deasconozco WP. No es muy de mi interes salvo que doy soporte de hosting amuchos clientes que soportan WP.

    He revisado la doc de Temas hijos y he generado

    Carpeta
    hemlock-child

    Functions

    <?php
    add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
    
    function enqueue_parent_styles() {
       wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    }
    
    if ( ! function_exists( 'admin_style' ) ) {
      function admin_style() {
         wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/admin-css/admin.css');
      }
    }
    add_action('admin_enqueue_scripts', 'admin_style');
    
    ?>

    style.css

    /*
    Theme Name: Hemlock Child
    Theme URL: https://trainarts.com
    Description: Hemlock Child
    Theme Author: Abdelkarim Mateos
    Author URL: https://castris.com
    Template: hemlock
    Version: 1.0.0
    License:      GNU General Public License v2 or later
    License URI:  http://www.gnu.org/licenses/gpl-2.0.html
    Tags:         light, dark, two-columns, right-sidebar, responsive-layout,
    accessibility-ready
    Text Domain: hemlock-child
    */
    /* =Aquí empieza la personalización de tu tema
    -------------------------------------------------------------- */
    

    admin-css/admin.css (Ahora mismo es el ultimo que probe)

    
    .wp-block-html .block-editor-plain-text .wp-editor-area{
            font-size: 2rem;
            font-family: sans-serif;
            background-color: #eeeeee;
    }
    

    Y el resultado es que SI cambia el tema hijo respecto del padre.

    Y no es que halla cambiado algo sino todo.

    Hijo
    Padre

    En fin, cuando uno lee la documentación de algo, y comienza con estos lios se le quita las ganas. Imagino que el tema, no esta correctamente programado y el método de hacer un hijo, no le sienta bien.

    Saludos.

    Moderador Jose Luis

    (@jose64)

    Hola

    Una de las grandes ventajas de WordPress es la facilidad de tener un universo de plugins.

    Haz la prueba creando el tema hijo con este plugin:

    Child Theme Configurator

    Hay algunos más en el repositorio, este simplemente es el más usado y a mi nunca me ha dado problemas.

    Una vez creado el tema hijo puedes desactivarlo y borrarlo. Haz la prueba, deberían tener exactamente el mismo aspecto, como habrás visto en la documentación, el tema hijo lo que hace es modificar el comportamiento del tema padre, si no le añades nada no debe modificar nada, de hecho el problema suele ser al contrario, haces los cambios en el tema hijo y no se reflejan por estar mal preparado.

    Lo otro que puede pasar es lo que comentas, que el tema use alguna opción que no sea estándad y que necesite una configuración extra en el hijo.

    De todas formas puedes hacerlo perfectamente en el tema padre si el hijo te da problemas, guarda las modificaciones y cuando actualices el tema vuelve a añadirlas, por eso no tendrás ningún problema ya que va a ser copiar unas líneas al final del archivo functions.php y la carpeta con el archivo css.

    Saludos, y, por favor, sigue comentando como vas resolviendo, estamos para ayudarte hasta donde podamos.

    Coméntanos el resultado

    Iniciador del debate abkrim

    (@abkrim)

    Hola

    Mucha gracias y perdón por el retraso en contestar, pero estaba de Ramadan y tenias mas trabajos prioritarios que atender.

    Efectivamente con el tip del Them Child Configurator exporte las configuraciones especificas del tema, y luego las importe en el hijo. Por lo que ahora puedo trabajar más a gusto sobre el child.

    Pero nada, no consigo que el editor (ahora lo tiene en el Editor clásico tome las fuente adecuadas)

    https://imgur.com/a/Jjovu9b

    
    /* Gutenberg editor width */
    .wp-block { max-width: 940px; padding:0; }
    
    /* Fonts */
    p, li, td, .mce-content-body {
    	font-family:"Crimson Text", serif;
    	font-size:18px;
    	line-height:28px;
    }
    

    He probado con diferentes variantes y nada…

    la última

    
    .wp-block-html .block-editor-plain-text .wp-editor .wp-block .wp-editor-area{
            font-size: 2rem;
            font-family: sans-serif;
            background-color: #eeeeee;
    }
    
    textarea.block-editor-block-list__block-html-textarea {
        font-size: 2rem!important;
        font-family: sans-serif!important;
        background-color: #eeeeee;
    }
    

    Desesperado.

Viendo 8 respuestas - de la 1 a la 8 (de un total de 8)
  • El debate ‘Cambiar la fuente cuando estamos en modo editor HTML’ está cerrado a nuevas respuestas.