Comprender las bases y el punto de partida

1

Gestión de Contenidos Avanzada en WordPress

2

Entornos de Desarrollo Personalizados con Warp y Flight Bill

3

Creación de Tienda Online en WordPress con Gutenberg

Crear Post Types y Archivos

4

Organización de Contenidos en WordPress: Taxonomías y Etiquetas

5

Creación de Archivos PHP en WordPress para Mostrar Categorías

6

Mejorando la Navegabilidad en Sitios Web con WordPress

7

Personalización de Post Types en WordPress

8

Diferenciar Interfaces de Productos y Novedades en WordPress

9

WordPress: Crear Menú de Productos Relacionados con Loop Personalizado

10

Registro de Taxonomías Personalizadas en WordPress

11

Personalización de Páginas en WordPress con Advanced Custom Fields

Utilizar AJAX

12

Configuración de Formularios y Correos en WordPress

13

Desarrollo de Funciones Ajax en WordPress con PHP y JavaScript

14

Filtro de Productos con PHP y JavaScript en WordPress

15

Filtrado Dinámico de Productos en WordPress con PHP y JavaScript

La REST-API de WordPress

16

Uso del API REST de WordPress para integración y gestión de contenido

17

Creación de Endpoints Personalizados en WordPress API

18

Integración de API de WordPress en la Página Principal

Utilizar Bloques

19

Creación y Uso de Bloques en el Editor Gutenberg de WordPress

20

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

21

Creación de Bloques Editables en WordPress con React

22

Bloques Dinámicos en WordPress: Creación y Uso Avanzado

23

Uso de InspectorControls en Bloques de WordPress

24

Registro y Personalización de Bloques en WordPress con ACF

25

Creación de Bloque Nativo con Renderizado del Lado del Servidor (SSR)

Deployment

26

Migración de un Sitio WordPress de Local a Servidor Real

27

Optimización SEO e Indexación con Plugins para Sitios Web

28

Seguridad y Configuración de Wordfence en Sitios WordPress

Finalizar el Curso

29

Creación y Personalización de Sitios Web con WordPress

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

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

20/29
Recursos

¿Cómo crear un proyecto y configurar paquetes en npm?

Para iniciar un proyecto con Node.js y configurar paquetes usando npm de manera eficiente, sigue estos pasos esenciales:

  1. Inicializar un proyecto con npm:

    • Abre una consola nueva y ejecuta el comando npm init. Esto creará un archivo package.json con la configuración del proyecto.
    • Acepta las configuraciones por defecto al utilizar npm init para simplificar el proceso inicial.
  2. Configurar el archivo package.json:

    • Asegúrate de que package.json está correctamente configurado para incluir todas las dependencias necesarias.
  3. Estructura de directorios:

    • Suele haber dos directorios principales: src para el código fuente y build donde se generarán los archivos compilados para los navegadores.
  4. Crear los archivos iniciales:

    • Dentro de src, crea un archivo index.js que será procesado por defecto.
    • Haz una prueba simple como console.log("Hola") para verificar que la configuración esté funcionando correctamente.

¿Cómo compilar y registrar scripts en WordPress?

Registrar scripts en WordPress te permite integrar y gestionar adecuadamente tus bloques personalizados. Sigue estos pasos:

  1. Ejecutar el comando de compilación:

    • Usa npm run build para compilar el código. Este comando utiliza los scripts definidos en package.json.
  2. Examinar los archivos generados:

    • Revisa el directorio build para confirmar que contiene un archivo JS listo para navegadores y un archivo PHP con dependencias y versión de la compilación.
  3. Registrar bloques en WordPress:

    • Debes definir una función en functions.php para registrar el bloque.
    • Usa register_block_type de JavaScript para gestionar la definición y registro del bloque.
  4. Estructura de la función de registro:

    • Incluye el archivo PHP generado.
    • Usa wp_register_script para registrar el script JS en WordPress.
    • Define y registra el bloque usando register_block_type con los parámetros necesarios, como name, title, description e icon.

¿Cómo resolver errores comunes en el registro de bloques?

Al desarrollar con WordPress, es común encontrarse con errores. Te ofrecemos soluciones a las más frecuentes:

  1. Errores de función no encontrada:

    • Si recibes un error indicando que una función no está definida, asegúrate de haberla incluido adecuadamente. La función require_once es útil para evitar incluir múltiple veces el mismo archivo.
  2. Errores con scripts y URLs:

    • Revisa que las rutas a los scripts sean correctas. Utiliza funciones de WordPress como plugins_url para construir URLs absolutas y garantizar que los scripts se carguen correctamente.
  3. Problemas de versión y dependencias:

    • Verifica que los scripts registren las dependencias correctamente usando wp_enqueue_script.

Con estos pasos y recomendaciones, puedes iniciar tus proyectos con Node.js y WordPress, asegurándote de seguir las mejores prácticas para una integración y registro de bloques óptimos. No olvides seguir profundizando en el manejo de herramientas de desarrollo para optimizar el proceso. ¡Te animamos a continuar aprendiendo y mejorando tus habilidades!

Aportes 23

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.