Creación de Bloques Personalizados en WordPress con PHP y JavaScript

Les dejo el código de scripts. 👌

{
    "scripts": {
        "build": "wp-scripts build",
        "check-engines": "wp-scripts check-engines",
        "check-licenses": "wp-scripts check-licenses",
        "format:js": "wp-scripts format-js",
        "lint:css": "wp-scripts lint-style",
        "lint:js": "wp-scripts lint-js",
        "lint:md:docs": "wp-scripts lint-md-docs",
        "lint:md:js": "wp-scripts lint-md-js",
        "lint:pkg-json": "wp-scripts lint-pkg-json",
        "packages-update": "wp-scripts packages-update",
        "start": "wp-scripts start",
        "test:e2e": "wp-scripts test-e2e",
        "test:unit": "wp-scripts test-unit-js"
    }
}

1. Instalar Nodejs
2. instalar NPM
3. Verificar las versiones de nodejs y npm que sean iguales o superiores a las que indican en la pagina de npm.
4. Instalar en la carpeta blocks la dependencia con npm build
5. Para ejecutar y ver el bloque con NPM RUN START

Creando un bloque nativo con React

Tenemos que registrar el script, y lo hacemos así:

add_action( 'init', 'pgRegisterBlock' );
function pgRegisterBlock() {
    $assets = include_once get_template_directory(  ).'/blocks/build/index.asset.php';

    wp_register_script( 
        'pg-block', 
        get_template_directory().'/blocks/build/index.js', 
        $assets['dependencies'], 
        $assets['version'] 
    );

    register_block_type( 'pg/basic', [ 'editor_script' => 'pg-block' ] );
}

En el archivo de Js de los bloques, colocamos:

import { registerBlockType } from  '@wordpress/blocks'

registerBlockType(
    'pg/basic',
    {
        title: 'Basic Block',
        description: 'Este es nuestro primer bloque',
        icon: 'smiley',
        category: 'layout',
        edit: () => <h2>Hello world!</h2>,
        save: () => <h2>Hello world en el front!</h2>,
    }
)

⚠ No se olvide de correr el comando npm run build para poder ver los resultados de su código.

No me aparecía el bloque creado.
Es importante compilar el block nuevamente para encontrarlo. Creo el profesor no lo hace no?

npm run build

Hola a todos, a mi no me sale el ícono en el editor Gutenberg, a pesar de realizar todo el código correctamente. Lo comparto para identificar posibles errores.

add_action('init','pgRegisterBlock');

function pgRegisterBlock() {
    $assets = include_once get_template_directory().'/blocks/build/index.asset.php';
    
    wp_register_script(
        'pg-block',
        get_template_directory_uri().'/blocks/build/index.js',
        $assets['dependencies'],
        $assets['version'],
    );

    register_block_type(
        'pg/basic',
        array(
           'editor_script' => 'pg-block' 
        )
        );
}

?>

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

registerBlockType(
    'pg/basic',
    {
        title: "Basic Block",
        description: "Este es nuestro primer bloque",
        icon: "smiley",
        category: "layout",
        edit: () => <h2>Hello World</h2>,
        save: () => <h2>Hello World</h2>
    }
);

Gracias! 😔

Existe el proyecto **create-guten-block ** en Github que hace este proceso mucho mas facil.

No se nada de React 🙁 pero seguiré con el curso, luego veré la escuela de JS 😀

bien, no me daba pq hace falta correr npm run build y tambien tenia un error de typo

Para que el bloque aparezca en el admin hay que ejecutar npm run start primero

Excelente clase @whoisnegrello espero que en las siguientes clases armemos bloques con lo que vimos en el API!!!

Todo muy claro. Gracias

Bueno lo que no veo es que no hace uso del comando

npm run build

para volver a cargar lo que recien acabas de modificar en el index.js de src porque yo tuve problemas para que cargue automaticamente igual que este capitulo. Por qué será ???

Parece que todos los caminos me llevana React… asi que ahi vamos…

Profe una pregunta solo se puede trabajar con react el bloque o también lo podemos usar con vue

Como podría vincular las hojas de estilo para personalizarlo en el dashboard?

LOs estilos como los puedo enlazar?

Se puede continuar con este montón de Adventencias:

Compañeros a mi no me funciona, en WP tengoeste error.

Este es el repo con mi tema, gracias!

Tengo el siguiente error y no se como corregirlo

[ec2-user@ip-172-31-25-82 blocks]$ npm run build

[email protected] build /var/www/html/wp-content/themes/qcomergt/blocks
wp-scripts build

sh: wp-scripts: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] build: wp-scripts build
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/ec2-user/.npm/_logs/2020-09-24T16_45_16_111Z-debug.log
[ec2-user@ip-172-31-25-82 blocks]$

Está muy bien saber crear nuestros bloques y también imagino que hay gran variedad de plugins con determinados bloques que con un clic están a nuestro uso.

A mi me sale error al ejecutar ```
npm run build

[webpack-cli] Failed to load 'C:\laragon\www\platzi-wp\wp-content\themes\platzigifts\blocks\node_modules\@wordpress\scripts\config\webpack.config.js' config
[webpack-cli] TypeError: MiniCSSExtractPlugin is not a constructor
    at Object.<anonymous> (C:\laragon\www\platzi-wp\wp-content\themes\platzigifts\blocks\node_modules\@wordpress\scripts\config\webpack.config.js:240:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at WebpackCLI.tryRequireThenImport (C:\laragon\www\platzi-wp\wp-content\themes\platzigifts\blocks\node_modules\webpack-cli\lib\webpack-cli.js:244:16)
    at loadConfigByPath (C:\laragon\www\platzi-wp\wp-content\themes\platzigifts\blocks\node_modules\webpack-cli\lib\webpack-cli.js:1710:30)
    at C:\laragon\www\platzi-wp\wp-content\themes\platzigifts\blocks\node_modules\webpack-cli\lib\webpack-cli.js:1765:11

Timber / Twig es un sistema que te moderniza WordPress en tanto a liberarte de las “antiguedades” de php, y que aquí utilizaremos para vehicular la transición entre WordPress y React

Es Timber absolutamente necesario?

En absoluto, podrías hacer exactamente lo mismo con php

Para utilizar React en WordPress necesitamos trabajar con dos tecnologías, por un lado el backend con php, y por otro lado React con JavaScript moderno en el frontend

Y ese React y JavaScript moderno necesitamos compilarlo a JavaScript clásico para que los navegadores no tengan problemas, con lo que también necesitaremos correr un backend con NodeJS durante el desarrollo.