Working with Gutenberg: part 3, inline images, buttons, css and misc

last updated: 7 July 2019


Inline images


Luckily, this is really simple now. It was a bit of a mess when Gutenberg was first launched.

example inline image gutenberg

Now, you simply insert a picture above the text of your choice and select the position of the picture (see example right).

You can use a spacer above the image to adjust the position of the image. Though, always check how that looks on smaller devices.

Within a row, inline images don’t work. However, you can use a separate column for your image, or you use the media card block (see first column below).

photography: Ellen Paschiller

Media card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

photography: Ellen Paschiller

Image within a column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Inline images | Buttons | Adjusting CSS | misc


Buttons


Gutenberg buttons come with quite a few layout options now, but there is still no hover. By the looks of it CoBlocks simply copied the Gutenberg options. Atomic Blocks offers fewer styles but at least there is a hover. So, I am going with Atomic Blocks button for now.

Inline images | Buttons | Adjusting CSS | misc


Adjusting CSS


You can adjust CSS for most blocks. This is how you can do it:

  1. Go to the front end
  2. Click on an element, you want to change (ctrl, right click)
  3. Chose ‘inspect element’ from the menu
  4. A panel opens and you can change or extent the CSS values on the right side
  5. When you’re happy with the result copy the new values
  6. Insert the values either in your child theme css file, or go to Appearance / Customise and add the new values in the section ‘additional css’
  7. Make sure you add a note (e.g. changes for CoBlock) so your file doesn’t get too messy.

The good thing is that you can change and extent most blocks via CSS. For example, I changed the CSS for the Quote and the Pullquote blocks to have one quote block for short quotes and one for longer quotes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit …

Quote block for short quotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Pullquote for longer quotes

Inline images | Buttons | Adjusting CSS | misc


Gutenberg: misc


Duplicating: sometimes it’s less fiddly to simply duplicate a separator or a spacer and then move it into position.

Moving blocks within rows: if a column has only one block, then you usually can’t move that block. Insert a second block above the single block, and the block you want to move will be movable.

Removing empty blocks: sometimes empty blocks just don’t want to go away. Add a word, and chance are that you can remove them. If you use a block within a block, for example a paragraph within a container, you might want to remove both. Again, the easiest way is to add a word, then activate the field, and click remove.


Inline images | Buttons | Adjusting CSS | misc


Questions, Tips, Comments


I look forward to questions, tips and comments. The email from this form will be sent directly to my lemon pix media account. If you’d like a look at my other web design and photography work, visit the lemon pix media website.

Questions Gutenberg / WordPress