Categorias
WordPress

API de Blocos Gutenberg versão 2

Na versão 5.6 do WordPress foi adicionado a nova API de blocos Gutenberg ou Block API 2, ele tem como foco tornar a edição de blocos mais leve, reduzindo a quantidade de elementos na árvore de elementos DOM do editor, a versão 2 também trás melhorias para ajudar na customização de blocos em temas e plugins .

Habilitando a API versão 2

Para fazer o uso da nova API, devemos especificar na criação de nosso bloco que iremos trabalhar com a versão 2 da API passando o atributo “apiVersion” dentro da função registerBlockType, exemplo:

registerBlockType( name, { apiVersion: 2 } );
Code language: CSS (css)

useBlockProps

Recentemente gravando o curso de Gutenberg em meu canal notei quando utilizando o script create-block os blocos vinha uma um novo hook react relacionado o useBlockProps.

Esse novo hook adiciona em nosso bloco todos os atributos relacionados e o eventos necessários para um bloco. Agora qualquer propriedade que você deseja passar para o bloco deve ser gerenciado pelo useBlockProps. Assim utilizamos o useBlockProps da seguinte forma:

import { useBlockProps } from '@wordpress/block-editor'; function Edit( { attributes } ) { const blockProps = useBlockProps( { className: someClassName, style: { color: 'blue' }, } ); return <p { ...blockProps }>{ attributes.content }</p>; }
Code language: JavaScript (javascript)

Comparando o mesmo código com a versão 1:

function Edit( { attributes } ) { return ( <p className={ someClassName } style={ { color: 'blue' } }> { attributes.content } </p> ); }
Code language: JavaScript (javascript)

Caso queira aprender a construir blocos Gutenberg, lá iremos utilizar mais exemplos com a nova API:

Se ainda não segue meu canal assine e acompanhe quando novas aulas forem publicadas.

Categorias
WordPress

Gifs e legendas para vídeos chegam no web stories para WordPress

Nos posts anteriores falei sobre o novo plugin de web stories para WordPress ness post vamos falar das novidades na versão 1.1 do plugin:

  • Suporte a inclusão de gifs
  • Legendas para vídeos
  • Inclusão de templates para textos

Um gif pode valer mais que mil palavras

Inclusão de gifs em stories é algo ajuda na parte editorial trazendo animações que trazem referências para um grupo específico ou assunto. O recurso já utilizado em outras plataformas e agora temos suporte a inclusão de gifs no Web Stories para WordPress através da plataforma Tenor. Da mesma forma que temos acesso a galeria do unsplash agora temos a inclusão da biblioteca de gifs do Tenor.

Novo painel de inclusão de gifs

Legendas

Legendas é um item essencial para acessibilidade e SEO, Agora temos a opção de adicionar legendas em nossos vídeos com o plugin. Outro fator importante de legenda muitas vezes usuários mobile assistem nosso vídeo sem áudio, em transporte público ou momentos onde não se pode reproduzir vídeos com áudio para esses casos a legenda tem um papel importante.

O formato suportado pelo web stories é o WebVTT, formato suportado por diversos players e padrão da web que possui o seguinte formato:

WEBVTT - Web Core Vitals 00:00.000 --> 00:03.005 O web core vitals é uma nova métricas que 00:03.000 --> 00:05.995 vai ai fazer parte do ranqueamento da busca do Google 00:06.039 --> 00:08.529 E ela vai ter o foco na experiência do usuário
Code language: CSS (css)

O documento precisa começar com WEBVTT em seguida o título do vídeo(opcional) e os blocos sempre seguidos por um espaço. Cada bloco possui uma linha com o tempo e a segunda linha a legenda para aquele espaço de tempo.

WebVTT aceita propriedades como alinhamento e tamanho de fonte mas não vamos entrar nesses detalhes caso não queira tratar com esses ítens na web você vai encontrar alguns editores visuais para legenda como o VTT Creator:

Uma vez que criamos a legenda para o nosso vídeos adicionamos via painel lateral quando selecionamos o nosso vídeo:

Editor visual com vídeo selecionado

Templates para textos

Por último mais não menos importante temos a inclusão de templates para textos, funcionalidade que irá ajudar na parte gráfica a produção de stories. Nas primeiras versões tinhas templates para stories nesse caso temos combinações de textos e títulos que irão ajudar a harmonizar o seu conteúdo.

Novo painel de templates de textos

Se já está utilizando o plugin de stories para WordPress diga o que você está achando do plugin nos comentários. Para mais posts sobre WordPress acesse a página da categoria.

Categorias
Tutoriais

Lazy-loading nativo dos browsers

Lazy Loading ou Carregamento tardio para imagens e vídeos é um recurso onde você prioriza o carregamento dos itens visíveis na tela do usuário. O resultado dessa ação melhora o tempo de carregamento para a área visível do usuário e o carregamento de recursos somente quando necessário super relevante para usuários mobile.

Esse Recurso foi introduzido pelo internet Explorer 11 mas nenhum browser implementou o recurso nessa época. Em 2019 o Chrome voltou a colocar o recurso em pauta na versão 76. Atualmente o recurso está disponível para Edge, Firefox, Chrome, Opera e Android Browser. Já no Safari recurso está disponível em formato de teste.

Em Agosto de 2020 o recurso ganhou atenção quando passou a fazer parte do Core do WordPress na versão 5.5. Mas como esse recuso funciona? Nesse posts vamos ver como implementar essa funcionalidade e os requisitos para fazer uso do recurso.

Trabalhando com Lazy-Loading

Para aplicar o lazy-loading em imagens adicionamos o atributo loading na tag img, por exemplo:

<img loading="lazy"src="minha_foto.jpg" />
Code language: HTML, XML (xml)

O atributo loading pode receber os seguintes valores:

  • auto: Executará o comportamento padrão do navegador
  • lazy: A image só será carregada quando o scroll chegar uma distância específica da área visível.
  • eager: Carrega o recurso imediatamente caso esteja localizado na página.

Além da propriedade loading as imagens precisam ter especificadas suas dimensões largura e altura. Isso porque até carregar as imagens o browser não sabe as dimensões da imagem. Além disso a falta de dimensões podem causar mudanças de layout durante o carregamento também um fator que pode comprometer a experiência do usuário.

A definição das dimensões é uma recomendação já antiga antes mesmo da propriedade loading existir. Com o lazy-loading isso se torna mais relevante sem as dimensões o carregamento fica ainda mais dependente dos browsers.

As tags picture, video e iframe também podem fazer o uso do lazy loading como no exemplo abaixo:

<picture> <source media="(min-width: 900px)" srcset="wordcamp.jpg 1x, wordcamp_2x.jpg 2x"> <img src="wordcamp_fallback.jpg" loading="lazy"> </picture>
Code language: HTML, XML (xml)
<video src="./wordcamps/wordcamp_edinburgh_2018.MP4" width="720" height="1280" loop loading="lazy" controls="false" muted></video>
Code language: HTML, XML (xml)
<iframe width="900" height="515" loading="lazy" src="https://www.youtube.com/embed/yT7fCspMrU8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Code language: HTML, XML (xml)

No código anterior temos múltiplas alternativas de carregamento mas o atributo loading só precisa ser definido na tag img.

Carregamento de imagens e sua visualização

A implementação do recurso tenta garantir performance sem afetar a experiência do usuário. Assim o carregamento da imagem irá iniciar quando a imagem atingir uma distância minima da área visível. Mas vale lembrar que o carregamento das imagens ficam dependentes da rede do usuário.

Comparado a algumas bibliotecas de lazy loading a distância implementada pelos browsers que rodam a engine do Chrome são um pouco conservadoras.

Mas no Chrome essa distância não é fixa ele é dependente de alguns fatores:

  • O tipo da imagem que está sendo carregada
  • Se o modo econômico tá habilitado
  • Conexão efetiva do device

Mudanças em 2020

Após a implementação do recurso na versão 76 em Julho de 2020 essa distância foi reduzida baseada nos relatórios recolhidos nos primeiros meses de uso do recurso. Para conexões 4G o primeiro carregamento ficava restrito a uma área de 3000px agora foi reduzido para 1250px. e para conexões lentas de 4000px para 2500px.

Essas medidas reduzem o carregamento médio de imagens em até 40%. O assunto não é muito extenso então vamos ficando por aqui para mais tutoriais acesse a página da categoria tutoriais. Também fiz um vídeo em meu canal onde eu abordo o assunto:

Para mais informações sobre lazy loading acesse o site do web.dev: https://web.dev/native-lazy-loading/.

Categorias
Geral

Estilizando temas Frontity com CSS-in-JS

Nesse post vamos falar sobre como estilizar nossos temas Frontity, o framework trabalha com emotion uma biblioteca css que nos ajuda a escrever CSS-in-JS. Essa é a primeira vez eu acho que falamos em CSS-in-JS no blog. Esse post faz parte de uma série sobre Frontity:

CSS-in-JS

Antes de entrar no assunto de estilização com Frontity vamos falar sobre CSS-in-JS é um assunto que tomou o hype a dois anos atrás com Styled Components, emotion e outros frameworks ele permite a escrita de CSS dentro de arquivos JavaScript, assim adicionamos super poderes em nosso estilo, com emotion temos várias formas de escrever CSS-in-JS, como por exemplo:

import styled from '@emotion/styled' const Button = styled.button` padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; color: black; font-weight: bold; &:hover { color: white; } ` render(<Button>This my button component.</Button>)
Code language: JavaScript (javascript)

Como podemos ver utilizando string literals para escrever CSS atualmente os principais editores de texto reconhecem essa sintaxe, por exemplo, VS Code. Para simples mas temos uma série de conceitos que podemos ver nesse código e também parte de compilação.

  • nesting: algo comum com LESS e SASS é o uso de nesting onde podemos agrupar seletores.
  • CSS + Javascript: podemos definir regras e concatenar variáveis como JavaScript.
  • Compilação: muita gente pensa que CSS-in-JS é inline CSS mas esse código é compilado gerado uma style tag para esse elemento, como podemos ver o código a seguir:
<button class="css-txevan ezh9olb0">This my button component.</button> <style> .css-txevan { padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; color: black; font-weight: bold; } </style>
Code language: HTML, XML (xml)
  • CSS modular: temos a possibilidade de criar um CSS modular criando seletores únicos dinamicamente e só carregando o CSS quando necessário.
  • Cross-browsing: Além disso bibliotecas como styled components e emotion cuidam de fazer todo o trabalho de cross-browsig.

Emotion é a biblioteca adotada por Frontity para trabalhar como ela você não precisa fazer nenhuma instalação uma vez que você instala Frontity já pode fazer uso dos recursos, para isso importamos classes e funções dentro do Frontity.

Nosso projeto

Alguns desses conceitos vamos abordar quando começamos a estilizar nosso tema. Agora vamos voltar para o nosso projeto, para definir o estilo da nossa aplicação vamos utilizar o Starter Theme da Alessandra Stalanto como base:

Demo do Stater Theme

No último post criamos o seguinte componente principal:

import React from 'react'; import { connect } from 'frontity'; const Theme = ({state}) => { const data = state.source.get(state.router.link); return ( <> <h1>Nosso Primeiro tema com Frontity</h1> <p>URL Atual: {state.router.link}</p> <p>Autor: {state.source.author[1].name}</p> { data.items.map( item => { const post = state.source.post[item.id] return ( <article key={post.id}> <h2>{post.title.rendered}</h2> </article> ) }) } </> ); }; export default connect(Theme);
Code language: JavaScript (javascript)

Estilo Global

Como vimos no exemplo anterior o estilo criado com emotion fica vinculado ao componente criando uma estrutura mais modular. Caso queiramos adicionar um estilo de forma global precisamos adicionar o componente Global esse componente recebe como parâmetro um estilo que será o seguinte:

import { css } from "frontity"; export default css` body { margin: 0 font-size: 1.25rem; color: #0d405b; background-color: #FBEED9; } html, body { max-width: 100%; overflow-x: hidden; } a, a:visited { color: inherit; text-decoration: none; } `;
Code language: JavaScript (javascript)

Vamos adicionar esse estilo dentro da pasta tutorial-fellyph > src > styles criamos o arquivo globalStyles.js. Um ponto importante desse código que importamos uma função css ela nos ajudará a manipular o conteúdo como CSS e não uma simples string literal. Agora o próximo passo será adicionar nosso estilo global.

import React from 'react'; import { Global, connect } from 'frontity'; import globalStyles from "../styles/globalStyles"; const Theme = ({state}) => { const data = state.source.get(state.router.link); return ( <> <Global styles={globalStyles} /> <h1>Nosso Primeiro tema com Frontity</h1> <p>URL Atual: {state.router.link}</p> <p>Autor: {state.source.author[1].name}</p> { data.items.map( item => { const post = state.source.post[item.id] return ( <article key={post.id}> <h2>{post.title.rendered}</h2> </article> ) }) } </> ); }; export default connect(Theme);
Code language: JavaScript (javascript)

O arquivo global tem algumas regras básicas. Podemos criar algo um pouco mais complexo para utilizar o Componente Global para adicionar nossas fontes, para isso vamos criar um arquivo fontFace.js dentro da mesma pasta que globalStyles:

import React from "react"; import { Global, css } from "frontity"; import baumansWOFF2 from "../fonts/baumans_regular-webfont.woff2"; import khandmediumWOFF2 from "../fonts/khand_500-webfont.woff2"; const FontFace = () => ( <Global styles={css` @font-face { font-family: "khandmedium"; src: url(${khandmediumWOFF2}) format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "baumansregular"; src: url(${baumansWOFF2}) format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } `} /> ); export default FontFace;
Code language: JavaScript (javascript)

Como podemos ver o component FontFace por se só acessa diretamente o componente Global, além carregar as fontes que iremos trabalhar baumas e khand mas para vincular as fontes precisamos adicionar em nosso componente principal.

Antes de mostrar o Theme componente vamos mover a estrutura de nosso post para um componente Post:

import React from 'react'; import { styled } from 'frontity'; export const Post = ({ post }) => { return ( <Box> <h2>{post.title.rendered}</h2> </Box> ) } const Box = styled.article` box-sizing: border-box; margin: 0; min-width: 0; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 20px; max-width: 900px; margin-bottom: 48px; box-shadow: 0px 1px 10px rgba(0,0,0,0.05); background-color: #fdf6eb; color: #0d405b; h2 { font-family: baumansregular, sans-serif; line-height: 1.1; color:#0d405b; font-size: 2rem; margin-top: 8px; } `;
Code language: JavaScript (javascript)

Também vamos criar um componente para nosso cabeçalho com o component header:

import React from 'react' import { styled } from 'frontity'; export const Header = ({ title }) => { return ( <HeaderContainer> <h1>{title}</h1> </HeaderContainer> ) } const HeaderContainer = styled.header` background-color: #082737; color: #FBEED9; font-weight: bold; margin: 0 0 20px 0; padding: 1em; box-shadow: 0px 1px 10px rgba(0,0,0,0.05); h1 { font-size: 2rem; text-transform: uppercase; font-family: baumansregular,sans-serif; text-align: center; letter-spacing: 4px; line-height: 1.5; color: #FCB458; margin: 0; } `;
Code language: JavaScript (javascript)

Agora como esses dois componentes vamos finalizar nosso Theme componente para esse tutorial:

import React from 'react'; import { Global, connect } from 'frontity'; import globalStyles from '../styles/globalStyles'; import FontFace from '../styles/fontFace'; import { Post } from './post/post.js'; import { Header } from './header/header'; const Theme = ({state}) => { const data = state.source.get(state.router.link); return ( <> <FontFace /> <Global styles={globalStyles} /> <Header title="Nosso Primeiro tema com Frontity" /> { data.items.map( item => { const post = state.source.post[item.id] return ( <Post key={post.id} post={post} /> ) }) } </> ); }; export default connect(Theme);
Code language: JavaScript (javascript)

Assim o resultado será o seguinte:

Tema carregando os estilos

Vamos fechando esse post por aqui, para conferir o código completo você pode conferir o a branch que criei em meu github: https://github.com/fellyph/frontity-tutorial/tree/videos/04-css-in-js-final para mais posts sobre WordPress acesse a página da categoria.

Categorias
WordPress

Criando primeiro seu tema Frontity

No post anterior sobre Frontity vimos como criar o nosso primeiro projeto agora vamos com criar nosso primeiro tema totalmente customizado, caso não conheça o frontity confira o post que fiz uma introdução sobre o framework react. Para esse tutorial o primeiro passo é ir na pasta de nosso projeto e criar um novo pacote para nosso tema executando o seguinte comando em nosso terminal:

npx frontity create-package [nome-do-pacote]
Code language: JavaScript (javascript)

O comando irá criar uma pasta com o nome do pacote que especificamos dentro da pasta packages, lá iremos armazenar todos os pacotes locais responsáveis pela funcionalidades e exibição do conteúdo o nosso site. Em outras palavras podemos chamar do tema de nossa aplicação se olharmos para o Frontity como uma aplicação wp.

Para o nosso projeto irei criar o pacote tutorial-fellyph o código será o seguinte:

npx frontity create-package tutorial-fellyph

O comando irá criar a seguinte estrutura dentro da pasta packages:

|__ packages/ |__ fellyph-tutorial/ |__ package.json |__ src/ |__index.js

Package.json

Contém as configurações do tema como nome do nosso pacote, descrição e dependências:

{ "name": "tutorial-fellyph", "version": "1.0.0", "description": "Frontity package created using the Frontity CLI.", "keywords": [ "frontity", "frontity-tutorial-fellyph" ], "license": "Apache-2.0", "dependencies": { "frontity": "^1.11.1" } }
Code language: JSON / JSON with Comments (json)

Arquivo principal de nosso tema

O arquivo index.js será o arquivo de entrada do nosso pacote/tema e irá conter a seguinte código:

import React from "react"; const Root = () => { return ( <> You can edit your package in: <pre>packages/tutorial-fellyph/src/index.js</pre> </> ); }; export default { name: "tutorial-fellyph", roots: { tutorial-fellyph: Root }, state: { tutorial-fellyph: {} }, actions: { tutorial-fellyph: {} } };
Code language: JavaScript (javascript)

Temos nosso componente principal e as principais configurações do nosso tema:

  • roots: aponta para nosso componente raiz
  • state: contém todos as variáveis armazenadas no estado de nossa aplicação.
  • actions: contém todas as ações compartilhadas em nosso tema.

Agora o próximo passo será ativar nosso novo tema e para isso precisamos alterar o nosso arquivo de configurações frontity.settings.js:

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "blog.fellyph.com.br", "title": "Blog Frontity Fellyph Cintra", "description": "Theme created to the frontity tutorial" } }, "packages": [ { "name": "tutorial-fellyph" }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;
Code language: JavaScript (javascript)

Se tudo der certo o resultado será o seguinte:

Nosso ambiente de teste rodando o tema que acabamos de criar

Agora que temos nosso tema rodando e para alterar o conteúdo podemos alterar o componente Root dentro de nosso index.js. Mas para esse tutorial vamos mover e substituir nosso componente Root para um arquivo separado, nesse caso dentro da pasta tutorial-fellyph/src vamos criar uma pasta components lá iremos criar um arquivo chamado index.js, ele será responsável pelo esqueleto principal de nosso projeto, esse arquivo pode ter qualquer nome mas vamos seguir uma conversão para nos ajudar no futuro.

Agora movendo o código para o arquivo src/components/index.js o nosso código ficará da seguinte forma:

import React from 'react'; const Theme = () => { return ( <h1>Nosso Primeiro tema com Frontity</h1> ); }; export default Theme;
Code language: JavaScript (javascript)

Modifiquei o nome do componente de Root para Theme e alterei o conteúdo para um h1. Já o src/index.js da seguinte forma:

import Theme from "./components/index"; export default { name: "tutorial-fellyph", roots: { "tutorial-fellyph": Theme, }, state: { "tutorial-fellyph": {} }, actions: { "tutorial-fellyph": {} } };
Code language: JavaScript (javascript)

Agora conectamos os dois items, importando e adicionando o componente Theme a propriedade roots.

Lendo informações do WordPress

Até então ainda não lemos nenhuma informação de nossa aplicação WordPress, quando configuramos o nosso projeto dentro da lista de pacotes temos a configuração de wp-source ele será responsável por adicionar os dados do WordPress em nosso estado, se você trabalha com React o conceito estado é algo comum, caso contrário você pode conferir a documentação do react:

{ "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } },
Code language: JavaScript (javascript)

Como podemos ver atribuímos a fonte de nosso conteúdo no estado de nossa aplicação com isso a vantagem de trabalhar com frontiy é que ele irá cuidar de fazer a configuração e filtros em diferentes requisições de conteúdo.

O pacote wp-source possui uma série de funcionalidades onde podemos abordar em mais detalhes no futuro. Mas já com as configurações atuais, podemos acessar esses dados e inspecionar via console no Chrome devTools ou qualquer browser moderno:

Quando inspecionamos frontity.state temos o resultado acima

Como podemos ver o state retorna um Objeto do tipo Proxy, ele permite criar uma um proxy para um outro objeto com operações fundamentais nele temos dois parâmetros:

  • target: O objeto que contém os dados.
  • handler: As possíveis operações que conseguimos realizar sobre objeto target.

Dentro de target temos 4 valores:

  • frontity: configurações do nosso projeto como url principal e nome do projeto
  • router: ferramenta de controle de rotas do frontity
  • source: os dados vindos da consulta do wp-source
  • tutorial-fellyph: dados a referente ao nosso tema

Agora vamos ler algumas informações em nosso arquivo principal Theme para isso precisamos conectar nosso vamos utilizar o método connect do Frontity da seguinte forma:

import React from 'react'; import { connect } from 'frontity'; const Theme = ({state}) => { return ( <> <h1>Nosso Primeiro tema com Frontity</h1> <p>URL Atual: {state.router.link}</p> <p>Autor: {state.source.author[1].name}</p> </> ); }; export default connect(Theme);
Code language: JavaScript (javascript)

Assim temos o seguinte resultado:

Carregamos a url atual e o nome do autor

Para acessar os dados de forma mais elegante podemos vamos utilizar dois métodos get para quando temos os dados disponíveis em nosso estado and fetch quando queremos fazer uma requisição http a essa informação. Esses métodos estão disponíveis tanto em nosso router quando em nosso wp-source.

Por exemplo, podemos acessar nosso source e utilizar o método “get” para acessar as informações da página atual da seguinte forma e na sequência acessa a lista de post relacionados:

import React from 'react'; import { connect } from 'frontity'; const Theme = ({state}) => { const data = state.source.get(state.router.link); return ( <> <h1>Nosso Primeiro tema com Frontity</h1> <p>URL Atual: {state.router.link}</p> <p>Autor: {state.source.author[1].name}</p> { data.items.map( item => { const post = state.source.post[item.id] return ( <article key={post.id}> <h2>{post.title.rendered}</h2> </article> ) }) } </> ); }; export default connect(Theme);
Code language: JavaScript (javascript)

Com o código acima acessamos os dados do post e realizamos um loop utilizando a função map para acessar item a item assim acessamos os dados do post com state.source.post[item.id] e na sequência retornamos uma article com o título do post.

Dentro do objeto post conseguimos acessar uma série dados como:

  • categories
  • date
  • excerpt
  • id
  • link
  • status
  • sticky
  • tags
  • title
  • type

Entre outras informações, o resultado visual é bem simples pois não estamos utilizando nenhum estilo até o momento:

Listagem de posts utilizando frontity

Agora temos o nosso primeiro tema com Frontity exibindo uma listagem de posts na home. Vamos finalizando esse post por aqui mas teremos uma continuação com mais customizações em nosso tema.

Caso queira acompanhar mais conteúdo sobre WordPress você pode conferir meu canal no youtube ou acessar a página da categoria WordPress.