Getting Started with WordPress 5.0 and the Gutenberg Editor

[@KristenSmithSmithspirations]

Helpful as always, Grayson! I’ve held off on updating until now, almost a year after the big update dropped. Your video has helped me feel more confident switching over.

[@Imarkinteractivecom]

Glad to hear it.

[@PaulMcCannWebBuilder]

A correction at 09:25 - the code block is not where you would put affiliate links or JavaScript. You do that in the Custom HTML block. The code block is for displaying code. Content in the code block is wrapped in a 'pre' preformatted tag and given a wp-block-code class for displaying code, not rendering it.

[@Imarkinteractivecom]

Yes, you are correct.

[@pearlw7325]

thank you so much!!!!! I just updated Wordpress thinking it was just regular stuff and then got the shock of my life when I went to edit a post. Your video gave me the confidence,lol! I think I am going to like this update a lot after I have gotten used to it a bit!

[@GraysonBell]

My pleasure!

[@simoncrowe85]

I almost had a meltdown last night. It was late, I really wanted to finish my 2nd post of the day, a target I set myself... I saw an update notification come up and completely naively just hit update. So I'm half way through a post, almost finished and everything switches on me. Man that was frustrating! But I think I'm getting the hang of it now. This video really helped, thank you for taking the time to put it together.

[@GraysonBell]

That's why you can use the Classic Editor plugin. It would have kept you on the classic editor longer to give you time.

[@integratedwellnessbodymind5732]

Thank you so much! I was going insane trying to figure out what happened when I updated to 5.0. It was so frustrating as I was in the middle of creating a page when I updated. I cannot upload any more images within that 'block'. Ugh! Once again, your explanation was very easy to follow.

[@precisionstriping5991]

Can you tell me how you change individual text color versus the whole paragraph text color? For instance wanting to highlight a link. Awesome video - thanks!

[@Imarkinteractivecom]

You would need to do that using the classic block as it's not possible inside of the paragraph block right now. Links are controlled by CSS in your theme. You shouldn't have to change colors of links in the editor as that is inline styles and can't be overwritten by your stylesheet. It's best to control all link colors in CSS

[@nicholascuccia6399]

Thanks for the walk-through. I had been working on two sites using Divi, and was getting used to that. For a third client I have had to use the Enfold theme, and the client upgraded to 5.0, so I was thrown into Gutenberg world. I was eager to see how this would play out. So far, I am not as sanguine about it as you are but as a software trainer I know it takes time to swallow the Kool-Aid. A few issues, which you may now have an answer for, I hope: I was glad to see the "Inline Image" option, but I can't get the type to wrap around it. The only control of the image is to make it larger or smaller; it sits on the baseline of text and can't be moved. Perhaps I'm doing this incorrectly. What I had already figured out: It's better to use the plain image block and resize the image using a side handle (not shown in your video) and then the text in the next block will wrap up around it. Problem with that is that the image block includes the caption, which you can leave blank, but the space for it is still there. Since the caption code doesn't show in the HTML view, I'm guessing you have to write CSS to suppress its display. Finally, I'd like to have the ability to set a custom size on placing an image, not just the presets. Thoughts? And thanks again. - Nick

[@RealJustinZiegler]

Great video. I'm having some issues with Gutenberg. 1. Yoast SEO shows that my posts have word counts of 0 even though they have thousand or so words. Since Yoast SEO thinks each post has zero words, it can't tell me about the readability of the page. 2. It's also more difficult for me to italize or bold text because the toolbar or whatever it's called doesn't always "move down" with the post text when I'm editing old posts. Not a big fan of Gutenberg so far. On a positive note, the reusable block feature does seem cool.

[@denecanon9217]

If I update to 5.0.3 am I in danger of loosing anything? Will 5.0.3 have easy manual options for linking social media, etc. or do you need to tell me where these will be?

[@AGOODSAMARITAN1804]

Hello kindly help, I insert the outdoor theme from Astra unfortunately isn't working I'm gettin the following message. This page doesn't seem to exist. It looks like the link pointing here was faulty. Maybe try searching? Search for: IN THE BACKGROUND IT'S SAYING GOTENBERG BLOCK NOT RUNNING IN THE PLUGIN AREAS

[@cebcreative]

Thanks for this detailed run through. Some features look very useful and it’s not as scary as I thought!

[@josephhogue]

Grayson of iMarkInteractive has been THE TECH GUY for our group of financial bloggers for years. He's saved my butt on four blogs quite a few times and comes through with this Wordpress 5.0 Gutenberg tutorial. Calmed me down a little about using the new structure and ready to make the change.

[@Imarkinteractivecom]

Thanks sir!

[@jb64068]

Thank you! Great introduction to Gutenberg, gave me everything I needed to decide to make the jump.

[@Imarkinteractivecom]

My pleasure!

[@darlhouse]

Does anyone know where the new built-in Gutenbuerg css classes are kept? For example, I am trying to find the table class called "is-style-stripes" so that I can modify it, but I don't see it in my style.css file in the Editor.

[@Imarkinteractivecom]

You have to add that specific CSS style to your own stylesheet. This stuff is typically inside of the core WordPress files, which you don't edit.

[@darlhouse]

@@Imarkinteractivecom So would I give it the same class name and it will overwrite what's in the core file?

[@Imarkinteractivecom]

@@darlhouse You would add that class to your own CSS file and you can style it that way.

[@annetbrink8902]

With WordPress 5.0.3 Does it mean that if I have text written in ms word I can no longer copy and paste the whole document, I have to actually copy and paste in paragraphs???

[@KidsBee_TV]

How do you change something in the Advanced Layout Editor when using Guttenberg? I've used this editor to build my website, and now that wordpress did the update, I can't change the texts that already write in the text block of the Advanced Layout.

[@Imarkinteractivecom]

You can't. That is a different writing experience. You'd need to make sure that plugin for the advanced editor will work with Gutenberg. Right now you have to use Classic Editor plugin to go back to the old editor.

[@muhammadshehroz4968]

Are there any hooks to customize gutenberg e.g can we add custom element in gutenberg just like we do in Visual Composer?

[@anitamorris1594]

Thank you so very much for this tutorial! I went to write my new blog post on Saturday and was shocked. I forgot I had my account set for automatic updates. Anyway, I'm liking the changes so far, but I can't figure out how to add my opt-in email form at the bottom of posts. I used the Site Origin editor before and just put the form in the last box of the post. How do I do that now?

[@Imarkinteractivecom]

You can use the html/code block now for that

[@dheerajsingh7265]

How to change color of selected text?

[@evanyang000]

Hi, I found two awesome plugins on a website, but after many times of attempt, I still can not find out the correct plugin-names, could you help to figure out? Thanks.

[@Imarkinteractivecom]

I'm not sure what you are asking. How would I know what plugins are trying to install?

[@evanyang000]

@@Imarkinteractivecom Thank you for the quick reply, I do really appreciate it! May I write you an email about the details? Or, could you send a message to my email [e-mail] and I will reply you with the situation?

[@FiscalRangersFlorida]

I like the the blue shaded circle behind the cursor? Where did you get it? Great info, but klunky prese because you have plugins like Yoast or Genesis installed so we are not seing a true example of what Gutenberg is when alone. Very confusing to know which is which.

[@Imarkinteractivecom]

That was added in editing. Yoast is a popular plugin and most people have plugins, so why wouldn't we show them? Genesis is a theme and doesn't really affect the editing experience.

[@paullevy5612]

Some web hosts will be blocking the update if it has been installed via Softaculus or similar, in order to mitigate the possible peak in support requirement issues, with everyone possibly updating at once and breaking their sites .

[@GraysonBell]

Yes, some will. Most don't push auto-updates on major releases anyway, but I know SiteGround is pushing the new release, but waiting 5+ days.

[@mindxakep]

1.5 speed helps a lot :) (did someone say 2.0x)

[@Imarkinteractivecom]

Haha, I'm sure it does :)

[@agustinjuarez-garcia4801]

Can I go back to classic editor, if I do not have a chance, where do I go to H1, H2,H3,H4, ETC

[@Imarkinteractivecom]

You can install the Classic Editor plugin. Headings are in their own blocks called Headings.

[@jparrottmerrell]

Thank you so much. This video helped me recover from the mini heart attack I had after I updated to Wordpress 5.0. Are the short links still around in Gutenberg? If so, where are they located?

[@Imarkinteractivecom]

Shortlinks come from Jetpack now, so if you don't use it, you don't get shortlinks.

[@mowtoll]

Did make a huge mistage and install WP 5.03 for a new site, have use plugin to remove gutenberg, but wish i have installed 4.9.x insded to newer update it

[@navitkumar9537]

Use classic Editor plugin and activate it. It will bring back the old classic editor.

[@mikifiki01]

Why the heck I do not see this and my wordpress is updated? sigh:(

[@dilanramanayaka3867]

Elementor loads forever after the 5.0 update. I think it's time for me to get onboard with the Gutenberg. Thanks for the valuable information.

[@Imarkinteractivecom]

That's strange. I'm using it right now on 5.0.2 and it loads quick and works just fine. You might have some plugin/theme issue there.

[@dilanramanayaka3867]

@@Imarkinteractivecom I'm using OcenWP theme and WordPress version 5.0.2 can you please help me get Elemenor to work again. It literally doesn't work. Thank you.

[@dilanramanayaka3867]

@@Imarkinteractivecom I figured it out. Essential Addons for elementor plugin was causing the problem. Thanks for the help. Really appreciate it.

[@Imarkinteractivecom]

@@dilanramanayaka3867 Glad to hear you figured it out!

[@MrWilkat1]

Thanks, this did help me a little. But my update loaded automatically and I had to revert back to the classic version because I couldnot figure out how to insert ShareAsale ads, or Amazon ads since there's no more "Text" and "Visual" tabs to click on on the righthand side. I tried inserting the html code but it only displays as code after--any info.on how to do this would be helpful and appreciated.

[@Imarkinteractivecom]

It shouldn't display as code in the HTML box. If that doesn't work, try using the classic block option to insert the code.

[@MrWilkat1]

Thanks, I'll try that when I go back to the new version. I was not aware of the "clsssic block option" until I watched your video. Personally I don't like these changes re made as it slows me down and time is so critical. Some of the changes are good but now I need to learn them all and they are not always intuative.

[@Imarkinteractivecom]

@@MrWilkat1 It takes time to learn a new process. Took me about 10 posts to get into a new rhythm but now I can run through a post easily.

[@MrWilkat1]

We are usually negative about change and often for good reasons--even Apple screws up a lot these days when they update OS and try to patch things that created problems for us--I'll wait a while before making the switch LOL! @@Imarkinteractivecom

[@dsk1769]

When a block is removed the add button remains. Is there a way to remove it?

[@Imarkinteractivecom]

Click in the space and hit delete if it's in the middle of other blocks. If at the end, it doesn't matter

[@dsk1769]

@@Imarkinteractivecom I would like to send you a screen shot of my issue.

[@Imarkinteractivecom]

Find us at imarkinteractive.com

[@percygrower3548]

Watching this video will change my website! thanks for all the info!

[@DaLeSy.]

Why don't my affiliate links work on wordpress 5? It adds "%20" to the beginning of the URL and prevents it from working.

[@Imarkinteractivecom]

How are you adding them? Are they just regular tracking links or are you putting in JavaScript?

[@DaLeSy.]

Neither, they're just regular links to someone else website/product. I just select the text I want to link and click the link button and put in the URL and save it. But then when you test out the link it ads "%20" to the beginning of the URL and it prevents the link from working. If you go back in to edit the link it does not show the "%20" so there's no way to remove it.

[@Imarkinteractivecom]

I have not seen that in any of my linking and I link to affiliate and regular all of the time.

[@PaulMcCannWebBuilder]

@@DaLeSy. the %20 is the character code for a space. Check to make sure the copied link or the place you're pasting it in doesn't have a space.

[@markhwarner]

Thanks for this video. It's really helped quell some of my anxiety related to this upgrade. Excellent content; I'm book marking this video for future reference. Okay, here's my perhaps dumb question: How does one add a secondary title to a blog post? In the past, I was able to add a second "sub-title" at the top of a blog post. I don't see this option in the new Gutenberg editor? For example, here's a link to a blog post I wrote in the past on my site using the old Wordpress editor: www.exceptionalpoker.com/?p=3759 I was able to create the main title "Keep Your Big Mouth Shut!" and then a secondary title of "The danger of talking strategy and tactics at a poker table" immediately underneath. How do I add this secondary title like this in the new editor? Cheers again!

[@Imarkinteractivecom]

That's not a normal feature of WordPress. That would have either been a part of your theme or a plugin, which doesn't sound to be compatible with Gutenberg.

[@Geekphilia]

How do I now add a custom message so when I post to Facebook or Twitter it shows?

[@Imarkinteractivecom]

Usually that comes from Yoast or some other SEO setup where you can set the meta description, but the featured image would still be used in most cases

[@zachscombat]

I can't post anything, it says update failed...

[@Imarkinteractivecom]

Contact your host.

[@whatisweightlossabout]

oh nooooo, :( what do u do if you have accidently press the x and it has all cleared :'(

[@Imarkinteractivecom]

Yeah, there is an undo, but there should also be some revisions.

[@taughtup6418]

massively struggling to add privacy policy code to a page, can anyone help?

[@Imarkinteractivecom]

What code?

[@ahmedmohamoud5287]

Sir please we need more videos like this ,we are waiting you

[@lagonlez]

Nice video to clarify my mind. thanks!!

[@lionelsaayman5647]

Thank you for this Gutenberg instruction video Jay-Z

[@stephangunville3483]

Ive been playing with it for a couple hours and I absolutely love it! It's just like the divi builder! awesome! Only thing I dislike at the moment is that generating a preview of my page takes wayy longer than before, but im ok with that, might improve later on.

[@Imarkinteractivecom]

Yep, it grows on you once you understand how to use it.

[@stephangunville3483]

@@Imarkinteractivecom Thx for the great vid btw! Keep it up!

[@Imarkinteractivecom]

@@stephangunville3483 Thank you!

[@JerryHou85]

The block feature looks like Notion.so

[@greenlife-gardens]

Thanks, you should do more videos, your a good teacher!

[@GraysonBell]

Thank you! We plan on adding more soon

[@MaxelMiliam]

I love it, but can't seem to upgrade!!! How did you do it??

[@GraysonBell]

Upgrade to Gutenberg? The release isn't out yet, but will be tomorrow. This is on a development site and I downloaded the release candidate so I can pull in the nightly builds of 5.0.

[@robsaxepga]

It looks like I can dump win live writer with this update. Thanks for the vid!

[@ComiendoRico]

Excellent info. Thank you.

[@julieb.8204]

Okay... that reusable block is AMAZING! No more copying and paste-ing our affiliate disclosures! Can you use the classic editor on the headers to change colors, etc on the headers? Old posts, when they turn into a Classic Editor block... will you have to pretty much rewrite the whole thing if you need to update old photos, etc? Okay... I don't know what the fuss is. This seems pretty easy and intuitive. Great tutorial, Grayson!

[@Imarkinteractivecom]

I assume you mean the classic editor box. That should still work, but I haven't tested it. Yes, you'll have to pull out everything from the classic editor box to make them their own boxes if you want to change things over.

[@simoncrowe85]

@@Imarkinteractivecom From what you're saying it sounds like ti might just be easier to install the Classic plug in and activate it when editing old posts?

[@ThisisMastermind]

its the worst version on wp

[@GraysonBell]

@@simoncrowe85 You can do that, yes. I believe you can actually choose now with the classic editor plugin (don't quote me on that).

[@GraysonBell]

@@ThisisMastermind I would disagree. Yes, it's a big change, but if you use it enough, you realize the potential it has and how much easier this will become.

[@brucecrisp7613]

Thanks very much. This was most helpful.

[@Imarkinteractivecom]

My pleasure!

[@pruthveerajukurapati1859]

good intro for beginners...

[@annetbrink8902]

Very helpful video👍🤗👏👏

[@onuro]

Great video man! Don't forget the kioken blocks. It adds premium page builder capabilities to the editor: wordpress.org/plugins/kioken-blocks/

[@ElectroWow]

I don't like it, it's so confusing I prefer Wordpress 4

[@GraysonBell]

It takes a bit to get used to, but once you understand the power of it, it's good. I've been using it for 9 months now.

[@ElectroWow]

@@GraysonBell No, I won't get used to it. The Classic Text Editor is way better and practical.

[@GraysonBell]

@@ElectroWow As noted, it takes time as with anything new, but over time you'll most likely have to start using it since plugins won't be able to be compatible on both systems. They are completely different from each other.

[@ElectroWow]

@@GraysonBell I don't think so... people are already protesting about this new system, and we won't accept this shitty block thing in the future, NEVER! They can't force us to use it. They will have to bring back the classic editor, trust me. 😉

[@Imarkinteractivecom]

@@ElectroWow There have been people upset about it since it was announced. No one did anything about it but complain. Those who don't like it can always try to fork, support, and grow a different version. That's the beauty of open source. They won't bring back the classic editor as it will be almost impossible for plugin devs to support both down the line.

[@apowersoftde]

Thank you so much for this video, it is the only way I was able to understand this rubbish version! This is the worst update I have ever seen a company release . It is impossible to use if you have any html experience and actually just want to write code easily. But it is very good for brainless dummies who don't know what they are doing anyway.

[@jahanfarzadfarzad2445]

very nice tanks

[@WayTwo]

Nice accent!

[@nunungsetyawan1406]

Very good...(y)

[@mufidabusaid8069]

شكراً ًًًًًًًًًًًًًًًًًًًًًًًًًً

[@Ishanamin]

@22:56 I heard Trump! just joking....apart form that..great video thanks.

[@brianoliver9224]

Don't like it at all. I'm just a movie blogger and I use templates for my content. This Gutenberg is absolutely infuriating. I can only hope the classic editor sticks around beyond 2020...

[@simoncrowe85]

I use a template too... I'm actually copying the old template and recreating it in Gutenberg so I can use still use my template if that makes sense.

[@GraysonBell]

You can recreate a template to use in Gutenberg. I haven't seen any data of when the Classic Editor plugin might go away, but as of right now, they have no plans on removing it. Someone will come up with a different one (there are already several) to disable Gutenberg, so you should be OK. At some point, you will need to upgrade.

[@brianoliver9224]

@@simoncrowe85 That is an option. I'm looking into a plug-in called ClassicPress, though it's only in a beta and not sure about it. But certainly will look into a new template, only problem is, this Gutenberg seems to add more steps than I need as I tend to use the source code to make some changes (and the new one, the window is so small and is harder to find what I'm looking for).

[@brianoliver9224]

@@GraysonBell Will see what options are out there, like this ClassicPress Plug-in, in the next year or so. While I don't personally like what I've seen of Gutenberg, if you're a blogger, I can see its usefulness. For me, it's just not quite right, but who knows.

[@GraysonBell]

@@brianoliver9224 It's not for everyone. I'm sure as it progresses and people build more custom blocks for it, the usefulness will be extended.

[@iamwhoiam4410]

This comment has nothing to do with the owner of this video. He certainly sounds like he knows what he''s doing. This is probably the largest disaster that's ever been introduced into web design unless you're nothing more than a rank and file blogger. Pro web designers and developers are dropping out of Wordpress like flies in a hell storm. Being not fully ready and shoving it down our throats by Wallenburger and his hand picked developer buddies have started taking Wordpress down to an also ran CMS. Personal and Business websites and Woocommerce sites all over the world are crashing after they updated.

[@Imarkinteractivecom]

I know a lot of devs and designers and haven't heard many dropping away from WordPress. Still the most used CMS in the world. Yes, this could have been better handled for sure, but change is inevitable when you have a controlling market share.

[@quellers3]

Jeeze this is soooo boring!

[@islamiapdflibrary]

Thank you! Great introduction to Gutenberg, gave me everything I needed to decide to make the jump.