Gutenberg Guide: What You Need to Know

Posted on Jun 10, 2019 in Artifacts | No Comments

What is it?

Gutenberg is the name given to WordPress’s new visual editor. The new editor allows for more flexibility and control over your content. This only changes what the site looks like where you enter content, nothing will be changed on the front-end. Gutenberg’s goal is to make adding and editing content easier.

An advantage of Gutenberg is that we now have the ability to make the back-end of your site better resemble what you see on the front-end. This will save time when creating pages and posts.

So now what?

For our clients who like the current way of doing things, fear not, nothing will change. But, if you’re interested in the additional customization and control that blocks offer, we’re happy to discuss moving you and your site into the future!

At Miller Designworks we make a lot of custom fields for our clients, if this is the case for your site, we can keep these fields and still add the bonuses of the new visual editor.

Overall, Miller Designworks is excited about this new change and all the possibilities it holds for our clients. Contact us at the studio to start your upgrade!

A Small Preview:

In Gutenberg, “blocks” make up the content; these can be moved up and down the page and have individual settings. For example, you could have an image block, a paragraph block and a quote block. Instead of these being locked into place, you can freely move them on the page.

The following are some examples of how Gutenberg looks and acts in a page. These are the basic functions that will be relevant to every site.

Gutenberg Editor Example

Here is an example of a basic Gutenberg page. Note how simple the page looks, most of the options are hidden within the relevant sections and only appear when selected.

Finding all your block options is as simple as clicking the icon:

add block options example

Adding a block within a page/post and edit properties:

adding image example

Move blocks easily by selecting an arrow or click-and-drag: