Crea tu blog utilizando Frontity & WordPress

Vamos a ver como crear nuestro propio blog utilizando WordPress como base de datos y herramienta para la creación del contenido, React para pintar el contenido y gestión de los componentes UI y NodeJS para hacer el renderizado desde el servidor, así mejorar el tiempo de carga y facilitar el rastreo de los buscadores.

Por suerte para nosotros, otros desarrolladores ya se han encontrado con este problema y han creado una herramienta que nos facilitará mucho el trabajo llamada frontity. Puedes echar un vistazo a la documentación oficial en docs.frontity.org.

Requisitos

  • NodeJS instalado en nuestro equipo 
  • Instalación local de WordPress, para este tutorial utilizaremos localbyflywheel.com
  • Un WordPress en remoto
  • Cuenta en zeit.co para publicar el servidor NodeJS

Empezamos 🚀

Abrimos la terminal, nos dirigimos al directorio donde crearemos nuestro proyecto y ejecutamos el comando:

npx frontity create blog-name

Dónde blog-name será el nombre del proyecto que elijas, accedemos a la carpeta y ejecutamos el comando:

npm run dev

Esto nos abrirá nuestro blog en http://localhost:3000 donde ya podemos ver nuestro blog funcionando aunque mostrando el contenido que viene por defecto en Frontity, ahora vamos a engancharlo con nuestro propio contenido.

captura de nuestro blog funcionado en localhost:3000 cargando un contenido de ejemplo
Aspecto inicial de nuestro blog

Para ello, creamos un nuevo sitio en nuestro local by flywheel con la configuración por defecto, una vez esté funcionando copiamos la url y volvemos a nuestro proyecto de Frontity. Abrimos el archivo frontity.settings.js, buscamos la línea donde pone api y modificamos la dirección que viene inicialmente https://test.frontity.io/wp-json por la url de nuestro WordPress más /wp-json, la dirección del api rest de WordPress, algo similar a http://blog-name.local/wp-json.

Si recargamos nuestro blog, ahora vemos que la información que aparece es la de nuestro WordPress. Todo funciona perfectamente salvo nuestro menú, que está apuntando a unas páginas que no tenemos creadas en nuestro WordPress.

Modificar el menú

Frontity obtiene el contenido de nuestro WordPress, así que lo primero es crear las páginas que queremos mostrar. Para este ejemplo solo crearemos una página de “Quiénes somos”. Ahora solo tenemos que añadir el texto del enlace y la ruta en nuestro archivo de configuración frontity.settings.js

En este ejemplo solo hemos añadido la portada y una página de quiénes somos, pero no tenemos límite e incluso podemos añadir enlace a las categorías o tags igual que en nuestro WordPress tradicional.

Como ves las rutas son las mismas que las que utiliza nuestro WordPress, así que si, por ejemplo, queremos cambiar la url de nuestros posts para no que aparezcan las fechas, simplemente tenemos que cambiarlo desde WordPress. No tiene nada que ver Frontity en esto.

Personalizar el aspecto

Frontity viene con un tema por defecto llamado mars-theme, el cual utilizaremos como base para crear nuestro tema. El theme se encuentra dentro de la carpeta packages/mars-theme.

Entramos en la carpeta del tema, ahí encontraremos una carpeta src que contiene un archivo index.js, donde definimos y configuramos nuestro tema, y una carpeta components, donde encontraremos todas las piezas que componen nuestro tema.

Si estás familiarizado con React y JSX te resultará sencillo añadir y modificar los componentes. Una cosa a tener en cuenta, es que Frontity trae entre sus librerías emotion.sh/docs/introduction, lo que nos facilita el trabajo de CSS desde JavaScript.

Emotion

Añadir funcionalidad

A medida que vamos personalizando el aspecto de nuestro blog seguro que nos surge la necesidad de ampliar sus funcionalidades. Para ello, volvemos a nuestro index.js de la carpeta src de nuestro tema. 

En él podemos encontrar: state, donde definimos las variables globales de nuestro blog y actions, donde definimos las funciones que modificarán esas variables definidas en nuestro state.

Vamos a implementar un modo oscuro en nuestro blog, para ello lo primero es definir el estado y las funciones que modificarán este estado.

packages/mars-theme/src/index.js

Ahora que tenemos los ingredientes vamos a implementar nuestra nueva funcionalidad. Lo primero entramos a nuestra carpeta components dentro del tema y abrimos el index.js, ahora vamos a obtener el mode de nuestro state y para simplificar podemos agregar unos estilos al body, similar a cómo se agregan los estilos globales.

packages/mars-theme/src/components/index.js

Como ves, le decimos: si el modo es ‘light’ utiliza un color, si no utiliza otro. No es un diseño muy espectacular, pero nos servirá para ver el comportamiento.

Ahora vamos a crear un componente, el cual nos permitirá cambiar de modo.

packages/mars-theme/src/components/toggle.js

Funciona correctamente pero nos falta marcar cuál está seleccionado. Para ello vamos a recoger la información del state y, con ayuda de emotion, vamos a dar estilos a nuestro componente y modificar nuestro botones para que acepten un atributo que modificará su aspecto si está seleccionado.

packages/mars-theme/src/components/toggle.js

Este componente podemos incluirlo dentro de cualquier parte de nuestro blog, para este ejemplo lo vamos a incluir en el header.

packages/mars-theme/src/components/header.js

Añadir Disqus como sistema de comentarios

Aunque podemos utilizar los comentarios nativos de WordPress, Disqus puede traernos algunos beneficios, como por ejemplo el control del spam, la identificación de los usuarios, etc.

Antes de nada tenemos que crear una cuenta en Disqus y dar de alta un nuevo sitio. 

Lo bueno de utilizar React para pintar nuestro blog es que podemos aprovechar su rico ecosistema y utilizar componentes de otros desarrolladores que funcionan a las mil maravillas, en esta ocasión utilizaremos disqus-react, para ello instalamos el componente.

npm install disqus-react

Ahora ya podemos utilizarlo en nuestro blog, solo necesitamos importarlo y pasarle un objeto con la url, un identificador y un título, para  que Disqus sepa qué comentario tiene que mostrar en cada artículo, tienes toda la documentación del componente en github.com/disqus/disqus-react

Para obtener la información que necesitamos nos ayudamos del state que recibimos gracias a Frontitfy. Primero obtenemos la información de la url actual:

const data = state.source.get(state.router.link);

Ahora utilizando el tipo y el id que recibimos de data obtenemos nuestro post:

const post = state.source[data.type][data.id];

Ya tenemos todos los ingredientes para construir el objeto y crear nuestro componente de comentarios

Ahora lo importamos dentro de nuestro componente post, tenemos que tener en cuenta de de renderizarlo únicamente cuando estemos en el navegador, ya que frontity nos proporciona un server side render lo que hace que nuestro código se ejecute primero en el servidor donde no tenemos un objeto window y nos dará error Disqus.

A través de state.frontity.platform podemos saber dónde se está ejecutando nuestro código, en este caso solo queremos que se ejecute cuando este sea “cliente” y cómo solo queremos mostrarlo dentro de los post utilizamos data.isPost

{state.frontity.platform === "client" 
            && data.isPost
            && ( <Comments /> ) }

El siguiente paso sería implementarlo a través de namespaces, Frontity utiliza state, actions y libraries y todos los paquetes son utilizados desde ahí a través de un nombre específico, eso que significa que si creamos un paquete que exporte:

libraries: {
       comments: {
           Comment
       }
   }

Nosotros podemos utilizar desde nuestro post desde libraries, algo parecido a esto:

const Post = ({ state, actions, libraries }) => {
return (
   <libraries.comments.Comments />
)

¿Qué conseguimos con esto? que si en un futuro reemplazamos nuestra librería de comentarios, nuestro tema no se ve afectado.Tenéis más información sobre el uso de namespaces en la documentación oficial //docs.frontity.org/learning-frontity/namespaces y si queréis que preparé un artículo explicando este tema, dejármelo en los comentarios 😜

Publicar el blog

Hemos personalizado el aspecto de nuestro blog y le hemos añadido la funcionalidades, vamos a mostrarlo al mundo. Para ello tenemos que tener un WordPress con el contenido en remoto, recordemos que estábamos trabajando en local con local by flywheel. Aquí tenemos dos opciones, instalar y configurar un WordPress en cualquier hosting o utilizar wordpress.com. Cualquiera de las dos opciones son perfectamente válidas.

Cuando tengamos montado nuestro WordPress en remoto, actualizaremos el archivo de configuración frontity.settings.js reemplazando la url local por la nueva ubicación.

Si volvemos a poner en marcha nuestro blog con npm run dev deberíamos ver el contenido del nuevo WordPress, si es así, ahora nos toca publicar nuestro proyecto en un NodeJS. 

Para ello utilizaremos now y seguiremos los pasos que indican en: docs.frontity.org/installation-and-deploy/deploy-on-now

Creamos un archivo llamado now.json en la carpeta raíz del proyecto con el siguiente contenido.

Creamos una cuenta en now zeit.co/signup y nos identificamos a través de la terminal, utilizando:

npx now login

Ahora para publicar nuestro blog simplemente tenemos que ejecutar el siguiente comando

npx now

Y ya está! 🎉🎉🎉 tenemos nuestro blog publicado al mundo.

Ritmo vertical y escala tipográfica con Variables CSS

No recuerdo donde fue la primera vez que leí sobre escala tipográfica, pero desde que lo conocí es por lo primero que hago al una guía de estilos para un proyecto, consiste en multiplicar un tamaño base del texto por un factor de crecimiento para obtener el tamaño de los encabezados.

Te recomiendo un par de herramientas type-scale.com y www.modularscale.com

Escala tipográfica con variables CSS

Vamos a implementar esta técnica utilizando variables CSS, necesitamos un tamaño base, un factor de crecimiento y el numero de veces que se va ha incrementar, por defecto ninguna.

Utilizamos la función calc para obtener el tamaño de nuestro texto, échale un ojo al código.

Ritmo vertical con variables CSS

Ahora vamos a añadir ritmo a nuestro texto, utilizamos el alto de linea como unidad para generar los espacios en blanco y el alto de linea del resto de elementos. Así conseguimos una armonía en nuestro diseño.

Puede que te interese este recurso www.gridlover.net

Ahora vamos a añadir ritmo vertical a nuestro ejemplo anterior, y lo podemos utilizar tanto para el alto de linea, márgenes y rellenos siempre combinándolo con nuestra gran aliada la función calc.

Factor de crecimiento en pantallas pequeñas

Nuestra CSS tiene un problema los encabezados principales son demasiado grandes para verlos en dispositivos móviles, para solucionarlo simplemente tenemos que reducir el factor de crecimiento así no alcanzarán tamaño tan grandes.

Con este ejemplo ya puedes ver la potencia que tienen las variables nativas de CSS y la diferencia que tienen con las variables de Sass.

Como solo necesitamos cambiar el valor de las variables para modificar el comportamiento de nuestros textos. Vamos al siguiente nivel «calc inception».

En tamaño intermedios de pantalla nos puede ser muy útil multiplicar el tamaño del texto por una unidad relativa a la pantalla como por ejemplo viewport width (vw)

Para ello asignamos como valor a nuestras variables una función calc con el tamaño de texto multiplicado por la unidad relativa.

Resultado Final

Cómo crear un bloque de restricción de contenido para WordPress

En este artículo te voy a enseñar a crear tu propio bloque restricción de contenidos dependiendo del rol del visitante. Es un ejemplo con pocas lineas de código pero que abarca unos cuantos conceptos super útiles a la hora de desarrollar tus propios bloques y te abre un abanico de posibilidades muy interesante

Entorno de desarrollo

Lo primero que necesitas es un entorno de desarrollo que te permita transpilar tu código escrito en JSX a JavaScript, para ello, la comunidad de WordPress a desarrollado un paquete en NPM que te facilitará mucho el trabajo.

npm install @wordpress/scripts --save-dev

Si quieres más información sobre este tema te recomiendo que eches un vistazo al artículo de Nelio Software Transpilando JavaScript fácilmente con wp-scripts y por supuesto la documentación oficial sobre desarrollo de bloques

Puedes descargar el entorno para empezar a trabajar desde https://github.com/goiblas/Block-Restrict-Content/tree/initial

Registrar el bloque

Lo primero que tienes que hacer es registrar el bloque, con los archivos necesarios para que función, para ello primero registra script a través de función wp_register_script recordando que el archivo transpilado se encontrará en la carpeta build/index.js, el siguiente parámetro que tienes que incluir son las dependencias que necesitas que estén cargadas para que funcione.

Después registra el bloque a través de la función register_block_type pasando como primer parámetro el nombre del bloque y a continuación un array con sus parámetros, entre el cual está editor_script donde puedes pasarle el script que habías declarado previamente, WordPress se encargará de cargarlo únicamente dentro del editor

Definir parámetros desde PHP

Incluso puedes pasarle los parámetros que vas a necesitar utilizar dentro tu bloque, para este bloque necesitarás el listado de roles y el listado de roles que tienen permiso para ver el contenido

Puedes obtener el listado de roles desde la variable global $wp_roles y añadirla como array al parámetro attributes, también me ha parecido interesante incluir por defecto que el primer rol de la lista tenga acceso

Creación del bloque

Ya tienes el entorno creado y los archivos se cargados, ahora solo necesitas abrir un consola en la carpeta de plugin y ejecutar npm run start Automáticamente el código que escribas dentro de src/index.js será transpilado en la carpeta build/

Estructura de un bloque

Para crear un bloque tienes que utilizar la función registerBlockType que se encuentra dentro de wp.blocks, como primer parámetro espera el nombre del bloque y el segundo es un objeto con todos los detalles del bloque, destacar la función edit que será la responsable de lo que aparece dentro del editor y la función save que se ocupará de mostrar el contenido en el frontend

Un detalle interesante es que como ya has definido tus atributos desde PHP no es necesario que vuelvas a definirlos.

Características especificas

Una forma muy cómoda de ver y modificar características especificas de un bloque es a través del componente <InspectorControls>, es el encargado de mostrar la información en la barra lateral cuando seleccionamos el bloque.

Para poder seleccionar que roles van a poder acceder al contenido, puedes utilizar <SelectControl> desde wp.components lo único a tener en cuenta pasarle el parámetro multiple, y transformar los roles que recibirás como atributo para que se adapten a lo que espera componente, en este caso yo lo he realizado con un map

Añadir contenido al bloque

Para poder añadir otros bloques dentro de un bloque, puedes utilizar el componente <InnerBlocks> el cual le puedes añadir propiedades que te pueden ser muy útiles, yo en este caso he utilizado template para añadir un contenido por defecto cuando se crear el bloque pero te dejo un enlace donde puedes ver otras funcionales https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks

En el método save del bloque únicamente tienes que añadir el componente <InnerBlocks.Content> y el se ocupará de mostrar el contenido que han añadido en el método edit

Código del bloque

Aspecto del bloque en el editor

Aspecto del bloque de restricción de contenido visto dentro del editor
Vista del bloque dentro del editor

Renderizado condicional

Por ahora el bloque muestra el contenido a todos los roles, hay que procesar ese contenido antes de que le llegue al usuario, para ello, vuelve a tu archivo PHP y añade un atributo más la función de registro del bloque llamado render_callback al cual le puedes pasar el nombre de una función

Esta función de render recibe dos parámetros el primero son los atributos y el segundo es el contenido. Con esta información solo necesitas acceder al usuario actual a través de la función wp_get_current_user() y comprobar que el rol del usuario está dentro de los roles permitidos.

Si tiene permisos le mostrarás el contenido que se ha venido como segundo parámetro y si no puedes mostrarle un mensaje diciendo que no tiene permisos.

Código completo del plugin

Y ya estaría funcionando, espero te resulte útil, tienes todo el código disponible en https://github.com/goiblas/Block-Restrict-Content

¿Cómo está creado este blog?

«Just another WordPress site» Sí, este blog esta creado con WordPress. Puede sonar un poco decepcionante crear una entrada para contar cómo he creado un blog en WordPress, pero dame una oportunidad, déjame mostrarte un enfoque diferente.

Escribo el contenido de WordPress.com, más concretamente desde su editor de bloques, Gutenberg, similar a WordPress.org

Para pintar el blog utilizo React, soy de esos seres extraños que se sienten mas cómodos utilizando JavaScript que PHP, esto me permite una mejor componetización de la interface y un clara separación del frontend y el backend.

Problemas de crear un Blog con JavaScript

Esta no es la primera vez que intento construir mi blog utilizando JavaScript, tengo un par de pruebas de concepto construidas con Angular, pero pasaron de eso… pruebas de concepto.

El primer problema que me encontré es el tiempo que le costaba a mi móvil renderizar el blog que había creado con Angular 2, y el problema fundamental no es que esa versión de Angular fuera pesada, que también, era simplemente que es muy costoso para el navegador pintar toda la interface desde JavaScript

Otro gran problema era la indexación por el robot de Google y por la tanto la dificultad de posicionar el contenido en Google

Soluciones para crear tu Blog en JavaScript y WordPress

Están saliendo varias soluciones que te facilitan la creación de blogs utilizando JavaScript como puede ser www.gatsbyjs.org el cual genera archivos estáticos

Yo me he decantado por Frontity.org, un framework para crear temas de WordPress lo que lo convierte en una solución creada por y para WordPress. ¿Cómo funciona? Se ejecuta en un servidor NodeJs y te proporciona todas las herramientas necesarias para empezar a desarrollar tu tema con React, Webpack, Babel, Emotion, … y lo más importante… Server Side Render lo que hace que mejore mucho la experiencia de los usuario y de googlebot.

Frontity renderiza el contenido obteniendo el contenido de WordPress
Imagen obtenida de la web de Frontity.org

También me a parecido muy útil la abstracción de la WP REST API, ya que tiene sus peculiaridades y en algunas ocasiones puede resultar un poco enrevesada.

Cambio de paradigma

Y mis plugins…. esto fue lo que más me costó asimilar, me tocaba cambiar la mentalidad, se cerraba la puerta de la habitación de los plugins, pero cuando una puerta se cierra otra se abre, y hay estaba npm con una colección infinita de componentes de React

Que futuro le espera a este blog

Lo primero y más importante es crear contenido, da igual la tecnología lo importante es que el contenido valga la pena, así que iré añadiendo contenido sobre el JavaScript, WordPress y cualquier cosa relacionada con el desarrollo Frontend

Lo siguiente respecto al blog, pasar el contenido a un servidor propio y así ir añadiendo funcionalidades a través de plugins y la REST API.

Frontity acaba de lanzar su primera versión y están trabajando en nuevas funcionalidades como puedes ser AMP, así que iré probando todas esas nuevas características, prometo ir contando la experiencia.

Por cierto si te interesa ver el código, puedes echarle un vistazo en https://github.com/goiblas/personal-blog

Descubre la forma más sencilla de alinear elementos dentro de un flexbox

Desde la aparición de flexbox en CSS se ha vuelto una herramienta imprescindible a la hora de colocar elementos uno al lado de otro, ya que, por defecto los hijos de un display: flex se apilan en el lado izquierdo ocupando el mínimo espacio según su contenido.

Elementos apilados en el lado izquierdo debido a la propiedad display: flex
Comportamiento por defecto de display: flex

Si queremos modificar el comportamiento de los hijos, haciendo que se distribuyan por todo el espacio disponible, por ejemplo, puedes utilizar las propiedad que vienen asociad a Flex llamadas justify-content si queremos modificar el comportamiento en el eje vertical puedes utilizar align-items

También hay otras propiedades que podemos aplicar a los hijos y modificaran su comportamiento por defecto, puedes echarle un vistazo a todas la propiedades en este artículo de CSS Tricks

Pero en CSS hay muchas maneras de conseguir el mismo resultado, y normalmente, la mejor opción suele ser la más simple. Pues te voy mostrar una forma super sencilla que utilizo para alinear elementos dentro de un contenedor con display: flex y es utilizando márgenes automáticos

Display: flex + Margin: auto

Si aplicamos un margen automático a un elemento dentro de un flex este lo empujará en sentido contrario, como muestra la siguiente imagen

Elementos apilados por el display: flex excepto el elemento que tiene margin-left: auto
Comportamiento de una elemento con margin-left: auto dentro de un display:flex

Pero esto no solo funciona en el eje X también lo podemos utilizar para alinear en el eje Y

Elemento dentro de un display:flex es empujado abajo a la derecha gracias a utilizar margin left y top auto
Comportamiento de un elemento con margin left y top auto dentro de un display:flex

Y si has llegado hasta aquí, seguro que ya no te sorprenderá cuando veas que para centrar en todos los ejes solo necesitas un contenedor con display flex y margin auto para el hijo, recuerda que para que esto funcione el elemento padre tiene que tener altura

Elemento dentro de un display flex es  centrado en horizontal y vertical utilizando margenes autmáticos
Elemento centrado vertical y horizontalmente

Margin: auto dentro de un grid

Este comportamiento también también sucede dentro de un display: grid con la diferencia que los hijos tienen un espacio delimitado, en la siguiente imagen puedes ver el resultado

Un elemento con margin-left: auto es empujado a la derecha de su celda definida con display: grid
Comportamiento de un elemento con margin-left: auto dentro de un display: grid

Ejemplo

Estas cosas como mejor se aprenden es trasteando, aquí te dejo un ejemplo codepen implentando esta estrategía, espero te resulte útil 🙂

Referencias