WordPress: ¿Es posible usar el tipo de publicación como parte de un selector css en la hoja de estilo del editor de bloques?

7 minutos de lectura

avatar de usuario
johannes

Creé un tema de WordPress y ahora estoy trabajando en una hoja de estilo de editor para que el editor de bloques refleje mejor el aspecto del tema en el editor. Para esto, necesito poder abordar diferentes tipos de publicaciones allí.

Para el frontend, está el body_class() función para usar en plantillas, que inserta, entre otras, una clase que identifica el tipo de publicación y puede usarse en selectores combinados para abordar ciertos elementos solo en un tipo de publicación en particular.

Ahora, la clase de post-tipo es en la etiqueta del cuerpo de la página, también en modo de edición, pero aparentemente el CSS de la hoja de estilo del editor se aplica de una manera “aislada”: los selectores combinados que contienen clases que están en la etiqueta del cuerpo no funcionarán en el editor.

Así que estoy buscando algo similar que funcione en el editor de bloques, para poder usarlo en selectores combinados que solo se aplican a ciertos elementos en un tipo de publicación en particular.

¿Alguna idea de cómo hacer eso?


Por cierto, también traté de verificar el tipo de publicación usando Javascript/jQuery:

wp.domReady(function() {
        var postType = jQuery('form.metabox-base-form input#post_type').attr('value');
        if(postType == 'post'){
            alert("It's a post!");//in real life some other action...
        }
});

Pero aunque sería lógico activar al menos la alerta que puse allí, no sucede nada cuando cargo la página de edición de una publicación, donde ese elemento de entrada, incluido su valor de “publicación”, está claramente presente. (?)


Adición: intenté todo lo que se me ocurrió para encontrar una solución alternativa, también probé este script para ver si puedo verificar las clases de cuerpo cuando estoy usando el editor:

jQuery(document).ready(function() {
    if(jQuery('body').hasClass('post-type-page')) {
        alert("It's a page!");
    } else {
        alert("It's not a page");
    }
});

El resultado en las páginas del editor (es decir, el página web mostrando el editor de bloques WP): ¡Ninguna alerta! ¿¿¿Por qué eso??? ¿El editor de bloques Javascript bloquea/evita todos los demás Javascript?


PD: publiqué la primera parte de esta pregunta en el desarrollo de StackExchange WordPress antes, pero no obtuve ninguna reacción, así que lo estoy intentando aquí…

  • Cuando ejecuto su bloque de código javascript en la ventana de la consola de Chrome, recibo la alerta correcta de que "It's a page!" ¿Puede editar su publicación para mostrarnos cómo está poniendo en cola los scripts y estilos que desea que aparezcan en las pantallas de edición de la página de administración?

    – JobiWon9178

    10 de febrero de 2020 a las 12:04

  • @ JobiWon9178 ¿Recibió esa alerta cuando estaba cargando una página en el editor (de bloques)? Porque de eso estoy hablando. la alerta lo hace aparece cuando abro/veo la página, pero no cuando abro la página en el editor, cualquier navegador, y ahí es donde lo necesito (en modo de edición). Por cierto, puse ese guión en la parte inferior de mi functions.php y el CSS del que estoy hablando está en la hoja de estilo que definí como hoja de estilo del editor para el editor de bloques (que por lo demás funciona bien)

    – Juan

    10 de febrero de 2020 a las 12:19


  • Estoy hablando del editor de bloques, sí. Es posible que deba agregar el script a través del admin_enqueue_scripts gancho, porque los scripts cargados para el front-end de un sitio generalmente no se cargan en el lado del administrador del back-end.

    – JobiWon9178

    10 de febrero de 2020 a las 12:26


  • Por lo que vale, tal vez esta guía ¿podría ayudar?

    – JobiWon9178

    10 de febrero de 2020 a las 12:30

avatar de usuario
johannes

Encontré una solución yo mismo (pero con una pista de @ JobiWon9178 – ¡¡¡gracias!!!). No es CSS puro, pero involucra algo de JS/jQuery. Es un script similar al que ya publiqué en la pregunta, con las adiciones necesarias para agregar dinámicamente clases a elementos HTML relevantes:

$(document).ready(function() {
    if($('body').hasClass('post-type-page')) {
        $('#editor').addClass('post-type-page');
    } else if($('body').hasClass('post-type-post')) {
        $('#editor').addClass('post-type-post');
    }
});

Esto agrega lo relevante post-type-xxxx clase a la #editor DIV, que es uno de los contenedores externos del editor de bloques. Contrariamente a la body clases, las clases de este elemento son relevante para el contenido del editor y se puede usar en selectores combinados en la hoja de estilo del editor.

(Nota: inicialmente traté de agregar la clase al contenedor DIV que tiene las clases edit-post-visual-editor editor-styles-wrapperpero eso no funcionaría: la clase de tipo posterior simplemente no se agregó).

Un ejemplo: la siguiente regla CSS en la hoja de estilo del editor ahora se aplicará a todos los bloques de párrafo en el editor, pero solo cuando el tipo de publicación sea una página:

.post-type-page .wp-block-paragraph {
   /* (CSS settings here) */
}

Un detalle importante, que @JobiWon9178 señaló en un comentario: el script jQuery anterior debe agregarse usando admin_enqueue_scripts , no junto con los scripts para la interfaz. Así que puse ese script en un archivo llamado admin_scripts.js y encolado de la siguiente manera en functions.php:

function my_admin_scripts($hook) {
    if ( 'post.php' != $hook ) {
        return;
    }
    wp_register_script('adminscripts', get_template_directory_uri() . '/js/admin_scripts.js', '', null, true);
    wp_enqueue_script('adminscripts');
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

Así que esa es mi solución de trabajo. Si a alguien todavía se le ocurre una solución CSS pura, estaría muy feliz, pero supongo que por ahora (es decir, en WordPress 5.3) no hay un método solo CSS para esto.

avatar de usuario
Bazdín

Pude hacer esto con puramente CSS. ¿Estás seguro de que tu CSS se está agregando correctamente?

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
      echo '<style>
              .post-type-page .wp-block-paragraph {
                   font-size: 5rem;
               }
      </style>';
 }

Si entro en el editor, el texto de este párrafo solo se modifica en una página.

Esto está ejecutando WP 5.3.2.

add_editor_style se usa técnicamente para TinyMCE personalizado.

El uso de enqueue_block_editor_assets se agregó en WP 5.0 para agregar estilos y funcionalidad a los bloques.

https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/

Editar: versión solo CSS

function custom_block_editor_styles() {
    wp_enqueue_style( 'legit-editor-styles', get_theme_file_uri( '/css/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'custom_block_editor_styles' );

  • Eso es interesante: cuando insertas un style etiqueta usando admin_head como lo hiciste, de hecho funciona. Sin embargo, la misma regla CSS no funciona si la pongo en la hoja de estilo de mi editor, lo que definitivamente es siendo agregado, ya que todas las demás reglas de CSS funcionan. Comportamiento extraño… Pero con “CSS puro” realmente quise usar la hoja de estilo del editor, no usar una función PHP para agregar una etiqueta de estilo dinámicamente. No obstante: ¡Muchas gracias por tu respuesta!

    – Juan

    10 de febrero de 2020 a las 20:07

  • hmm, ¿cómo estás agregando la hoja de estilo de estilo?

    – Bazdín

    10 de febrero de 2020 a las 20:23

  • Con estas dos líneas en functions.php: add_theme_support( 'editor-styles' ); add_editor_style( 'gb_editor_styles.css' );

    – Juan

    10 de febrero de 2020 a las 20:31

  • De hecho, cambiaría a usar esto. add_action(‘enqueue_block_editor_assets’, ‘legit_block_editor_styles’); y agregue su propia hoja de estilo. add_editor_style se agregó en WP 3.4 para las hojas de estilo del editor TinyMCE. desarrollador.wordpress.org/reference/functions/add_editor_style

    – Bazdín

    10 de febrero de 2020 a las 20:51


  • Hmm – Aquí mismo, add_editor_style aparece como la forma “oficial”: desarrollador.wordpress.org/block-editor/developers/themes/… Pero probaré lo que me recomiendas, ¡gracias!

    – Juan

    10 de febrero de 2020 a las 21:53

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad