What needs to be achieved?
Short Answer 😊
Building and Saving new patterns is difficult if your are building complex structures.
Long answer (TLDR) 🥱
I am building a Tailwind Theme and want to style some pre-saved blocks into my theme. Now the process of creating these it to create a Nested Structure with the help of Groups and then styling each of these with Tailwind CSS.
It’s not very time consuming but it is still a little difficult.
What if we could just write the code just like we use in the plain old HTML.
Best Solutions so far.
#1 Learn the Block Code and Use it. (Simplest Solution)
Well when I look at the block code it looks quite simple and concise so if I look at the pattern its not so difficult to mimic through the Indenting is missing when we pick it up from the WordPress Code Editor.
See this is how it looks.
<!-- wp:group {"className":"not-prose"} -->
<div class="wp-block-group not-prose"><!-- wp:query {"queryId":34,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"list","columns":3}} -->
<div class="wp-block-query"><!-- wp:post-template {"className":"grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 items-stretch border"} -->
<!-- wp:post-date /-->
<!-- wp:group {"className":"flex flex-col items-start overflow-hidden shadow-sm rounded-xl "} -->
<div class="wp-block-group flex flex-col items-start overflow-hidden shadow-sm rounded-xl"><!-- wp:post-featured-image {"className":"object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"} /-->
<!-- wp:group {"className":"bg-slate-900 relative flex flex-col items-start px-6 border-gray-200 py-7 rounded-b-2xl text-white"} -->
<div class="wp-block-group bg-slate-900 relative flex flex-col items-start px-6 border-gray-200 py-7 rounded-b-2xl text-white"><!-- wp:post-title {"level":3,"className":"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->
<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when the query returns no results."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->The only issue is that It could be further simplified to make our lives even more easier. But I would say it is simple enough.
Well but for html designers it would be a task to remember what goes where. And they have to be sure that it works fine.
#2 Good Old method of creating code with Visual Editor
Open Visual Editor, Create code add all Classes and then switch to Code Editor and paste all the stuff back to “register_block_pattern” function and your are done.
Pros
You get a visual view and the editor gives you a live preview of what your are doing.
There is no way you can get into an error and its a pretty safe way of adding the block.
Cons.
Basically designing is still a slow because pasting styles after opening the Advance tab makes it quite boring. It sucks all the creativity out of you. For me designing is all about experimenting, hits and tries. So it makes the process does not help if I am using Tailwind CSS to style my components.
Why don’t I use the options for Color, Typography that already comes along with WordPress?
The idea is very simple, the tools that come along are great by when you want to build something truly responsive it’s difficult. (Well at least for me. If somebody knows better, please share your workflow)
#3 Converter which would convert Normal HTML to WordPress blocks.
Well the most method would be to automatically convert the HTML by parsing them automatically to the WordPress Block Editor.
Well this Idea looks quite Promising to me and I think it can be attempted.
How would the application look like.
There would he a heading “Paste your HTML Code here” with a Text area. And there would be a button saying “Convert” just as you press the button covert. Boom It would convert it into the Code you require.
Well this is a great Idea, I will build this tool in VueJS and post it in my next post.
Well if you wish to add more Ideas to this let me know.