Categorias
WordPress

Criando seu próprio bloco Gutenberg

Continuando a série sobre o Gutenberg nesse post vamos criar o nosso primeiro bloco Gutenberg, para esse exercício vamos nos basear no repositório oficial do WordPress, lá vamos encontrar uma série de exemplos de como trabalhar com blocos Gutenberg.

No desenvolvimento de blocos temos a possibilidade de criar blocos com EcmaScript 5 e ESNext. Neste tutorial vamos abordar os exemplos com ES5.

Escrevendo o primeiro bloco

Vamos partir do principio mais básico, exibir um bloco estático HTML. Essa função pode ser útil caso desejamos criar uma bloco de assinatura ou contato por exemplo. Nos posts seguintes vamos incrementando essa solução.

Para esse bloco temos dois conceitos importantes, o primeiro ele será adicionado como um plugin é uma técnica recomendada pela documentação, o segundo ponto toda o conteúdo HTML será definido por uma JavaScript. Então com essas premissas vamos ter dois arquivos base em nosso exemplo, o PHP(index.php) que irá inicializar nosso plugin e o Script(primeiro-bloco.js) responsável pelo conteúdo.

index.php

No index.php vamos gerenciar os passos necessários do nosso plugin que irá criar o nosso bloco Gutenberg, nele temos uma atenção especial para duas funções register_block_type e wp_register_script. 

Register_block_type será responsável por registrar o nosso dentro do WordPress como parâmentro ele espera, quais serão os scripts e estilos necessários para executar esse bloco, tanto dentro de editor como para o usuário final no front-end de nossa aplicação.

Wp_register_script será responsável por a tarefa de carregar o script do nosso bloco para o WordPress, assim o WordPress sabe a hora exata de carregar o script e qual serão suas dependências de script dentro da aplicação. Para ficar mais claro vamos ao nosso exemplo:

<?php

/**
 * Plugin Name: Gutenberg tutorial
 * Plugin URI: https://github.com/fellyph/Gutenberg-tutorials
 * Description: Este tutorial ensina como criar um bloco Gutenberg https://blog.fellyph.com.br/wordpress-2/criando-seu-proprio-bloco-gutenberg/.
 * Version: 1.0
 * Author: fellyph
 */

defined( 'ABSPATH' ) || exit;

/**
 * 1 - Criando nosso primeiro bloco
 *    1.1 - precisamos registrar nosso script para ser adicionado na função register_block
 *    1.2 - registramos nosso block type passando nosso script
 */
function meu_primeiro_bloco_gutenberg () {

	if ( ! function_exists( 'register_block_type' ) ) {
		// Checamos se temos suporte a função register_block_type antes de tudo.
		return;
	}

	wp_register_script(
		'tutorial-gutenberg-01',
		plugins_url( 'primeiro-bloco.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'primeiro-bloco.js' )
	);

	register_block_type( 'fellyph/tutorial-01', array(
		'editor_script' => 'tutorial-gutenberg-01',
	) );
}

add_action( 'init', 'meu_primeiro_bloco_gutenberg' );

Notem quando registramos nosso script temos duas dependências wp-blocks e wp-element são requisitos mínimos para trabalhar com blocos, para entender mais sobre essas duas dependências:

  • wp-blocks inclui registro de tipos de blocos e mêcanica como os itens são armazenados formulários e funções relacionadas para cada evento específico quando o bloco é salvo ou exibido em nosso front-end
  • wp-element inclui uma camada de abstração pada os blocos Gutenberg, trás a renderização desses elementos do nosso back-end para nosso front-end.

JavaScript do nosso bloco

/**
 * 1 - primeiro bloco Gutenberg com ES5
 */
( function( blocks, element ) {
	var el = element.createElement;

	// criando estilo para nosso editor
	var blockStyle = {
		backgroundColor: 'green',
		color: 'white',
    padding: '2em',
    border: '3px solid black'
	};

//criando estilo para nosso front-end
	var blockStyleFront = {
		backgroundColor: 'blue',
		color: 'white',
    padding: '2em',
    border: '3px solid black'
	};

	blocks.registerBlockType( 'fellyph/tutorial-01', {
		title: 'Primeiro bloco Gutenberg',
		icon: 'universal-access-alt',
    category: 'layout',
  
		edit: function() {
			return el(
				'p',
				{ style: blockStyle },
				'Este conteúdo será exibido no editor.'
			);
		},
		save: function() {
			return el(
				'p',
				{ style: blockStyleFront },
				'Este conteúdo será exibido para o usuário final.'
			);
		},
	} );
}(
	window.wp.blocks,
	window.wp.element
) );

Lendo nosso código fica evidente a importância de nossas dependências vamos agora passar por alguns pontos chaves. O código Javascript temos o uso de IIFE para garantir que iremos rodar nosso script quando tivemos acesso aos scripts carregados pelo WordPress que estarão disponíveis globalmente por window.wp.blocks e window.wp.element

Dentro de nossa função armazenamos a função createElement responsável por criar nosso markup em uma variável “el” e na sequência criamos dois objetos responsáveis pelo estilo do nosso bloco blockStyle e blockStyleFront.

Com a inicialização de nossas variáveis vamos agora utilizar o wp-blocks, será carregado como blocks dentro do nosso script, assim, chamamos a função blocks.registerBlockType responsável por criar nosso bloco nela passamos o id do nosso bloco ele precisa ser único para evitar conflitos dentro de nossa aplicação, título(title), ícone(icon), categoria(category), a função que será chamada no editor(edit) e a função que será salva no front-end de nossa aplicação(save).

Ativando nosso primeiro bloco Gutenberg

Com os nosso plugin/bloco Gutenberg pronto, chegou a hora de ativa-lo, primeiramente devemos armazenar os dois arquivos em uma pasta para fazer a instalação como plugin.

Adicionamos a pasta de nosso plugin em wp-content / plugins

No meu caso eu criei a pasta gutenberg-tutoriais mas pode ser qualquer nome para essa pasta. Após a adição da pasta em minha aplicação WordPress precisamos instalar o nosso plugin.

Se tudo ocorrer bem vamos visualizar nosso plugin em nosso dashboard. Agora vamos ativar e testar o nosso plugin

Como será exibido o nosso bloco

Nosso bloco ativado irá aparecer na categoria layout como definimos em nosso script e podemos ver as outras configurações como o título “primeiro bloco gutenberg”.

Quando adicionamos o bloco ele irá aparecer da seguinte forma:

Nosso bloco Gutenberg em nosso editor.

Salvando o nosso bloco o resultado será o seguinte:

Notem que as cores dos nossos blocos mudam de uma para outros isso foi adicionado de forma proposital. Podemos adicionar markups e estilos diferentes para o bloco que será exibido no editor e no front-end de nossa aplicação.

Fechamos por aqui nosso primeiro post, vamos evoluindo nossos exercícios a partir desse ponto. Para acompanhar os exercícios só seguir o repositório no github: https://github.com/fellyph/Gutenberg-tutorials

Categorias
Eventos WordPress

WordCamp Europe Second day recap

The second day of WordCamp Europe I saw some familiar faces that I saw the last day, for example, Kat a Woocommerce employee, she is responsible for documenting the plugins and API inside Woothemes. Andres the guy that works at WPML, Julia a German girl works as a freelancer in Berlin. Theses things make the event easier because I started to know the people and know whom I asked what I need do.

My Task

Now was in the registration; this time was a little hard because, I needed to give many different pieces of information about the event, about the rules, how solved some small problems. But was good to practice my English.

After the registration, I finish my tasks in te second day and at 11 AM I went to Halle E to watch the lectures, the first that I saw was about rest API. I think this is the focus of Automatic in this time, Calypso, Rest API and REACT are present in all lectures about development. If you haven’t studied yet, you need look theses technologies.

When the second day ended, I was so tired but felt everything was good.

After the second day was the after party, I had to meet my friends in another party and just pass to say hello and decided to walk around the city before went to another place and this was the best idea. Wien at night is so beautiful, the architecture, the city centre, the lights everything creates a wonderful atmosphere. The city is incredible. After I was little walking through the city, I meet my Brazilian friend that works in Mailpoet, there we talked about work, life in Europe and remote jobs.

The contributor day

The last day was the contributor day, there were many tracks, that we could contribute to:

  • Community
  • Marketing
  • Theme Review
  • WordPress Core
  • Rest API
  • Translation

There we needed to choose one of these themes, and I decided Theme review was a good experience, in the first part, the Leader developer shows how to review a theme and give many tips. In the second part, we choose a Theme in the repository to review. For me was the first time that I reviewed a theme in the WordPress repository before I didn’t figure out this was so simple.

Last words

In resume work as a volunteer was the best thing that I decided to do in my time in Europe, I knew many people, getting touch with old friends. Was a big opportunity to know the European WordPress Community and was my first and biggest event as crew in Europe. Now I will start looking for another event here in Europe.

Categorias
Eventos WordPress

Programação do 2º Wordtalks DRC

Dia 10 de novembro acontece o segundo Wordtalks é um encontro voltado para debater temas relacionados a desenvolvimento web e WordPress. Por ser um evento com a grade organizada por alunos tem o objetivo de apresentar e debater projetos ou técnicas que os alunos utilizam em seu dia-a-dia.

Cada palestrante tem 20 min para apresentar sua proposta e 10 min para debate. Além das apresentações dos alunos, cada encontro terá a participação de um convidado. O encontro começa as 10h e seu término é as 13h. Duas horas de muita informação e o melhor de tudo isso que você não paga nada.

No segundo encontro o nosso convidado será:

Leonardo Lima

Front-end Developer no portal UOL e responsável pelo projeto de reestruturação do portal UOL mobile. Atua como desenvolvedor web desde 2002, é preocupado com performance, padronização de projetos e reutilização de código. Curioso por novas tecnologias e ferramentas, estudante de Ciência da Computação no Mackenzie.

Leonardo  levará o seguinte tema para o encontro : Pré-processadores de CSS: SASS, LESS e Grid Frameworks.

Além do convidado teremos mais 3 palestras, a programação do encontro ficará da seguinte forma :

10h – Abertura

10:20 – Criando widgets em 20 min.
Palestrante: Fellyph Cintra.
Resumo da apresentação: Apresentação estilo “se vira nos 20”. Em 20 minutos mostrarei os Passos básicos para criar uma widget.

10:50 – Hospedando um site em WordPress
Palestrante: Luis Felipe Veiga Correa
Resumo da apresentação: Pontos importantes para considerar ao contratar um plano de hospedagem para um site em WordPress e as diferenças entre os tipos de servidores.
Site: www.dev2web.com.br

11:30 – SEO para WordPress
Palestrante: Rodrigo Simoni
Resumo da apresentação: O WordPress é um ótimo CMS para trabalhar com SEO. Porém, há uma série de técnicas de SEO On Page, além de alguns plugins que são essenciais e obrigatórios para que seu site possa ganhar visibilidade e conseguir bons posicionamentos nas Serps do Google. Sitemap, Robots, URL amigáveis, canonical tags, conteúdo relevante, long tails e outras técnicas e ferramentas que farão toda a diferença.

Site: www.brandweb.com.br

12:10 – Pré-processadores de CSS: SASS, LESS e Grid Frameworks.
Palestrante: Leonardo Lima
Resumo da apresentação: Cansado de reescrever o mesmo código de css a cada elemento novo de seu layout? De ter que mudar os padrões de tipografia e cores em diversas linhas do seu css? Então conheça e entenda mais sobre Pré-processadores de css, o que são, quais existem, como instalar e o principal: como usar!

Site: http://llaraujo.com/

Para participar do encontro basta fazer o cadastro no link : https://www.fellyph.com.br/blog/eventos/inscricao-para-o-segundo-wordtalks/.

O encontro ocorre no auditório da DRC que fica no seguinte endereço :

Rua Joaquim Floriano, 733 – 10º Andar
São Paulo, 04534-012


Exibir mapa ampliado

Categorias
Eventos Web WordPress

Pós Wordcamp São Paulo 2012

8:30 da manhã estava na puc, procurando o pessoal da organização do evento. Pessoas que nunca tinha visto na vida me apresentei aos organizadores “Olá meu nome é Fellyph” olharam pra mim e perguntaram “ah você quer ajudar?”. Perguntei como poderia ajudar, Guilherme olhou pra mim que é esse cara e respondeu você pode ajudar a separar as camisas. Falar a verdade não sei o nome de todo mundo.

Comecei a separar as camisas e batendo o papo com o pessoal falei que meu nome era Fellyph com dois ll, um y e um ph, logo lembraram do meu nome na lista da organização. Longe de ser uma peça que ajudou efetivamente na organização, mas em alguns momentos acompanhava a discussão e dava algumas opiniões sobre alguns casos. Mas foi legal ver o corre do pessoal e ver a dificuldade que é organizar alguns eventos. Ajudei em outros eventos como iSeminar(apenas na divulgação e planejamento), mas nunca tinha visto a dor de cabeça de arrumar um local para o evento correr atrás de patrocinador entre outras coisas que realmente isso é osso.

Depois das 9:00 fiquei no credenciamento, distribuindo camisas e passando algumas informações para os participantes. Entre conhecidos e desconhecidos cumprimentava cada um e via em alguns a ansiedade de cada um em começar o evento. Alguns palestrantes e participantes chegavam com suas malas, vindo de longe Minas Gerais , Goiás, Ceará, Rio de Janeiro e Rio Grande. Esse foram os estados que identifiquei. Uma responsabilidade muito grande em atender as expectativas de quem vinha de tão longe.

As 9:30 começou o evento ainda estava no meio do credenciamento, não tive a oportunidade de acompanhar. Depois que diminuiu o fluxo no credenciamento fui dar uma olhada no coffee e que senhor coffee, fornecido pela UOL(Agradecendo aqui o apoio ao evento). No meio do coffee encontro amigos e ex-alunos(também amigos) sempre bom reencontrar a galera, principalmente ver a evolução dos alunos depois que saíram do curso os caminhos que tomaram.

Coffee fornecido pela UOL

Mas qual é o porque desse pequeno relato, falei um pouco da minha mini contribuição do evento. Por que é sempre bom contribuir e apoiar eventos com esse objetivo, sem objetivo financeiro apenas apoiar e fortalecer a comunidade WordPress. Se você tem uma ideia de criar um wordcamp em sua região corra atrás porque vale super a pena desenvolver eventos desse porte.

Por volta das 11:20 começou a palestra Matías Ventura, tive a oportunidade de acompanhar rapidamente. Depois teve uma pausa para o almoço foi a hora de trocar os cartões(vergonha eu não tenho cartão de visita).

Resultado do almoço

No inicio da segunda parte do evento rolou o light talks pra mim foi um dos melhores momentos, palestras rápidas com boas informações. Duas dicas muito boas foram os plugins desenvolvidos pela galera um é o get post image : http://vinicius.soylocoporti.org.br/get-post-image-wordpress-plugin/ desenvolvido pelo Vinicius, a funcionalidade básica dele é a seguinte ele associa tamanho de imagens a tipo de posts, ajudando bastante a diminuir a quantidade de imagens, quando você criar tamanhos personalizados. Outro plugin interessante é o Mapa de vista plugin desenvolvido pela equipe do hacklab http://mapasdevista.hacklab.com.br/ a funcionalidade básica desse plugin é associar um post a uma geolocalização em um map. Esses dois plugins podem gerar conteúdo para um post

Depois do lightalks fui acompanhar a palestra do Felipe Coelho falou um pouco sobre o processo de desenvolvimento de temas para WordPress, teve dois pontos que para mim foi interessante. Por sempre desenvolver temas comerciais para empresa nunca fui atento a dois pontos. A questão da localização ou internacionalização do seu tema, ou seja, deixa o tema com suporte para outros idiomas exemplo o tweenty eleven usa esse recurso e o outro ponto fazer a validação do tema. Os links a seguir foram mencionados pelo Felipe sobre validação e teste de temas:

http://codex.wordpress.org/Theme_Unit_Test
http://wordpress.org/extend/plugins/theme-check/

Ás 15:15 acompanhei a palestra do Diogenes sobre alta performance com wordpress, não sou um cara especialista em infra mas curti bastante a palestra. Por fim rolou a palestra sobre Malware e Segurança em WordPress com Bruno Borges, passou várias dicas de segurança tipos de ataques, chamou a atenção para uma questão no caso hoje em dia até o nosso Smartphone está vulnerável a ataques. Um dos links que ele compartilhou foi teste de segurança para sites wordpress : http://sitecheck.sucuri.net

Antes de publicar o post saiu o link palestra do Bruno Borges : http://blog.sucuri.net/2012/08/wordpress-security-presentation-in-portuguese.html

Infelizmente devido a correria acompanhei muito pouco as palestras mas posso falar do pouco que vi curti bastante. Fiz poucos comentários sobre as palestras confesso que estou aguardando os vídeos para acompanhar com mais calma.

Aviso quem participou do evento em breve será enviado um e-mail com o link para gerar o certificado de participação.

Finalizo aqui meu depoimento e gostaria de parabenizar os organizadores pelo evento estão de parabéns.

Categorias
Geral

OPORTUNIDADE – PROGRAMADOR PHP – RECIFE

a Fishy está em busca de programador PHP, pro-ativo, resolvedor de broncas e interessado.
Currículos para agoravai@fishy.com.br com assunto “Desenvolvedor PHP”

Requisitos:
Avançado: PHP /Javascript/JQuery/Arquitetura MVC

Intermediário: Linux/Apache/MySql/HTML/CSS

Básico: APIs de redes sociais (Facebook, Twitter etc)

Desejável: ASP.NET/C#/MS SQL