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

Creando un bloque nativo con React

20/29
Recursos

Aportes 23

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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! ūüėĒ

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.

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

[[email protected] 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
[[email protected] 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.