Gutenberg | Geek Life: Augmenting Reality

If you've updated your WordPress blog to 4.9.8 recently, you will find a new option that, for better or worse, will absolutely change the way you manage your blog post structure. Find the option ot install Gutenberg in your WordPress dashboard. Depending on what newsletters, Flipboards and/or Twitter accounts you subscribe to, you might have heard lately that WordPress is doing a serious update to the WordPress post/page editor, that will be coming to your website really soon. Like, any time now. Welcome to Gutenberg Where WordPress.org took the classic post/page editor... Classic layout for up to WordPress 4.9 And gave it one heck of a makeover... New WordPress Gutenberg Editor - soon to be the default post/page editor, when WordPress 5.0 is released. If you hate change, you are going to have a rough time adapting to this new building-block system. It's so different, that you'll have to unlearn much of what you've taught yourself on how to manage your blog posts. This said, while there will be an option to install the "Classic" editor back into your WordPress site as a plugin, I would suggest trying to use the Gutenberg version first for at least a week, because once you do get the hang of this new editor structure, you just might learn to love it. What Makes Gutenberg So Great? Building Blocks for Better Post DesignReusable BlocksBetter SEO With EaseGet to Know Your Article BetterImage Galleries 1. Building Blocks for Better Post Design It's all about the blocks, baby! Think LEGO. Gutenberg has a lot of embeddable features that will make adding media (pictures, video, tweets, etc) easy. Common Blocks for Gutenberg Wordpress Blog Post Editor Honestly, with any embeddable link (Twitter, Instagram, Youtube, etc), you simply just have to paste the link into the editor window through a default Paragraph block, and Gutenberg will take care of it. File Block Easily embed files for your users to download. I haven't been able to find a list yet of what file types you can embed, but I would imagine it includes Microsoft Word documents, Excel files and PowerPoint presentations, PDFs, and likely music and video files. Classic Block If you have plugins that created a complicated WYSIWYG for your Classic editor, you’ll be happy to note that you still have access to the TinyMCE setup by using the Classic Block. WordPress Classic Editor is still available in Gutenberg under Classic Block. Simply access it by typing "/Classic" in the paragraph box for easy access. So if I still want to access the Click to Tweet button, I'll need to open a Classic Block for this... [click_to_tweet tweet="It's a good time to read 'Five Ways the #WordPress #Gutenberg Editor Will Make Your Blogging Business Life Easier' before your website updates to 5.0!" quote="It's a good time to read 'Five Ways the WordPress Gutenberg Editor Will Make Your Blogging Business Life Easier' before your website updates to 5.0!" theme="style6"] To find all the Blocks available for embedding, click on the Block plus-sign button in the top left corner of the editor window, and choose from a wide array of block options. Search through a wide range of block options to build the perfect blog post. Twitter Block I didn't have to play with the theme style at all in order for this embedded Twitter post to be added nicely. https://twitter.com/AerynLynne/status/1000215399101747200 I did have this Twitter post box styled for my theme before, so I'm not sure if that code happens to still be effective here. I couldn't find it in the inspector, but please let me know if Twitter embeds work differently for you. YouTube Block The Youtube embed on the other hand, I had to play around quite a bit with my CSS style file to get this video to look exactly how I want it. Out of box with Gutenberg (at least with a Genesis theme,) the player would left-align no matter how many times I'd press the centre button, and the video window was rather small. https://www.youtube.com/watch?v=D-tfZdb9JuI&t=18s 2. Reusable Blocks This is probably the best aspect of Gutenberg's block system. Exactly as it says on the tin, you now get to reuse chunks of text, images, video, and whatever usage you can dream up! Especially if you're using your blog to generate an income, you'll be familiar with these kinds of statements... Text disclaimer for sponsored blog posts: Or, image disclosures for affiliate links: You can now save those bits of text and images that you utilize frequently in your blog posts. And paste them with ease, whenever you need to with a mere couple of clicks. No more going into old posts to copy/paste HTML code, images and/or text, WOOT! 3. Better SEO With Ease One of the best reasons to use Gutenberg over the Classic WordPress editor is that it blows the old "classic" WordPress post structure for SEO out of the water. Technically, you should have been wrapping a tag around all of your images and for the text to go along with them for some time now, but that extra work was exhausting. Gutenberg's blocks creates these SEO tags automatically, so Google will love you more now. Yay. The more rigid structure of blocks helps keep you from making SEO no-nos that are too easy to do. For instance, header tags, such as H2, H3 and H4 are not meant to increase the font size of your text no matter how easy it is to use them for styling your thoughts. Gutenberg makes it easier for you to choose font sizes, colours, and even background-colour for text that you wish to highlight, without touching those header buttons. So go ahead and play with your font style for each post, without messing up your SEO so much. If you have a style that you enjoy using for text emphasis, save that paragraph block in your Reusable block list to keep a uniform style for all of your posts. If you're finding that you're using the reusable styled paragraph block for your entire post though, it's time to find a web developer (like me) to fix the look of your font site-wide. 4. Get to Know Your Article Better The new editor also shows a breakdown of your post when you do use headers, so that you get a better idea of your story flow. If you tend to write particularly long articles, keeping track of your Headers (H2, H3, H4) may get tedious. Especially if it takes days for you to write your piece, relearning your outline can be a cumbersome thing with the Classic editor. Now with a simple click to the circled "i" at the top left corner of the Gutenberg editor, you can find key information of your post to keep your writing on track. The table of contents for the post is a perfect little helper to ensure that my posts are lined up exactly how I want them to look for Google. With that same train of thought, I can also determine right away if my SEO keywords in each header are on track, without the annoying scrolling I'd always end up doing through the classic editor. 5. Image Galleries There are a lot of gallery plugins out there, but the Gutenberg editor comes with a beautiful version built in. Easily drag and drop your group of images into the post editor (all at once), and the Gallery Block will "activate", sorting your images into a nice layout. If you don't like the order that your images are displayed in, click on the edit button to manually sort your images into the correct order. Also, quickly write captions on each image, without the need of a photo editor. Boldt CastleSuspended CabinsChalet et SpaMeeting a CrabChilling with a Musk OxKayaking with FriendsDude, a bear. BTW, if you like these pics, check out the fun I'm having with Geek Travel! Current Drawbacks of Using WordPress' Gutenberg Gutenberg is not perfect. It may never be perfect, but it's at a great starting point for WordPress users that are only familiar with the "Classic" editor (there have been numerous block-style editing plugins on the market for years, arguably with more advanced options to choose from over Gutenberg.) That said, getting used to the new Gutenberg editor may be too much to ask for the average user. Some may have strong feels against the idea that their TinyMCE WYSIWYG editor seemingly no longer exists. (It's still there, but you've got to go find it.) I foresee many a wide-eyed, "WTF is this?" exclamations in home-offices across the globe. Followed by some mild-anxiety induced, "FML!"s by those that have deadlines to meet and not-at-all-assured on how to make that happen when they don't even know how to find the bold, for cryin' out loud. And not all of the editing blocks will work if there is a conflict between the plugins installed on your site and Gutenberg. This is what I got when I first tried out an HTML block. Adding bits of code to a blog post is something that I frequently do. Adding an HTML box propagates an unknown error. I had spent half the day trying to figure out which plugin was having all kinds of issues with Gutenberg that a good majority of blocks weren't working. Out of the 50-ish plugins Geek Life uses, I was expecting many, but it turns out that the only culprit has been found so far: WP External Links. If you use this plugin, Gutenberg will likely not work for you, until it's disabled. So if you find that you're having issues, you can use Troubleshooting to test which plugins are being a pain for you. Now though? My editor is saving way too many times, which eventually eats up a lot of memory with all the copious and unnecessary calls to wp-cron.php. Check in with your hosting provider to see if there are any CPU issues arising if you start to use Gutenberg. You don't want your host to blindly shut your site down for a day or two because of your WordPress editor. That would suck. The frequent autosaves may be a sign that another plugin is conflicting with the editor, but I'm not so sure how yet. What I do know is that it's actually slowing my laptop down a bit the longer I stay in the editor. I know something is up when the fan turns on and stays on, while all I'm doing is opening a new post window. I'm hoping this is something that will be fixed before WordPress 5.0 rolls out. Warning: Images Are Larger Than They Appear Images that are smaller than the width of the blog post area seem to be affected with some kind of responsive styling. They're definitely larger than I've saved them from Photoshop... you can tell by how blurry they look. This doesn't seem to affect images that are at least the size of the post width, so your travel and/or food photos should be safe. Should I Try Gutenberg? Maybe wait until WP 5.0 rolls out? The current version that WordPress is offering for you to try is still technically a beta version, and definitely has a few bugs or incompatibilities with various plugins. The 5.0 editor will be the most stable version currently available. Enough so that WordPress is happy enough with it to make it their new standard. Given how popular WP is, I'm hoping this wasn't a decision they had made lightly before proceeding. I do believe though, that once 5.0 is updated on your site, you should definitely take on the challenge of discovering the new editor, and embrace the change. It will be all kinds of different, but it will also be all kinds of worth it in the end.

Tag: Gutenberg

Five Ways the WordPress Gutenberg Editor Will Make Your Blogging Business Life Easier

Technology. Collectibles. Travel.

Technology. Collectibles. Travel.