Diseñar sitios web modernos en WordPress nunca ha sido tan eficiente, especialmente con la opción de crear bloques con Bento. Esta función te brinda libertad creativa sin la molestia de código adicional ni plugins voluminosos.
Con Bento, puedes crear diseños limpios y adaptables que se integran a la perfección con el diseño de tu sitio web, ya sea que busques un aspecto minimalista, un diseño de cuadrícula llamativo o una estructura de página equilibrada. Está diseñado para ahorrar tiempo, simplificar el diseño y ayudar incluso a los principiantes a crear secciones de calidad profesional.
Además de las mejoras visuales, Bento también garantiza el rendimiento y la capacidad de respuesta. Cada bloque que crees se adapta perfectamente a todos los dispositivos, lo que hace que tu sitio web se vea impecable en computadoras de escritorio, tabletas y móviles.
Para blogueros, propietarios de pequeñas empresas o desarrolladores, la flexibilidad de crear bloques con Bento significa más control, flujos de trabajo más rápidos y diseños que se destacan.
En esta guía, te explicaremos paso a paso cómo sacar el máximo partido a Bento en WordPress, para que puedas aprovechar todo su potencial en tus proyectos web.
Entendiendo a Bento y Gutenberg
Bento es una colección de componentes web de alto rendimiento diseñados para simplificar y optimizar el desarrollo web. Estos componentes son reutilizables, accesibles y compatibles con todos los navegadores, lo que los convierte en una opción fiable para los desarrolladores que crean aplicaciones web modernas.
Lo que distingue a Bento es su versatilidad, ofrece componentes como React, Preact y elementos personalizados, lo que garantiza una integración perfecta en varios entornos, incluido WordPress.
Con Bento, los desarrolladores pueden:
- Elimine la codificación redundante aprovechando componentes reutilizables.
- Garantice la accesibilidad y una experiencia de usuario fluida en todos los dispositivos.
- Utilice componentes altamente optimizados que contribuyan a tiempos de carga de página más rápidos.
Gutenberg es el potente editor de bloques de WordPress, basado en React, que permite a los usuarios diseñar y estructurar contenido mediante bloques. Cada bloque representa una funcionalidad específica, desde texto e imágenes hasta características personalizadas complejas.
La verdadera magia de Gutenberg radica en su flexibilidad: los desarrolladores pueden ir más allá de los bloques nativos de WordPress y crear bloques personalizados adaptados a necesidades específicas.
Sin embargo, el método tradicional para construir estos bloques suele requerir codificar la funcionalidad dos veces: una para el editor de React y otra para el frontend. Esta duplicación puede generar ineficiencias e inconsistencias.
¿Por qué combinar Bento con Gutenberg?
Bento cierra esta brecha al permitir a los desarrolladores:
- Escriba los componentes una vez y úselos de manera consistente en el editor de bloques y el frontend.
- Reduzca el tiempo de desarrollo eliminando el trabajo redundante.
- Aproveche componentes probados y ricos en funciones, como carruseles, acordeones y más.
Al combinar Bento con Gutenberg, los desarrolladores descubren una forma ágil y eficiente de crear bloques personalizados de WordPress que son a la vez funcionales y visualmente atractivos. En la siguiente sección, exploraremos cómo Bento puede simplificar tu flujo de trabajo de desarrollo.
Cree bloques personalizados de WordPress sin esfuerzo
Con nuestra experiencia, le ayudaremos a crear soluciones personalizadas que mejoren la funcionalidad de su sitio y la experiencia del usuario.
¿Por qué utilizar Bento para el desarrollo de bloques de Gutenberg?
Crear bloques personalizados para Gutenberg puede ser un proceso gratificante, pero también desafiante. Los desarrolladores a menudo se ven obligados a compaginar los componentes del editor basados en React con la implementación del frontend, lo que resulta en código duplicado y un problema de mantenimiento. Aquí es donde Bento destaca, ofreciendo una solución elegante que simplifica el proceso y garantiza una experiencia fluida.
Exploremos por qué Bento es el compañero perfecto para el desarrollo de bloques de Gutenberg.
Evite la duplicación de código
Tradicionalmente, la construcción de bloques de Gutenberg implica implementar la funcionalidad dos veces:
- Componente de edición: creado con React para el editor de bloques.
- Componente de interfaz: reimplementado sin React para renderizar en la interfaz.
Este trabajo redundante aumenta el tiempo de desarrollo y crea posibles discrepancias entre las versiones del editor y la interfaz. Con Bento, solo se escribe la funcionalidad una vez usando sus componentes reutilizables, que funcionan a la perfección en ambos entornos.
Compatibilidad entre plataformas
Los componentes de Bento están diseñados para ser compatibles en múltiples plataformas, lo que garantiza un comportamiento consistente en diferentes navegadores y dispositivos.
Ya sea que esté trabajando en un editor Gutenberg basado en React o renderizando el bloque en el frontend, los componentes de Bento se adaptan sin esfuerzo y brindan una experiencia de usuario uniforme.
Accesibilidad lista para usar
La accesibilidad ya no es opcional: es esencial para ofrecer una excelente experiencia de usuario.
Los componentes de Bento se crean teniendo en cuenta la accesibilidad, cumpliendo con estándares web como los roles ARIA y la navegación por teclado. Esto garantiza que sus bloques de Gutenberg sean inclusivos y fáciles de usar para todos los públicos.
Alto rendimiento para sitios web más rápidos
Los componentes de Bento están optimizados para la velocidad, lo que contribuye a cargas de páginas más rápidas y a un mejor rendimiento del sitio web.
Esto es especialmente importante para los sitios de WordPress, donde el rendimiento puede afectar directamente al posicionamiento SEO y a la satisfacción del usuario. El uso de los componentes ligeros y eficientes de Bento garantiza que tus bloques no sobrecarguen tu sitio.
Configuración de su entorno de desarrollo
Antes de empezar a crear un bloque Gutenberg con Bento, es fundamental configurar correctamente el entorno de desarrollo. Un entorno bien preparado garantiza un proceso de desarrollo fluido y reduce posibles problemas posteriores. Sigue los pasos a continuación para tenerlo todo listo.
Prerrequisitos
Antes de sumergirse en el desarrollo de bloques de Gutenberg con tecnología Bento, asegúrese de tener lo siguiente listo:
Node.js y npm instalados:
- Instale Node.js (que incluye npm) para administrar dependencias y construir su proyecto.
- Verifique la instalación ejecutando los siguientes comandos en su terminal:
nodo -v npm -vWordPress instalado localmente:
- Configure un entorno local de WordPress utilizando herramientas como Local de Flywheel, XAMPP o Docker.
- Asegúrese de tener acceso al directorio wp-content/plugins para instalar y activar su complemento personalizado.
Familiaridad con React y Gutenberg:
- Tenga un conocimiento básico de React, ya que es la base para el desarrollo de bloques de Gutenberg.
- Familiarícese con la estructura de bloques de Gutenberg, específicamente cómo funcionan las funciones de edición y guardado.
Instalando @wordpress/create-block
La herramienta @wordpress/create-block simplifica la creación de bloques Gutenberg personalizados. Aquí te explicamos cómo configurarla:
Ejecute el comando Create-Block:
En su terminal, navegue al directorio de complementos de WordPress y ejecute el siguiente comando para crear un nuevo complemento de bloque:
npx @wordpress/create-block carrusel impresionanteEsto generará una nueva carpeta de complemento llamada awesome-carousel, que contiene todos los archivos necesarios para comenzar el desarrollo.
Navegue hasta el directorio de complementos:
Muévase al directorio recién creado:
cd awesome-carruselIniciar el entorno de desarrollo:
ejecute el siguiente comando para inicializar el servidor de desarrollo:
inicio de npmEste comando compila sus archivos de bloques y observa los cambios durante el desarrollo.
Activar el complemento en WordPress:
Vaya al panel de administración de WordPress.
Ve a Plugins ⟶ Plugins instaladosy activa el Awesome Logo Carousel .
Su complemento personalizado ahora está activo y un bloque básico está disponible en el editor Gutenberg.
Cómo crear un bloque bento personalizado: guía paso a paso
La creación de un bloque Gutenberg personalizado con Bento comienza con una preparación adecuada, que incluye configurar la estructura del plugin, instalar los componentes Bento necesarios y renderizar el primer bloque en el editor. Sigue esta guía paso a paso para crear un bloque de carrusel funcional y sin interrupciones.
Configuración inicial
Comenzar con la configuración inicial garantiza que su proyecto cuente con la base adecuada para crear un bloque Gutenberg personalizado. Siguiendo estos pasos, creará una estructura de plugin completamente funcional que podrá ampliar con componentes Bento. Esta configuración proporciona todos los archivos y configuraciones necesarios para un desarrollo sin problemas.
Crea el complemento de bloque usando @wordpress/create-block
Usa la herramienta @wordpress/create-block para crear un nuevo plugin de bloque. Esto genera todos los archivos y directorios necesarios, proporcionando una estructura lista para usar.
Ejecute el siguiente comando:
npx @wordpress/create-block carrusel impresionanteun nuevo directorio llamado awesome-carousel Se creará
Navegar al directorio de complementos
Muévete al directorio de bloques recién creado:
cd awesome-carruselIniciar el servidor de desarrollo
Inicie el entorno de desarrollo, que compila y supervisa los cambios durante el desarrollo: npm start
Activar el complemento en WordPress
- Inicie sesión en su panel de administración de WordPress.
- Ve a Plugins ⟶ Plugins instalados, localiza el Awesome Carousel y actívalo.
Una vez completada la configuración inicial, ahora tienes un complemento de bloque Gutenberg básico listo para personalizar.
Explorar: Guía paso a paso sobre cómo crear un sitio web Web3 con WordPress
Instalación de componentes Bento
La integración de componentes Bento en su bloque es un paso crucial que libera todo el potencial de reutilización y rendimiento.
El componente Bento Base Carousel sirve como base de tu bloque personalizado, ofreciendo una funcionalidad de carrusel predefinida y flexible. Con solo unos pocos comandos, puedes incorporar la accesibilidad y compatibilidad multiplataforma de Bento a tu proyecto.
Instalar el componente del carrusel de la base Bento
Instale el componente Bento Base Carousel usando npm: npm install –save @bentoproject/base-carousel
Importar Carrusel Bento en el Bloque
Abra el archivo src/edit.js y agregue las siguientes importaciones:
importar { BentoBaseCarousel } de '@bentoproject/base-carousel/react'; importar '@bentoproject/base-carousel/styles.css';El componente React BentoBaseCarousel proporciona funcionalidad de carrusel, mientras que el CSS
garantiza un estilo adecuado tanto para el editor como para el frontend.
Con Bento instalado e importado, estás listo para renderizar tu primer bloque de carrusel en Gutenberg.
Conozca también: Cómo crear un sitio web SaaS con WordPress
Representando el carrusel en Gutenberg
Al renderizar el carrusel en Gutenberg, podrá ver Bento en acción dentro del editor de bloques de WordPress. Este paso se centra en integrar el componente BentoBaseCarousel de React y garantizar su correcto funcionamiento.
También aprenderás a diseñar el bloque, asegurándote de que se vea bien tanto en el editor como en la interfaz. Al finalizar este paso, tendrás un bloque de carrusel funcional que muestra el poder de Bento.
Actualizar el componente de edición
Abra el archivo src/edit.js y actualice el componente Editar para incluir BentoBaseCarousel:
importar { useBlockProps } desde '@wordpress/block-editor'; importar { BentoBaseCarousel } desde '@bentoproject/base-carousel/react'; importar '@bentoproject/base-carousel/styles.css'; exportar función predeterminada Edit() { return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Diapositiva 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositiva 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositiva 3" /></BentoBaseCarousel></div></div> ); }Este código integra el componente Bento Base Carousel con un conjunto de imágenes de muestra.
Aprende: Cómo crear tu sitio de WordPress usando el tema Underscores
Agregar CSS específico para carrusel
Abra el archivo src/style.scss y agregue el siguiente CSS para garantizar que el carrusel tenga dimensiones consistentes:
wp-block-create-block-awesome-carousel .awesome-carousel-wrapper, .wp-block-create-block-awesome-carousel .awesome-carousel-wrapper > * { relación de aspecto: 1200 / 800; }Esto garantiza que el carrusel mantenga su relación de aspecto en todos los dispositivos y tenga una apariencia profesional.
Vista previa del bloque Carrusel en el Editor
Guarde los cambios y reconstruya el bloque usando el servidor de desarrollo (npm start si aún no está en ejecución).
Vaya al editor de bloques de WordPress, agregue el Awesome Carousel y vea el carrusel en acción.
En esta etapa, tu bloque Gutenberg con Bento ya funciona en el editor. En los siguientes pasos, puedes mejorar su interactividad y optimizarlo para el rendimiento del frontend.
Leer: Cómo crear un carrusel de imágenes en WordPress
Cómo añadir interactividad a los bloques Bento
La interactividad es clave para crear bloques atractivos en WordPress. Con la robusta API de Bento, puedes añadir funciones dinámicas, como controles de navegación, que permiten a los usuarios interactuar con tu bloque de carrusel sin problemas, tanto en el editor como en la interfaz.
Interacción del usuario en el editor
Para que el carrusel sea interactivo dentro del editor de Gutenberg, se pueden añadir botones de navegación personalizados (p. ej., Siguiente y Anterior). Con la API de Bento, puedes controlar la funcionalidad del carrusel directamente en React.
Primero, actualiza tu archivo src/edit.js para incluir controles de navegación. Usa la función createRef para acceder a la API del carrusel. Por ejemplo:
importar { createRef } de '@wordpress/element'; importar { Button } de '@wordpress/components'; exportar función predeterminada Edit() { const ref = createRef(); const goToNextSlide = () => ref.current.next(); const goToPreviousSlide = () => ref.current.prev(); devolver ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel ref={ref} autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Diapositiva 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositiva 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositiva 3" /></BentoBaseCarousel></div> <Button isSecondary onClick={goToPreviousSlide}>Anterior</button> <Button isSecondary onClick={goToNextSlide}>Siguiente</button></div> ); }Consulta: Explorando los mejores temas de bloques de WordPress
Estos botones permiten al usuario navegar por el carrusel directamente en el editor de bloques, haciéndolo interactivo y fácil de usar.
Interacción del usuario en el frontend
La interactividad en el frontend refleja la funcionalidad del editor. Sin embargo, en lugar de componentes de React, se utilizan los elementos personalizados nativos de Bento. Actualice el archivo src/save.js para incluir los botones de carrusel y navegación:
exportar función predeterminada guardar() { devolver ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Diapositiva 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositiva 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositiva 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Anterior</button> <button className="awesome-carousel-next">Siguiente</button></div></div> ); }Para habilitar los botones de navegación en el frontend, cree un archivo src/view.js. Este archivo interactúa con la API de Bento para gestionar las acciones del usuario:
exportar función predeterminada guardar() { devolver ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Diapositiva 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Diapositiva 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Diapositiva 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Anterior</button> <button className="awesome-carousel-next">Siguiente</button></div></div> ); }Este script garantiza que los botones de navegación interactúen sin problemas con el carrusel en la interfaz.
Leer: ¿Qué son los patrones de bloques de WordPress?
Estilo y optimización del frontend
Un estilo y una optimización adecuados son esenciales para garantizar que el bloque se vea y funcione correctamente tanto en el editor como en la interfaz. Utilice el archivo src/style.scss para definir estilos específicos para su carrusel, garantizando así la coherencia visual en todos los dispositivos. Evite usar nombres de clase genéricos para evitar conflictos con otros temas o plugins.
Para optimizar el rendimiento, cargue los estilos dinámicamente con PHP. Actualice su archivo plugin.php para registrar y poner en cola los estilos solo cuando se renderice el bloque
función create_block_awesome_carousel_register_assets() { wp_register_script('bento-runtime', 'https://cdn.ampproject.org/bento.js', [], falso, verdadero); wp_register_script('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js', ['bento-runtime'], falso, verdadero); wp_register_style('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css', []); } add_action('init', 'create_block_awesome_carousel_register_assets');Registro de activos y gestión de devoluciones de llamadas de renderizado
Cargar recursos de forma eficiente garantiza que tu bloque se mantenga ligero. Usa render_callback de PHP para cargar scripts y estilos solo cuando el bloque esté presente en la página. Modifica el archivo plugin.php de la siguiente manera:
function create_block_awesome_carousel_block_init() {
register_block_type(__DIR__, [
'render_callback' => 'create_block_awesome_carousel_render_block',
]);
}
function create_block_awesome_carousel_render_block($attributes, $content) {
if (!is_admin()) {
wp_enqueue_script('awesome-carousel-view');
wp_enqueue_style('bento-base-carousel');
}
return $content;
}
add_action('init', 'create_block_awesome_carousel_block_init');
Esto garantiza que los scripts y estilos solo se carguen en las páginas donde se renderiza el bloque, lo que mejora el rendimiento general del sitio.Mejores prácticas para el desarrollo de bloques bento
Al trabajar con bloques Bento en WordPress, seguir las mejores prácticas garantiza que sus bloques sigan siendo eficientes, reutilizables y fáciles de usar.
Mantenga los bloques livianos y reutilizables
Así como una lonchera Bento está dividida en compartimentos ordenados para comidas, refrigerios, frutas e incluso comida para niños, sus bloques también deben ser modulares y reutilizables.
Concéntrese en elegir materiales limpios en su código, garantizando que cada bloque sea resistente, duradero y no esté sobrecargado con características innecesarias.
Esto los hace más portátiles, más fáciles de almacenar y convenientes para el uso diario, como un recipiente para almuerzo ecológico, a prueba de fugas y apto para lavavajillas que puede llevar a cualquier lugar, desde picnics hasta viajes.
Garantizar la accesibilidad (HTML semántico y atributos ARIA)
La accesibilidad es fundamental para crear experiencias seguras y agradables. Al usar HTML y roles ARIA, sus bloques Bento se vuelven más inclusivos.
Piense en ello como asegurarse de que un recipiente sea apto para microondas, lavavajillas y lavado a mano: todos deberían poder usarlo, independientemente de sus preferencias.
Un etiquetado adecuado también evita problemas como “derrames” o fugas de contenido al navegar con tecnologías de asistencia, lo que garantiza que los usuarios puedan disfrutar de su contenido tal como lo harían con los alimentos almacenados en un producto bien diseñado que evita olores no deseados.
Optimizar para la capacidad de respuesta móvil
En el mundo actual, los usuarios interactúan con los sitios web a través de múltiples dispositivos, lo que hace que la adaptabilidad a dispositivos móviles sea esencial.
Tus bloques Bento deben adaptarse a diferentes tamaños de pantalla, de forma similar a elegir la capacidad o cantidad de recipientes según la cantidad de comida que necesites empacar. Ya sea para refrigerios o comidas completas, el diseño debe adaptarse con fluidez.
Un diseño de bloque adaptable es tan conveniente como una caja Bento que cabe en cualquier bolso, resistente, seguro y diseñado para evitar derrames durante el uso diario o los viajes.
Utilice Bento para mejorar el rendimiento en bloques con uso intensivo de React
La ventaja de Bento reside en su rendimiento. En lugar de depender de enfoques complejos basados en React, Bento mantiene la agilidad y la eficiencia.
Es como elegir un recipiente ecológico, apto para microondas, duradero y a prueba de fugas en lugar de uno voluminoso que agrega peso adicional.
Con Bento, usted se concentra en la velocidad, menos dependencias y una experiencia de desarrollador más limpia, ideal para proyectos que necesitan ser divertidos, seguros, portátiles y optimizados para el rendimiento.
Siga los estándares de codificación de WordPress
Por último, siempre alinee con los estándares de codificación de WordPress para garantizar la compatibilidad, facilidad de mantenimiento y seguridad.
Así como los productos de los Países Bajos o de marcas confiables a nivel mundial a menudo establecen puntos de referencia de calidad en cuanto a precio, material, capacidad y diseño limpio, los estándares de codificación garantizan que sus bloques sigan siendo de alta calidad, confiables y fáciles de lavar a mano o "mantener" a largo plazo.
Siguiendo las mejores prácticas, creará bloques Bento que los desarrolladores adorarán y que seguirán siendo ideales para el uso diario y a largo plazo.
Más información: Guía para crear bloques personalizados en WordPress
Reflexiones finales
El uso de Bento con Gutenberg transforma el desarrollo de bloques al simplificar los flujos de trabajo, reducir la duplicación de código y mejorar la interactividad.
Con componentes reutilizables, compatibilidad multiplataforma y accesibilidad incorporada, Bento permite a los desarrolladores crear bloques de WordPress de alto rendimiento y a prueba de futuro sin esfuerzo.
Al integrar personalizaciones avanzadas y optimizar el rendimiento, puede ofrecer una experiencia perfecta tanto para los editores como para los usuarios.
Ya sea que desarrolle proyectos personales o escale para clientes, Bento proporciona las herramientas para llevar sus bloques de Gutenberg al siguiente nivel con facilidad y eficiencia.
