It was the day before Gutenberg

So, Gutenberg releases tomorrow. If things go as planned obviously. My thoughts on Gutenberg will have to wait. I just wanted to write a view as a normal user of WordPress and Gutenberg.

Gutenberg hasn´t left anyone either wonderously gracious for the new editor or deeply dissapointed. It seems to be a split right down the middle of people either hating or liking it. Nothing inbetween. Which must be a first time for me seeing it happen this cleanly.

Worries about tomorrow

Will my theme work with Gutenberg? Will my sites crash? What do I have to do to update in the safest possible way?

The questions I´ve seen and the worries basically boil down to one really big question: Will my site work if I update to WordPress 5.0 tomorrow?

Or will Gutenberg, the new editor completely break every site I update and thus I need to spend either time or money fixing all of the issues the new editor will bring.

The answer comes not as simple as one would think. As to my knowledge and the experience I´ve had with Gutenberg? It will differ largely for others. But I will try to make some sense.

For the normal user

When I write posts like this? I use a different software called Typora and so far I fully enjoy writing here as it´s easy, distraction free and just works. I can easily write out a thousand words and still have place and drive to write more.

After the update to WordPress 4.9.8 where Gutenberg was first introduced I´ve also written posts completely in the dashboard of WordPress, using Gutenberg.

My thoughts? It´s easy as crap to write in Gutenberg. Yes they call it adding blocks when you just type your normal body text and if you had to go up and press the + sign and then insert a new block for each and every line you wrote? It would be frustrating and anti-writing.

Now? You just click and start typing away. When you press enter a new block will automatically be made and you can just keep writing. If you want to write distraction free it´s also quite easy as it´s just the press of a button to get nothing but your writing space.

For this reason and with my own experiences writing on a meager two blogs but still. Using Gutenberg has been a blast and it made me switch from the code editor to the new editor. Before I did not like the WYSIWYG-editor at all since what you saw there didn´t look anywhere near what the theme outputted.

Gutenberg fixes this and makes what you see in the back-end of your dashboard look extremely close to how the post end up looking on front-end. The advancements made are freaking awesome and now I just want to learn more about Gutenberg and see what interesting “blocks” they can push out.

The power custom field user

Custom fields are a great way to display various fields and input more of your own personal touch to objects without changing the code too much.

This is where an issue appears. With Gutenberg custom field showing option has disappeared. If you use a plugin like Pods which creates it´s own fields and displays them below the normal content. This approach works with Gutenberg and since I use Pods for custom post creation and small custom field usage it works brilliant for me.

There is a plugin that supposedly adds the old custom field approach back into Gutenberg but as I have not yet tested it I can not say how well it works.

New classes

With Gutenberg comes more new classes to work with. And it´s here where the Gutenberg might create a bit of an issue. Before while working with alignments of images (like if you wanted the image to float left and still have margin?) you could get an output of code like this:

<figure id="attachment_689" style="width: 300px" class="wp-caption alignleft"><a href="link to image"><img src="link to image" /></a></figure>

It´s easy to work with this in theme development as you can specify a

img.alignleft { margin: 0 60px 30px 0; }

And it will create margins around the image. When using the new Gutenberg editor and you haven´t added the correct classes? The margin will dissapear and it’ll look very very tight. Like this image taken from my project Deculture and a left aligned imaged and everything done in Gutenberg

If you inspect the image you get this code instead of the previous one:

<div class="wp-block-image alignleft"><figure class="alignleft is-resized"><a href="link to image"><img src="link to image" /></a></figure></div>

As seen there is a extra encasement with the Gutenberg block. This messes with the code previously displaying and in short floats the image left but feel the image itself does not need any margins.

The solution? I just have to add the wp-block-image alignleft selector to my style.css and then update the file on my server and there will be margins again.

There are many many more classes getting added to WordPress and Gutenberg and as developers you have to make it all work. This opens up for another issue on the bad side. This code is outputed one way today. Tomorrow it might become official, it might also have changed to something else and then once again you need to either change or add selectors and styles. Since Gutenberg is also under development still the way they choose to output code in the future might change and that could end up being an issue.

Basically, your good to go.

In all fairness. There is little to no worry to upgrade to WordPress 5.0 and Gutenberg tomorrow. I´ve updated my two websites to the latest version of Gutenberg and WordPress and nothing has changed.

For theme developers? The future is looking really bright as you now get easily accessed blocks which needs styling out of box instead of having to write the code and it only appearing in the style.css file and then having to tell you clients “oh hey you want to make a button with a different color? Here use this code” vs with Gutenberg “Brand colors are included, you just check a tickbox and now you can choose the colors of your liking” basically. For the end user this approach is much better than having to sit around and enclose everything in different code.

For me Gutenberg is the way to go for the future as it makes writing and creating posts and pages a blast.

If you are a normal user of WordPress, you write blog posts and you upload images to display your latest photos or pictures taken of your pet? You should honestly be good to upgrade to Gutenberg and WordPress 5.0 tomorrow.

This is also something I´m writing from my own experiences and how I see at this subject. For me there are no issues I can not fix simlply by adding code into functions.php of the theme I´m currently using and then adding or changing the selectors in style.css. This is all I have to do to get WP 5.0 and Gutenberg to worl flawlessly.

For any custom build, plugin or theme that has been made by other people? It might crash unless they have been following the development of Gutenberg. The more anything interacts with the editor of posts the more likely it is the plugin or theme will be working with Gutenberg and thus they need to work nice together.

If for some other reason you do not like Gutenberg as the new editor? Untill 2022 you have the option of installing the Classic Editor plugin. Since as always, “there is a plugin for that!”

Happy editing and happy new version of WordPress tomorrow!

Yes. I will be taking a more in-depth look at Gutenberg when the next version of WordPress is released as things might change from what I´m currently using without any issue and the “finished product”.