0
313
ViewsEstilos que faltan en la vista previa de Gutenberg (solo en la vista previa, no en el editor)
Tengo un Gutenberg Block personalizado creado con Javascript y PHP al que le faltan sus estilos de vista previa. La vista previa debe parecerse a la que ves en el editor detrás de ella.
Tengo un paquete web que compila todos los estilos para TODOS los bloques en un solo archivo CSS. El archivo block.json se incluye a través de PHP:
register_block_type( $directory . '/cover/block.json', [ 'render_callback' => 'render_block_cover' ] );El archivo de estilos se incluye de la siguiente manera:
... add_action( 'wp_enqueue_scripts', [ $this, 'c_wp_enqueue_scripts' ], 100 ); add_action( 'enqueue_block_editor_assets', [ $this, 'c_wp_enqueue_scripts' ], 100 ); ... function c_wp_enqueue_scripts() { ... $file_with_path_css = apply_filters( 'get_file_from_dist', 'index.css', true ); wp_enqueue_style( 'my-styles', $file_with_path_css, '', $theme->Version, 'all' ); } Me pregunto si los estilos deben incluirse a través de la referencia en block.json . Sin embargo, con Wordpress 5.9 en proyectos anteriores con una estructura similar, la vista previa realmente funcionó. Sin embargo, esos bloques no estaban registrados en PHP, solo en Javascript.
P: ¿Cuál podría ser la causa de que la vista previa no muestre ningún estilo?
Lo que puedo excluir es que se trata de un error jerárquico de CSS. Ningún estilo parece funcionar, incluso si están directamente en el bloque sin un padre.
1 answers
Answer question0
Como su bloque tiene una devolución de llamada de procesamiento de PHP, primero verificaría su función, render_block_cover() usa get_block_wrapper_attributes() para aplicar los nombres de clase de bloques dinámicos . La vista previa del bloque se representa dentro de un <iframe> con los nombres de clase CSS de los bloques aplicados. Si los estilos "faltan" y están presentes en su CSS, es probable que haya un problema con los nombres de clase que no se aplican al bloque cuando se procesan.
En su función de renderizado, los nombres de clase deben aplicarse usando get_block_wrapper_attributes() , por ejemplo:
php
function render_block_cover( $attributes, $content, $block ){ $wrapper_attributes = get_block_wrapper_attributes(); $content = '<h2>Heading</h2>'; // This would be the dynamic content // The returned block content has the block wrapper applied, a <div> in this example return sprintf( '<div %1$s>%2$s<div>', $wrapper_attributes, $content ); } Si la devolución de llamada de procesamiento es correcta, luego verifique que el name , el style y el estilo del editor en editorStyle sean correctos/coincidan con su CSS:
bloque.json
{ "name": "myblock/cover", ... "editorStyle": "file:./index.css", "style": "file:./index.css" } El nombre de clase generado sería .wp-block-myblock-cover para este bloque de ejemplo. Si su bloque tiene variaciones o estilos de bloque , la clase generada podría ser diferente y también se puede anular con:
get_block_wrapper_attributes(array( 'class' => 'my-special-classname'))` Nota: si su block.json tiene editorStyle y style definidos, add_action( 'wp_enqueue_scripts', ...) y add_action( 'enqueue_block_editor_assets', ...) no son necesarios en PHP. El CSS se carga desde blocks.json cuando el bloque se registra en PHP:
register_block_type( $directory . '/cover/block.json', [ 'render_callback' => 'render_block_cover' ] );Finalmente, verifique dos veces que haya borrado el caché de su navegador durante la prueba; a veces es tan simple como esto cuando todo lo demás falla.