{"id":228282,"date":"2022-10-15T15:43:00","date_gmt":"2022-10-15T12:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228282"},"modified":"2022-11-09T01:39:47","modified_gmt":"2022-11-08T22:39:47","slug":"compilacion-de-sass-para-multiples-bloques-con-la-configuracion-del-paquete-web","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/compilacion-de-sass-para-multiples-bloques-con-la-configuracion-del-paquete-web\/","title":{"rendered":"Compilaci\u00f3n de Sass para m\u00faltiples bloques con la configuraci\u00f3n del paquete web"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Este art\u00edculo muestra un ejemplo de c\u00f3mo usar los archivos Sass que configuramos en el art\u00edculo <a href=\"https:\/\/wholesomecode.ltd\/articles\/extending-the-wordpress-create-block-script-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Extender la configuraci\u00f3n del paquete web WordPress Create Block Script<\/a> con m\u00faltiples bloques dentro del mismo complemento. Si no ha le\u00eddo ese art\u00edculo, l\u00e9alo primero.<\/p>\n<p><strong>Este art\u00edculo es para una versi\u00f3n anterior de Create Block Script<\/strong><\/p>\n<p>Aunque la teor\u00eda a\u00fan se puede aplicar, es posible que parte de la informaci\u00f3n de este art\u00edculo ya no sea compatible con el \u00faltimo script de creaci\u00f3n de bloques. Puede <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ver nuestra gu\u00eda actualizada de creaci\u00f3n de secuencias de comandos de bloques aqu\u00ed<\/a>.<\/p>\n<p>Tambi\u00e9n tenemos una gu\u00eda actualizada sobre c\u00f3mo <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">agregar puntos de entrada adicionales al paquete web<\/a> para que pueda generar m\u00faltiples archivos CSS.<\/p>\n<h2>Configuraci\u00f3n de varios bloques<\/h2>\n<p>Como mencion\u00e9 en el art\u00edculo anterior, agregar las importaciones de Sass al \u00edndice del complemento nos permite definir m\u00faltiples bloques dentro del complemento, cada uno con sus propios <code>editor.scss<\/code>archivos <code>style.scss<\/code>.<\/p>\n<p>La configuraci\u00f3n del paquete web que hemos configurado tomar\u00e1 los archivos <code>editor.scss<\/code>y <code>style.scss<\/code>para cada bloque y los compilar\u00e1 en los archivos <code>\/editor.css<\/code>y <code>\/style.css<\/code>en la ra\u00edz del complemento.<\/p>\n<p>Para probar esto, mueva los archivos <code>\/src\/index.js<\/code>y <code>\/src\/scss<\/code>carpetas a <code>\/src\/blocks\/block-one<\/code>, luego copie este bloque a <code>\/src\/blocks\/block-two<\/code>. Finalmente crea un nuevo archivo en <code>\/src\/index.js<\/code>.<\/p>\n<p>Ahora deber\u00eda tener la siguiente estructura de archivos:<\/p>\n<ul>\n<li>\n<p><code>\/src<\/code><\/p>\n<ul>\n<li>\n<p><code>\/blocks<\/code><\/p>\n<ul>\n<li>\n<p><code>\/block-one<\/code><\/p>\n<ul>\n<li>\n<p><code>\/scss<\/code><\/p>\n<ul>\n<li><code>\/editor.scss<\/code><\/li>\n<li><code>\/style.scss<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>\/block-two\/<\/code><\/p>\n<ul>\n<li><code>\/scss<\/code>\n<ul>\n<li><code>\/editor.scss<\/code><\/li>\n<li><code>\/style.scss<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>\/index.js<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Luego, hagamos algunos cambios menores para <code>\/block-two<\/code>que se registre como un bloque \u00fanico. Simplemente modifique la siguiente l\u00ednea en el <code>\/src\/blocks\/block-two\/index.js<\/code>archivo de:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes', {\n<\/code><\/pre>\n<p>a:<\/p>\n<pre><code>registerBlockType( 'wcltd\/wholesome-notes-2', {\n<\/code><\/pre>\n<p>y cambiar el nombre del archivo de <code>Wholesome Notes<\/code>a <code>Wholesome Notes 2<\/code>:<\/p>\n<pre><code>    title: __(\n        'Wholesome Notes 2',\n        'wcltd'\n    ),\n<\/code><\/pre>\n<h2>Alterando el Sass<\/h2>\n<p>En <code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code>y <code>\/src\/blocks\/block-two\/scss\/style.scss<\/code>haga algunas modificaciones menores, para que reconozcamos los cambios en los archivos compilados.<\/p>\n<p>Adem\u00e1s, no olvidemos modificar las clases en esos archivos para usar el nuevo espacio de nombres <code>.wp-block-wcltd-wholesome-notes-2<\/code>.<\/p>\n<p>Aqu\u00ed est\u00e1n las modificaciones que hice:<\/p>\n<p><code>\/src\/blocks\/block-two\/scss\/editor.scss<\/code><\/p>\n<pre><code>.wp-block-wcltd-wholesome-notes-2 {\n    border: 1px dotted #0f0;\n}\n<\/code><\/pre>\n<p><code>\/src\/blocks\/block-two\/scss\/style.scss<\/code><\/p>\n<pre><code>.wp-block-wcltd-wholesome-notes-2 {\n    background-color: #fff;\n    color: #000;\n    padding: 2px;\n}\n<\/code><\/pre>\n<p>Nada grandioso, solo cambi\u00e9 algunos colores cambiados.<\/p>\n<h2>Configuraci\u00f3n del archivo de \u00edndice<\/h2>\n<p>Ahora vamos a editar el archivo en <code>\/src\/blocks\/index.js<\/code>. Solo necesitamos importar los dos bloques que hemos creado:<\/p>\n<pre><code>import '.\/blocks\/block-one\/index';\nimport '.\/blocks\/block-two\/index';\n<\/code><\/pre>\n<h2>Ver los resultados<\/h2>\n<p>Ahora ejecutemos <code>npm start<\/code>y veamos los resultados de los archivos generados.<\/p>\n<p>El <code>\/editor.css<\/code>archivo se ve as\u00ed:<\/p>\n<pre><code>\n.wp-block-wcltd-wholesome-notes {\n  border: 1px dotted #f00; }\n\n.wp-block-wcltd-wholesome-notes-2 {\n  border: 1px dotted #0f0; }\n<\/code><\/pre>\n<p>Vea c\u00f3mo el Sass de los <code>editor.scss<\/code>archivos de cada bloque dentro del complemento se ha compilado en este \u00fanico <code>\/editor.css<\/code>archivo.<\/p>\n<p>Ahora veamos el <code>\/style.css<\/code>archivo:<\/p>\n<pre><code>\n.wp-block-wcltd-wholesome-notes {\n  background-color: #000;\n  color: #fff;\n  padding: 2px; }\n\n.wp-block-wcltd-wholesome-notes-2 {\n  background-color: #fff;\n  color: #000;\n  padding: 2px; }\n<\/code><\/pre>\n<p>Puede ver que los <code>style.scss<\/code>archivos de cada bloque dentro del complemento se han compilado en este \u00fanico <code>\/style.css<\/code>archivo.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este art\u00edculo muestra un ejemplo de c\u00f3mo usar los archivos Sass que configuramos en el art\u00edculo Extender la configuraci\u00f3n del paquete web WordPress Create Block Script con m\u00faltiples bloques dentro de la misma p&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224105,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716,914,840],"tags":[1172],"class_list":["post-228282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-otro","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228282","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=228282"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228282\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224105"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}