Blog Redesign – Exploring WordPress Full Site Block Editing

Written by:

There’s nothing like a new coat of paint – or in this case, a clean new theme – to reinvigorate a blog. I’ve been using the same theme since I moved my blog to WordPress hosting sometime in 2016.

Don’t get me wrong, I appreciate my true-blue old theme, Scratchpad. It had the nice artsy vibe that I was going for and was easy to customize. But just as it always is when folks have a pool of themes to pull from, I see a number of other blogs out there using the same theme as I did – just maybe with a different color pallet.

I wanted my blog theme to be completely original, which is hard when you’re limited to only installing themes provided by WordPress.com. Well… maybe not anymore!

One thing I’ve wanted to explore and have kept my eye on is the concept of the Full Site Block Editing that WordPress has rolled out in beta. For a while, it was only available if you created a new site, but now it’s open to everyone, even those who are self-hosted.

This weekend, I decided to experiment by installing a new theme that supports full site block editing. I knew that doing that would be a large undertaking because gone with the wind would be my previous tried and true theme. I would need to learn on the fly how to use the new template system and build a new design while my blog was still live to the public.

After I installed such a theme – I just went with the WordPress-made Twenty Twenty-Two blue theme – I quickly decided to tear out all the existing template parts and rebuild the basic header and theme layout from scratch. This was a trial and error sort of thing – I wish I’d spent some time watching a video about it before I started. I’ve linked a good one with lots of tips below.

Add to that some spiffy new graphics, and I’m on my way to rebuilding the aesthetics of the site and giving it an overall updated feel. I’m really pleased with it so far!

Some thoughts on the block editor – this is not a drag and drop system. It’s a little trickier than I expected it to be. But once you mess around with it some and learn about things like the List View, Tool Bar, and Styles Menu (I wandered around wondering how to change my site’s background color for hours), then you’ll be better equipped to tackle the job of building a layout that is completely your own.

Being able to assign completely original templates to not just pages, but also posts, means that you can technically build an entire section within your blog that looks totally different from your main blog, including the posts! The possibilities are really incredible, especially for someone like me who likes to create individual sites about different topics.

Despite being able to assign a page/post with its own template, they will share universal things like background color – I don’t think there’s a way to change that or to assign individual templates background images… yet. Keep in mind that this is just the first public roll-out of this feature set – I expect more blocks and customizations to be on the way.

I think that I can work around most of those limitations, and the ability to give posts and pages their own look and feel individually really tempts me to bring back my Ukulele and Fiddle content to this site – with their own special-designed sections.

Just hoping for more blocks to be added in the future – there were a few things from my previous sidebar I couldn’t recreate because they didn’t exist. These missing blocks included a Links widget (where I can just easily display a blogroll) and the widget that used to allow people to follow your WordPress blog at a click. But hopefully, we’ll see these added in time.

I’m also having trouble with the HTML block displaying code properly. It displays okay in the preview but then just spits out the code on the live site. So, hoping this is a bug.

I am far from finished with redesigning my blog’s theme, and I’m super excited with where this might go in the future. I love that this puts the complete site design into my hands, even if there are some present limitations that I’ve found.

22 responses to “Blog Redesign – Exploring WordPress Full Site Block Editing”

  1. Nice work so far, Aywren! Seeing WP roll out its own native fullsite block editor is very cool, albeit not something I’ve played with yet. I’m liking what you have here so far. 🙂

    I don’t know if it’s even possible to differentiate fonts/link styles in this way, but if it is, the only call-out spot I have right now I think would be the sidebar. Having link text at equal weighting with the content/body strikes me as a little strange. Again though, no idea if that is even something you can do anything about!

    Liked by 1 person

    • I’ll have to look into it further myself to see what all it can do when it comes to universal things such as link styles. I didn’t see much in the way of options for fonts, but I could have overlooked it – I wanted my headers to have different fonts, but while there was an option to customize this, no fonts were available to choose from. I don’t know if that’s a theme thing or a WordPress thing.

      I do plan on doing more with design (sidebar especially), but just wanted to get the layout mostly workable yesterday since when I first flipped the switch, the whole blog was upside down at first!

      Liked by 1 person

  2. I have an issue with terminology that comes up every time people with strong design and coding skills discuss how they’re remaking their blogs. I look at what they’ve done and I don’t see a blog at all. I see a “Website”. Websites, in my understanding, are an entirely seperate concept. For example, Stereogum, NME. MassivelyOP and Pitchfork, all of which are in my feed, are Websites, while TAGN, Bio Break and Going Commando, for example, are all Blogs.

    I come to each of them with different expectations. If something looks like a professional “Website” I expect significantly different content and standards than if it looks like a “Blog”. Blogs are the equivalent of reading someone’s journal with their permission. Websites are the equivalent of a magazine you pay money for at a news-stand. The closer something that says its a blog comes to looking and feeling like a website, the more confused I get.

    The emotional response evoked by a “website” is very different to that engendered by a “blog”. Websites are impersonal, blogs are the exact opposite. The thing is, when actual blogs – the ones written by hobbyists as opposed to professionals using the blog format for commercial reasons – begin to look like websites, there’s a disconnect between the content and the form. The posts, when I read them, have the same, warm, personal feel but the surface denies it.

    A few “blogs” I read, ones that are very defintely hobby blogs in content and intent, have been tweaked to look and feel so close to prefessional websites that I find myself skating over the surface instead of reading them closely. The way they present themesleves doesn’t invite close attention. It expects the kind of skim-reading you’d give most websites unless you happened to come across something of specific interest. The blogs that look the most like actual journals are the ones I pretty much always read in full, with attention, every time – ironically, even when they’re not actually all that interesting!

    Your latest revamp still looks much more like a blog than a website. The way there’s just one post in a single column taking up most of the page, with a very recognizeable sidebar containing only straightforward, blog-related links makes the whole thing feel very comfortable and familiar. There’s some bleed across into website territory with the very large, full width video panels. I’m quite wary about doing those on my own blog, which is why I stopped short at something slightly less than full column width. I do actually feel the native size of Blogger’s video inserts, which makes them look more like spot illustrations than panels, is more appropriate to the look of a “Blog” and I constantly toy with the idea of reverting back to that.

    I wonder where the future of blogging lies, though. The classic look I associate with the word and the hobby is already becoming archaic and the difference between the concepts, Blog and Website, is already blurred. I’m sure that, to some, they’re already synonymous. Maybe, with time and exposure, I’ll learn new ways to respond to the new forms but I’ve had quite a bit of both already and if anything I’m finding it harder, not easier to adapt.

    Liked by 1 person

    • Thanks so much for your feedback! This is all still a work in progress at this point, but I’m glad it feels much more like a blog than a website!

      I checked into the video sizing because it also bothered me. I didn’t see a way to control the video embed size directly, but when I looked at the Advanced section of the embed blocks, WordPress was automatically sticking this in the CSS: wp-embed-aspect-16-9 wp-has-aspect-ratio – and that’s what made them full width. I manually removed that and now the videos are regular sized. I’ll just have to remember that going foward – naughty WordPress inserting CSS that I didn’t ask for!

      Like

      • You’re welcome. I’m glad you found it useful because I did go on a bit there – probably would have made a better post for Blaugust than a comment 😉 I’ll have to try and remember to come back then and borrow it. The smaller video panels look much better, too.

        Liked by 1 person

        • You should definitely recycle it because I think this is excellent advice for bloggers to take into consideration. I really try not to use themes that have multiple blocks of posts in a row and that kind of thing (except in very specific situations). I feel like sites that use these mutli-block layouts take away from the individual pieces of content just to throw a grid of stuff at the reader and it overwhelms me sometimes.

          Like

    • Give it a shot! It might be a good idea to roll up a free WordPress.com blog to experiment with it before flipping the switch on your main blog first. It took me a few days to get into the groove with it. Looking up some video tutorials was helpful, too. Most of it is intuitive, but some of it can get a little fidgety!

      Liked by 1 person

          • The videos are helpful. Looks like I can finally customize things just how I’d like. So I started a test site…the new editor is quite different from the old theme customizer. It also appears to be in beta still. I will take my time practicing with it and may wait for the next version before I change my live site. I think the new theme editor is going to be very good.

            Liked by 1 person

          • I love that you can create a theme for just one page or post – or spread that theme to a series of pages/posts. You can make every single page vastly unique if you really wanted to by just making a special theme for each. Not that we’d need do that, but the ability is there! Can’t wait to see where it goes in development.

            Liked by 1 person

      • FYI – I just looked on my 10.2″ iPad and the layout works. I see the left column at about 2/3 and the right sidebar at about 1/3. But the dividing line between is close to the middle, so the left column looks too narrow. Interestingly, that’s in landscape. When I rotate to portrait, the layout stays the same, it all just scales down to fit. I would have expected it to drop the sidebar and only show the blog column but it did not. It works though. The header image and top menu nav bar stay the same and scale to fit, mostly. In portrait, the far left and right menu nav do get cut off a little. Hope that helps.

        Liked by 1 person

  3. …well ah, so I decided for now to update my theme by reverting back to my previous one. I find it interesting that the widgets and stuff in the Customizer are actually using blocks. It’s a weird mix, but it works. That said, despite there being access to Legacy Blocks/Widgets, not all are available! I could not find the one that shows a grid of my followers/subscribers. Hmm..

    Liked by 1 person

    • Yes, there are a few legacy widgets that I couldn’t find too, such as the Follow on WordPress button that I usually use. I also had trouble with HTML code not showing right in the widget. So there’s still work for them to do!

      Liked by 1 person

Leave a Reply

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.

Advertisements
Advertisements
Advertisements

Find Me At…

Recent Posts

Read About

Advertisements

Twitter

Advertisements

Newest Chatter

Other Gaming Blogs

FFXIV Instagram

Advertisements
%d bloggers like this: