Introdução a visualização em lista

A Visualização de lista no editor de blocos ajuda você a navegar entre camadas de conteúdo e blocos aninhados. Quando você quiser selecionar e organizar blocos no Editor de Post e Página, ou mesmo em Aparência > Editor, veja o que a Visualização de Lista pode fazer.

Resultado de aprendizagem

1. Você poderá demonstrar a reordenação de itens usando a visualização de lista no Bloco de Loop de Consulta.
2. Você poderá acessar configurações de bloco adicionais na Visualização de lista.

Perguntas de compreensão

1. Você gostaria de uma maneira mais precisa de selecionar um único bloco dentro de blocos aninhados?
2. Você sabe como inserir blocos?

Transcrição

Olá. Bem-vindo ao Learn WordPress. Meu nome é Fellyph e nesse vídeo a gente vai ter uma introdução sobre visualização em lista. E o que você irá aprender nesse vídeo? A reordenação de blogs utilizando o recurso de visualização e lista bloquear a edição de blogs. A personalização de blocos como, por exemplo, o bloco de Loop de Consulta e como acessar configurações de bloco via o recurso de visualização em lista. Então, agora a gente vai pular para o nosso WordPress e eu vou mostrar esse recurso em ação. Então, aqui estamos dentro de uma edição. Depois, com esse conteúdo, eu incluí alguns blocos dentro dessa página. Então, temos algumas situações aqui que podemos ver o recurso de visualização em lista, em ação. Particularmente, eu vou trabalhar nesse bloco de três colunas, então a gente tem aqui uma distribuição dos elementos de imagem, texto e botão, sem uma padronização. Caso queira reordenar, por exemplo, o botão de compartilhe, eu posso selecionar nesse item. Como podemos ver aqui, eu não consigo mover esse elemento para cima, porque esse bloco faz parte de outro bloco, que é o bloco de botões. Ainda assim, a gente ainda não está no nível para mover esse bloco, então preciso selecionar mais um nível acima. Então vou selecionar o bloco de linha e a partir desse momento a gente consegue reordenar este elemento. Então, aqui, como podemos ver, a gente precisou de três cliques para fazer a reordenação desse elemento. Uma solução para esse problema é a utilização do recurso de visualização em lista. Então, para a gente acessar esse recurso, eu vou no menu superior esquerdo e selecionar o último ícone deste menu.

Então, passando o mouse sobre a gente, tem aqui a visualização e lista. Vou clicar nesse elemento, habilitar a visualização em lista e agora aqui a gente tem um resumo de todos os elementos que estão dentro desse post. Então, no caso do bloco em linha que estava selecionado antes de clicar na opção de visualização, quando selecionado o menu de visualização, ele mostrou diretamente o elemento que estava selecionado previamente. Então a gente pode visualizar outros elementos dentro de outros blocos. Então aqui, por exemplo, no bloco de colunas, eu tenho todas as colunas. Dentro desse bloco um eu posso acessar via menu de acordeão os elementos que estão dentro desse bloco, clicando na seta do lado esquerdo. Eu voltei à listagem de todos os elementos que estão dentro desta coluna, então vamos dizer que eu quero reordenar os elementos seguindo o padrão da primeira coluna, uma imagem, um texto e o botão de compartilhar. Então vamos aqui na segunda coluna. Vou selecionar. A imagem. Clicar na imagem, arrastar e soltar sobre o meu parágrafo. Então aqui a gente consegue reordenar facilmente selecionando os blocos que estão dentro de coluna. O segundo passo será reordenar a segunda imagem. Então agora sim, todos os elementos estão ordenado e a gente está seguindo o padrão da primeira coluna. Outra opção que a gente tem com o menu e lista é acessar as configurações de cada bloco. Posso selecionar o bloco Imagem clicando no menu de opções. Eu vou ter algumas opções relacionadas ao meu bloco de imagem, então a gente pode copiar aquele bloco, duplicar este elemento, inserir algum elemento antes desse bloco ou inserir algum bloco.

Depois do bloco Imagem, também posso editar o HTML desse bloco. Como também utilizar um novo recurso de bloquear bloco que está presente na versão 6.0 do WordPress. Então, agora a gente vai testar esse recurso bloqueando a edição do bloco coluna. Vou selecionar o meu bloco coluna, clicar em Mais Opções, selecionar a opção de Bloquear e vou desativar tanto a movimentação de elementos quanto a remoção de itens dentro deste bloco. Então esta coluna agora está bloqueada. O que eu vou fazer é repetir a ação para os outros blocos. Tem um bloco extra aqui. Então vou. Remover esse elemento? Agora sim. A gente bloqueou todo o nosso bloco. O que vai acontecer com o bloqueio de blogs? A gente não vai ter a opção de reordenar esses elementos. Então, essa é uma boa opção quando você quer desenvolver o design da sua página e quer garantir que esses itens não sejam alterados. Outra opção que a gente tem dentro da visualização em lista é adicionar identificadores aos nossos blocos como, por exemplo, eu tenho um título dentro do meu post chamado Gatos. Se eu quiser adicionar um identificador para esse título, eu posso ir em avançado e definir uma âncora para este elemento, então vou digitar título. Gatos e uma vez que eu adiciono um identificador para esse elemento, conseguimos visualizar o identificador dentro da nossa lista de blogs. Esse recurso pode ser bem útil caso você queira identificar blocos específicos dentro da sua página.

Uma vez que adiciona um identificador a todos os títulos da minha página, eu consigo identificar facilmente qual título eu estou me referenciando dentro da visualização e lista. Outra opção que a gente tem de utilizar a visualização em lista é dentro da edição de site. Para isso, vamos salvar o nosso post, acessar o menu de aparências editor. Então aqui dentro do editor do site, nós também temos acesso a visualização e lista. Uma atenção especial, por exemplo, dentro do loop de consulta. Aqui nós temos uma listagem com o título Imagem em destaque e o resumo do meu post. Eu posso, utilizando o recurso de visualização em lista, modificar a estrutura do meu post. Então posso acessar o grupo e aqui eu posso editar a ordem dos meus elementos. E uma vez que o selecione, por exemplo, a imagem destacada do post, eu posso colocar antes do título do meu post. Então, aqui modificamos a ordem do nosso grupo. Então agora temos a imagem destacada, o título. Temos um estrutura de colunas, onde dentro dessa coluna temos o resumo do post. E por fim, a gente tem um espaçadores que vai dar uma imagem entre o próximo post. Então, esses são os recursos que estão disponíveis dentro da visualização em lista. Espero que com esse vídeo você tenha aprendido um pouco mais sobre a visualização e lista, visite o learn WordPress para mais treinamentos como esse. Meu nome é Fellyph. Obrigado por ter assistido esse vídeo até o final e até o próximo vídeo.