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
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.

Categorias
WordPress

Criando seu primeiro projeto com Frontity

No post anterior eu fiz uma introdução sobre Frontity nesse post eu irei mostrar o passa-a-passo de como criar o seu primeiro Projeto com Frontity.

Para isso teremos alguns pré-requisitos:

  • Node.js instalado em nossa máquina
  • Terminal de linha de comando
  • Um editor de texto para codificar o nosso tema no meu caso irei utilizar o vs code
  • Ter uma aplicação WordPress para conectar com sua aplicação Frontity

Agora com tudo pronto precisamos abrir o nosso terminal na página que queremos criar o nosso projeto e rodar o seguinte comando:

npx frontity create frontity-tutorial

Esse comando irá criar um projeto dentro da pasta frontity-tutorial nesse caso podemos utilizar qualquer nome para o nosso projeto. O processo de instalação utiliza npx, mas caso não conheça ele tem o comportamento similar ao npm mas com uma diferença ele irá. Remover os pacotes uma vez que executados. Caso queira saber mais sobre o recurso acesse este artigo.

Terminal rodando o script para criar um projeto frontity

Quando executado o comando as o recurso irá rodar um passo-a-passo, com duas perguntas a primeira qual será o tema inicial Mars theme ou Twenty Twenty e a segunda pergunta caso queira se inscrever na newsletter do Frontity. Uma vez criado podemos entrar na pasta que criamos e rodar a nossa a aplicação em modo desenvolvimento:

cd frontity-tutorial && npx frontity dev

Agora acessando a pasta frontity-tutorial temos a seguinte estrutura:

my-app/ |__ node_modules/ |__ package.json |__ frontity.settings.js |__ favicon.ico |__ packages/ |__ mars-theme/

Uma vez que rodamos frontity em modo desenvolvimento teremos nossa aplicação rodando no endereço localhost:3000

Tema mars rodando no localhost

Como podemos ver a nossa aplicação está lendo posts de uma aplicação WordPress, mas precisamos adicionar a nossa própria aplicação, caso esteja rodando uma aplicação local você também pode apontar para ela. Mas no meu teste eu vou utilizar o meu blog pessoal e para isso precisamos alterar as configurações do nosso projeto no arquivo frontity.settings.js que contém o seguinte código

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "https://test.frontity.org", "title": "Test Frontity Blog", "description": "WordPress installation for Frontity development" } }, "packages": [ { "name": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Nature", "/category/nature/" ], [ "Travel", "/category/travel/" ], [ "Japan", "/tag/japan/" ], [ "About Us", "/about-us/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://test.frontity.org/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;
Code language: JavaScript (javascript)

Como podemos temos inicialmente algumas configurações do nosso projeto e na parte final temos um endereço guardado na propriedade API esse é um blog de test do frontity para o meu test irei substituir o endereço test.frontity.org por blog.fellyph.com.br assim teremos o seguinte resultado:

Tema inicial apontado para meu blog

Como podemos ver minha aplicação frontity passou a carregar os posts do meu blog pessoal mas o header ainda continua com o conteúdo antigo. Nesse caso essa informação é controlada pelo nosso arquivo de configuração nas propriedades título, descrição e os links pela propriedade menu, assim com a atualização o nosso arquivo ficará o seguinte:

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": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Tutoriais", "/category/tutoriais/" ], [ "Curso PWA", "/curso-online-progressive-web-apps/" ], [ "Sobre", "/sobre/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "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 você navegar pela a aplicação verá que todos os posts páginas de categorias serão renderizados. Agora o próximo passo caso queira alterar o tema padrão você irá precisar ir na pasta packages/mars-theme/ para entender mais sobre acesse a documentação do tema.

Mas para essa série de posts vamos criar o nosso tema do zero e entender os conceitos por trás do Frontity mas isso eu irei deixar guardado para o próximo post. Para ler mais posts sobre WordPress acesse a página da categoria WordPress.

Categorias
AMP Accelerated mobile pages Geral WordPress

Plugin Web Stories do Google versão 1.0

Recentemente fiz um post testando a versão beta do plugin e na semana passada saiu a versão 1.0 do plugin. Com uma série de correções e melhorias. Nesse post iremos falar sobre as novidades do plugin em sua versão 1.o.

Plugin oficial do google para web stories

1 – Mudança dos endereços

Umas das mudanças da versão beta para a versão final foi a alteração do URL /stories/ para /web-stories/. O agora todos os seus stories ficarão na pasta web-stories mas isso será mais relevante caso tenha utilizado o plugin na versão beta.

2 -Salvar cores e fontes

Umas dos pontos que tinha até criado uma issue no github era a opção de criar opções pré-definidas para fontes e cores. Agora na versão 1.0 temos a opção de salvar cores estilos de texto.

Opções salvas no editor visual

3 – Melhorias em acessibilidade

Uma série de melhorias relacionadas a acessibilidade foram incluídas nessa versão sempre quando o elemento possui um contexto de acessibilidade uma aba de acessibilidade será exibida no menu de contexto, como podemos ver na imagem a seguir:

Images e vídeos possuem a opção de adicionar texto descritivo

Além de melhorias referentes a conteúdo o editor visual também possui melhorias, como teclas de atalhos e navegação e edição via teclado.

4 – Integração com imagens e vídeos do Unsplash

Imagens e vídeos tem um importante papel da criação do seu web stories ter uma imagem relativa ao seu conteúdo demanda tempo para seleção e upload desse conteúdo. Com o plugin de web stories possui uma integração com o repositório de imagens unsplash.

Integração com o repositório de imagens unsplash

5 – Canal Google Web Creators

Umas das novidades junto com o plugin foi o lançamento do canal Google Web Creators, uma iniciativa para apoiar criadores de conteúdo na Web.

Vídeo de introdução do Google Web Creators

Então essas são as novidades que eu gostaria de listar em breve estará saindo mais um vídeo no canal sobre Web Stories. Caso queira ler mais posts sobre o WordPress acesse a página da categoria.

Categorias
WordPress

Introdução ao Frontity para WordPress

Recentemente conheci o framework front-end Frontity assistindo o Meetup to WordPress São Paulo sobre a ferramenta, foi uma introdução sobre o conceito por trás do framework sem tocar muito da parte do código.

Para você que não conhece o Frontity é um framework escrito em react para realizar integração com uma instalação headless do WordPress. O conceito do WordPress headless utiliza a aplicação somente para servir dados via REST API. A vantagem desse conceito é que conseguimos criar diferentes aplicações utilizando a mesma base de dados.

Depois do meetup decidi fazer minhas pesquisas e acabei achando esse workshop realizado no JSNation em junho desse ano é um workshop(inglês) de 3 horas que aborda bastante coisa do framework:

O workshop esclareceu diversos pontos é um pouco longo mas o ritmo ajuda bastante quem está começando. Resumindo a arquitetura da aplicação com frontity:

Distribuição de uma aplicação utilizando frontity

Esse tipo de integração é possível com outros frameworks como Next.js e Gatsby.js mas com uma diferença Frontity é totalmente focado em WordPress. Podemos descrever o framework como uma alternativa para renderização de uma aplicação WP.

Criando o Primeiro projeto com Frontity

Segundo a documentação do frontity o processo de criação é dividido em 4 etapas:

1 – Criando um projeto

Os pré-requisitos para criação de um projeto frontity são: node instalado em nossa máquina e um terminal de linha de comando. Com esses requisitos o próximo passo é criar uma aplicação utilizando npx.

npx frontity create my-app

O processo de instalação irá criar um passo-a-passo onde você irá definir alguns items do projeto como um tema inicial.

2- Conectando frontity com seu projeto WordPress

Depois que criamos nosso projeto é chegada a hora de conectar nossa aplicação frontity com WordPress. Para isso vamos em um arquivo chamado frontity.settings.js e passamos o endereço da REST API da nossa aplicação WordPress:

//frontity.settings.js export const settings = { packages: [ { name: "@frontity/wp-source", state: { source: { api: "https://blog.fellyph.com.br/wp-json" }, }, } ], };
Code language: JavaScript (javascript)

No meu caso eu utilizei o endereço da rest api do meu blog blog.fellyph.com.br/wp-json

3 – Estilização

Frontity e WordPress conectados é a hora de estilizar o nosso tema para isso precisamos ter conhecimento em dois items chaves React e CSS-in-JS. Mas frontity fornece uma serie de ferramentas que abstraem alguns items com por exemplo na estilização:

import { styled } from "frontity"; const StyledDiv = styled.div` width: 100%; text-align: center; color: white; `;
Code language: JavaScript (javascript)

4 – Publicando seu projeto

Frontity possui ferramentas para ajudar na publicação do seu projeto ou em uma plataforma node.js ou plataforma serverless. Para isso temos dois comandos:

npx frontity build

Esse comando irá gerar uma pasta com os arquivos compilados contendo seu projeto em react e servidor. A pasta gerada pelo build pode ser hospedada em qualquer serviço de hospedagem para aplicações node.

npx frontity serve

Esse comando irá utilizar a pasta criada pelo comando build para lançar sua aplicação em produção.

Mas claro se você já está ambientado com o ecossistema react alguns items que eu comentei parece básico. Caso contrario sera uma nova stack para aprender. Items como React e CSS-in-JS pode ser bastante fora do padrão caso esteja acostumado com php+html+css tradicional.

Mesmo sendo uma Grande mudança todo esse novo ecossistema vem com uma série de benefícios e ferramentas que ajudam a sua produtividade.

Benefícios

E quais são os benefícios de construir uma aplicação utilizando frontity? Para isso vou listar alguns items e entrar em mais detalhes:

React: Podemos dizer que o uso de react é um benefício uma plataforma estável com uma vasta comunidade. Adicionando React você trás uma série de benefícios da plataforma para o seu projeto. A capacidade de componentização da sua interface, melhor controle de estado da sua aplicação e performance.

Atualização de conteúdo em tempo real: Caso desenvolva com React você já está acostumado em ver em tempo real as modificações que você realiza nos arquivos do seu template sendo replicados no ambiente de teste sem a necessidade de recarregar a página no browser.

Pre-configuração de projeto e CLI: Desde o inicio do projeto frontity possui uma série de comandos de terminal que ajuda na criação de projetos, temas, teste, desenvolvimento e publicação.

Pacotes de bibliotecas focadas no WordPress: É possível conectar qualquer aplicação React com um WordPress headless mas o Frontity possui uma série de pacotes que irão ajudar no desenvolvimento de sua aplicação:

  • frontity: possui o core da sua aplicação com styled components, emotion, controle de estato, açõe e as integrações com o core do react
  • @frontity/tiny-router: pacote que faz o gerenciamento de rotas de sua aplicação.
  • @frontity/wp-source: pacote responsável por consultar os dados em sua aplicação WordPress
  • @frontity/components: possui uma coleção de componentes que irão auxiliar na construção de interfaces.
  • @frontity/hooks: possui o comportamento similar ao dos hooks do WordPress
  • @frontity/html2react: auxilia a renderizar conteúdo do post especialmente conteúdo formatado por page builders.
  • @frontity/head-tags: ajuda a dicionar informações em nossa tag head.

Melhorias de performance: Com framework conseguimos realizar code-splitting e trabalhamos com CSS-in-JS isso possibilita atrelar o estilo ao componente assim só carregamos o estilo dos elementos que estão sendo exibidos na tela. Além disso temos a possibilidade de utilizar recursos com lazy loading e prefetch.

Conclusão

Particularmente fiquei muito animado com o framework abre uma nova possibilidade para desenvolvimento de temas WordPress e os primeiros testes foram animadores. Estou preparando vídeos para o meu canal para mostrar passo-a-passo como criar uma tema com Frontity.

Para agilizar o processo de criação dos vídeos pedi autorização da Alessandra Spalato para utilizar o tema que ela desenvolveu como demo:

Esse será o tema que iremos construir nos próximos tutoriais sobre Frotity. Então vamos fechando esse post por aqui para mais posts sobre WordPress acesse a página da categoria WordPress.