{"id":233724,"date":"2023-02-21T13:53:00","date_gmt":"2023-02-21T10:53:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233724"},"modified":"2022-11-11T12:03:52","modified_gmt":"2022-11-11T09:03:52","slug":"como-agregar-estilos-de-bloque-personalizados-a-los-bloques-de-gutenberg-de-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-agregar-estilos-de-bloque-personalizados-a-los-bloques-de-gutenberg-de-wordpress\/","title":{"rendered":"C\u00f3mo agregar estilos de bloque personalizados a los bloques de Gutenberg de WordPress"},"content":{"rendered":"\n

Una caracter\u00edstica algo menos conocida de Gutenberg es la opci\u00f3n de configurar diferentes estilos para los bloques. Puede registrar tantos estilos diferentes en cualquier tipo de bloque para dar al mismo bloque dise\u00f1os diferentes. Los estilos posibles para los bloques se muestran como una secci\u00f3n en el lado derecho del editor. Cada estilo tiene su propia vista previa. Si est\u00e1 manejando estilos correctamente, cambiar entre estilos deber\u00eda actualizar inmediatamente el dise\u00f1o dentro del editor, as\u00ed como en la interfaz.<\/p>\n

La documentaci\u00f3n de WordPress para esta funci\u00f3n<\/a> actualmente no es tan completa e informativa como podr\u00eda ser. Entonces, en esta publicaci\u00f3n, veremos en detalle c\u00f3mo puede agregar sus estilos de bloque personalizados y c\u00f3mo debe manejar el estilo para ellos.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

La forma en que funciona esta caracter\u00edstica es que cada vez que Gutenberg detecta que un tipo de bloque tiene registrado como m\u00ednimo un estilo, el cuadro "Estilos" aparecer\u00e1 autom\u00e1ticamente en el lado derecho del editor. Dentro de \u00e9l, el editor puede elegir entre el estilo predeterminado o cualquier otro. estilo de bloque que se ha agregado.<\/p>\n

En versiones anteriores (al menos antes de WordPress 5.3), registrar un estilo personalizado requer\u00eda que tambi\u00e9n registrara el estilo predeterminado ("sin estilo"). Afortunadamente, esto se solucion\u00f3 en las versiones m\u00e1s recientes de WordPress, por lo que ahora solo necesita registrar sus estilos personalizados, y WordPress agregar\u00e1 el estilo predeterminado autom\u00e1ticamente.<\/p>\n

Puede registrar estilos de bloques personalizados de dos maneras; con PHP o con Javascript. Echaremos un vistazo a ambos. Pero primero algunos a-ha’s con respecto al manejo de sus estilos.<\/p>\n

Una nota sobre la puesta en cola de estilos para Gutenberg<\/h2>\n

Puede haber cierta confusi\u00f3n sobre c\u00f3mo y d\u00f3nde agregar sus estilos (archivos CSS); solo al editor, al frontend o a una hoja de estilo para ambos. Uno de los prop\u00f3sitos principales del editor de Gutenberg es asegurarse de que pueda obtener una vista previa adecuada de c\u00f3mo se ver\u00e1 el contenido de su publicaci\u00f3n dentro del editor. Por lo tanto, se recomienda que se asegure de que sus estilos personalizados se apliquen tanto en el editor como en la interfaz.<\/p>\n

La forma en que maneja esto realmente depende de su proyecto y la configuraci\u00f3n de la hoja de estilo existente. Si est\u00e1 desarrollando un tema completo, probablemente ya incluya estilo de bloque dentro de su hoja de estilo de interfaz. Podr\u00eda considerar agregar una hoja de estilo separada que pondr\u00e1 en cola solo para el editor. Pero esto puede ser dif\u00edcil de mantener si agrega muchos estilos diferentes. Tendr\u00eda que actualizar sus estilos en dos lugares y asegurarse de que sus resultados sean los mismos. La soluci\u00f3n para eso ser\u00eda mantener una hoja de estilo que ponga en cola tanto para el editor como para la interfaz. Pero entonces su interfaz necesitar\u00eda cargar al menos dos hojas de estilo separadas y eso podr\u00eda no ser ideal.<\/p>\n

Otra soluci\u00f3n es usar, por ejemplo, SCSS o LESS y configurarlo @imports<\/code>de tal manera que solo necesite escribir sus estilos de bloque una vez, y se aplica tanto al editor como al frontend. Como ver\u00e1 a continuaci\u00f3n cuando use PHP para registrar estilos de bloque personalizados, tiene otra opci\u00f3n m\u00e1s; para agregar estilos en l\u00ednea. Estos estilos se aplicar\u00e1n tanto en el editor como en la interfaz. En la interfaz, WordPress los agregar\u00e1 como una l\u00ednea personalizada <style type=\"text\/css\">...<\/style><\/code>dentro del encabezado.<\/p>\n

Independientemente de c\u00f3mo elija resolverlo, sepa que hay un par de ganchos nuevos para estilos de registro (y scripts) para Gutenberg. Si desea poner en cola una hoja de estilo tanto para la interfaz como para el editor, use el gancho enqueue_block_assets<\/code>. Si desea agregar una hoja de estilo solo para el editor, col\u00f3quela dentro del enlace enqueue_block_editor_assets<\/code>.<\/p>\n

C\u00f3mo aplicar estilo a los estilos de bloque personalizados<\/h2>\n

Los estilos de bloque personalizados se agregar\u00e1n como una clase de un determinado patr\u00f3n en la etiqueta HTML m\u00e1s externa del bloque.<\/p>\n

La clase CSS para los estilos de bloque se agrega en forma de " is-style-<stylename><\/code>". Si, por ejemplo, nombra su estilo " outline<\/code>", el bloque obtendr\u00e1 la clase " is-style-outline<\/code>".<\/p>\n

Sin embargo, puede experimentar que el editor de Gutenberg en algunos casos anular\u00e1 su estilo. Recomiendo anteponer el estilo de su editor con el selector editor-styles-wrapper<\/code>para asegurarse de que sus estilos "ganen". Tenga en cuenta que esta clase no existe en la interfaz, por lo que, para estar seguro, es posible que deba agregar dos selectores, as\u00ed (si est\u00e1 utilizando la misma hoja de estilo para el editor y la interfaz):<\/p>\n

.is-style-colored-bottom-border, \n.editor-styles-wrapper .is-style-colored-bottom-border { \n    border-bottom: 2px solid purple;\n}<\/code><\/pre>\n
Agregar estilos de bloque personalizados con PHP<\/h2>\n
Para agregar un tipo de bloque personalizado usando PHP usamos la funci\u00f3n [register_block_style](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_style\/)()<\/code>. Desafortunadamente, la documentaci\u00f3n carece de informaci\u00f3n sobre qu\u00e9 gancho debemos usar, pero he tenido suerte con el gancho init<\/code>.<\/p>\n
Debe conocer el nombre del espacio de nombres de Gutenberg de su tipo de bloque para agregarle un estilo personalizado. Todos los bloques est\u00e1ndar de WordPress tienen el espacio de nombres \u00bb core<\/code>" seguido de una \/<\/code>versi\u00f3n slug de su nombre. Por ejemplo, el nombre de Gutenberg para el bloque de p\u00e1rrafo est\u00e1ndar es core\/paragraph<\/code>.<\/p>\n
El registro de un estilo de bloque personalizado se realiza en su forma m\u00e1s simple como esta:<\/p>\n
add_action('init', function() {\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n    ]);\n});<\/code><\/pre>\n
El c\u00f3digo anterior agrega un estilo de bloque personalizado al tipo de bloque de encabezado, lo que dar\u00eda como resultado la clase is-style-colored-bottom-border<\/code>en cualquier encabezado que haya elegido este estilo.<\/p>\n
Esta funci\u00f3n le proporciona dos m\u00e9todos para agregar su CSS (si no lo ha agregado de alguna otra manera); ya sea proporcionando CSS en l\u00ednea como una cadena, o proporcionando un identificador de hoja de estilo registrado que WordPress pondr\u00e1 en cola si es necesario.<\/p>\n
Si desea agregar un estilo en l\u00ednea (recuerde, esto afectar\u00e1 tanto al editor como a la interfaz), agregue el elemento ‘ inline_style<\/code>‘ a la llamada de funci\u00f3n y escriba el CSS completo como una cadena como su valor:<\/p>\n
add_action('init', function() {\n    $inline_css = '.is-style-colored-bottom-border, .editor-styles-wrapper .is-style-colored-bottom-border { border-bottom: 2px solid purple; }';\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'inline_style' => $inline_css\n    ]);\n});<\/code><\/pre>\n
Si prefiere hacer que la funci\u00f3n ponga en cola una hoja de estilo, proporcione su identificador al elemento ‘ style_handle<\/code>‘.<\/p>\n
add_action('init', function() {\n    wp_register_style('awp-block-styles', get_template_directory_uri(). '\/assets\/css\/custom-block-style.css', false);\n    register_block_style('core\/heading', [\n        'name' => 'colored-bottom-border',\n        'label' => __('Colored bottom border', 'txtdomain'),\n        'style_handle' => 'awp-block-styles'\n    ]);\n});<\/code><\/pre>\n
Ajuste la ubicaci\u00f3n de su hoja de estilo para que se ajuste a su proyecto. La hoja de estilo se aplicar\u00e1 tanto al editor como a la interfaz, pero esta vez la interfaz har\u00e1 una solicitud por separado para incluir esta hoja de estilo. No se recomienda este m\u00e9todo si agrega varios estilos de bloque. La interfaz se ralentizar\u00e1 significativamente al solicitar un mont\u00f3n de hojas de estilo separadas.<\/p>\n
Agregar estilos de bloque personalizados con Javascript<\/h2>\n
Si prefiere agregar sus estilos de bloque usando Javascript, esto es tan f\u00e1cil como con PHP.<\/p>\n
Deber\u00e1 poner en cola un archivo Javascript en el enlace del editor: enqueue_block_editor_assets<\/code>. Su secuencia de comandos probablemente no necesitar\u00e1 ninguna dependencia, pero prefiero agregar al menos ‘ wp-blocks<\/code>‘ como dependencia.<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks']\n    );\n});<\/code><\/pre>\n
Ajuste el nombre de archivo y la ubicaci\u00f3n para que se ajusten a su proyecto.<\/p>\n
En su archivo Javascript, usa la funci\u00f3n registerBlockStyle()<\/code>dentro del wp.blocks<\/code>objeto para registrar estilos de bloque personalizados. Agregar el mismo estilo de bloque que hicimos en PHP anterior se ver\u00eda as\u00ed:<\/p>\n
wp.blocks.registerBlockStyle('core\/heading', {\n    name: 'colored-bottom-border',\n    label: 'Colored bottom border'\n});<\/code><\/pre>\n
\u00a1Y eso es! Pan comido.<\/p>\n
Anular el registro de estilos de bloque<\/h2>\n
As\u00ed como puede registrar un estilo de bloque, tambi\u00e9n se puede anular el registro de un estilo de bloque. \u00bfQuiz\u00e1s quieras eliminar algunos de los estilos de bloque predeterminados de WordPress? Al igual que con el registro de estilos de bloque, tambi\u00e9n puede anular el registro de estilos de bloque con PHP o Javascript. Pero la elecci\u00f3n entre esos dos m\u00e9todos ya no es una elecci\u00f3n de preferencia.<\/p>\n
No puedes desregistrar un bloque con PHP si fue registrado con Javascript y viceversa. Por lo tanto, debe averiguar c\u00f3mo se registr\u00f3 el estilo que desea eliminar y combinarlo con PHP o Javascript. Creo que todos los estilos de bloque de WordPress se agregan con Javascript (\u00a1no me cites en esto!). Entonces, si desea eliminar algunos de ellos, deber\u00e1 seguir la ruta de Javascript.<\/p>\n
La cancelaci\u00f3n del registro de un estilo de bloque con PHP se realiza llamando a la funci\u00f3n unregister_block_style()<\/code>, proporcionando el tipo de bloque y el nombre del estilo que desea eliminar. Por ejemplo, anular el registro del estilo agregado anteriormente en esta publicaci\u00f3n (suponiendo que se haya registrado con PHP) se ver\u00eda as\u00ed:<\/p>\n
add_action('init', function() {\n    unregister_block_style('core\/heading', 'colored-bottom-border');\n});<\/code><\/pre>\n
La cancelaci\u00f3n del registro de un estilo de bloque con Javascript se realiza de manera similar con la funci\u00f3n unregisterBlockStyle()<\/code>dentro del wp.blocks<\/code>objeto. Sin embargo, con Javascript hay una cuesti\u00f3n de qu\u00e9 secuencia de comandos se ejecuta primero, y es posible que encuentre problemas cuando su secuencia de comandos se ejecuta antes del registro. Para resolver esto, usamos el equivalente de Gutenberg al "documento listo" de jQuery (jQuery(document).ready(function() { ... });<\/code>), y tambi\u00e9n agregamos otra dependencia a su secuencia de comandos.<\/p>\n
Comencemos agregando una nueva dependencia de secuencia de comandos en su archivo Javascript en la cola de ‘ wp-edit-post<\/code>‘:<\/p>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script(\n        'myguten-script', \n        get_template_directory_uri(). '\/assets\/js\/myguten.js', \n        ['wp-blocks', 'wp-edit-post']\n    );\n});<\/code><\/pre>\n
Y dentro de su archivo Javascript, envuelva su llamada de funci\u00f3n de cancelaci\u00f3n de registro dentro wp.domReady(function() { ... })<\/code>, as\u00ed:<\/p>\n
wp.domReady(function() {\n    wp.blocks.unregisterBlockStyle('core\/quote', 'large');\n});<\/code><\/pre>\n
Como muestra el c\u00f3digo anterior, con Javascript ahora podemos eliminar el estilo "Grande" de WordPress en el bloque Cita. Si intentara hacer lo mismo con PHP, no funcionar\u00eda.<\/p>\n
Una nota al margen sobre la anulaci\u00f3n del registro de estilos de bloque<\/h3>\n
Puede notar que, aunque haya eliminado con \u00e9xito cualquier estilo de bloque personalizado en un bloque, el cuadro "Estilos" en el editor no desaparecer\u00e1. Se queda con solo la opci\u00f3n "Predeterminado" dentro de \u00e9l. Si desea eliminar por completo el cuadro "Estilos" para no confundir a los editores, tambi\u00e9n puede anular el registro del estilo predeterminado (p. ej wp.blocks.unregisterBlockStyle('core\/quote', 'large')<\/code>., ). Esto eliminar\u00e1 por completo el cuadro "Estilos" del editor de Gutenberg.<\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Esta publicaci\u00f3n explica c\u00f3mo configurar estilos de bloque para bloques en Gutenberg, ya sea con PHP o Javascript, y aborda ideas para resolver hojas de estilo.<\/p>\n","protected":false},"author":1,"featured_media":220825,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,892,810,716,716,831,935,935,1110,800,800,810,831,840,840,861,861],"tags":[1172],"class_list":{"0":"post-233724","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codigo","9":"category-complementos","10":"category-desarrollador","12":"category-guia-para-principiantes","13":"category-gutenberg-2","15":"category-n-a","16":"category-php-2","20":"category-tutoriales","22":"category-wordpress-2","24":"tag-affiai-es"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233724"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233724\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/220825"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}