Clase 4 de 15 • Curso de Creación de Bloques en Gutenberg para WordPress
Contenido del curso
Luis Eduardo Alanís Villarreal
Glisse Lisbeth
Marìo Germàn Reyes C
Lucio Negrello
Pierre Juan David Puentes Gómez
Mateo Lopez
Lucio Negrello
Mateo Lopez
Carlos Vanegas
Lucio Negrello
Hanss Abinadí Espinoza Hernández
Lucio Negrello
Ermilo Joel Dorantes Uc
Lucio Negrello
Ermilo Joel Dorantes Uc
Miguel Cacho
Lucio Negrello
Sorin Danila
Lucio Negrello
Sorin Danila
Víctor Manuel Rivera Rolla
Lucio Negrello
Henry Alcaraz
Sergio Ivan Alvarez Uribe
Platzi
Sergio Ivan Alvarez Uribe
Jassen Castillo
Franklin Peñafiel
Registrar el bloque
Preparar la librería @Wordpress/scripts para registrar varios bloques c/u en su propia carpeta. Se hace en el archivo package.json.
Creación y configuración de index.js.
Comprobación de compilación en package.json.
Registrar todo del lado del servidor en php.
Agregar todo a plugin-frontend-login.php.
Comprobar en el navegador que el bloque existe.
a alguien no le sale 'Register'?
Si alguien tuvo problemas de node al hacer npm run start:register, deben actualizar node, lo hice y perfecto.
se instala el node manager
npm install -g n
y luego actualice a la version estable
sudo n stable
Gracias por el aporte, Mario!
En mi caso en el packge.json me apareción esta linea al iniciar npm: "type": "commonjs". Se debe quitar para que no genere errores.
Hola lucio ! tengo un problema estoy intentando que en el short code me renderice un custom post type... pero nose como seria la sintaxis para que retorne php y tambien hrml...
Muchas gracias de antemano !
<?php function ift_add_card(){ $args = array( 'post_type' => array('testimonio'), 'post_per_page' => 4, ); $testimonios = new WP_Query($args); $response = '<div class="testimony_container"> <?php if($testimonios->have_posts()){?> <?php while($testimonios->have_posts()){ $testimonios->the_post();?> <div class="testimonio_caption"> <div class="testimonio_desc"> <a href=<?php the_permalink() ?> <section><?php the_content() ?></section> </a> </div> </div> <?php } } ?> </div>'; return $response; } add_shortcode("ift_card","ift_add_card");
Hola mateo, cómo estás? Esto tiene que ver con la sintaxis de PHP, tenés que concatenar funciones con strings, abriendo y cerrando comillas. Como estás poniendo todo entre comillas lo considera todo como un solo string y por eso lo imprime todo como texto. Saludos!
Muchas gracias lucio ! 🤗🤗
Se deben crear nuevos comandos por cada bloque que agregue?, pero si el proyecto que se está construyendo consta de que serán varios bloques? que pasa en estos casos?
Hola Carlos, cómo estás? En el curso lo hicimos así para poder ejemplificar cada caso, pero lo más común es crear un archivo index donde se importen todos los bloques y se compilen juntos. Esto como ventaja es que se crea menos trabajo de configuración, la desventaja es que si no se hace bien, puede generar que cada vez que se cargue un bloque se carguen todos, innecesariamente. Saludos!
Hola Lucio he intentado hacer este proceso pero al momento de entrar al editor el bloque no aparece, este es mi repo creo que el error ha de ser simple pero no encuentro la falla. podras ayudarme?
Hola Hanss, cómo estás?
Estuve revisando el repo y el error es que cuando registras el bloque en PHP, utilizaste editor-script en lugar de editor_script con _.
Saludos!
wp-content>plugins>frontend-plugin>blocks>package.json
"build:register": "wp-scripts build ./register/src/index.js --output-path=./register/build", "start:register": "wp-scripts start ./register/src/index.js --output-path=./register/build",
wp-content>plugins>frontend-plugin>blocks>register>src>index.js
import {registerBlockType} from "@wordpress/blocks"; registerBlockType("plz/register", { title: "Register", category: "widgets", icon: "admin-users", edit: () => <h3>Register</h3>, save: () => <h3>Register</h3> });
wp-content>plugins>frontend-plugin>blocks>register>build>index.asset.php
<?php return array('dependencies' => array('wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => '9afba28994a31d8f733f32ec6c6f71bc');
wp-content>plugins>frontend-plugin>blocks>register>index.php
<?php add_action('init', 'plz_register_blocks'); function plz_register_blocks(){ $assets_file = include_once PLZ_PATH . "/blocks/register/build/index.asset.php"; wp_register_script( 'plz-register-block', plugins_url('./build/index.js', __FILE__), $assets_file['dependencies'], $assets_file['version'] ); register_block_type( 'plz/register', array( 'editor-script' => 'plz-register-block', ) ); }
wp-content>plugins>frontend-plugin>plugin-frontend-login.php
//Blocks require_once PLZ_PATH."/blocks/register/index.php";
Saludos profe, estos son todos los cambios que hice en mi archivos y aún así no logro que el bloque Register "cargue" en el wp-admin, intenté igual utilizando la versión
npm i -D @wordpress/scripts@18.0.1
Y tampoco me funcionó. Cabe mencionar que el nombre de mi plugin es diferente al que se usa en el curso, ¿tendrá eso algo que ver? ¿Alguna recomendación?
Hola, cómo estás? Podrías subir tu código a un repo para revisarlo mejor? En principio no veo fallas en esta aprte, pero puede estar en otro archivo el problema. Saludos!
Entiendo que además de instalar @wordpress/scripts hay que instalar @wordpress/blocks, ¿verdad?
Hola Miguel, cómo estás? No, no es necesario. En realidad lo que hace el paquete es configurar de forma automática webpack apra que al momento de compilar cargue esas dependencias desde la propia instalación de WP que ya las tiene en el CORE. Hay algunos paquetes específicos que si hay que cargar, como por ejemplo si quisieras usar los dashicons, pero la mayoría vienen ya en el core de WP y se configuran automaticamente. Saludos!
Hola Lucio, estoy con el mismo error del otro curso de wordpress:
[webpack-cli] Failed to load '/home/gimibond/Local Sites/blocksplz/app/public/wp-content/plugins/frontend-login/blocks/node_modules/@wordpress/scripts/config/webpack.config.js' config [webpack-cli] TypeError: MiniCSSExtractPlugin is not a constructor
No encontré solución en la web. Alguna ayuda porfa?
Hola, cómo estás? Por el error lo que creo es que tenés alg´ún problema con la instalación de npm del wordpress/scripts. Por detrás esta librería crea archivos de webpack para compilar y demás y el error es que uno de los plugins de webpack no es reconocido, por ende debe haber algún error en la isntalación del paquete. Te recomiendo eliminar la carpeta node_modules y luego correr el comando npm install nuevamente. Este tipo de errores se provoca a veces cuando en el medio de la instalación hay alguna perdida de paquetes o se descargan archivos fragmentados. Espero que te sirva esta info. Saludos!
Esto me paso por la cabeza y ya lo hice. No se soluciono. Lo he probado en wsl2, virtualbox con ubuntu lts y también en un laptop con ubuntu 20.04.03 Sigue sin solución.
No sé si a alguien más le pasa, pero a mi no me aparecia el nuevo bloque, hice un cambio que no sé si tiene sentido en el index.php del bloque y si apareció:
add_action('init', 'plz_register_blocks'); function plz_register_blocks(){ $assets_file = include_once PLZ_PATH . "/blocks/register/build/index.asset.php"; // wp_register_script( wp_enqueue_script( 'plz-register-block', plugins_url('./build/index.js', __FILE__), $assets_file['dependencies'], $assets_file['version'] ); register_block_type( 'plz/register', array( 'editor-script' => 'plz-register-block', ) ); }
Hola Victor, cómo estás?
Ese cambio que hiciste funciona, pero te va a cargar los archivos del bloque en el admin y en el front esté o no presente el bloque.
El error que tenés en el código es que la propiedad que necesitás usar es editor_script con _ en lugar de -.
Saludos!
wp_register_script( 'plz-register-block', plugins_url('./build/index.js', __FILE__), $assets_file['dependencies'], $assets_file['version'] ); ```En el codigo anterior el que esta en el video se genero un error de tipeo en la variable que se optive en el $assets\_file\[version] ya que se escribio $assets\_file\[vaersion], no genera problema al registrar el bloque pero si alguien sabe que pasa si lo dejamos mal escrito, seria bueno saber el error que generaria.
Hola, al terminar todo el código me apareció el siguiente error y no lo he podido resolver. Por favor me pueden indicar cual puede ser la causa.
En el siguiente enlace está la foto del error:
El error se debe a que el id del elemento en HTML no coincide con el valor de la propiedad que se está inyectando. Debes asegurarte de que el id y el valor sean iguales.
Muchas gracias, ya lo pude resolver, resulta que en el archivo index.php de la carpeta register, había escrito con guion al medio en vez de guion bajo la palabra plugins_url.
Así quedó correctamente:
plugins_url('./build/index.js', __FILE__),
creo que falta alguna clase intermedia, al menos en mi wordpress el archivo plugin-frontend-login.php no existe... no aparece el block en ninguna parte y no encuentro donde podria reemplazarlo....
Si vas a trabajanar usando themes, aquí hay algunas recomendaciones que encontré
El path de la variable general cambia a:
define ("PLZ_PATH", get_template_directory( __FILE__ ));
El path del archivo dentro "wp_register_script" cambia a
get_theme_file_uri( 'register/build/index.js', __FILE__ ),
Ten en cuenta que aquí ya no se utiliza "./build" porque de esa se quedaría con el punto en vez de register
