Gutenberg editor, how to make editors and typesetters convenient

This post motivated me to write an article. The author gives a funny trick to get rid of the wrapper div.container



. At first glance, this is savings on matches, but WordPress programmers know a lot. We, the Vordresgramists, are also a mare bride.

What are our problems here:

1. From an SEO perspective, text should not be divided into sections
2. Date should be substituted automatically
3. For the editor, the page layout should be linear
4. Beige full page width background
5. A spot can change color (and sometimes shape) ((and sometimes move)).

For item No. 2 we will write a simple shortcode which we will not give here. Gutenberg makes it easy to insert shortcodes into text.



To solve everything else you can, of course, use ACF. But think for yourself -

• field for the first line
• paragraph box after date
• spot description field

For a simple author, this will not be transparent at all, and the template will turn into a bunch of IFs.

so

Here's how we solve it all:

• Nothing but Gutenberg
• The first paragraph is the top line
• Next, the header section H1
• then shortcode [post-date]
• paragraph with text
• magic - Separator!
• well and then plain text

Our single.php looks something like this:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

the_content () will output this:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Search optimizers are happy, the author understands everything. And we have to make it all out.



But this, in general, is not difficult:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Everything else is not worth much attention, the main magic is in the HR separator and the fact that pseudo-elements can be in it. The color and behavior of the spot, respectively, can be changed through classes of the same separator.



If you liked this video, click Like and subscribe to our channel.

Wait a second, isn’t youtube? Not?

Well then Happy Hacking