Una guía para los bloques personalizados de Gutenberg

Publicado: 2022-11-08

Prefacio
¿Qué son los bloques personalizados de Gutenberg?
Cuándo usar bloques de Gutenberg personalizados
Alternativas al uso de bloques personalizados de Gutenberg
- Patrones de bloques o bloques reutilizables
- Bloque de código
Cómo crear un bloque de Gutenberg personalizado
- Codificándolo usted mismo
- Usar un complemento
Lo que sea que estés construyendo, podemos ayudarte

En caso de que llegues tarde a la fiesta de WordPress, los bloques están en .

WordPress continúa evolucionando y mejorando la experiencia de Gutenberg, lo que lleva a muchos desarrolladores a preguntarse si deberían crear bloques de Gutenberg personalizados.

En esta publicación, analizamos cómo funcionan los bloques personalizados, cuándo usarlos, opciones alternativas para crear su sitio web y cómo crear bloques de Gutenberg.

¿Qué son los bloques personalizados de Gutenberg?

Los bloques son la unidad básica para crear páginas y publicaciones en WordPress. WordPress introdujo bloques con la experiencia de edición de Gutenberg en 2018. WordPress incluye muchos bloques de tipo de contenido predeterminados, incluidos títulos de publicaciones, imágenes y galerías. Además, los complementos también agregan sus propios bloques a su experiencia de edición. Por ejemplo, algunos de los lanzamientos más recientes de WooCommerce introdujeron nuevos bloques para facilitar la adición de productos y funciones de comercio electrónico a cualquier página o publicación en WordPress.

La creación de un bloque de Gutenberg personalizado le permite utilizar ese bloque en cualquier página o publicación de su sitio. Por ejemplo, puede crear un bloque que extraiga y muestre testimonios de clientes.

Soporte de WordPress 24/7

de verdaderos expertos de WordPress

APRENDE MÁS

Si ha sido reacio a abrazar por completo los bloques, se lo está perdiendo. Todas las funciones más recientes de WordPress se centran en mejorar la experiencia del editor de bloques. Deberá usar bloques para aprovechar muchas de las características recientes y futuras de WordPress .

Descargue nuestro libro electrónico sobre cómo comenzar con la edición completa del sitio para obtener más información sobre cómo puede usar bloques para crear y editar todo su sitio.

Cuándo usar bloques de Gutenberg personalizados

Puede crear un bloque de Gutenberg personalizado cuando las opciones de bloque existentes no se ajustan a sus necesidades y no puede encontrar una alternativa viable con sus complementos o temas.

La creación de un bloque de Gutenberg personalizado no suele ser un proyecto apto para principiantes. Las dos razones más comunes para codificar sus propios bloques personalizados de Gutenberg son cuando está desarrollando un complemento o creando su propio tema.

Crear un bloque no es un proyecto que la mayoría de la gente emprenda para un solo sitio web a menos que sea un proyecto de nivel empresarial con un desarrollador o equipo de desarrollo dedicado. Estamos compartiendo algunos métodos alternativos que pueden funcionar mejor si necesita un bloque personalizado para un solo sitio.

Alternativas al uso de bloques personalizados de Gutenberg

Antes de realizar todo el trabajo de descubrir bloques personalizados, considere si una de estas alternativas podría funcionar para usted.

Patrones de bloques o bloques reutilizables

Si no necesita extraer contenido dinámico y realmente solo quiere un bloque para replicar un diseño, use la nueva función Patrones de bloques o Bloques reutilizables en su lugar. Esta opción es apta para principiantes y se puede lograr con poca o ninguna escritura de código.

Los patrones son como una mini plantilla que puede usar en cualquier parte de su sitio. Puede insertarlo en una página y luego editarlo. Los bloques reutilizables funcionan de manera similar. La gran diferencia es cómo se tratan después de usarlos en una página o publicación.

Un patrón es un punto de partida. Una vez que está en una página, cualquier modificación que realice es exclusiva de esa página. Si cambia el patrón más adelante, no cambiará donde ya estaba en uso.

Los bloques reutilizables permanecen vinculados entre sí. Si actualiza el bloque, los cambios se aplicarán a todos los lugares en los que utilizó ese bloque.

Bloque de código

Utilice el bloque de código para insertar código personalizado en la página. Los desarrolladores de temas y complementos crean bloques personalizados para usar en varios sitios. Si está trabajando en un solo sitio, probablemente pueda lograr el mismo objetivo en menos tiempo agregando un fragmento de código personalizado. Ambas opciones requieren el mismo nivel de experiencia técnica.

El único caso en el que puede valer la pena considerar la creación de su propio bloque personalizado es si es un desarrollador que desea entregar el sitio a un cliente. El cliente podría trabajar con su bloque personalizado utilizando el editor de Gutenberg, pero estaría totalmente perdido tratando de editar su código.

Cómo crear un bloque de Gutenberg personalizado

Tiene dos opciones para crear un bloque de Gutenberg personalizado. Puede codificarlo usted mismo o usar un complemento de creación de bloques. Ambas opciones requieren algo de codificación. Querrá repasar los conceptos básicos de desarrollo web antes de intentarlo.

Codificándolo usted mismo

La creación de bloques personalizados requiere experiencia en desarrollo. Si te gusta apegarte a los editores WYSIWIG y tu corazón se acelera cada vez que accidentalmente haces clic en la opción de mostrar código, esto no es para ti.

La creación de bloques personalizados requiere un conocimiento intermedio de HTML, CSS, JavaScript y React.

Comience configurando su entorno y herramientas de desarrollo. Necesitará un entorno de WordPress, Node, NPM y un editor de código. Después de eso, siga este tutorial sobre cómo crear su primer bloque del manual oficial del editor de bloques de WordPress.

Usar un complemento

Si se siente cómodo con HTML, CSS y JavaScript pero no está listo para codificar todo desde cero, considere el enfoque del complemento. Usar un complemento para crear bloques personalizados es una excelente opción cuando necesita un bloque personalizado para usar en un solo sitio web.

El complemento Genesis Custom Blocks es el complemento más popular para crear bloques personalizados. Creará los campos de bloque utilizando la interfaz familiar de WordPress. Después de configurar los campos, deberá proporcionar la plantilla de HTML, CSS, JavaScript y PHP para que el bloque funcione.

Aunque es más fácil, aún requiere algo de codificación. La diferencia es que puede hacerlo todo desde su administrador de WordPress sin configurar un entorno de desarrollo local. El complemento también facilita la prueba y la vista previa del bloque para asegurarse de que funciona correctamente.

Lo que sea que estés construyendo, podemos ayudarte

No importa cómo construyas tu sitio, con bloques personalizados, o si eres un reticente y todavía usas el editor clásico, necesitas un host confiable. Pressable se enorgullece de ser el lugar donde WordPress funciona mejor para todos, desde el emprendedor independiente hasta el equipo de desarrolladores avanzados.

Pressable ofrece una interfaz fácil de usar, seguridad de primera línea y velocidades ultrarrápidas. Con el alojamiento de Pressable, su sitio será fácil de actualizar y fácil de encontrar y usar para sus clientes.

Regístrese hoy y comience a construir su sitio u obtenga más información sobre cómo transferir un sitio existente. ¡Nos complace ayudarlo a migrar sus sitios!

Rendimiento web

¡El tiempo de carga importa! ¿Sabes qué tan rápido es tu sitio?

APRENDE MÁS