Esta es una serie de tutoriales detallados que cubren c\u00f3mo crear sus propios bloques personalizados de WordPress Gutenberg. Es para usted que es un desarrollador de temas o complementos y, como yo, est\u00e1 frustrado con la falta de documentaci\u00f3n. La mayor parte de lo que he aprendido cuando se trata de desarrollar en el nuevo mundo Javascript de WordPress es a trav\u00e9s de prueba y error, experimentando vigorosamente y leyendo todo lo relacionado que he encontrado. Entonces pens\u00e9 que podr\u00eda reunir todo lo que he aprendido hasta ahora en un gran tutorial.<\/p>\n
A trav\u00e9s de 10 partes, este tutorial tiene como objetivo ense\u00f1arle c\u00f3mo escribir sus propios bloques personalizados. No importa para qu\u00e9 sean, comenzando por lo b\u00e1sico y avanzando hacia funciones m\u00e1s complejas. Le recomiendo que escriba todo usted mismo en lugar de copiar y pegar el c\u00f3digo. \u00a1Esa es la mejor manera de aprender! Siga la serie del paso 1 al 10, ya que construiremos sobre el bloque a medida que avanzamos.<\/p>\n
Antes de sumergirnos en los escalones; un descargo de responsabilidad Hay algunas cosas que ya deber\u00edas saber de antemano sobre qu\u00e9 es y qu\u00e9 no es esta serie.<\/p>\n
Necesita saber Javascript, eso es un hecho. No es necesario ser un experto, pero esto no es un tutorial de Javascript. En cuanto a la versi\u00f3n ECMAScript Javascript; puede escribir en ES5 y no preocuparse por compilar su c\u00f3digo con Babel y esas cosas. Sin embargo, esta serie est\u00e1 escrita con c\u00f3digo ES6 y ESNext. No se preocupe: el paso 1 est\u00e1 dedicado a guiarlo en la configuraci\u00f3n de un entorno de desarrollo listo para codificar en ESNext con todas sus nuevas sintaxis.<\/p>\n
Como probablemente sepa, Gutenberg est\u00e1 basado en React JS<\/a>. Esta serie tampoco es un tutorial de React y asume un conocimiento b\u00e1sico de React y c\u00f3mo funciona. Una vez m\u00e1s no hay necesidad de ser un experto. Como React ha existido por un tiempo, hay muchos buenos tutoriales, documentaci\u00f3n y recursos dedicados a ense\u00f1arle React. As\u00ed que recomiendo buscar estos primero.<\/p>\n Esta serie se centra en aprender las partes de Javascript, React y JSX y no se preocupa por el estilo\/CSS. Como el objetivo de su bloque puede ser dr\u00e1sticamente diferente, he optado por no centrarme en el estilo y solo he proporcionado HTML muy b\u00e1sico. Depende de usted agregar su estilo y la salida HTML necesaria para hacer que su bloque se represente exactamente como lo necesita.<\/p>\n Y finalmente, considere el momento en que se escribi\u00f3 esta serie. Gutenberg todav\u00eda es bastante nuevo, pero est\u00e1 cambiando y mejorando dr\u00e1sticamente.<\/p>\n Si encuentra esto en un futuro lejano, es posible que alg\u00fan c\u00f3digo quede obsoleto o se reemplace con mejores m\u00e9todos. Esta gu\u00eda se escribi\u00f3 y finaliz\u00f3 en la versi\u00f3n 5.2.3 de WordPress (finales del a\u00f1o 2019).<\/p>\n En las primeras partes nos centramos en lo b\u00e1sico. Configuramos un entorno de desarrollo con la ejecuci\u00f3n de la compilaci\u00f3n de nuestro c\u00f3digo. Y los conceptos b\u00e1sicos de c\u00f3mo registrar un bloque y las partes necesarias de PHP tambi\u00e9n. Aprenderemos sobre la enorme biblioteca de componentes y m\u00e9todos disponibles para nosotros en WordPress Gutenberg.<\/p>\n Continuando, aprenderemos c\u00f3mo agregar secciones y configuraciones para nuestro bloque en la barra lateral del editor (Inspector), as\u00ed como tambi\u00e9n c\u00f3mo personalizar la barra de herramientas. En el camino, tocaremos muchos tipos de entrada diferentes y c\u00f3mo usar el componente de Gutenberg para estos. Y, por supuesto, aprenderemos c\u00f3mo guardar, actualizar y enviar la informaci\u00f3n guardada a nuestro bloque, y c\u00f3mo funciona eso detr\u00e1s de escena.<\/p>\n Al final, veremos cosas m\u00e1s avanzadas como bloques din\u00e1micos y c\u00f3mo usar PHP para representar la salida del bloque. Y finalmente, c\u00f3mo hacer consultas de publicaciones dentro del editor, lo que permite al usuario seleccionar una publicaci\u00f3n de una lista para renderizar.<\/p>\n A continuaci\u00f3n encontrar\u00e1 enlaces directos a cada parte de la serie.<\/p>\n Parte 1: Configuraci\u00f3n del entorno de desarrollo<\/a><\/strong> Parte 2: Registro de un bloque<\/a> Parte 3: Props y componentes de WordPress<\/a><\/strong> Parte 4: Atributos<\/a><\/strong> Parte 5: agregar la configuraci\u00f3n del Inspector<\/a><\/strong> Parte 6: Agregar barras de herramientas<\/a><\/strong> Parte 7: Creaci\u00f3n de sus propios componentes<\/a><\/strong> Parte 8: Traducci\u00f3n de tu Bloque<\/a><\/strong>La edad de este tutorial<\/h3>\n
lo que aprender\u00e1s<\/h2>\n
Tabla de contenido<\/h3>\n
\n
\nEn la primera parte de esta serie de tutoriales sobre c\u00f3mo crear bloques personalizados de Gutenberg, debemos configurar nuestro entorno de desarrollo. Necesitamos un lugar donde podamos escribir nuestro c\u00f3digo en sintaxis ES6\/ESNext y compilarlo sobre la marcha.<\/p>\n<\/li>\n
\nEn esta parte escribiremos Javascript para registrar y configurar nuestro bloque personalizado. Al final registraremos el script con PHP y haremos el c\u00f3digo PHP necesario para que WordPress lo reconozca como un nuevo bloque.<\/p>\n<\/li>\n
\nEn el paso anterior aprendimos c\u00f3mo registrar un bloque personalizado, tanto en Javascript como en PHP. En este paso, aprenderemos c\u00f3mo usar los componentes de WordPress para agregar diferentes tipos de campos y configuraciones.<\/p>\n<\/li>\n
\nEn esta parte veremos c\u00f3mo definir atributos, obtener sus valores y actualizarlos. Con los atributos podemos aceptar la entrada del editor, guardarla y generarla como elijamos.<\/p>\n<\/li>\n
\nEn este paso, nos centraremos en lo que WordPress (al menos en el c\u00f3digo) llama Inspector: la barra lateral en el lado derecho del editor. Hablaremos sobre algunos componentes nuevos que tiene sentido colocar en la barra lateral y c\u00f3mo manejarlos.<\/p>\n<\/li>\n
\nEn esta publicaci\u00f3n, aprenderemos c\u00f3mo agregar las barras de herramientas de WordPress a nuestro bloque, es decir, para alinear y alinear bloques. Tambi\u00e9n aprenderemos a agregar nuestras propias barras de herramientas con nuestros propios botones para realizar acciones personalizadas.<\/p>\n<\/li>\n
\nHasta ahora, en esta serie de tutoriales, hemos escrito todo el c\u00f3digo dentroregisterBlockType()<\/code>de laedit<\/code>funci\u00f3n. Es totalmente posible y, a menudo, se recomienda asignar la edici\u00f3n a un componente separado. Al hacerlo, podemos utilizar funciones como el estado de los componentes y los m\u00e9todos del ciclo de vida.<\/p>\n<\/li>\n
\nEn esta parte nos enfocaremos en c\u00f3mo traducir los textos y valores en nuestro bloque. Usamos WP-CLI para generar los archivos necesarios para que Gutenberg pueda cargar nuestras traducciones al cambiar el idioma de WordPress.<\/p>\n<\/li>\n