Blocos de Gutenberg

Donec id elit non mi porta gravida e eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.


Título Um

Cabeçalho Dois

Cabeçalho Três

Cabeçado Quatro

Cabeçalho Cinco
Cabeçado Seis

Bloco pré-formatado

A Estrada Não Percorrida, por Robert Frost

Duas estradas divergiam numa floresta amarela,
E lamento não ter podido viajar.
E sendo um viajante, por muito tempo fiquei parado.
E olhei para baixo o mais longe que pude.
Até onde se curvava na vegetação rasteira;
Então pegou a outra, igualmente bela,
E tendo talvez a melhor alegação,
Porque era gramado e precisava ser usado;
Mas quanto à passagem por lá
Eu as usei praticamente da mesma forma,
E ambos, naquela manhã, estavam igualmente deitados.
Nas folhas, nenhum passo havia pisado no preto.
Ah, guardei o primeiro para outro dia!
Mas sabendo que um caminho leva a outro,
Eu duvidava se deveria voltar algum dia.
Contarei isso com um suspiro.
Em algum lugar, daqui a muitos e muitos anos:
Duas estradas divergiam numa floresta, e eu—
Escolhi o caminho menos percorrido,
E isso fez toda a diferença.

...e aqui está uma linha de texto realmente, realmente, realmente, realmente longa, só para ver como ela é processada e para descobrir como ocorre o estouro de capacidade;

Lista ordenada

  1. Nullam id dolor id nibh ultricies vehicula ut id elit.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Condimentum euismod aenean.
    2. Purus commodo ridiculus.
    3. Nibh commodo vestibulum.
  3. Cras justo odio, dapibus ac facilisis in.

Lista não ordenada

  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Donec ullamcorper nulla non metus auctor fringilla.
    • Nibh commodo vestibulum.
    • Aenean eu leo quam.
    • Pellentesque ornare sem lacinia.
  • Cras justo odio, dapibus ac facilisis in.

Verso

Este é um exemplo do bloco de versos central do Projeto Gutenberg.

Um bloco para haicai? 
Por que não?
Blocos para tudo!

Separador

Aqui estão exemplos dos três estilos de separadores do bloco separador principal do Projeto Gutenberg.




Mesa

Aqui está um exemplo do bloco de tabela principal do Gutenberg. 

FuncionárioSalárioPosição
Jane Doe
$100kCEO
João Ninguém$100kCTO
Jane Bloggs$100kEngenharia
Fred Bloggs$100kMarketing

Últimas publicações, visualização em lista

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 

Últimas publicações, visualização em grade

E agora, vamos à visualização em grade. O bloco "Últimas Publicações" também é exibido nos alinhamentos amplo e de largura total, então não se esqueça de verificar esses estilos também.


Citação em bloco

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Mecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.

Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio.

Rico Tabor

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Mecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.


Citação alternativa

O estilo alternativo de citação em bloco pode ser definido usando o .wp-block-quote.is-large. Seletor CSS. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Donec sed odio dui. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Rico Tabor

Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Mecenas sed diam eget risus varius blandit sit amet non magna sed diam ed diam eget risus varius eget.


Áudio

Donec sed odio dui. Enéia lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Centro alinhado:

Um exemplo de legenda de bloco de áudio

Curabitur blandit tempus porttitor. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.


Botões

Donec sed odio dui. Enéia lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Centro alinhado

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Inteiro posuere erat a ante venenatis dapibus posuere velit aliquet. 

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Inteiro posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Mecenas sed diam eget risus varius.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Inteiro posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Mecenas sed diam eget risus varius.


Categorias


Arquivos


Colunas

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enéia lacinia bibendum nulla sed consectetur. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enéia lacinia bibendum nulla sed consectetur. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.


Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enéia lacinia bibendum nulla sed consectetur. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enéia lacinia bibendum nulla sed consectetur. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enéia lacinia bibendum nulla sed consectetur. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Fusce dapibus, Tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condim entum nibh.

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condim entum nibh.


Citações em destaque

Aqui está um exemplo do bloco de citação pull principal, definido para exibição centralizada. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere est em lobortis.

Rich Tabor, ThemeBeans.com

Alinhamento amplo

Aqui está um exemplo do bloco principal de pull quote, definido para ser exibido com o atributo de alinhamento amplo, se o tema permitir. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Aqui temos uma citação em destaque alinhada à esquerda.

Rico Tabor

Donec id elit non mi porta gravida e eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Inteiro posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Vestíbulo id ligula porta felis euismod sempre.

Aqui temos uma citação em destaque alinhada à direita.

Rico Tabor

Donec ullamcorper nulla non metus auctor fringilla. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.


Bloco de imagem

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.

Modelo de efeito de texto editável em camadas, tipografia vetorial 3D.

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Alinhado à esquerda: dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestíbulo id ligula porta felis euismod sempre. Nullam quis risus.

Bloco de vídeo

Vamos analisar o posicionamento e o estilo do bloco principal de vídeo. Também vamos verificar os alinhamentos amplo e em tela cheia.

Bloco de imagem de capa

Confira o posicionamento e o estilo do bloco principal da imagem de capa. Vamos verificar os alinhamentos horizontal e vertical, bem como os alinhamentos à esquerda e à direita.

Legenda de exemplo

Alinhado à esquerda: dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Enéias eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Enéia lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


Legenda de exemplo

Alinhado à direita: scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

Fusce dapibus, Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Alinhado ao centro:

Exemplo de superfície animada


Blocos da Galeria

Vamos analisar o posicionamento e o estilo dos blocos da galeria.

Galeria de Duas Colunas

Abaixo, temos um bloco de galeria inserido com duas colunas e duas imagens.

Três colunas

Abaixo, temos um bloco de galeria inserido com três colunas e três imagens.

Quatro colunas

Abaixo, temos um bloco de galeria inserido com quatro colunas e quatro imagens.

Cinco colunas

Abaixo, temos um bloco de galeria inserido com cinco colunas e cinco imagens.

Quatro colunas, cinco imagens

Vamos mudar um pouco as coisas. Agora temos um bloco de galeria inserido com quatro colunas e cinco imagens.

Três colunas, cinco imagens

Agora temos um bloco de galeria inserido com três colunas e cinco imagens.

Abaixo, você encontrará um bloco de galeria inserido com duas colunas e cinco imagens.

Duas colunas, cinco imagens

Três colunas, quatro imagens

Abaixo, você encontrará um bloco de galeria inserido com três colunas e quatro imagens.