Categorias
WordPress

Finalmente Gutenberg

No começo de dezembro de 2018 foi lançada a versão 5.0 do WordPress, posso falar de longe essa foi a versão mais controversa que eu já vi durante esses 10 anos que acompanho a plataforma. O ponto em questão foi o editor Gutenberg um update que muda toda a forma de se trabalhar com conteúdo dentro do WordPress. 

A nova forma de gerenciamento de conteúdo, vem com grandes mudanças devido a necessidade simples: evolução da plataforma, esse trabalho vem sendo realizado durante 2 anos, diversos testes e updates foram feitos. O projeto já venho acompanhando desde 2017, mas fiquei curioso para ver como seria a aceitação no twitter muitas e o resultado foi muitas pessoas reclamaram sobre o novo update. Um resumo do que eu vi durante essa semana foi:

1 – “comunidade” não foi ouvida

Muitas das reclamações no twitter foram que o update foi feito sem eles ouvirem a comunidade, se você esta mesmo engajado na comunidade, você deve ter ouvido falar do projeto Gutenberg a dois anos atrás, no último WordCamp US um dos temas chaves foi o Gutenberg, chats sobre updates eram realizados eram realizados. A resposta sim a comunidade foi ouvida. Muitas pessoas não sabem onde participar, isso é normal, outras só lembram do forum quando a coisa da ruim. Mas caso você queira participar: Meetups, WordCamps, Slack, forum são as formas oficiais de participar da comunidade. Twitter e facebook não são canais oficiais mas como o Mat Mullenweg falou no último WordCamp US comentários relevantes foram lidos nessas plataformas.

2 – Voce não é a maioria

Muito complicado quando entramos numa bolha pensamos que todo o mundo está no mesmo nível técnico que nós. Nos primeiros minutos da apresentação do Matt Mullenweg mostrou testes com usuários tentando colocar uma imagem ao lado de um texto, pode ser uma simples tarefa para você que sabe HTML e WP. Mas os testes mostram quão complexo é para um simples usuário e isso corresponde a +90% da internet. As principais mudanças do Gutenberg focam nesse grupo que mantem a plataforma.

3 – Acomodação

O conceitos de blocos é algo que afeta diretamente o ecossistema, está visível para todos os usuários diferente de uma REST API que funciona por trás das cortinas, um cliente normalmente não vai pedir uma REST API, Gutenberg vai estar lá para o usuário final vai ser comum clientes começarem a pedir blocos customizados. Aprender Gutenberg vai passar a ser algo relevante, mas a palavra aprender pode ser motivante para alguns devs e extremamente frustrante para outros. Uma pequena parte desse grupo que não gosta de atualizações, simplesmente lutam contra e fazem bastante barulho parecendo um grupo ainda maior. Dois anos atrás Matt veio na apresentação e disse estudem JavaScript e hoje o Gutenberg está ai com uma série de novas tecnologias que precisamos dominar, Dois pontos chave React e JavaScript e outras secundárias como EcmaScript 6, babel e Webpack. Já estão aparecendo soluções para simplificar nossa vida mas considero extremamente importante você ter uma base nessas tecnologias.

4 – Uma estrela não é contribuição

Uma chuva de reviews negativos no Gutenberg plugin, mas esse plugin foi diponibilizado para teste, essa era ideia os usuários testarem identificarem problemas. Era esperado que o plugin apresentasse algum erro, o usuário reportava a issue para ser corrigida. Marcar com uma estrela o plugin sem nenhum feedback não ajuda a plataforma. 

5 – Está tudo bem, você pode usar o editor clássico

O Gutenberg está ai mas você não é obrigado a utilizar, o desespero de muitos usuário poderia se resolvido com um simples clique para instalar o editor clássico novamente. O editor clássico não morreu vai estar disponível por mais dois anos. Gutenberg não está 100% tem muito para evoluir, esse update é um shift que vai revolucionar a plataforma, muita coisa ainda não está clara até o Matt Mullenweg, mencionou em sua palestra no WordCamp US, no decorrer do ano muita coisa vai ser definida, não por ele mas pela comunidade, como será feita a adoção, como os usuários irão reagir as mudanças.

A fase dois do Gutenberg já foi definido: https://make.wordpress.org/core/2018/10/05/gutenberg-phase-2-leads/

Caso queira acompanhar os updates do Gutenberg só manter o plugin instalado, as novas features serão criadas na versão do editor como plugin: https://wordpress.org/plugins/gutenberg/

Categorias
Web WordPress

Trabalhando com shortcodes no WordPress

Vamos falar sobre shortcode nesse post, mas antes vou contar uma história para vocês. Semana passada me deparei com um problemas, daqueles que você só enxerga em produção. Desenvolvendo um tema para um freela, tudo ok no ambiente de teste. Quando o site foi para produção nenhum vídeo carregava.

Entrei para verificar o conteúdo, nele tinha uma tag video.

quando bati o olho pensei duas coisas ou é um shortcode antigo ou é algo do jetpack. Primeiro passo, verificar os plugins se estão ativos, em seguida atualizar o WP, por fim atualizar o Jetpack. Resultado nada!

Você faz aquele exercício o que foi que eu fiz antes “desabilitei o tema anterior” quando fui olhar o código do tema antigo estava lá o shortcode video. Shortcode é um recurso muito útil para que está criando um tema ou plugin. Mas se está criando um short code para o tema ele deve ser totalmente vinculado ao tema, ou seja, um recurso que só faça sentido existir naquele tema ou plugin.

Exemplo, a tag vídeo estava presente em todos os posts mudou o tema, quebrou todo o site. Para alguns recursos hoje em dia não faz muito sentido, um caso é o youtube basta colar o link da url no editor visual que o WP já cria um embed. Optar por um recurso do WP independente do tem ou plugin a funcionalidade vai estar lá.

Ok, vamos para a parte legal. Como eu crio um shortcode?

Primeiro temos que adicionar em nosso function.php o seguinte hook:

add_shortcode( $tag , $func );

Ele espera dois parâmetros, nome da tag e a função que ele irá chamar na prática ele vai ficar da seguinte forma:

<?php  

function say_hello($atts) {
	return '<p> Olá meu nome é'.$atts['nome'].'</p> ';
}

add_shortcode('hello', 'say_hello');
?>

Exemplo acima criamos o shortcode “hello” quando a shortcode api encontrar a tag [hello] dentro do meu post saberá que tem que chamar a função say_hello, basicamente ela cria um html como o texto olá meu nome é “x”. Notem que concateno com um valor que passamos como parâmetro na função.

Ela espera que passamos um atributo nome, por exemplo, [hello nome="ze"]. Mas se caso o usuário não passar o valor o que vai acontecer ? ZICA!

Mas podemos definir um atributo default para resolver este problema:

<?php
function say_hello($atts) {
	$atts = shortcode_atts( array(
				'nome' => 'zezinho'
			), $atts, 'hello' );
	return '<p> Olá meu nome é'.$atts['nome'].'</p> ';
}

add_shortcode('hello', 'say_hello');
?>

No caso usei um exemplo simples só montar um texto p. Mas poderíamos montar um componente de share, um componente de sugestão de produtos, o componente de publicidade. Lembrando que o recurso fica atrelado ao tema ou plugin, quer saber mais? Também adicionei uma versão em português no codex do WordPress: https://codex.wordpress.org/pt-br:Function_Reference/add_shortcode