Learning Full Site Editing

This is the first of what might develop into several posts exploring full site editing.

Full site editing is the direction that WordPress is going. And it’s easy to explain what it is by comparing it with themes that are not full site editing themes.

Themes that are not full site editing themes are the ones that we have been used to for years. You know the drill, you browse through the page of themes looking for ones you like the look of. You choose the nearest that fits what you really want, and then you see what customisation is possible, Maybe you can change the colour scheme or the typography.

With full site editing you can change everything – the header and the footer – and basically make a theme look how you want. You are in control of how the whole site looks.

How To Tell Whether Your Theme Is FSE

Here is a screenshot of the backend of a WordPress theme. When you click on ‘Appearance’ with a traditional theme, you see the ‘Customise’ option.

When you click on ‘Appearance’ with a full site editing theme, you see ‘Editor’ (and the word Beta in a little flattened elipse shape) and below that you see ‘Customise’.

If you click on ‘Customise’ then you see a message that reads

“Hurray! Your theme supports Full Site Editing with blocks. Tell me more”. And “Tell me more” links to a page where you can learn more about full site editing.

Immediately below that is a button “Use Site Editor”.

Below that are sections for Site Identity, Menus, Homepage Settings, Colors, Fonts, and Additional CSS – all the usual stuff.

So basically you can get to get to the site editor by clicking Appearance./Editor or by clicking Appearance/Customise and then clicking the ‘Use Site Editor’. Either takes you to the same place.

They say the best way to learn something is to have a problem, so…

How Did I Get Here

I have three or four sites here on WordPress.com, and recently I decided to change the theme on one of them. That was easy to do, of course, as we know, because WordPress makes it easy to do with one click.

But when I looked at the new site, the ‘sticky post’ that was previously the first thing you would see when you went to the site, was not the first thing on the home page.

Why was that? I ran through and checked everything, and no, the sticky post wasn’t being recognised as it normally would be. The post was there, but way down in its ‘correct’ position in the chronological list of post I had written. When I looked at the post I could see that it was marked as ‘sticky;’ – but it was simply not being ‘stuck in place’ by the new theme.

So, I asked Support why the sticky post wasn’t where I would expect to see it. It turned out that the new theme I had chosen was a Block-based full site editing theme.

Support sent me this annotated screen grab to show me how to get the sticky post to ‘stick’.

A visualisation of the query loop in WordPress

OK, let’s try to pull it apart. First, you may be familiar with the three little lines indicated with number 1 in the screen grab. You will find them at the top of any post you are writing. When you click the icon it opens up to show the structure of content on that page.

FSE is a bit different because you see not only the content of the page but also the header and the footer.

But the bit that jumped out at me is ‘Query loop’ (indicated with number 2)

Doesn’t it sound like something above one’s pay grade? I mean, we just want to have a nice theme and write stuff.

Support directed me to some stuff on FSE (see the end of this post) and eventually after a few days I circled back around to find out what a ‘Query loop’ is.

Here are a couple of definitions: (Yes, I know they are from .wp.org and not from wp.com, but it’s the same deal.

The Query Loop block is an advanced block that allows you to display posts based on specified parameters; like a PHP loop without the code. You can think of it as a more complex and powerful Latest Posts Block. With various block patterns integrated into the block setup, you can do things like create a portfolio or a page full of your favorite recipes.

Full site editing is built on themes made from Blocks, and the Query loop block is just one kind of block. There are lots of blocks and you are already familiar with some of them – text blocks such as paragraph, heading, and quotes. And media blocks such as images and galleries and videos.

Clear as mud. Well, kind of. A query loop picks up something and displays it. So what can it recognise and pick up? Here is a list of blocks and you will see that query loop encompasses several blocks

OK, that’s enough for now. Next time I will look at Templates and Template Parts. I knew about them from watching the video about full site editing, But it was only today that I learned how to navigate them.

The Tutorials

Help page outlining Full Site Editing

Full site editing additional courses

See Your Custom CSS History

If you have a paid plan on your WordPress.com site than you can add custom CSS in the Customiser.

As I was writing that sentence it occurred to me that maybe that is not true for the new block-based themes with full site editing. Maybe it is only possible with classic themes and hybrid themes and not with universal themes.

Putting that little confusion to one side, I noticed today the words ‘See full history’, and if you click that you can see all the CSS you have previously added – and the theme you were using when you added it.

Here’s a more detailed explanation, starting with what you see (if you have a paid plan) when you click on the Customiser.

You see this

And if you click on ‘See full history’, a new page opens and you can see a clickable history of all the revisions, like this:

If you are like me, you might forget what the last theme was that you used, or the one before that. This is a way to find out. As you may be able to see, if you have good eyesight, is that I was previously using the Maywood theme.

Another way to remember what themes you were using previously is to make a note of the themes you use. I write them a post called ‘Do Not Publish This’ that I keep in draft..

Going a step further, you may have noticed that on this site I wrote the name of the current theme in the tag line, like this:

A Diary In Photography | Current theme is ‘Glen’

This is a post about WordPress. Are there no photographs? This is supposed to be a photography site! Where is the elephant?

Ah, here it is