Kadence Blocks Gutenberg Plugin

The same speaker at the meet-up who recommended the Calendar plugin, also recommended Kadence Blocks, a Gutenberg plugin. Last December, in the post I wrote about WooCommerce themes I had tried, I mentioned a theme by Kadence.

I was impressed last night with all the things that the Kadence Blocks can do. After the meet-up I went to the Kadence website.

I see that in addition to the free standard Kadence Blocks they market an Advanced WooCommerce plugin that does more.

The features that interest me are variation swatches, custom cart messages that target specific carts, and a category description area below the category images. That last feature saves having to use Advanced Custom Fields to accomplish that job. The question in my mind is whether this plugin plays nicely with the Yoast SEO plugin and recognise one another.

Gutenberg Visual Editor Disabled?

When I went to edit a post on one of my sites that I had not visited for a while, I saw the back-end code that powers Gutenberg rather than the visual editor.

After reading about the issue on the WordPress forums, I went to my user profile and at the top under Personal Options, the box next to ‘Disable the visual editor when writing’ was ticked. I unticked it and everything in the back end went back to the normal Gutenberg appearance.

So the solution was easy, but I do not recall checking that box in my profile – but who knows.

Just in case, I deactivated and deleted the Limit Logins plugin and installed and activated WordFence and ran a scan and the site is clean.

See Your Reusable Blocks

I saw this on WP Tavern and noting it here for the future.

With Gutenberg you can make reusable blocks. The neat thing about them is that if you subsequently edit the block, you change it for every appearance on the site. That can be handy if you need to update some information contained in the block.

The tip on WP Tavern was that if you want to see the reusable blocks you have made, log in to the admin panel and then add the query and you will see them listed.

~/wp-admin/edit.php?post_type=wp_block

Coloured Backgrounds in Gutenberg

To add a splash of colour behind a paragraph of text, you go over to the sidebar and you will see two tabs. One says Colour Settings and the other says Advanced

When you open the Colour Settings you see two palettes of colours. Depending on which palette you choose, you can change the colour of the text and/or the colour of the background to the text.

You can choose one of the predefined colours that are there or you can click on the multi-coloured circle at the end of the swatch of colours and make any colour you want.

Here is a short paragraph with the background colour a nice rose pink using the hexadecimal #ffdfe0

When you add a quote, however, the Colour Settings tab disappears leaving only the Advanced tab.

Open the Advanced tab and you will see that it says Additional CSS Class.

I wondered what it meant until I realised it was an invitation to create a CSS class.

The little that I know about classes is that you should name them something that is not likely to have been used elsewhere in the main code. So I named it ‘quote-thing’. Catchy, eh?

Stage 2 was to add the CSS to the CSS section in the Customiser. It has to refer to the class and it has to tell the class what to do. So I said it should make the background a specific colour #ebf2f5 – a pale blueish colour.

And I wanted to put a bit of padding around the quote so that it didn’t look like it was sitting in a straightjacket.

Here is the code:

/* background colour for quote */
.quote-thing {
background: #ebf2f5;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
}

And here are two quotes attributed to Fyodor Dostoyevsky:

The greatest happiness is to know the source of unhappiness.

It is better to be unhappy and know the worst, than to be happy in a fool’s paradise.

The second Dostoyevsky quote is interesting and has been used in many a book and film as well as it appearing in real life. It also goes to show that there is nothing new under the sun. The Buddha said:

‘It is better to live one day seeing the rise and fall of things, than to live a hundred years without ever seeing the rise and fall of things.’

Notice that I didn’t add the CSS class to this quote, so it does not have a coloured background. If I gave it another CSS class name and a different hexadecimal then it could have a different colour background to the Dostoyevsky quote.

Disabling Gutenberg Blocks

With Disable Gutenberg blocks by Danny Cooper, you can disable the blocks you don’t need.

On the plugin page in the WordPress repository there is a list of the block plugins that it supports. 

I am not sure what ‘disable’ means. Having listened to Joost speaking yesterday on WP Sessions, I understand that the problem with blocks is that if you have a number of collections of blocks, then they are all called on every page and that will slow down your site.

Does Danny Cooper’s Disable Gutenberg Blocks plugin solve this issue? I asked him, and he replied:

Block Managers are unlikely to offer any performance gains as ‘Block Collections’ will load all their CSS/JS regardless of which blocks are used.

A block library built into WordPress Core which only includes simple standalone blocks would help for those times you want something small without all the bloat.

For more complex page builders there is always going to be some performance concerns, just like you already have with Elementor and the like.

Columns In Gutenberg

I am using the two-column block here. Choosing it brings up two blocks side by side. Clicking on the + icon allows you to choose what you want in the block. I chose ‘paragraph’ (i.e. text) and this is the result.

’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.

“Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!”

He took his vorpal sword in hand;
Long time the manxome foe he sought—
So rested he by the Tumtum tree
And stood awhile in thought.

And, as in uffish thought he stood,
The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
And burbled as it came!

One, two! One, two! And through and through
The vorpal blade went snicker-snack!
He left it dead, and with its head
He went galumphing back.

“And hast thou slain the Jabberwock?
Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!”
He chortled in his joy.

’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.

This is something I wrote a while ago when column blocks worked differently.

It seems that the way to add text within a column is to write and then when one gets to the point at which one wants to change to the adjoining column, one starts typing in the adjoining column – 

like this and then simply continues typing. The question is what happens if the amount of text one types in the adjoining column outstrips the amount of text in the first column? Can one move these little blocks of text within the columns around?

We are about to find out because now I am typing in the right-hand column, and I want the text in the paragraph above to shift to the left-hand column.

And yes, with a bit of faffing about I was able to move the text to the left hand column and continue typing here.

So having done it once, I now want to do it again with the text block that begins with the words ‘We are about to..’

So – I will find out whether I am getting the hang of it or whether the exact mechanism remains a mystery.

And the answer again is that I am now an experienced and somewhat accomplished mover of column blocks.