Yesterday I was lucky enough to give a talk at the WordPress Cheltenham Meetup. The topic was something close to my heart, I got to share why the changes in themes matter, what they are and how hopeful I am for the future.

I took some time to write up this talk transcript and you can also find the video here.

Being able to control elements of your theme through the theme.json is super powerful; however, you can also turn on and off what is supported or not. There might be an instance where you don’t want custom palettes or link colors, for example. How do you do this? Well, you can through theme.json.

These examples need the Gutenberg plugin with WordPress, and some use experimental features.

Custom colors

This refers to the custom color option by pallettes.

"color": {
	"custom": true,

You can rely on default states, but I actually find declaring even the default state useful in my theme.json as I know what set. The downside of that is a longer theme.json file.

By declaring in theme.json, you can globally declare over per block, although each block has setting options. This is a great way to override block defaults and give a cohesive experience to the creator. Some blocks have certain options; others don’t, so this creates a unified experience.

Custom link coloring

This depends on the block, and if it has the capacity for link colors, it might need the experimental feature in the Gutenberg plugin itself – always check the block supports.

"color": {
       "link": false,

Typography specific

These are again if the block supports.

"typography": {
	"dropCap": true,
	"customFontSize": false,
	"customLineHeight": true,

Experimental borders

This is a new feature, so it comes with a ‘use knowing it might change’ notice, but you can activate border controls where they are supported. Some blocks have this supported for certain border features and not others, so always check which works – not many do all yet.

"border": {
        "customColor": true,
	"customRadius": true,
	"customStyle": true,
	"customWidth": true
},	

Simple control

By having these controls, you can not only get to explore the new features but also decide what you should (or shouldn’t) support in your theme. I can see, for example, some on live sites absolutely deciding only to have color palettes and removing a lot of custom features. With these options, amazing defaults are delivered, and branding is kept to pallettes, set options.

If you want to really explore and play with everything possible, turning it all on is great fun, and I’ve not covered everything here, just a few to get you started. Have fun and know it’s easy to activate as it’s all controlled through theme.json.

I want all the design tools now. There I said it! I want everything today on all the blocks right now. However, I know it’s a process and whilst that knowledge makes me feel and act like a grumpy toddler, the reality is today, some things have features, and others don’t.

Anyone working right now creating themes and experimenting also feels the same. There’s excitement, a desire to push and use the shiny. However, if I think for a moment about the sheer impact of these features and scale, I realise why things might take a little longer. The editor has been around a while now, and we are starting to add things not even thought about at the start. That’s quite a thought to unpack when you realise it.

Many of the directions taken now philosophically were wanted initially, but the how might not have been possible then. To create things now needs foundation changes and then interface. For example, the choice to not bring group flex controls yet. Whilst I want to play with these things today, I appreciate they are being considered, not just thrown in without caution.

The thing is, the editor today is an established piece of software. It’s out, released, and even the plugin is running on many sites. These features being created need space to mature and also people to test. They also need the time afforded to the other aspects of the editor that maybe weren’t so eagerly waited.

This all doesn’t stop me from wanting them; it does help me have patience, though. It makes me excited when I see a PR I can test or call for feedback. It makes me want to write about each new thing I see and shake it out in my own experiments.

Over the years, I’ve had a range of pages that have contained my content from across several sites. It’s now even easier to create a page using the RSS block, and today I’m going to walk you through that.

What we will cover today:

• Creating a page using the RSS block in the editor.
• Ways to combine that block with others.
• Styling that block using group block.
• Using theme.json to create specific styling for that block.
• Create a page template just for that page and styling it using site editing.

Creating your page

To do this, you don’t need to have site editing; I will add some notes of how you can add even more layers using that at the end, though. We are simply going to create a new page in the editor. You can use any theme for this.

Have your blog links at hand

Before you dive into this, don’t forget to have your URLs at hand. All your WP sites have a /feed at the end.

Add the RSS block

Click to find the RSS block, add it and then type or paste in your URL. Save and there you go – it is as easy as that!

The next step is to add your URL:

Congratulations, your content has been added to your site! There are a few options for styling; however, that really is as simple as it starts.

Block options

The RSS block has a few options worth noting right there for iterating how it looks:

• List view or grid view (this shows by the block itself)
• Set number of items to show (this shows in sidebar).
• Display on/off: author, date, excerpt (this shows in sidebar).
• You can also add a classname to the block for targetting styling.

As you explore these settings, you get others; for example, here is what grid and excerpt reveal:

Styling the block

If you wanted to style this a bit more, you can wrap everything in a group block, use a header, separator and spacers. The group block then gives you color options for the background.

Combine with other blocks

I chose to combine this with the latest posts block on my site, having that at the top. I like the grid layout you can choose for this. By even mixing excerpts or not, you can give a hierarchy to the content. Other blocks like quotes can also divide things up.

On another page I created for myself, I made an entire list of feeds with headings, all using the same format, with titles showing the type of writing. There are so many options when creating your page.

Go further and use theme.json

If you are using a theme with a theme.json you can call the feed block itself and style. Styling this way is incredibly powerful, and you could do something like this:

The code for this is:

"core/rss":{
	"color":{
		"text": "#950E7F"
	},
	"typography": {
		"fontSize": "1.563rem"
	}
},

I did also report today a bug on padding for this block.

Create a page template

Why not add a final flourish of having your page template just for this? You could have a particular color background, maybe some specific layout. It’s up to you, but you can easily do that if you have this enabled in your theme.

To create a page template just for that page, you can click ‘add new’:

Then you will be asked to give it a name; you can style the template however you want.

As you are styling, a tip is to keep the list view open; it helps track down things. Also, whilst you can create a new template from the page editor, you can refine a little more using the full site editor – it works better for backgrounds right now. So it’s always worth going into that editor once you set up the template.

Creating by blocks is powerful

Creating a collection of content on a page previously took a lot more to do. You would either have had to know development or used a plugin. Now, you can use a block that core provides, and it has styling out of the box ready to go. There are, of course, options, as I’ve shown to go further, but that’s up to you where this block journey takes you. Have fun!

If you are following the editor project in WordPress, you might have heard the term design tools. I wanted to spend some time talking about what they are and why I think this is incredibly important.

Design tools are a term for anything relating to the appearance of blocks. Because ‘everything is a block’, this means all of your content’s appearance.

In this issue, Matías explains:

“Design tools encompass all tools related to the appearance of blocks and ranges from colours, typography, alignments, and positioning, to filters like duotone, cropping, and background media.“

https://github.com/WordPress/gutenberg/issues/33447

An essential part of this is providing tools for people to create patterns and give usable options to those making blocks.

Uniformity leads to creativity

By providing these standardised tools that people can know and trust, they will create and rely on a feature set. The tools are baked into core and iterated, predictable. A creator can move from block to block, knowing they can use the same tools to get the same results and learn the same styling mental models. This is crucial to empowering them to trust styling and truly feel the freedom to create.

Why is trust so crucial? Well, here’s the thing everyone is creative and has the ability to create some level of styling. Though, many are either hit early with a state of fear when creating or put in a position where they feel out of their depth, judged. As a result, they assume they can’t do it. By providing tools, a space of safe creation, you are empowered again.

The quality of the tools and output from them is also then something a user can trust. Which hasn’t always been something historically so easy for everyone to know what is or isn’t the right thing to use. Theme creators can also be assured of these foundations to create themes that support them and take full advantage.

Empowered without knowing code

For a long time, some styling has been gatekept by the fact you had to know code. This changes with design tools, powerful options are put right in the hands of creators. A key part of this, though, is it’s done within positive boundaries. The tools are given but not in a way that allows someone to really create problems. It’s a fine balance of enough options, not too many, and that’s going to be one battled throughout this feature.

The power underneath

The tools coming are not all that you will interact with, which becomes interesting. The underlying system is going to combine visible and invisible improvements. For example, positioning and layout might not be something many users ever interact with. That’s also key here; different users will likely interact with various tools at other times.

Viewport handling

I am incredibly excited about the proposal around viewports.

“these principles revolve around CSS features like flex and grid to ensure elements know how they need to flow and stack within containers without further instructions, leveraging properties like mixmax and calc for setting layout boundaries, etc. Ideally controls like font size, even if exposed as single values to users in the UI, are built as functions behind the scenes to accommodate different viewport ranges.”

https://github.com/WordPress/gutenberg/issues/33447

What pleases me about this is it’s something I think of as the way forward to genuinely adaptive design. We’ve been stuck on fixed points for too long to respond to, not truly adapting to any screen size and the experience that someone might be having around that different screen. You experience things on your phone different from at a desktop, for example.

Looking forward

One refreshing thing about these design tools is a lot of the work is progressive. Design tools are an integral part of the site editing focus. They have also to look forward from a product market view, not stay stuck with a background to text and a few simple gradients. It needs to go beyond, and the proposal for design tools does just that.

This is how WordPress pushes some boundaries and gets quite opinionated about what direction it will push those in. Some of the chosen formats underneath will need bets to be taken on progressive techniques to set paths forward for the project. For example, the way viewports and font scaling are handled.

Core first

To accomplish many of the proposed design tool features, you would have to now and historically combine plugins into a styling stack – many just weren’t available. As a result of this plugin Jenga, changing sites created problems; updates often broke things. People would have to learn different interfaces, which was much harder than it had to be. Design tools level the ground, providing everyone with a base to build up from.

This levelling is one thing that truly excites me in all of this. Beyond the usability, the possibilities. It allows expanding upon for those creating to take these tools and soar. That’s for the content creators and those creating themes, plugins that interact with the editor.

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.

I am still like many discovering how I create themes using site editing, but I wanted to share my current process and some observations I’ve made along the way. The image for this post is a picture of yarn because at times I’ve felt like I am untangling yarn as I piece together my process in this. That’s a natural part of learning and finding those threads is also fun as the reward of discovery can be shared.

My current workflow

My process has ended up having a few stages to it; this reflected the creative process of creating a theme:

• Figma: I gather inspiration, colours and typography. I may have created a sketch elsewhere or do there roughly of a concept.
• Theme files: From the concept, I have a recipe list of things to add to my styling, from hierarchy, colours to fonts. At this point, I am typically only setting up the theme name, basics and also foundational styling values.
• Site editor: Create the theme, taking the foundations and applying them to each page template.

After I have the templates formed, I typically export the templates and parts, put them in the theme files, and then push them to Github to keep a record outside the site.

Observations on theme.json

Theme.json is the foundation of my process; it’s where I set the scene of my theme. Here are some notes from using that as my foundation; I share these known issues exist to resolve things and also that sometimes it was my workflow being the issue:

• From time to time, variables have got stuck. For example, content width when using variables can get blocked on a value or not even work at times. I am still working out how and when I use variables.
• Your file can rapidly get long, so having some supporting documentation with it might help to come back to later.
• Use names that make sense for colours. Right now, there are no conventions around this (although conversations around this excite me), but coming back to this, you will thank yourself if you give terms that are easy to make sense.

{
    "slug": "text-grey",
    "color": "#2d2d2b",
    "name": "Text Grey"
},
{
    "slug": "dark-grey",
    "color": "#939599",
    "name": "Dark Grey"
},

Observations on creating in the editor

The most significant change beyond the file structure for me is creating in the editor. Although it is a little like going back to Dreamweaver, I guess, or other ‘create in place tools’. I have some notes from that experience:

• What you see isn’t always what you get. Gradients are ‘unexpected’ between the front and back. A lot of what you see when editing, particularly around spacing, won’t look the same on the show. Often it looks better, which is a pleasant surprise, but things like spacing aren’t always accurate.
• Be at one with group blocks. Whilst it is something I want to reduce the use of, the number of group blocks I have used is significant in many templates. 
• Creating in the editor forces you to think content first. This way of thinking is a huge benefit. I am laying out not with fake content; I am from the start interacting with reality.
• The spacer block is a good fix for things, but I wonder about the overuse and yearn for those incoming better controls, just like the group block.
• Query block is powerful but delicate to use currently; when you remove a block from within it, you can easily break the entire block. It will get better, but until then, be a little careful where you click.
• The side list navigation is your friend as you get quickly into deep nesting in these templates, so you need a clear, simple way to find things.
• Featured image block can be placed in an area outside query loop and pick up the last content if in an archive or the post feature image if in single.

Styling templates

Overall, the process is a matter of getting used to it. What is being created by many is right now minimal because of that process. There is also the limit of the editor itself, and unless you want to mix in the prior theme styling, you will find lighter styling options. The tools are growing, just like I am learning rapidly, so complexity increases in what I create.

Being able to have templates just for content, created on the page itself, is incredibly powerful. For example, this post itself has a template that changes the colouring. I plan on writing a tutorial on this because I think the idea of single art directed templates is exciting.

Wishlist

Here is where I get a little hopeful for things to come. I will also be going along to Github and see if there is an existing conversation; if not, perhaps start one. This list focuses on the editor’s tools because ‘how’ creation happens should be explored collectively; everyone will likely have varying methods.

• Adaptive points: more granular control around this, although I don’t think it needs to be too much and I know this is planned.
• Template styles: whilst global styles are great; I find myself wanting to set styles for the whole template itself- not easy as you’d think without a group block around it all.
• Consideration over what should be exposed as global options: as more get added, extended, there is an impact on usability. I think it is going to be an ongoing discussion. I want more as a creator but as a user a more straightforward interface and less confusion.
• A way to reduce group or spacer block use.
• A visual indicator that is a little stronger when in global styles. I have reset my entire styling for the theme more than once, thinking I was just in a template.
• Ability lock templates would be great, perhaps relating to my mishaps with the above overwriting of styles.

Road to go

There is a road to travel with full site editing. I am also aware that many of the processes and ways I am doing things right now will change. Where there are boundaries, those will also move as the features improve. That’s the point of this early stage exploring and also part of the joy. We are all getting to discover the new features, tools and give feedback to make them better. It’s an exciting time for themes.