Editor Gutenberg, como tornar convenientes editores e tipógrafos

Este post me motivou a escrever um artigo. O autor dá um truque engraçado para se livrar do wrapper div.container . À primeira vista, isso economiza em correspondências, mas os programadores do WordPress sabem muito. Para nós, os Vordresgramists, a noiva da égua.

Quais são os nossos problemas aqui:

1. De uma perspectiva de SEO, o texto não deve ser dividido em seções
2. A data deve ser substituída automaticamente
3. Para o editor, o layout da página deve ser linear
4. Fundo bege de largura de página inteira
5. Um ponto pode mudar de cor (e às vezes forma) ((e algumas vezes se mover)).

Para o item 2, escreveremos um código curto simples que não forneceremos aqui. Gutenberg facilita a inserção de códigos de acesso no texto.

Para resolver tudo o mais, é claro que você pode usar o ACF. Mas pense por si mesmo -

• campo para a primeira linha
• caixa de parágrafo após a data
• campo de descrição do local

Para um autor simples, isso não será transparente e o modelo se transformará em vários FIs.

Então

Veja como resolvemos tudo:

• Nada além de Gutenberg
• O primeiro parágrafo é a linha superior
• Em seguida, a seção de cabeçalho H1
• então shortcode [pós-data]
• parágrafo com texto
• magia - Separador!
• bem e depois texto simples

Nosso single.php é mais ou menos assim:

 <?php the_post(); get_header(); ?> <article> <?php the_content() ?> </article> <?php get_footer() ?> 

the_content () produzirá isso:

 <p>  </p> <h1>  </h1> <time>2013-11-11</time> <p class="has-medium-font-size">"lorem ipsum ".repeat(20)</p> <hr class="wp-block-separator"> ...   ... 

Os otimizadores de busca estão felizes, o autor entende tudo. E nós temos que entender tudo.

Mas isso, em geral, não é difícil:

 article { display:flex; flex-direction: column; align-items: center; } article { width: 960px; margin: auto; } hr { margin: 80px 0 70px; border: 0; padding: 1px 0 0; position: relative; } /*    */ hr::before { width: calc(100vw - 10px); /* -10px      -    .     . */ left: calc(480px - 50vw); content: ""; position: absolute; transform-origin: 0 100%; transform: scaley(1000); background: #f7f2eb; z-index: -1; height: 1px; margin: 0; border: none; } /*    */ hr::after { width: 130px; height: 120px; content: ""; background: url(blot.svg) 0 0 no-repeat; position: absolute; left: calc(100% + 100px); transform: translatey(-50%); } 

Tudo o resto não merece atenção especial, a principal mágica está no separador de RH e o fato de que pseudoelementos podem estar nele. A cor e o comportamento do ponto, respectivamente, podem ser alterados através de classes do mesmo separador.

Se você gostou deste vídeo, clique em Curtir e assine o nosso canal.
Espere um segundo, não é o youtube? Não?
Bem, então Happy Hacking