Block Editor Pattern: Stripes

author image Slava Abakumov

on

in
Wall made of bricks

Recently I started working much more closely with the Block Editor – creating new blocks and patterns. And that led me to the idea to start experimenting with the Block Editor functionality.

Last week I shared on Twitter (or X) one of such creations, where I re-created a screenshot as a page inside the editor. The feedback was nice, and I enjoyed the process. Today, I opened the OpenAI Sora page and saw a very interesting piece of design at the bottom of the page.

Those very simple progressing stripes inspired me, so I decided to try to recreate them in the Block Editor. And after experimenting for a bit I found a decent way how to do that!

Unfortunately, the current state of Block Editor does not allow you to have any kind of loops (unless the Interactivity API is used), so the pattern creation requires quite a few repetitive steps. I will be sharing the exported patterns (as JSON files) with everyone interested at the end of the post, but first, let’s take a look at the final design.

Stripes patterns

I think it’s cool that you can make such things in a matter of minutes. I spent around 30 minutes overall on both of them. And there is a high possibility that someone like Mike McAlister or Jamie Marsland (aka Pootlepress) can do that faster and better :)

And the great thing is, the majority of patterns and even page templates are not that hard to create! You may need to experiment for a bit, have a decent theme to play within (I used Ollie for those stripes, but any block theme will work, I think), and some inspiration.

Here you can download both patterns as .zip files:

How to use these Stripes patterns?

You need to use a Block theme.

  1. Open the Appearance > Editor page
  2. In the left-side column, you will see a “Patterns” menu item.
  3. After opening it, at the bottom left corner, you will see the “Manage all of my patterns” link.
  4. This link opens the “hidden” page on your site: /wp-admin/edit.php?post_type=wp_block
  5. You can use the “Import from JSON” blue button to import the JSON files that are located inside those .zip files you’ve just downloaded.

You may wish to subscribe to my OviLetter if you’d like to receive notifications about my future experiments. Hey, I even created a new Experiments category!

Join the OviLetter

Occasionally I will send a newsletter that will be strictly on this site topic.

Please enable JavaScript in your browser to complete this form.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *