Gutenberg WordPress Editor Tutorial for great looking Blog posts

There are lots of powerful and creative editing you can do with the Gutenberg WordPress Editor. Complete with a fresh new block editor packed with what you need. Discover more flexibility with how content is displayed, whether you are building your first site, redesigning your blog, or write code for a living.

On December 6, 2018, WordPress Version 5.0, named for jazz musician Bebo, was released to the public. WordPress 5.0 revolutionized content editing with the introduction of a new block editor. For more information, read the WordPress Blog post WordPress 5.0 here.

If you’ve gotten pretty comfortable with all the basics of writing in WordPress, then you may enjoy some more advanced tips about the types of things you can do!

As with the last post about the editor, you’ll want to be actually editing this post as you read it so that you can see all the cool stuff we’re using.

Special formatting

As well as bold and italics, you can also use some other special formatting in the editor when the need arises, for example:

• strike through
• highlight
• *escaped characters*

Formatting text

The WordPress editor allows you to use keyboard shortcuts for quickly applying styles to text. The most common shortcuts are of course, bold text, italic text, and hyperlinks. These generally make up the bulk of any document. You can type the characters out, but you can also use keyboard shortcuts.

• CMD/Ctrl + B for Bold
• CMD/Ctrl + I for Italic
• CMD/Ctrl + K for a Link

Writing code blocks

Code elements can be created in the editor by switching the text style to Preformatted. Code is formatted by wrapping any word or words in pre tags, <pre>like this</pre>. Larger snippets of code can be displayed across multiple lines like this:

.my-link {
    text-decoration: underline;
}

Full width images

One neat trick which you can use in WordPress to distinguish between different types of images is to add a class value to the image itself from the Advanced Settings tab, and then target images containing the class with special styling. For example:

which is styled with…

img.full-width {
    max-width: 100vw;
}

This creates full-bleed images in the Corporate Pro theme, which stretch beyond their usual boundaries right up to the edge of the window. Every theme handles these types of things slightly differently, but it’s a great trick to play with if you want to have a variety of image sizes and styles.

Full HTML

Perhaps the best parts of the WordPress editor is that you’re never limited to just WYSIWYG. You can write HTML directly in the WordPress editor and it will just work as HTML usually does. No limits! Here’s a standard YouTube embed code as an example:

Recent Posts Block

Gutenberg Latest Posts block load content from you WordPress posts (classic editor format or Gutenberg Format). There is 3 display options available, display latest posts as Grid, as line or as post slider.

Chat online about the Gutenberg WordPress Editor with the Kiwise WP team.

For more WordPress and IT tips follow our Kiwise WP Facebook, Kiwise WP Google, Kiwise WP LinkedIn and Kiwise WP Twitter.