Редактор Гутенберга, как сделать удобно редакторам и верстальщикам

К написанию статьи меня мотивировал этот пост. Автор приводит забавный трюк позволяющий избавиться от обертки div.container. На первый взгляд это экономия на спичках, но Вордпрес-програмисты знают толк. Нам, Вордресграмистам и кобыла невеста.

В чём тут наши проблемы:

1. С точки зрения SEO текст не следует разбивать на секции
2. Дата должна подставляться автоматически
3. Для редактора разметка страницы должна быть линейной
4. Бежевый фон на всю ширину страницы
5. Пятно может менять цвет ( а иногда и форму ) (( а иногда и двигаться )).

Для пункта №2 мы напишем нехитрый короткод который здесь приводить не будем. Гутенберг позволяет легко вставлять короткоды в текст.

Чтобы решить все остальное можно, конечно использовать ACF. Но подумайте сами —

• поле для первой строчки
• поле для параграфа после даты
• поле для описания пятна

Для простого автора это будет совсем не прозрачно, да и темплейт превращается в кучу IF-ов.

Итак

Вот как мы это всё решим:

• Ничего кроме Гутенберга
• Первый параграф — верхняя строчка
• Далее секция заголовок Н1
• потом короткод [post-date]
• параграф с текстом
• магия — Разделитель!
• ну и дальше обычный текст

Наш single.php выглядит примерно так:

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

the_content() выведет такое:

<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">
... остальной текст ...

Поископтимизаторы счастливы, автору всё понятно. А нам это всё оформлять.

Но это, в общем, не сложно:

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%);
}

Всё остальное не стоит особого внимания, основная магия именно в разделителе HR и том, что в нём можно псевдоэлементы. Цвет и поведение пятна, соответственно, можно менять через классы этого же разделителя.

Если Вам понравилось это видео, жмите лайк и подписывайтесь на наш канал
Секундочку, это ж не Ютуб? Нет?
Ну тогда Happy Hacking