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

3 Comments

  1. JenT says:

    Bravo to you for taking this on. Query Loops are awesome and even though the theme I’m using on my site is not FSE, I’ve used them throughout my recent front page and index redesign. Excellent first tutorial! Looking forward to what comes next. 🙂

    Liked by 1 person

    1. Thank you. I didn’t know that query loop was accessible in non-FSE sites. How does one get to it?

      Like

      1. JenT says:

        When in the Block Editor for a Page, type “/query” 🙂 I’d be very cautious and don’t suggest using this on anything other than a full-width Page in a Block Editor or a FSE theme. Otherwise, Thar Be Dragons!

        Like

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.