Estrategias de maquetación responsive con Variables CSS

Hoy en día las variables de nativas de CSS están soportadas prácticamente por todos los navegadores. Creo que es un buen momento para exprimir las posibilidad que nos ofrecen

En esta ocasión me quiero centrar en un par de estrategias, que en mi opinión, nos facilitan el trabajo de crear estructuras que se adapten a los diferentes dispositivos.

Tamaños de texto responsive

Uno de los problemas más comunes que nos encontramos a la hora de realizar una maquetación responsive, es que el tamaño de los títulos en la versión de escritorio es mucho más grande que en la versión para pantallas pequeñas.

Las variables de CSS pueden ser muy útiles para resolver este problema, ya que una de sus principales características es que podemos cambiar su valor cuando se encuentran dentro de un contexto, por ejemplo dentro de una media query.

La estrategia es sencilla, se declaran todos los tamaños disponibles como variables en root, aplicamos las variables a nuestro elementos y para conseguir ampliar el tamaño, a medida que crece el tamaño de la pantalla, utilizando media queries sobreescribimos el valor de las variables de root .

See the Pen Responsive types by goiblas (@goiblas) on CodePen.

Definición de variables dentro de media queries

En la estrategia anterior, toda la responsabilidad de que el tamaño de los textos se adapte al tamaño de pantalla, recae sobre la variables, simplificando el desarrollo pero limitando las opciones. Esto casa perfecto para trabajar con tamaños de texto, pero puede ser insuficiente, para aplicarlo al manejo de espaciados.

En mi opinión, cada molécula o componente debería ser quien administre dónde, y qué, espaciado utilizar, aunque siempre dentro de un número limitado de opciones que se definen globalmente.

Para conseguir una adaptación perfecta, nos obliga a crear varias media queries donde la mayor parte de las ocasiones únicamente necesitamos modificar el espaciado, esto puede solucionarse, combinando nuestro componentes, con clases de utilidad (ejemplo tipo Tailwind), aunque en alguna ocasiones puede ser excesivo generar todas la clases necesarias.

Para estos casos podemos aprovecharnos de los fallback de la función de css var(). Cómo hacer esto, a la función var() podemos pasarle un valor como segundo parámetro, este se utilizará cuando la variable no está definida, el cual a su vez puede ser otra función var().

Definiendo variables que solo están disponibles en ciertos tamaños de pantalla, podemos conseguir comportamientos responsive, sin necesidad de redefinir el componente dentro de una media querie.

See the Pen Responsive & var() fallback by goiblas (@goiblas) on CodePen.

Space + fallback ❤️

Más allá de mostrar el comportamiento, no resulta muy interesante utilizarlo con colores pero tiene todo el sentido utilizarlo para los espaciados (margin, padding, gap, …) vamos ver un ejemplo completo.

¿Qué te ha parecido?

Siempre agradezco los comentarios, pero en esta ocasión más que nunca, estamos trabajando en una colección de hojas de estilos para agilizar el desarrollo y que aprovechen las posibilidades que nos ofrecen las variables nativas de CSS. Por eso, cualquier feedback es bien recibido tanto en comentarios como por twitter @goiblas

Seguiré compartiendo los avances y aunque todavía estamos en una fase muy temprana, a quien le apetezca colaborar que se ponga en contacto conmigo.

Como subir tu plugin al directorio de WordPress desde Github

Hoy en día estándar de facto para el control de versiones es Git, los desarrolladores nos sentimos cómodos utilizándolo y han surgido un montón de herramientas alrededor de Git, como puede ser Github.

Pero Git no es único sistema de control de también tenemos, por ejemplo, subversion, también conocido por su abreviatura SVN, que es el que WordPress para publicar y actualizar plugins en su directorio oficial.

Subversion no está pensado para ir haciendo pequeños cambios, o guardar nuestro entorno de desarrollo, con lo que, personalmente prefiero utilizar Git.

Existen varias opciones para conectar nuestro Github con el repositorio oficial, pero desde mi experiencia, la mejor es utilizando Github actions

Github actions

Para utilizar una Github action lo primero que tenemos que hacer es crear un workflow en nuestro repositorio, para ello, creamos una carpeta .github y dentro una llamada workflows, aquí es donde añadiremos nuestra action, el nombre no es importante pero viene bien para diferenciarlas ya que podemos tener varias actions, por ejemplo la llamaremos deploy.yml.

Las actions se escriben en formato yaml, y es donde definimos, cuándo se va ha ejecutar y qué tiene que ejecutar. En este caso vamos a utilizar una actions llamada WordPress Plugin Deploy

En el fichero especificamos que cuando hacemos un push de una nueva tag, ejecute la action de checkout a master y después la action de publicar en el directorio de WordPress, como bien indica en la documentación de la action, necesitamos pasarle el slug de nuestro plugin y el usuario y contraseña de WordPress.org

El usuario y contraseña lo añadimos desde los settings > secrets de nuestro repositorio, siempre es mejor trabajar con las contraseñas ocultas en nuestros repositorios 😜

Publicar los assets

También necesitamos publicar los screenshots, el banner y el logo de nuestro plugin, para ello creamos una carpeta llamada .wordpress-org y metemos dentro nuestro assets, el formato y nombre de los archivos, tienen que seguir las indicaciones de WordPress.org https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/

⚠️ Publicar solo los archivos imprescindibles de tu plugin

WordPress nos avisa en la documentación oficial que no subamos al repositorio oficial archivos que no son imprescindibles para el funcionamiento del plugin, como por ejemplo el archivo .gitignore.

Para ello creamos un archivo llamado .distignore donde incluiremos los archivos y directorio que no queremos enviar al directorio oficial.

Publicar nuestro plugin

Ya tenemos todos los ingredientes preparados, ahora, cuando creemos un nuevo tag en nuestro repositorio Git, lazará la Github action y se publicará nuestro plugin.

Para ello hacemos un commit de los cambios, creamos una nueva tag, por ejemplo git tag v1.0 y publicamos los cambios git push –tags para publicar nuestro tag

Podemos seguir el proceso desde la solapa Actions, donde nos informará se produce algún error o todo funciona correctamente

Resumen

  1. Añadir la action en .github/workflows
  2. Añadir los assets en .wordpress-org
  3. Crear el usuario y contraseña en settings/secrets
  4. Crear el fichero .distignore
  5. Creamos una nueva Tag en el repositorio

Enlaces de interés

Bloque para listar cualquier Post Type

Estaba el otro día escuchando el podcast de los amigos de freelandev y comentaban, la necesidad que tenían en varios proyectos de mostrar un listado de un custom post type, como son unos cracks con PHP 😎, ellos utilizan shortcodes, una forma perfectamente válida y que el editor de bloques da soporte.

Pero nosotros vamos a ir un paso más allá creando un bloque, que nos imprima un listado con los artículos del tipo de post que elijamos, esto mejorar al experiencia respecto al shortcode ya que el usuario puede ver el resultado desde el editor y no tiene que recordar el shortcode

No voy a explicar como preparar el entorno de desarrollo, pero si te interesa este tema, te recomiendo que eches un vistazo al post donde creaba un bloque para restringir el acceso a un contenido

Registramos el bloque en PHP

Lo primero es registrar nuestro bloque, para ello utilizamos la función register_block_type, a la cual le vamos a pasar como atributos el listado de post types disponibles y el tipo de post que aparecerá seleccionado por defecto.

Para obtener el listado de post types podemos utilizar la función get_post_types a la que le pasamos, como opciones que solo queremos los públicos y como segundo parámetro le decimos que solo queremos sus nombres. De esta forma obtenemos un array de clave valor con todos los tipos de post que tenemos en nuestro WordPress, incluso los custom post types.

Para transformar ese array de clave valor de PHP en un array de Javascript utilizamos la función array_keys.

Código JavaScript del bloque

Ahora vamos al código JavaScript de nuestro bloque, como ya hemos declarado nuestros atributos desde el PHP no es necesario que volvamos a declararlos, así que vamos directos a nuestra función edit.

Solo necesitamos dos componentes, un select, que nos permita cambiar el tipo de post seleccionado y un componente que se encargue de pintar los artículos.

Para el select, el editor de bloques nos facilita un componente llamado SelectControl al cual le pasamos como value el seleccionado y cómo options los tipos de post, aunque tenemos que transformar ese array para que se adapte al formato que entiende el componente, para ello, utilizamos la función map para transformar cada string del array en un objeto con las claves label y value.

Por último definimos el método onChange el cual se ejecutará cuando el usuario cambie el valor del select y nos devolverá el nuevo tipo de post seleccionado.

Mostar listado de posts

Ahora creamos el componente <ArticlesList />, encargado obtener el listado de artículos de la base de datos y pintarlos en el editor. Para hacer esta magia tenemos la funcion getEntityRecords, el problema, es que esta función es asíncrona ya que tiene que obtener esa información de la base de datos. Para facilitarnos la tarea de trabajar con este método y con otros de la función select, han creado withSelect, un high order component el cual envuelve nuestro componente  y nos simplifica el desarrollo. Solo nos tenemos que preocupar que recibiremos unos artículos y hasta entonces mostrar un cargando.

Este high order component nos provee como primer parámetro de la función select que utilizaremos para obtener nuestros artículos y devolvemos un objeto con la clave articles

la función select nos permite acceder al store, es un tema interesante y con bastante miga,  si te interesa el tema, déjalo en los comentarios.

Para pintar los artículos utilizamos la misma estrategia que hemos utilizado antes para transformar nuestro array opciones para el componente.Utilizando map transformamos cada uno de  los elementos del array en código jsx que pintará un <li> con un link y el título del artículo

Props & High Order Component

Perfecto! nuestro componente ya pinta los post, pero necesitamos pasarle qué tipo concreto de post type queremos pintar, para ello pasamos la nuestro componente la propiedad type con el post type seleccionado, ahora necesitamos acceder a ella dentro de withSelect.

Para acceder a las propiedades que se le pasan a un componente dentro de una high order component, las recibimos como segundo parámetro, con lo que nuestra función se quedará tal que así.

Render callback

Ahora tenemos que pintar nuestro bloque en el frontend de nuestro WordPress, para ello, no podemos simplemente guardar el listado como un atributo del bloque, ya que esa información es dinámica, podemos añadir o eliminar artículos y nuestro bloque no se enterará hasta que no entremos a editarlo, con lo que vamos a renderizarlo desde PHP.

Para renderizar un bloque desde PHP, tenemos que añadir en el registro del bloque la clave “render_callback” a la que asociamos un función. Esta función recibirá como primer parámetro un array con los atributos del bloque, de hay sacamos el tipo de post type seleccionado, obtenemos la información a través de WP_Query y devolvemos el html que WordPress pintará en el frontend

Ya tenemos nuestro bloque funcionando 🎉🎉🎉, aunque se me ocurren muchas mejoras que podemos añadirle, como pasarle el número de artículos que queremos mostrar, darle estilos a nuestro listado o incluso poder elegir entre diferentes aspecto, ¿Qué opinas? Déjalo en los comentarios o coméntamelo por twitter

Tienes todo el código disponible en: github.com/goiblas/Block-List-Post-Type y por supuesto se aceptan pull requests con mejoras.

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 🙂

See the Pen Flexbox ❤️ margin: auto by goiblas (@goiblas) on CodePen.

Referencias