Comprender las bases y el punto de partida

1

Bienvenida y recomendaciones

2

驴C贸mo es un entorno de desarrollo profesional en WordPress?

3

Presentaci贸n del proyecto y repaso del curso de fundamentos

Crear Post Types y Archivos

4

驴C贸mo se crea y se personaliza una categor铆a en WordPress?

5

Creemos la UI de un archivo en la web

6

驴Por qu茅 es importante la navegabilidad de la web y c贸mo se mejora?

7

驴Qu茅 es un Post Type y c贸mo se pueden personalizar los diferentes tipos?

8

驴C贸mo creamos la UI de un Post Type personalizado?

9

Construyamos un loop personalizado

10

驴Qu茅 es una taxonom铆a y c贸mo se registra una nueva?

11

驴Qu茅 es un page template y c贸mo se utiliza?

Utilizar AJAX

12

驴C贸mo funcionan los emails en WordPress?

13

驴C贸mo utilizar AJAX dentro de WordPress?

14

Empecemos a construir un filtro din谩mico para la web

15

Completemos la funci贸n AJAX para darle vida a nuestro filtro

La REST-API de WordPress

16

驴C贸mo se utiliza la REST-API de WordPress?

17

驴Qu茅 son y c贸mo funcionan los endpoints?

18

Hagamos el primer llamado a la API

Utilizar Bloques

19

驴Qu茅 es un bloque de Gutenberg?

20

Creando un bloque nativo con React

21

Optimicemos el bloque con componentes de WordPress

22

Creemos el primer bloque din谩mico

23

Mejorando la experiencia del usuario en Gutenberg con SSR (Server Side Render)

24

Creando bloques con ACF Pro

25

Crea un bloque igual al de ACF pero de forma nativa

Deployment

26

驴C贸mo se lleva un sitio a producci贸n?

27

驴C贸mo podemos optimizar la indexaci贸n y el SEO de nuestro sitio?

28

驴C贸mo defiendo a mi sitio de ataques externos y lo hago m谩s seguro?

Finalizar el Curso

29

Conclusiones

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
16H
8M
12S

Creando un bloque nativo con React

20/29
Recursos

Aportes 23

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

bl[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 鈥渁ntiguedades鈥 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.