Cómo crear bloques de editor de WordPress personalizados en 2020

Peter Tasker sobre la creación de bloques ahora mismo:

Hoy en día es bastante sencillo configurar el comando ‘scaffold’ de WP CLI . Este comando configurará un tema o complemento de WordPress con una carpeta de ‘bloques’ que contiene PHP y CSS y JavaScript básicos necesarios para crear un bloque personalizado. El único inconveniente que noté es que JavaScript usa la sintaxis antigua de ES5 en lugar del ESNext moderno . El JavaScript moderno nos permite escribir código más conciso y usar JSX en nuestro código de bloque personalizado.

También puedes utilizar la herramienta ‘create-guten-block’ de Ahmad Awais . Le brinda muchas de las cosas estándar que necesita listas para usar, como Webpack, compatibilidad con ESNext, etc. Configurarlo es bastante sencillo y es similar a Create React App .

He usado create-guten-block para los pocos bloques personalizados que he creado hasta ahora y me ha resultado una experiencia bastante agradable.

Pero… siento que tuve suerte de sentirme cómoda con todo esto. Tengo un pie en el desarrollo de WordPress y resulta que tengo un pie en el desarrollo de React. Construir bloques con ambas tecnologías juntas me parece bastante natural. Si los bloques fueran Angular o algo así, siento que ni siquiera lo habría intentado.

Me haré eco de este sentimiento:

También me resultó muy molesto trabajar en un bloque cuyo código cambia activamente. Cada vez que recargas Gutenberg, recibirás el mensaje “Este bloque parece haber sido modificado externamente…” porque el marcado del bloque ha cambiado.

Entiendo por qué arroja el error , pero te ralentiza.

Al final, Peter menciona el enfoque de bloques de construcción que tiene Advanced Custom Fields . Casi se siente como un extraño mundo extraño al revés. El enfoque ACF se parece más a lo que WordPress habría hecho en un mundo normal (bloques de construcción con solo PHP y plantillas) y los terceros serían los que agregarían todas las cosas sofisticadas de React.

Enlace directo →