See My Reusable Blocks

I just 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 next bit and you will see them listed.


Change One Instance Of A Reusable Block

This is something I heard tonight at a WordPress Meetup. If you want to use a reusable block and keep most of its features but change it a bit for just one instance, you could just start from fresh. But another way to do it is to duplicate the reusable block; change the duplicate to a standard block and then edit it. Then delete the reusable 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 blue 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.

Block Gallery

The Block Gallery includes a masonry gallery that I am using here. Notice the ability to make the corners of the images rounded. It is also possible to change the width of the gutter between the images.

The other options are a fullscreen stacked gallery and a carousel slider.

The fullscreen stacked gallery allows fullscreen images one above the other.

I am not sure I would ever want to use that, except I wonder whether it might be possible to set text on the images?

If so, then I can see how it could be used like the sites that tell as story against a background as one works down the page.

That might well be what fullscreen stacked gallery can do, because the demo page says:

Display images in a beautiful fullwidth stacked gallery with the Block Gallery Stacked block. Add a shadow to your media, display captions and choose to link to the main image files for folks to download media.