• Twenty Twenty

    This theme was incredibly graphic, so the pattern inspired by it had to reflect that. The result is simply a cover canvas pattern, that avoids functional and focuses on making blocks into pure art.

    Pattern

    Code

    <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"color":{"background":"#f5efe0"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
    <div class="wp-block-group alignwide has-background" style="background-color:#f5efe0;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:columns {"align":"wide"} -->
    <div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"padding":{"right":"0","left":"10vw"}}}} -->
    <div class="wp-block-column" style="padding-right:0;padding-left:10vw"><!-- wp:group {"style":{"dimensions":{"minHeight":"100px"},"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"},"blockGap":"0vw"}},"backgroundColor":"vivid-red","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-vivid-red-background-color has-background" style="min-height:100px;margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"260px"},"color":{"background":"#751a1a"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="background-color:#751a1a;min-height:260px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"400px"}},"backgroundColor":"pale-pink","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-pale-pink-background-color has-background" style="min-height:400px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"120px"},"color":{"background":"#751a1a"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="background-color:#751a1a;min-height:120px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"30px"}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-contrast-background-color has-background" style="min-height:30px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"style":{"spacing":{"padding":{"right":"0","left":"5vw"}}}} -->
    <div class="wp-block-column" style="padding-right:0;padding-left:5vw"><!-- wp:group {"style":{"dimensions":{"minHeight":"100px"},"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"},"blockGap":"0vw"}},"backgroundColor":"vivid-red","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-vivid-red-background-color has-background" style="min-height:100px;margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"style":{"spacing":{"padding":{"right":"0","left":"10vw"}}}} -->
    <div class="wp-block-column" style="padding-right:0;padding-left:10vw"><!-- wp:group {"style":{"dimensions":{"minHeight":"60px"},"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"},"blockGap":"0vw"}},"backgroundColor":"vivid-red","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-vivid-red-background-color has-background" style="min-height:60px;margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"220px"},"color":{"background":"#751a1a"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="background-color:#751a1a;min-height:220px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"340px"}},"backgroundColor":"pale-pink","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-pale-pink-background-color has-background" style="min-height:340px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"300px"},"color":{"background":"#751a1a"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="background-color:#751a1a;min-height:300px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"200px"}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-contrast-background-color has-background" style="min-height:200px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"style":{"spacing":{"padding":{"right":"0","left":"5vw"}}}} -->
    <div class="wp-block-column" style="padding-right:0;padding-left:5vw"><!-- wp:group {"style":{"dimensions":{"minHeight":"100px"},"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"},"blockGap":"0vw"}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-contrast-background-color has-background" style="min-height:100px;margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"style":{"spacing":{"padding":{"right":"0","left":"10vw"}}}} -->
    <div class="wp-block-column" style="padding-right:0;padding-left:10vw"><!-- wp:group {"style":{"dimensions":{"minHeight":"100px"},"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"},"blockGap":"0vw"}},"backgroundColor":"vivid-red","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-vivid-red-background-color has-background" style="min-height:100px;margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"180px"},"color":{"background":"#751a1a"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="background-color:#751a1a;min-height:180px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:group {"style":{"dimensions":{"minHeight":"400px"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group" style="min-height:400px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns --></div>
    <!-- /wp:group -->

    Screenshot


Tags: