Gutenberg Blocks – Text and Formatting

Let’s take a look at each of the standard blocks provided with Gutenberg.  First, the more typical blocks which deal with text and formatting:-

  • paragraph
  • heading
  • list
  • quote
  • pullquote
  • preformatted
  • verse
  • button

Paragraph

The default block is a standard paragraph block, for normal text.  Styling of content is, in general, controlled by the theme, but there are options for each block, which offer some styling choices which can be applied directly.  Options can be found in the Block Options box on the right on a typical sized screen. 

Paragraph Block Options

Block options include text sizes, drop-cap, background and text colours and left, centre and right alignment.

Drop-cap is a nice styling option – it’s interesting to see that included as a basic option which will be implemented on the page without any additional styling.

Paragraph with default text size setting – in this theme that is 14px.

Paragraph with text setting small – 14px but can be customized with a slider, as can all of the text size settings.

Paragraph with text setting medium – 16px.

Paragraph with text setting large –  36px.

Paragraph with text setting XL – 48px.

You can choose background and text colour for a paragraph too. Should be used with care, I think!


Heading – H2 

Heading – H3

Heading – H4

List block

Unordered List

  • List item 1
  • List item 2
  • List item 3

Ordered List

  1. List item 1
  2. List item 2
  3. List item 3

List with Indented Sub-list

  • List item 1
    • Sub-item 1
    • Sub-item 2
  • List item 2
  • List item 3

Quote

Quote option 1

This is a quote – option 1 style.

Interestingly, hitting Enter within the quote block actually keeps you within the quote. This becomes an HTML <blockquote>, with class wp-block-quote

And this is the citation

Quote option 2

Quote – option style 2 becomes an HTML <blockquote> with class wp-block-quote and an additional class is-large.

And this is the citation

PullQuote

A pullquote is a brief, attention-catching quotation taken from the main text of an article and used as a subheading or graphic feature

with a citation if you like

There are no options for Pullquote, other than left, right or centre alignment.  By default a Pullquote will be centre-aligned.  Choosing left or right alignment causes the block to behave like an image, with text wrapping to the left or right of the quote. 

With all block items, there is the opportunity to add an additional class, which may be useful for styling, if you are comfortable with CSS stylesheets.

A Pullquote becomes an HTML <blockquote>, with class wp-block-pullquote.

Cat ipsum dolor sit amet, scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food, scratch the box hack up furballs. Curl up and sleep on the freshly laundered towels eat from dog’s food or yowling nonstop the whole night eat the rubberband but i could pee on this if i had the energy and wake up wander around the house making large amounts of noise jump on top of your human’s bed and fall asleep again. Run around the house at 4 in the morning scamper but touch water with paw then recoil in horror so i could eat this if i had the energy or purrr purr littel cat, little cat purr purr. 

Preformatted

In a Preformatted block, all line breaks and spaces are honoured. It is wrapped in an HTML <pre> tag, with class wp-block-preformatted.

I asked my love to take a walk
To take a walk, just a little walk
Down beside where the waters flow
Down by the banks of the Ohio

And only say that you'll be mine
In no others' arms entwine
Down beside where the waters flow
Down by the banks of the Ohio

Verse

A Verse block is very similar to a Preformatted block. It is wrapped in an HTML <pre> tag, with class wp-block-verse. The different class allows CSS stylesheets to make it appear differently. As you’ll see here, this site does not yet have any specific styling for wp-block-verse, nor does Gutenberg yet (as opposed to the Drop-cap option in a paragraph, for which Gutenberg does provide default styling).

I had a little beetle so that beetle was his name
And I called him Alexander and he answered just the same
And I put him in a matchbox and I kept him all the day
But Nanny let my beetle out she went and let my beetle out
And the beetle ran away

She said she didn’t mean it and I never said she did
She said she wanted matches and she just took off the lid
She said I mustn’t worry and I really mustn’t mind
That there’s lots and lots of beetles
That she’s certain we could find

She said I mustn’t worry but it’s difficult to catch
An excited Alexander you’ve mistaken for a match
If we looked in all the places that a beetle might be near
And we made the kind of noises that a beetle likes to hear

[funny noises……]

And I heard a kind of something and I gave a sort of shout
It was a beetle house and Alexander Beetle coming out
It was Alexander beetle I’m as certain as can be
And he had the kind of look as though he thought it might be me

And he had a kind of look as though he really ought to say
I’m really very sorry that I tried to run away
And Nanny’s very sorry too cos you know what she did
She’s writing Alexander very blackly on the lid
So Nan and me are friends because it’s difficult to catch
An excited Alexander you’ve mistaken for a match

.... lyrics by A A Milne, put to music by Melanie Safka 

Button

It’s great to be able to add a button easily. Alignment, background and text colours can be chosen, as well as the click-through url, of course. The button is wrapped in a <div> with class wp-block-button and the button itself (<a> tag)  has class wp-block-button__link.

Writing with Gutenberg

This is a first step into using the new Gutenberg editor.  I am typing this content directly into the WordPress page and I will do any formatting here and see how straightforward or confusing it turns out to be.

Headings

It turns out that headings, paragraphs, etc are all separate blocks. While typing, when I hit the Enter key, I get a new paragraph block again, ready for typing, which is quite convenient. 

So to add a heading, I just have to hit enter at the end of a paragraph. Then by clicking on the + which appears (indicating a new block), I can choose what kind of block to use eg Heading, Image whatever (popular block choices also appears on the right for faster selection).

Paragraph Options

Within a paragraph block I have editing options, which appear when I hover the cursor over the top of the block area. Within a paragraph, I can:-

  • left align
  • right align
  • centrally align
  • make text bold
  • italic
  • strikethrough
  • add a link

I can also convert the contents of the paragraph block into a:-

  • heading
  • list
  • quote
  • preformatted
  • or verse (whatever that is)

So I just converted that last paragraph into a list, which was a relatively simple process.

Negative Thoughts

Hidden Menus

One thing I have noticed, however, is that many options don’t appear until you hover the mouse over them, or over the “block” which they apply to. While that keeps the screen tidy and removes distraction, it also means that it’s often not clear how to do something until you make a start. And it also makes for various menus and options suddently popping up then disappearing as you move the mouse around.

Links

The “add a link” icon within Gutenberg does not behave as well as “add a link” within the current WP editor.

Selecting some text and clicking on the link icon, brings up the box for selecting or pasting the link URL.  Starting to type causes a list of suggested posts or pages within the current website to show up.

In the current WP editor, this is a list of posts and pages.  However within the Gutenberg editor, only posts are listed, which is a little annoying.  I hope that will be fixed in the future.

Conclusion

In conclusion, this initial foray into using Gutenberg has been relatively painless and quite interesting. At least for for someone like me, who is very familiar with computers in general and WordPress in particular, it all seemed fairly straightforward. I wonder what it might be like without that kind of familiarity?

For simple content like this, written within the editor, it is a pleasant process, and may encourage the use of headings, lists etc rather than just a long flow of text.

X Theme is not for me – an independent review

Am I alone in hating the X theme?  There’s a lot of hype about it, it seems to be “the designer’s dream theme” of 2016. The sales pages are great and it looks like you can create wonders with it in just a couple of hours.

x-theme

And maybe you can…. if you have the energy to look through the 43+ demo layouts and the luck to find one which exactly fits your needs. Then all you have to do is to import the demo and add your own content, pick a few colours, upload your logo and you have a website.

But if you want a bit of this and a bit of that, or want to change something which is not included in the settings for that particular layout, then you might find yourself wrestling with the X theme set-up for much longer than for a more typical theme.

Stick with the Demo Layouts or Suffer

I have spent hours trying to get to grips with the X theme (at the request of clients, who, after purchasing the theme, found that they didn’t want to do that themselves)! Each time I end up throwing up my hands and wishing I was working with a more “normal” theme.

From their sales page – “Achieve virtually any look and layout from within the one and only X WordPress Theme. Stacks allow you to choose from multiple, completely unique designs with just the click of a mouse

As is often the case, to make something simple yet versatile, it has to be extremely complicated behind the scenes. The consequence is that if you want to do something which is not catered for in the settings, it is much harder than usual.  To provide so many choices they have made the theme files themselves pretty complex.

So sticking with the layouts and options provided is easy – changing things is not.

Easily Changeable Settings – but Not for Everything

Some changes need Custom CSS

X claims to be “endlessly customizable” and there is a long list of settings you can change in the WordPress customizer.

I have to say I find the choice of settings somewhat arbitrary…. for example you can choose the colour of your menu text but not the colour of the background. To change the menu background, you have to get into custom CSS. Here’s a menu colour-scheme I couldn’t easily do in X:-

menubackground

Some changes need a Child Theme

To make any changes over and above style changes, you’ll have to use a child theme. Showing excerpts with recent posts is just one example of the kind of change my client wanted, but which was not easily done with X, despite all the versatility claims.

If you don’t know how to create and install a child theme, you’ll have trouble doing anything you might need the child theme for.

They provide a child theme for you to download from the members area, along with detailed instructions. But if you don’t know how to create and install a child theme, then you’re going to have trouble doing anything you might need the child theme for.

To achieve my example of showing excerpts with recent posts, I had to write a new version of the “recent posts” shortcode in my child theme functions.php file. Other changes might involve overriding theme templates with new versions in the child theme – good luck with finding the correct file to override in amongst X theme’s many template files.

Recent posts with excerpts

Recent posts with excerpts – not so easy to achieve

Oh, and by the way, when you install a child theme, any customizer settings you had in place for the main theme are not carried over, so you’ll need to set them all up again. So you’d better realise you are going to need a child theme before you go too far!

Great Support is Needed because it’s Not Simple

X theme claims to offer “unparalled support”. Yes, there’s an active forum, facebook page, knowledge base. They seem to respond quite quickly.

All that good support is needed because the knowledge base has crucial gaps and the installation doc which comes with the theme is a bit out of date. The knowledge base offers a lot of articles and videos but there is no clear path to follow after you install the theme.

How to make the best of the theme, how to choose the best stack for your needs, what steps to take after installation, seem to be completely lacking. So to find out how to set up your home page, change the layout of a blog page, get slider content (which is supposed to be included with the Extended demos but is not), you have to scour the knowledge base and forum in the member area or ask for support.

The member area is a confusing place to be. One has the impression of turning up late to a party, where a lot has happened since it started. So some of the conversations are about the way things were at the beginning, some are about how things are now… and if you have just walked in it’s hard to know the difference. Should we be using Cornerstone or shortcodes? If I find advice on how to do something, will it still work?

To do anything out of the ordinary, you have to ask for help (which they freely give) but which usually relies on adding this custom javascript, that custom css, these additional template files….. if you weren’t using the X theme (having been drawn in by their great sales pitch) you would already have achieved that using the normal WP templates, functions, CSS files.

Why Fix What Ain’t Broke?

They have tried to replace the simple and familiar WordPress editor with their new “Cornerstone” visual editor. It may be visual, but it still takes time to learn. And, as with all visual things, it’s hard to do anything fast, because you have to go through all the visual interface steps for everything, each time you do it.

It produces content which is entirely wrapped in custom shortcodes – so if you ever think about changing your theme…. well, don’t think about it.  Or understand that you’ll have to recreate all of your content at the same time.

In Summary

  • Demo content not as complete as is suggested
  • Customizer settings are arbitrary – you can easily change some things but need to do coding to change others
  • Knowledgebase is disorganised and incomplete – I still don’t know how to pick the most suitable stack without investigating 43 individual sites
  • Overriding a template in a child theme requires picking your way through the myriad theme files
  • Shortcodes v Cornerstone – will shortcodes be withdrawn one day?
  • Cornerstone – do we need yet another proprietory visual editor?
  • Great support is needed because the theme is much more complex than the sales pitch suggests

Conclusion

If you are a designer/marketer/website owner,

attracted to the X theme because “you can achieve virtually any look and layout… with just the click of a mouse”….. If that’s you then, ok, pick the look you like from the 43 choices and live with it, don’t try to change it, just focus on your content.

If you are a developer,

forget it. Using templates, stylesheets and a little jQuery, you can create any look you want much more quickly and easily, based on any typical WordPress theme.

Embedding Content

This is cute – just by including the link on a new line in the WordPress editor, I can embed a nice little extract of a post or page from my own site.

How to Schedule Posts to Appear in the Future

And I can embed a similar extract from any other WordPress site.

What is “Shop Your Wardrobe”?

Changing the Look

I can define the icon which is used when I (or other people) embed content from my site.  See my little green W!  Go to Appearance… Customize… Site Identity and upload a Site Icon.

And it’s possible to tailor the look of any embeds which I display on this site, by using specific theme templates.  I haven’t done that yet, this is just the default look.

What If I Don’t Want My Content All Over the Web?

Worried about your content appearing on other websites?  There’s a simple plugin which disables this feature  –https://wordpress.org/plugins/disable-embeds/.