Aprende a registrar tu primer bloque

Clase 4 de 15 • Curso de Creación de Bloques en Gutenberg para WordPress

Clase anteriorSiguiente clase

Luis Eduardo Alanís Villarreal

student•

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.

Glisse Lisbeth

student•

a alguien no le sale 'Register'?

Marìo Germàn Reyes C

student•

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

Lucio Negrello

teacher•

Gracias por el aporte, Mario!

Pierre Juan David Puentes Gómez

student•

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.

Mateo Lopez

student•

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");

Lucio Negrello

teacher•

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!

Mateo Lopez

student•

Muchas gracias lucio ! 🤗🤗

Carlos Vanegas

student•

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?

Lucio Negrello

teacher•

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!

Hanss Abinadí Espinoza Hernández

student•

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?

Lucio Negrello

teacher•

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!

Ermilo Joel Dorantes Uc

student•

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?

Lucio Negrello

teacher•

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!

Ermilo Joel Dorantes Uc

student•

https://github.com/milord/platzigifts

Miguel Cacho

student•

Entiendo que además de instalar @wordpress/scripts hay que instalar @wordpress/blocks, ¿verdad?

Lucio Negrello

teacher•

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!

Sorin Danila

student•

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?

Lucio Negrello

teacher•

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!

Sorin Danila

student•

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.

Víctor Manuel Rivera Rolla

student•

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',
        )
    );
}

Lucio Negrello

teacher•

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!

Henry Alcaraz

student•

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.

Sergio Ivan Alvarez Uribe

student•

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:

https://ibb.co/30LXf5z

Platzi

student•

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.

Sergio Ivan Alvarez Uribe

student•

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__),

Jassen Castillo

student•

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....

Franklin Peñafiel

student•

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

<?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");

import {registerBlockType} from "@wordpress/blocks";

registerBlockType("plz/register", {
    title: "Register",
    category: "widgets",
    icon: "admin-users",
    edit: () => <h3>Register</h3>,
    save: () => <h3>Register</h3>
});

<?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',
        )
    );
} 

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',
        )
    );
} 

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.

Aprende a registrar tu primer bloque

Introducción y preparación del entorno de desarrollo

¿Qué necesitas para aprender Gutenberg?

¿Qué es y cómo funciona Gutenberg?

¿Cuál es el mejor entorno para desarrollar bloques?

Bloques estáticos y opciones de bloques

Aprende a registrar tu primer bloque

Crea la vista de tu bloque para el editor

¿Cómo agregar opciones a tu bloque?

Crea la vista de tu bloque para el frontend

Agrega opciones a la barra de herramientas de tu bloque

Agrega diferentes estilos a tu bloque

Bloques Dinámicos

¿Qué son y cómo se utilizan los bloques dinámicos?

Aprende a registrar tu bloque de una forma más simple

¿Cómo usar una API dentro de tu bloque?

Agrega opciones a tu bloque dinámico

Crea la vista de tu bloque dinámico para el frontend

Conclusiones

¿Por dónde puedes seguir tu ruta de WordPress?