Versão 5.4, 27 de mar de 2019

Download

Baixe o Pinegrow 5.41 »

Update 5.41

O update 5.41 corrige os problemas com ações de WordPress desaparecendo do menu contextual e de compilação SASS quando usada uma extensão .scss.

Novo menu contextual de elementos

Nós refizemos o menu contextual de elementos que é acessado clicando no botão direito do mouse em elementos na visualização de página e no painel de árvore:

A adição de sub-menus nos permitiu organizar melhor o menu e ainda colocar mais comandos.

Por exemplo, agora novos elementos podem ser adicionados à página diretamente do menu.

O submenu Insert (Inserir) contém todos os elementos e componentes do painel de Biblioteca:

O menu Inserir também oferece controle e pré-visualização do posicionamento do novo elemento:

Dica: Segure a tecla SHIFT ao clicar com o botão direito do mouse para ir direto ao menu Inserir.

Comandos que alteram a estrutura HTML do elemento estão reunidos no submenu Transform (Transformar):

O submenu Select (Selecionar) permite selecionar rapidamente os objetos pai e filhos do elemento atual:

O submenu Paste (Colar) lista os itens recentes da área de transferência e oferece controle no posicionamento de elementos HTML:

Novas ações de Copiar e Colar

Copie e cole ações de um elemento para outro. Use o submenu Copy (Copiar) e escolha qual ação copiar, ou todas:

Ou ainda, clique no ícone Copy próximo da ação selecionada nos painéis Ação ou WordPress:

Para copiar todas as ações do elemento clique no ícone Copy próximo do nome do elemento:

Use Paste (Colar) para adicionar as ações copiadas para outro elemento.

Compilador de folhas de estilos SASS

O Pinegrow agora calcula corretamente projetos com estruturas SASS complexas que contém múltiplos arquivos importados com o mesmo nome, como por exemplo variables/_buttons, mixins/_buttons etc.

Construtor de temas WordPress

Adicionar ações usando o menu contextual

Ações do WordPress agora podem ser adicionadas a elementos usando o menu contextual. Clique com o botão direito do mouse em um elemento na página ou na árvore e escolha uma ação do submenu WordPress:

E, como mencionado acima, ações do WordPress podem ser copiadas e coladas entre elementos.

Melhoria na exibição de ações de WordPress no painel de Árvore

No painel de Árvore, ações agora são exibidas antes do snippet de texto, tornando mais fácil de ser identificadas.

Ações como campo do Personalizador, seção do campo do Personalizador e seção do Post mostram seu argumento mais importante bem na exibição da Árvore:

Contornar todos os elementos com ações de WordPress

Use a nova ajuda visual que mostra um contorno tracejado em todos os elementos que possuem ações de WordPress:

Post e Loop

Usando o id original no elemento de post

A ação inteligente “Post & Loop” automaticamente configura o atributo id do elemento de post conforme o valor de id providenciado pelo WordPress. Isso pode interferir com a estilização ou o código Javascript que aponta elementos pelo seus ids.

A ação agora oferece a opção de não modificar o atributo id no caso do atributo id do elemento post já estar já configurado:

Note que ter um id de elemento fixo em um elemento de post id fixo só faz sentido se apenas um item de post é exibido. Caso contrário, haveriam vários elementos com um mesmo id.

Exibindo uma série de elementos

Às vezes queremos exibir alguns dos posts que fazem parte do loop do WordPress loop (ou query customizado). Por exemplo, se desejarmos exibir o primeiro post de maneira diferente dos outros. Ou temos posições pré-definidas para posts individuais e não queremos exibí-los todos no loop.

O novo recurso Range of items to show (série de elementos a mostrar) nos permite especificar quais dos itens do query do loop que queremos exibir:

Podemos especificar um post único, usando 0 (zero) para o primeiro post, ou usar por exemplo 1-3 para exibir o 2º, 3º e 4º posts.

Note: a contagem de posts começa no 0.

Note: esse parâmetro não afeta quais posts são buscados no banco de dados WordPress, mas apenas especificar quais posts enviados pelo query do WordPress devam ser exibidos.

O mesmo argumento está disponível também na ação “The Loop”.

Menu - Smart

O comportamento dessa ação foi alterado. Agora ele o andador do meu inteligente por padrão nas página que não utilizam Bootstrap (menus do Bootstrap são usados lá). O andador do menu Smart replica a estrutura de leiaute HTML exata dos itens de menu, ao invés de usar o markup padrão do WordPress.

A ação agora está mais inteligente em entender qual a classe é usada para indicar o item do menu ativo.

Como acontece com todas as ações inteligentes, se precisar de mais controle nelas altere-as para ações de WordPress.

Seções e Campos do Personalizador reutilizáveis

Seções do Personalizador (usando ações inteligentes ou WP) agora tem um checkbox “Usar id da seção como prefixo para campos incluídos”. Quando checado, o id da seção é usado como prefixo para todos os campos do Personalizador incluídos.

Isso é bem útil em vários cenários. Vamos ver um exemplo.

Imagine que temos 4 seções que exibem trabalhos anteriores em nosso website de portfólio. Cada seção contém campos para nome da empresa, o cargo dentro da empresa e a tempo de trabalho nela. Nós queremos usar o Personalizador para controlar o conteúdo desses valores.

Normalmente, temos que configurar 4 campos únicos para nome das empresas, 4 para os cargos e 4 para o tempos - cada um com seu id único. Isso faz ser impossível a configuração usando apenas copiar e colar de ação de um item pra outro, ou mesmo definir esses blocos como componentes reutilizáveis.

Agora nós podemos checar o “Use section id as prefix…” na 1ª seção com o exp1 e definir ids simples - company, job, duration - aos campos da seção. Quando o Pinegrow exportar o tema ele irá anexar o id de seção “exp1_” aos ids dos campos, assim criando os ids de campos únicos “exp1_company”, “exp1_job” e “exp1_duration”.

Se copiarmos e colarmos essas ações nos elementos relacionados a outras seções de trabalhos iremos obter os campos experience2\_company e assim por diante, sempre que a opção “Use section id as prefix…” estiver checada nas ações da seção do Personalizador.

Nós ainda podemos ir um passo além e criar um componente reutilizável no painel de Ações com atributos editáveis que que controlarão os id e nome da seção.

Depois podemos fazer os outros três itens como instâncias deste componente:

E então usar o painel de Propriedades para configurar id e nome da seção das instâncias de Experiência de trabalho:

Usando campos globais do personalizador dentro de uma seção

Quando “Use section id as prefix…” está sendo usado, o id da seção será pré-anexados a todos os ids de campo - independente se seus campos estão registrados ou apenas em uso.

Se quisermos simplesmente usar um valor de um campo de personalizador de outra seção - por exemplo, um valor de cor definido na seção Cores - podemos usar a ação “Display theme mod” e checar sua opção “Don’t use enclosing section id as field prefix”.