En WordPress.com, nuestro objetivo es ofrecer a agencias y desarrolladores de WordPress las mejores herramientas posibles.
Por eso hemos creado WordPress Studio. Nuestro entorno de desarrollo local de WordPress gratuito vio la luz hace unos meses: está basado en Electron y lo puedes encontrar tanto en Mac como en Windows. Además, pronto habrá novedades muy interesantes para los usuarios de Studio.
Uno de aspectos más únicos de Studio es que es una herramienta de código abierto, y lo ha sido desde el primer día. Esto encaja directamente con el credo de Automattic, el motor de todo lo que hacemos en WordPress.com (y en todas las otras marcas de Automattic):
Sé que el código abierto es una de las ideas más importantes de nuestra generación.
Por esta razón, nos encanta desarrollar en público. En esta nueva serie de artículos, queremos compartir algunas de las cosas que hemos aprendido al crear Studio, y esperamos que te puedan ayudar a crear mejores productos.
Si te gustaría leer un artículo más detallado sobre las razones por las que elegimos Electron, por qué es un proyecto de código abierto o cualquier otra pregunta que tengas sobre Studio, déjanos un comentario y nos pondremos manos a la obra.
En el primer número de esta serie, hablaremos sobre cómo decidimos utilizar Tailwind CSS y los componentes de WordPress que dan forma a Studio y por qué esa elección aporta mucha flexibilidad al futuro de Studio.
Componentes de WordPress everywhere
Los componentes nos permiten a los desarrolladores crear elementos de código reutilizables que se pueden combinar juntos para crear interfaces de usuario complejas. Facilitan un enfoque modular y declarativo a la hora de crear UI, donde cada componente es responsable de una única funcionalidad o elemento de la interfaz de usuario.
Los componentes de WordPress son un buen ejemplo de ello. Permiten que los desarrolladores del núcleo, así como los de plugins y temas, puedan crear partes organizadas, separadas e interconectadas de la interfaz de administración de WordPress. Los componentes no solo hacen que el desarrollo sea más sencillo y esté mejor optimizado, sino que además es más predecible y resulta familiar a todos los usuarios de WordPress. Para mantener un estilo uniforme en toda el área del wp-admin, recomendamos no sobrescribir los estilos predeterminados de estos componentes.
No hay que confundir los componentes de WordPress con los bloques de Gutenberg. Mientras que los bloques se utilizan para crear el front-end de las webs de WordPress, los componentes están diseñados para crear la interfaz de administración del editor del sitio de WordPress. Se basan en React, lo que los hace más versátiles y aplicables a la interfaz de administración de cualquier plugin o tema de WordPress. También son muy útiles para crear diferentes aplicaciones más allá de WordPress; el único requisito es que el proyecto utilice React.
Los componentes de WordPress ofrecen un estilo y comportamiento consistente que combina desde el principio con la interfaz de administración de WordPress, así que al usarlos en otros proyectos fuera del ecosistema de WordPress, la interfaz y la experiencia de usuario tendrán un estilo familiar y conocido.
Pero no solo eso: los componentes son accesibles y reciben constantes actualizaciones y mejoras. Se implementan en JavaScript como componentes de React, lo que significa que se pueden integrar en cualquier proyecto. Además, al usar los componentes de WordPress en Studio, los desarrolladores pueden colaborar de forma más sencilla en este proyecto de código abierto, ya que Studio utiliza tecnología con la que ya están familiarizados.
Para encontrar rápidamente el componente adecuado y experimentar con él, puedes utilizar el Storybook de WordPress, una herramienta de código abierto para desarrollar diseños de sistemas y crear componentes de forma aislada. Con el Storybook puedes incluso echar un vistazo e interactuar con componentes de otros paquetes de npm de WordPress como @wordpress/dataviews. El componente DataViews está pensado para utilizarse en un futuro para gestionar listas de páginas, entradas y archivos multimedia.
Los componentes en Studio
Al integrar los componentes de WordPress en Studio, los usuarios de WordPress podrán disfrutar de una experiencia de usuario que les resulta conocida, ya que estás construyendo WordPress con una herramienta que se parece a WordPress.
A los usuarios de WordPress les sonarán la mayoría de botones y menús, y como Studio es una herramienta de código abierto, a cualquiera que tenga experiencia con Gutenberg le parecerá mucho más sencillo hacerse con el código de Studio y colaborar si les apetece.
Aunque Studio es una aplicación de escritorio que utiliza Electron y no un sitio de WordPress, te recomendamos no sobrescribir los estilos de los componentes de WordPress. Queremos que sean lo más parecidos posible al diseño del núcleo. Además, así se evita que las dependencias de WordPress no estén bien alineadas a la hora de actualizarlas. Para dar estilo a nuestros componentes personalizados de React, hemos utilizado Tailwind CSS.
Tailwind CSS es un popular framework de CSS basado en utilidades que usamos para personalizar los estilos de nuestros componentes personalizados y modificar los estilos exteriores, como el espaciado de los componentes de WordPress, utilizando solamente clases CSS.
Gracias a la potencia de los componentes de WordPress y Tailwind CSS el futuro de la app Studio está asegurado: los componentes se pueden reutilizar fácilmente para nuevas funciones y actualizaciones de la aplicación porque ya están importados en el proyecto en un estilo acorde con la app.
Si una pantalla necesita un nuevo botón, ya tenemos un montón de botones con el estilo de Studio entre los que poder elegir; no hay que diseñarlos desde cero cada vez que necesitemos uno.
Así es como hemos utilizado los componentes de WordPress y Tailwind CSS para crear Studio (y tú puedes usarlos de la misma forma para tus propios proyectos):
Paso 1: Configura Tailwind CSS e instala los componentes de WordPress
Después de configurar Tailwind en tu proyecto, tendrás que instalar los componentes de WordPress. Solo tienes que ejecutar el siguiente comando:
npm install @wordpress/components –save |
Paso 2: Importa los estilos de los componentes de WordPress
Ahora tienes que importar los estilos de los componentes de WordPress para inyectar el CSS que está integrado en los componentes de forma predeterminada. Esto acelerará el proceso de crear la interfaz de tu proyecto.
En el archivo CSS principal, importa los estilos de los componentes de Gutenberg:
@import '@wordpress/components/build-style/style.css'; |
Paso 3: Personaliza los componentes de React con Tailwind CSS
Utiliza la propiedad className para aplicar los estilos de Tailwind CSS. A veces, es necesario el modificador ! para marcar el estilo como important y que sustituya a los estilos de WordPress existentes.
Échale un vistazo al componente de cabecera de Studio, por ejempo:
Estamos utilizando:
@wordpress/react-i18npara las traducciones.@wordpress/iconspara mostrar los iconos.@wordpress/componentspara los componentes base como Button o TabPanel, entre otros.
Para utilizar Tailwind CSS en cualquier componente, tienes que pasar las clases de utilidades para darle estilo a los elementos en la prop className de React. En ocasiones, es necesario sobrescribir estilos predeterminados, como el margen de ciertos componentes; para ello, puedes utilizar el signo de exclamación (!) delante de la clase correspondiente, lo que permite forzar la aplicación de ese estilo específico.
Paso 4: Accede a los elementos anidados para usarlos en tu proyecto
Con Tailwind CSS puedes utilizar sofisticados selectores para localizar las interacciones de los usuarios y los elementos anidados dentro de un componente. Así podrás cambiar de forma dinámica los estilos de todo tu proyecto según el comportamiento del usuario o de la aplicación.
Por ejemplo, en el área de los sitios de demostración de WordPress Studio, hemos cambiado el estilo de los elementos anidados site name y badge para que sean de color gris cuando el sitio de demo haya caducado.
Para añadirle estilo a este componente de forma dinámica, utilizamos [&_.badge]:text-red, donde & significa elemento actual y _ significa cualquier elemento hijo. Puedes aplicar estilos específicos a un elemento hijo directo usando el operador greater-than, de esta manera: [&>div]:text-red.
¿Todo listo para empezar a construir?
Al hacer uso de los componentes de WordPress y personalizando algunos con Tailwind CSS, puedes mejorar significativamente el proceso de desarrollo y ofrecer una experiencia de usuario profesional y fluida.
Gracias a esta decisión hemos podido crear una aplicación de estilo similar a la interfaz de WordPress que beneficia a los usuarios y acelera nuestros tiempos de desarrollo. Así ganamos todos.
Si quieres construir webs de WordPress, empieza ya a desarrollar tus sitos de forma local con todo el potencial de Studio. Es gratis, de código abierto y encajará a la perfección en tu flujo de desarrollo.
Cuando hayas descargado WordPress Studio: Asegúrate de conectar WordPress Studio a tu cuenta de WordPress.com (gratis o de pago) para tener acceso a funciones como los sitios de demostración.
Y si quieres ayudarnos a construir Studio, estos son algunos issues de GitHub en los que puedes colaborar desde ya:
WordPress.com en Español 