The Geeky Guide to WordPress – The Gutenberg Editor, Pictures and More

As I’ve been doing this blogging thing a little while now and it seemed a good idea to pass on a few of the things that I’ve learned over the five years that I’ve been doing this. In easy and often geeky steps you’ll be taken through the steps and point out the pitfalls of taking your blog seed and growing it into something really amazing.


The Gutenberg editor has really landed now and is causing much of a stir. All the old ways of doing things have been messed about with and many are confused. I’m here to say to you all – don’t panic (see what I did there? Douglas Adams would have liked that). You don’t even need a towel to cry into, since my last post on the Gutenberg editor it seems WordPress have been making some changes and trust me on this, it’s making our lives easier.

I’m covering a few things in this post which I’ve heard people complain about and some things I’ve notices that are quite sweet.

1. Adding pictures to a post or page

It used to be that a picture was added inline to a post, but this is not the case anymore. Think blocks, everything from a paragraph to a title, picture is now a separate block so when you want to add a picture hover your mouse over the middle of the paragraph or other block and a + is shown.
Click that and scroll to Common Blocks, find image and then you have a familiar image upload / insert command page to use.

Images can be inserted into a block as a background with text over top like this:

Science Fiction

Again insert the block, go to common blocks and add cover. Add the image and then write in the text you want. Easy.
These text seems to be set at that size, but it’s a great creative little thing we couldn’t do before.

2. Adding the read more tag

This seems to have confused a few people, but it’s dead easy, easier than it was before…

Add a block (getting the hang of this aren’t we?) scroll to layout and add ‘More’
Done. Clean and no messing about with code.

As a little side note, as you use the blocks they appear at the top of the Add Blocks box as most used so you don’t have to hunt for them. Nice.

3. Ordering Blocks

Remember in the old editor you had a block of text before a picture and then you thought ‘crap, I want it after now!’
Gutenberg has this covered, no copy and paste move the mouse to the left side of the block and some up / down arrows appear – you can change the order. All that needs to be done is that you start thinking in blocks.

4. Copy Post

I missed this and it was annoying me, it’s not quote the same but if you want to copy a post to use as a template go to blog posts under the ‘My Blog’ settings section, find the post you want, click on the three dots and there’s a duplicate post function that works quite nicely. So now even I’m happy.


I hope this is useful, this has taken some time to get used to but seriously, setting aside some time to familiarise yourself with Gutenberg is worth it, this is a really powerful way of giving us far more creativity at our fingertips. It’s cool stuff!

Let me know how you’re finding Gutenberg and what issues you’re having!

Beyond the Infinite


Also find Beyond the Infinite on Twitter

Come and visit find me on my Beyond the Infinite Facebook Page

Find some of my pictures on Instagram

Also look me up on: Pinterest      Mix    Wattpad

Advertisements

21 thoughts on “The Geeky Guide to WordPress – The Gutenberg Editor, Pictures and More

Add yours

  1. Oh thanks for all this information! I had tried it before and it’s a pain in the butt to get used to but I wound up switching back anyway because I could not get links to work at all. Maybe they got that worked out? Right now I’m sticking to the old editor.

    Liked by 1 person

    1. Oh I see, yes the links do work a little differently. I find the easiest way is to copy your link, type the text you want displayed, highlight it and then press the link button and paste in the text. From there you have options on the open in new tab etc.

      Good luck with it!

      Like

  2. Ooo, thanks for the pictures! It actually looks kinda cool?!
    Those texts with the blue background: is that also now a function? Cuz i have something similar, where i add background + frame around some text, but i have to paste the code manually.

    Liked by 1 person

    1. Yea there is now a super easy way to change text and background colour in there too. No code needed.
      It is pretty cool and it actually makes a lot of sense. Try it and if you get stuck give me a shout. But if you look at this post and the other I wrote some weeks back it should help.

      Liked by 1 person

  3. Hi Simon, please keep posts like these up as new developments are made. It’s not always obvious to newbies what changes have occurred and posts like this really help. Thanks for taking the time to put it together.
    Cheers
    Jade

    Liked by 2 people

    1. Hi jade, I’ll make sure I do my best. This change had been pretty major and hard to keep up with but there are so many benefits, anything you need help with let me know and it may well become a post 🙂

      Like

  4. I’m not sure. I’ve not pressed that button yet to start using it. I’m used to the old ways & darn’t change because I’ve heard many bloggers don’t like it and I don’t want the hassle of battling when I’m doing ok with the normal way. If that makes sense?

    Liked by 1 person

  5. I’m just starting to play with Gutenberg. Most of the problems I’m having are, I think, just me not being used to it yet. And it has cleaned up some of the formatting issues I used to have whenever I added images to my posts.

    Liked by 1 person

It's great to hear from bloggies - feel free to leave a comment :-)

Please log in using one of these methods to post your comment:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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.

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: