A few days ago, I wrote about creating themes and my current process. I wanted to share some things that have made it easier for me using the full site editor.
Reset and undo are friendly
There are tools to undo anything. Even if you save something, you can remove a template, template part or undo that change. All this means exploration can be safer than ever before in your theme.
Undo
You can find undo here:
Reset
There are a few resets; you can find them in global styles, but also beside most block specific styling – such as layout or font family.
Removing a template part or templates
Your theme might have templates or parts, but they appear on your site saved just like custom content as you also create them. At any point, you can decide to remove these. A little note, before you do remove any template part or templates, I would always export them. You can export by clicking here:
Once you’ve done that, you can visit the menu and delete your part or template just like any content.
Set things on the group, not the entire page
Previously, if you wanted to set a 20px around the edge of a site, you might do this even on the HTML element. When using the editor, the problem with doing this is if you want to change the background color on a different template, you are stuck with that across the entire site or having to override in CSS.
Using the group block, even as a wrapper to your main content, you can then change anything you like per template. The less styling you have that sets across all templates, the better. In the future, applying per template spacing will be helpful, but this method works for now.
Always keep an export
Exporting and adding via the template editor in wp-admin is a useful workaround when things get a little confusing with why something might not be working. For example, at times, you might find one template works because of nesting, where another has a slight nesting variation you can’t track down. A quick solution is to delete that template and replace it with a working one. This has saved me more than once!
Different sized fonts help for navigation
If you aren’t using any CSS, you can vary your navigation using the typography format options available and color options. A further tip for header areas is to use a column layout and spacer blocks to adjust to get that perfect fit, even if using different font sizes.
Check if you are in global styles or not
It’s easy to forget as you are adjusting that you are in global styles. You might change something and then edit the template. It’s easy to not realise you are in global styles and then save without remembering. Always check what tab is active when you are styling. If you’d like to see this improve there’s an issue I created for conversation.
Be careful about using too many custom colors
Whilst it might seem exciting to dive in, it’s hard to keep track of what is what and get that exact color everywhere. If you have access to theme.json I would advise using that as your source of colors specifically. It’s easier to keep track and avoids guessing what custom color is where.
Make sure you have ‘theme font’ set
By default, theme font isn’t set on any typography. You can set this yourself, but you do have to set it on every element that could use typography. When you add a block, remember to do this. You can also save globally by block type if you want for future block types. To do this, simply set it to ‘theme font’ and you will use the font set in theme.json.
Don’t miss the + to add a template in the site editor
This is one that hopefully will get iterated but you can very easily miss the + button. From there you can add directly a template. I created an issue to continue the discussion.
Test in all devices
You can test in a variety of views right there in the site editor. By doing this, you can quickly check what your layout will shape up like.
Use list view
My final tip for today is if you get lost, don’t forget about the list view. This shows you the entire structure of your site. You can’t yet interact with it beyond finding a block (my hope is that will change), but it’s so incredibly useful to find things when you get deep into nesting.
The editor is powerful, but there are always things to learn along the way. What we are interacting with right now is also going to grow and adapt rapidly, which is incredibly exciting. I look forward to being able to share some more tips as I find new things and more features get created.