Gutenberg Editor, cómo hacer que los editores y las máquinas de escribir sean convenientes

Esta publicación me motivó a escribir un artículo. El autor da un truco divertido para deshacerse del contenedor div.container . A primera vista, esto es un ahorro en coincidencias, pero los programadores de WordPress saben mucho. Para nosotros, los vordresgramistas, la novia de la yegua.

¿Cuáles son nuestros problemas aquí?

1. Desde una perspectiva SEO, el texto no debe dividirse en secciones.
2. La fecha debe sustituirse automáticamente
3. Para el editor, el diseño de la página debe ser lineal.
4. Fondo beige ancho de página completa
5. Un punto puede cambiar de color (y a veces forma) ((y a veces moverse)).

Para el ítem No. 2, escribiremos un código corto simple que no daremos aquí. Gutenberg facilita la inserción de códigos cortos en el texto.

Para resolver todo lo demás, por supuesto, puede usar ACF. Pero piensa por ti mismo

• campo para la primera línea
• cuadro de párrafo después de la fecha
• campo de descripción del spot

Para un autor simple, esto no será transparente en absoluto, y la plantilla se convertirá en un montón de IF.

Entonces

Así es como lo resolvemos todo:

• Nada más que Gutenberg
• El primer párrafo es la línea superior.
• A continuación, la sección del encabezado H1
• luego shortcode [fecha posterior]
• párrafo con texto
• magia - Separador!
• bien y luego texto plano

Nuestro single.php se parece a esto:

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

the_content () generará esto:

 <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"> ...   ... 

Los optimizadores de búsqueda están contentos, el autor entiende todo. Y tenemos que hacerlo todo.

Pero esto, en general, no es 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%); } 

Todo lo demás no merece una atención especial, la magia principal está en el separador de recursos humanos y el hecho de que los pseudoelementos pueden estar en él. El color y el comportamiento del punto, respectivamente, se pueden cambiar a través de clases del mismo separador.

Si te gustó este video, haz clic en Me gusta y suscríbete a nuestro canal.
Espera un segundo, ¿no es youtube? No?
Bueno, entonces feliz piratería