Let’s try lots of blocks

Gutenberg is here and I have no idea how some of the new features work, so let’s see what they look like when you add them to a post. This first block of text is the default block – a paragraph. It shows text nicely and you just need to press return to create a new one. There are various formatting options, including font size, drop cap (show the first letter large), colour settings and some custom styles (including block quotes and some interesting colour-based options).

For instance, this is a paragraph block that is using a ‘Red message’ custom style. I literally have no idea what this will look like until I click on ‘Preview’.

Oh, nice. How about a ‘Right block’ custom style. Will this show up as a right-aligned block or will my current theme find some normal way of displaying it?

This is a ‘Blockquote’ paragraph with some text in it that I just typed with my fingers. Normally this would be a quote from another website or something I overheard, but I cannot be bothered finding additional content at this particular time.

That was fun, wasn’t it? Let’s set this font size to ‘Medium’ and then look at some other kinds of blocks below. I have no idea why this is appearing to the right of the blockquote – perhaps this is a bug with the theme I am using. No, wait, I see what it is doing – it allows for a pull-quote to be inserted as a left aligned block within some other text.

This is an ‘In-line image’ block that seems to allow some text to be inserted. It looks rubbish from editor. The image itself is one that my ‘Magic Post Thumbnail’ plugin has scraped Flickr for use as a featured image. Interesting! Note that this also looks rubbish in the preview, but I’m going to leave this like it is for future reference.

  • Here is a list
  • This is using the ‘Advanced Gutenberg’ plugin blocks that allow for improved features over the default Gutenberg blocks.
  • I’m not sure I’d use this much

21/1/2018 New goggles

I’ve included a right-aligned in-line image above. I’m hoping that it’ll be wrapped in some text in some fashion. Let’s see!

Ah, balls. I’m not doing that correctly. Let’s insert an image using the normal image embed. I’m going to right align it and see how the text sorts it out:

13/1/2018 #didgotospecsavers
Specs

Looks like I can actually type text to the left of this normal image block. This is more useful and easier to use than the previous type. I guess I’ll keep using this for the time being.

Note that I’m currently trying to make the content wrapper in this theme much more narrow, but I am struggling with the CSS. I can investigate the various selectors using the Chrome dev tools but every time I try to narrow the content area it also narrows the header – which I don’t want. I don’t quite know enough about CSS to properly change the entire look of the theme, and while I do like this theme (Online Blog – free version) very much I am prone to keep trying new ones. Frequently.

Here’s an image carousel. There are different ways of configuring this.

I like how you can change the layout easily of the image carousel, plus add background colours and rounded corners. You can set the images to automatically slide, change the speed they do so and other lovely effects. Nice!

OK, that’ll do for now. I’ll try a few more elements out when I’ve actually got some content to show.

rutty

%d bloggers like this: