 Andrea Zollner. Andrea is the chief content creator at SiteGround and the lead organizer for WordCamp Montreal. There's a reason to travel. She trained as a broadcast journalist and worked in corporate communications before trading it for a career in tech. Now she spends her days developing brand messaging, copy editing, and blogging her adventures on her travel blog. Give it up. Hi everyone. Can everyone hear me all right? Okay, great. Thank you so much for joining me so early this morning. I'm kind of grateful that I'm still on East Coast time because I'm doing all right even though it's 9 a.m. But so yeah, so I would just like to start by thanking the organizers of WordCamp OC. This is such a great camp. So far I've had a great time and as an organizer I know just how much work goes into it. So the volunteers, the speakers, but the organizers, everyone works super hard. So thank you for that. So this session we're going to be talking about Gutenberg and I want to just start by saying that I am a content writer. I'm a content creator. I'm not a developer. So this talk is going to be geared towards content creators. And I'm going to be talking about the power of Gutenberg and how we can use it as power users. I'll talk a little bit about the different plugins that we can use to boost our WordPress sites, but I'm really going to be focusing on storytelling and how we can use Gutenberg to really boost our communication, whether you're a blogger or whether you manage a website for your company or your organization. So a little bit about me. I mean you heard in my bio, I am the content creator at SiteGround. I study journalism. I live in Montreal, but you can also reach me on Twitter and that's my handle. And the last thing about me is that I like Gutenberg. So for a lot of people when Gutenberg first came out it was really stressful and I understand from a developer's perspective there's a lot of reasons why that was an issue. But coming from a content perspective I was just really excited about having more tools that are going to be able to empower just the average user to do even more with WordPress. And even more from WordPress right out of the box. So I just want to mention I'm super lucky that SiteGround sends me to WordCants like this and gets to travel. And I also have a colleague, Francesca, who's going to be talking in a couple of hours. So just super grateful that I'm here and able to represent them. So now that I've shared a little bit about myself, I do want to know a little bit about you, about the people that are in the room. So who here is currently using Gutenberg? All right, that's actually not bad. I expected, yeah, it's always surprising to me nine months in how many people are still afraid to take that leap and sort of have been putting it off. And then some people that have sort of been making the transition but slowly and aren't really sure if they're using all the tools to their maximum capacity. So that's really exciting. So if you're not super familiar with WordPress, I know that WordCants attract a lot of newcomers and new people to WordPress just quickly. And I hope you can see this well. But this is sort of the transition that we experienced with Gutenberg. So in the back, you'll see the classic editor, which you can still have on your WordPress website with the classic editor plug-in. And then after WordPress 5.0, we had Gutenberg, which is this block-based design where you can have reusable blocks and you can really customize how your site and how your pages are laid out. So that's sort of some of the differences. And so if you take a look at the right-hand bar, you'll see some of the tools are similar than they were before, but they've been a little bit redesigned. So that's sort of the bones of it. But before we get into the actual tool, I kind of want to back up a little bit because I think the easiest way to approach a new tool is to start with inspiration. And I think it's a fun way to start with a creative idea and then learn how to do that practically. So does anyone know what to snowfall means? Is this something that's familiar to anyone? So in the journalism field, when I was in school, like eight years ago in college, we were talking about the future of journalism. I don't know if you guys have friends or maybe nieces and nephews that decided to study journalism, but there was a time when everyone was saying that was a very bad idea. This was an industry that was dying. Why would you ever invest time in journalism studies? And then all of a sudden, the New York Times published this amazing piece called Snowfall. And it was about this avalanche that had happened and that had caused a ton of casualties. And it was a really big news story. And instead of just writing a couple of news articles about it, they made the super beautiful and interactive piece that went through all the characters in this new story and all the facts that had happened. And they had all these interactive, geographical, interactive elements. And all of a sudden, this story just came to life. And this was something that hadn't been done before using new web technologies. This was something that was very innovative. And so this came out December 20th, 2012. And it received more than 3.5 million page views and 2.9 million visitors within the first week, nearly a third of which were totally new to the New York Times. So not only were they engaging their current audience, but they were attracting a whole bunch of new audience members to a platform that people were saying was dying. And so I really like to look at this as a turning point in digital storytelling and in using web technologies to bring stories to life and to bring news and communication to life. And so I love using this example as a way that we can craft these stories that use media and maps and images and fun layouts in ways that can boost whether you're telling a story like this or whether you're trying to sell a product or whether you're trying to engage your audience on your website. So I like to say that with Gutenberg, anyone can develop a snowfall. You don't need to have a newsroom with 10 digital news reporters. You can do this with Gutenberg to a certain extent. And I'm going to show you how. So at this point you might be thinking, like, I don't need all of these things, but I'm going to walk you through a couple of new trends that I've seen in marketing. And I'm going to show you how to specifically use Gutenberg to implement them on your website. So if, you know, if you're not familiar with the actual Gutenberg interface, I'll just kind of walk you through really quickly how it works, because a lot of it now is, yeah, it works more with like a hover situation. So if you hover over your editor, you'll have this pop up and you can add blocks, and then you can scroll through your blocks and see what's available to you based on the plugins that you have built into your site. And the ones that are coming out with WordPress right out of the box. So if you hover over your editor, you can also search the blocks that are available on your site, and you can, the ones that you use most frequently will come to the top. And then when you select one of these, let's see if I can get that. No. All right, so when you select a block, then all of a sudden you have this new tab on the side that you can use to edit the content of that block. So you can change the color, you can change depending on what the block is, you can have a lot more settings. And I have some demos on my website that I will tweet out later. So with these new blocks, I've broken them down into these categories, because I think that kind of covers a lot of the different use cases in a gist. So we have text blocks. So that's your paragraph, list, headings, subheadings, table, button, classic block, text columns. These are things that are going to allow you to manipulate the text on your website. It's going to allow you to add more character to it. It's going to allow you to create more of a defining hierarchy for it. And that's going to also help you organize your thoughts and help your readers engage with your content in a more engaging way. I'm going to repeat that. Engaging. So you have, like, it's a lot, it's going to be a lot easier also to do things like columns, which were more complicated before. So you can do these right out of the box with Gutenberg. The next thing is media. That's an easy one. If you want to have a more interactive and engaging website, media is an easy way to do that. Of course, you have, you know, some extra challenges with media because you want your website to load quickly. So you want to make sure that you have it set up so that you're not bogging down your website. But there's a lot of ways in Gutenberg that you can just play around with images and video. And, you know, even if you have a podcast, you can easily embed audio into your website and start building up a really, a really media rich website. And quotes are something that I have separate from text just because I feel like there are a lot of, they're underused. You know, there's a lot of cool ways where if there's a big wall of text, people are going to just kind of disconnect from it. But if you have a couple of pull quotes, it can really help people see what the salient points are of that page. And layouts of columns I was mentioning, like, that's a huge change. Being able to control the columns on your text, on your website without having to do a lot of coding is just really awesome. And then adding some separations and pagination. And then the code one. So, you know, if you've been using short codes, then you know that, you know, that's a really fun way to build pages. And with Gutenberg, that hasn't gone away. It's just even easier. So now that, you know, you've seen a couple of the different block types, let's talk about how you can implement them. So I want to focus on text first. Add style to your text. So every website has content. And if you don't have content on your website, you're doing something wrong. Because that's really a driving force of what makes a website rich is people come, they're looking for information, they're looking for answers to their questions, they're looking for solutions to their problems. So whatever you have on your text, on your website, you're conveying those things with text. But like I mentioned, people disconnect from big walls of text. People don't have the energy to decide what's important in the text. You kind of have to help them along the way. And you have to point out what they should be remembering and what they should be engaging with on your page. And so that's why I think it's really cool to start playing around with Gutenberg and using some of the stylistic elements that can help your text pop. So that's, you know, columns and quotes and headings. And hierarchy is a really underestimated tool when you're building your page. Because when you have a hierarchy in your text, it allows people to also understand what your main points are and for you to sort of create a real cohesive and powerful page. So this is just sort of a demo that I did of how you can use the different blocks and how when you hover over them you have more options. So this is an example of, you know, a really like strong quote element quote block. And when you take a look at it live, you know, it kind of has all of these. And this is just, I've sort of like tossed a bunch of stuff in. So I would probably style it a little bit more, but that's just an example of that diversity of things that you can build onto your page without actually having to touch any of the HTML itself. So diversifying your images. I think building your site based on the theme that you've chosen is great because a lot of themes will really make the most of images. But what Gutenberg allows you to do is to have more control page by page and post by post of how your images behave and appear. So a lot of the times, you know, if you're not, if you're not comfortable with code, you're really relying on the design of your theme. And that can be a little disheartening because maybe you want to have a really cool wide image on your site, but that's not built into your theme. And so you end up switching themes a lot or child theming and you're not really sure how you can get exactly what you want. And so I like to play around with the different, the different like media blocks. And I find that with Gutenberg there's some really cool hacks that we weren't able to do before that now with some of the blocks can help specifically landing page design. If you are in marketing and you want to create some pages that have a lot of content, but have some call to actions, then you can actually use some of these gallery blocks to do that. So here's a fun example. So I just have kind of like a very basic gallery and then one where you can overlay some text, which is a new feature, which is kind of cool. But then this other example that I have on the forefront, you know, these are little thumbnails basically, they're little icons. And I'm using the gallery block for that, but you can make those hyperlinked and all of a sudden you have kind of this mini menu on your page. And you can, you know, make that a reusable block and then you can use it from page to page. And that's just a pretty regular gallery block. So there's some really cool ways that you can switch it up with your images and add some diversity and make your page that much more interesting without really having that much design knowledge or code knowledge. So integrating other post types. This one sounds dry, but it's probably the most exciting one because if you think about the way that WordPress is built, you have post types. So you've got your blog posts, but you might also have testimonials, you have projects. These are different post types. And if you have installed something like custom post types, then you can build your own post types. Like if you work for school, you might have the staff members or the teachers are a post type and you might have authors as a post type. You know, you might have other things that are built specifically for your website. But this is all content that is on your WordPress site. And so with Gutenberg and with certain plugins, you can make it a lot easier to draft and to craft these pages that pull in all these different parts of your website in a way that's curated for your purposes and your needs. And so a lot of times, you know, you're kind of using short codes to do that and you're sort of like, I don't know, for me personally, when I was trying to build these pages before Gutenberg, I would just kind of have that page open with all the short codes and be copy pasting and looking for my tags and my categories. But all this content on your site is there and ready to use. So it's just so much more empowering to know that with Gutenberg, there's fewer steps in crafting these pages. And what I mean by crafting pages is, you know, let's say that you are a freelance writer, but you have lots of multiple niches, like maybe you write about food, you write about lifestyle, you write about real estate. And so when you're sending your portfolio around, maybe you want the editors that you're contacting to have a really clear idea of what you can do for each niche. And so you might want to start building, using the short codes and pulling in the different content from your website, a crafted experience for that editor to really get a picture of what you're able to do for that niche. And that's an example that's kind of banal, but it could go for products. If you are a company and you sell lots of different products, but you have different audiences, or you're an organization that has a kids program and an adults program and a seniors program. Like if you have multiple audiences, then you can curate these pages that will speak to that audience by pulling in the different content from your site in a way that you've controlled. So here I have just like portfolio writing a short code and I'm pulling in articles that are only for one tag. And so then I have examples for that one. And then I've also added some call to action buttons, view more articles on the bottom, download my CV, you know, different things that might be useful for you. Now you can basically with blocks decide exactly what that that order is going to be and how people are going to engage with your page. So spicing it up with multimedia. I think this is kind of like calling back to the snowfall example that we shouldn't be afraid of trying new things and being a little bit more experimental with video and with animations and with audio. I think that, you know, there's there's room for that on the web. You want to be careful as well. You don't want to overload people with kind of too much media, but I think it's a really exciting time with Gutenberg that you can play around with videos that you've done on your iPhone and you can embed them on your website. If you have heavier videos, maybe have a third party, like host them on Vimeo or YouTube and embed them on your site. And with good and you can pretty much just copy paste any URL for video and it'll just appear and not only will it appear and have this really like nice player, but you'll be able to have controls on the side. If you want to start it at a certain time, if you want it to loop, if you want it to play without audio, like just things that you would want, but maybe you'd have to download an extra plugin to do that or you'd have to pay for an extra service to have those. Now it's built into Gutenberg. So it's a lot easier to play around with video and embed it. One thing that I also think a lot of websites should have is just more white space. So this is kind of a design approach to content, which is, you know, white space is kind of the space that you have with no content, with no things. And I believe that there's power in white space because it allows your content to breathe and it allows the focus to be driven to where it needs to go. And it allows the reader to not be overwhelmed. And so with Gutenberg, you know, I don't know if ever, if you guys ever had trouble with hard returns and adding spaces and the space is not appearing when you publish and all these things that are like such a nightmare until you figure out that the coding hacks to make it work. But now with Gutenberg, you can use columns, you can build tables. That's awesome. You don't even have to code the table. You can just use Gutenberg. You can use page breaks and spacers and like a read more button, a separator, all these things that are going to allow you to draft a page in a way that is just more, has more room to breathe. And I just think that's a really nice thing that is often underutilized. Building a call to action. So a call to action is kind of like it's a marketing word. You know, you kind of want people to buy now or subscribe or but the concept of a call to action exists on every website. It doesn't matter what kind of website you have. The call to action is there because you might want someone to subscribe to your blog. You might want someone to subscribe to your newsletter. You might want someone to keep reading. Like these are all call to actions because you're asking your website visitor to engage with your site in a certain way. And with Gutenberg you can make those call to actions a lot more powerful and a lot more meaningful as well because you can customize the buttons and you can design these call to actions with a couple of different tools. So here I have, you know, on my website, I don't know if this video is going to work, but I have just like a regular text block and then I've added some color to it. And then, you know, in the example, again, I had this demo, but I have it on my website as well, but you can use the different blocks that are designed for buttons. And the fun thing about it is that you can round the corners, you can change the color. These are all like little things that are just going to save you so much time because you don't have to get a designer to design your own button. You don't have to get it, you know, in an SVG file and like upload it and have it appear. You don't have to like mess around with the CSS. You can just use Gutenberg's built-in tools and have your call to actions show up. Another hack that I wish it was showing, but I'll just talk you through it, is you can use images as call to actions. So if you have the image block I showed you before that you could add text over top. And so that's actually kind of a neat way to turn that into a button. So you can design an image, have the text over it, hyperlink it, and all of a sudden you have this really cool engaging graphic that is actually a button and it's actionable for people to engage with. So these are just some of the hacks that you can use using Gutenberg to help your reader take the next step on your site. Simplifying your workflow. So with Gutenberg they really have content creators in mind. And what I mean by that is, you know, you have all these really empowering tools that make it easier if you don't have the coding knowledge to create things that maybe you had in your mind but didn't have the tools to do before. And the other thing that they've made really easy is being able to create reusable blocks. So I'm not sure why this video is working with the last one didn't, but we'll just enjoy it. So here's an example of creating a block. And so here I'm changing the color and, you know, you can really if you are working with a designer or maybe you had a designer once who just gave you a branding Bible you can just use the color scheme that they've given to you. Make sure that all your pages are cohesive with the colors that they've they've given you or if you've designed your own you can just stay consistent. And you can then give that block a name and save it. And that's going to just appear in your like a library of blocks. And the fun thing about these reusable blocks is that they're going to appear in your search every time. And if you work with multiple people, so let's say that you're a business owner and you have someone doing your social media and you have someone doing your products and you're a small team but different people manage different parts of the website. By creating reusable blocks you're sure that everyone is on the same page. And everyone is using the same blocks and the same look. So that's one nice thing. And it's also going to help with your onboarding. So if you have new people that are joining the team, you can just show them and say, we, you know, you don't have to reinvent the wheel. We've done this before and we've saved our work so you can just reuse it. The other fun thing about reusable blocks is that if you want to design call to actions on a certain number of your pages or if you have campaigns that are more time sensitive, you can create these reusable blocks, apply them to the pages that need them and then go out and just remove them and you'll have, you know, a really more control over how your pages act and, you know, the blocks that you reuse for time sensitive things like that. So there are some plugins that can also restrict the use of the block. So if you have blocks that you just want to show up for certain logged in users or based on permissions, there's also so many developers that are building on these concepts and creating more tools that are going to allow newsrooms to have more control over the reusable blocks and other, you know, things like that and membership sites as well. So I think it's, we're just sort of at the beginning of this Gutenberg growth where a lot of people are trying to solve problems or make Gutenberg better for different types of use cases. And so I just encourage people, you know, if you are running your own show, any opportunity to save time is worth taking advantage of. And reusable Gutenberg blocks are a great example because you can just design it once, have it there and then reuse it across your website. So if we look at the tips that I've given so far, I'll say, yeah, stylize your text. Don't be afraid to try different things and to have pull quotes and to make the text come alive. The next thing is to add images. You know, I think websites with strong images perform better. People stay on the page longer. Maximize your post types. If you don't leave it up to chance for your reader to know where to look on your page or where to click next, if you can create these really great landing pages with articles or call to actions or services and products and you have control over that, I think it's going to be much more effective for you, whether you're selling something or trying to raise money to use the custom post types that you have in your site and pull them into these pages. Add audio and video. If that's useful for you, if that's part of your brand, then by all means and add white space. You know, don't kind of jam pack it all in. Use the tools that we have. Add a call to action. Don't leave your visitor hanging. Give them a next step. Give them something to do and then create reusable blocks because it'll save you time and headache. I just want to reiterate that some of the cool things about Gutenberg are that it makes your sites more responsive without you having to do a lot of work. And it also makes your sites more accessible. And the reason why I bring up accessibility and I'm not an accessibility expert by any means, but I have seen that with Gutenberg, one of the neat things is back in the day, if you didn't have the tools to design something on a website, maybe you were tempted to go into Canva or into, you know, something like MS Paint or I don't know, you would go into another tool and then build something and export it as a JPEG and then you would put it on your website because it looked nice, but then screen readers have no way of reading the content that you've designed and embedded on your site. And that's a problem because when you have people that have visual disabilities and aren't able to engage with this static image on the site, you're losing a lot of people and you're just making the web less accessible. With Gutenberg, you can now replace that. You know, if you wanted to design something in, you know, Photoshop and then embed it on your site, now you can build that right into Gutenberg and you can add alt tags and you can add the metadata that you need to make your site more accessible without having to do a lot more effort. So I think that's something that's been really positive with Gutenberg as far as content creation goes. I want to share a couple of plugins that I think have been really great to build off of the Gutenberg blocks that are built into WorkPress right out of the box. So I'll leave that up for a while. I'm also going to be tweeting out my slides with some more demos as promised. So these are just some that like I mentioned with reusable blocks and limiting access. Like these are some plugins that are building on these concepts and making them just that much better or more precise for different use cases in different industries. So I like some of these. You know, some of them also you might notice as you play around with your WordPress website that some of the plugins that you've had on your site for years are starting to develop Gutenberg blocks. So it's not only that there are new plugins that are designed for Gutenberg but old plugins too are also starting to design tools that really make the most of these new blocks. So, you know, if you have Yoast or Jetpack installed on your website, two very popular plugins. Most people have them on their site from day one. They have Gutenberg blocks and so you can play around with them without, you know, downloading anything new or installing anything new. But I do like these plugins for building on Gutenberg. And now I'm going to leave some time for questions because I know I showed you a lot of different things and you probably all have very specific needs and use cases and I would love to answer your questions about Gutenberg and content creation. Yeah, yeah. I mean, over here first, yeah. Actually, one of my questions was answer the question. Yeah, there are some plugins with Gutenberg that allow you to play with the CSS right in your dashboard or in your editor. But I'm not sure about creating an image over an image. The answer is probably on the internet because someone's probably also looked it up. Great, cool. I think I had a question over here and I'll come back. OK, can you hear me? So when Gutenberg first came out, we kind of tried it really quickly and then we have a really content rich website and tried it and it was like all of our existing content was just kind of a mess. We go in and tweak older content a lot. So kind of went back in and went, I don't even know what I'm doing here and didn't have the time to kind of lock in and learn it. So I'm definitely inspired to do that. But do you have any tips for when you go back into content that has been previously created with Gutenberg and kind of how to navigate that? Yeah, that's a great question. And I think a lot of people are experiencing that. I personally on my own website, you know, a lot of people said, oh, do I have to go back and Gutenberg if I all of my past content? And the answer is no. Nothing is going to be broken because Gutenberg is installed on your site. What I tend to do is if I have a reason to go edit a past blog post, maybe there's a broken link or I want to update some information. I'll take that opportunity to then transform it into a Gutenberg. And that's a pretty simple change. So in your dashboard or in your editor, you can go and you'll see that with your old post, all the content will be one block and then you can then click and choose to separate it kind of like exploded into all these different blocks. And so it's not as scary as it sounds. Like you can go back into your old content, turn all the different parts into blocks. It might not be perfect. You know, maybe they'll split up two paragraphs that you actually wanted it to be one, but those are minor things that you can easily edit. And so when I have content that I'm updating, if it's a quick fix, like maybe there's a typo I won't bother. But if it's something that I actually kind of want to make better and add images to and maybe it's one of my top blog posts, then I'll make that a priority to go back and to edit it. And, you know, if you kind of want to do a content audit, it's a fun opportunity also to make a list of your top performing pages and to go and address those first and then use that little tool where you turn into blocks and then play around with it then. Does that answer your question? Yeah, yeah, that's helpful. I just wait. Yeah, I mean, if you have a really important website, you know, it could be an opportunity to just make like a staging site, too, to kind of do like a one-click staging site, play around with it, and then once you feel more comfortable, do the changes on your real site. I have one question over here and then I'll... It was a follow-up question. Sorry. If you don't... What's the actual function to explode the classic block into the new blocks? It's sort of... It's just in the editor itself. It's kind of like you click on a corner thing and it just says, do you want to turn these into blocks? So, yeah, it's there on the site and it's pretty easy to see, in my opinion, but it is right there and it's... I believe it's like transform into blocks, turn into blocks, something... Convert, yeah, convert into blocks. Thank you. Yeah, okay, now I'll go over here. So a reusable Gutenberg block, does it act like a widget? For example, if you place that same reusable block on a hundred pages and then you alter the content of that block, will it change all 100 pages? From my test, yes, you can do that. So it can change the block across your pages and then in other circumstances, it's more rigid. So I don't know if anyone else has played around with the reusable blocks in the sense and can weigh in on this, but I know that with Gutenberg, with the Jetpack blocks, for example, they do act like widgets, but then when I design my own text blocks, they don't always change. Yeah, I don't actually have a great answer for that question because it really, it depends on whether I'm using a plug-in or whether I'm using the built-in blocks with Gutenberg. So that's probably something that is gonna evolve as well, yeah. I bet you're 50 cents, someone at this WordCamp will know the answer. Oh, absolutely. 100%, yeah. Are they global? Do they act? Yeah, if you tweak it on one page, do they change everywhere else? I like to use the gallery feature to create icons as buttons, but what I'm finding is that I can't customize a URL, it just wants to send me to that image, and I've always had a resort to using a plug-in. Is that what you found? At first I was using the gallery that was built into Gutenberg, and when I was playing around with it a few months ago, I wasn't a big fan, so I did end up downloading another plug-in that had a custom Gutenberg block that had more control. And so my solution was to find a third-party block plug-in to have exactly the kind of gallery with exactly the type of link behavior that I wanted. So, yeah, I would say that, like, I don't know, Gutenberg is getting better, you know, right out of the box, but at the time I wasn't satisfied with the way that the links were being shown. So, I mean, it's kind of like that for a lot of different blocks, like there's gonna be someone who's designed a better version of it, and then until, you know, until you find the perfect one, you kind of can look around with who's designing what, but the link behavior is something that, like, I personally like having it open in a new tab and not, like, within the same tab, so there's some things like that that I had to go and go fishing for the perfect one. Okay. Are there any good tutorials, Gutenberg tutorials online? Yeah, there are a lot of websites that are just really good WordPress tutorial sites to begin with, like WPBeginner, and there's some other ones. I don't know if you guys have any favorites, you can just kind of shout them out as well, because they're all developing Gutenberg content. Like, this is something that they're working on as well. So, WPBeginner is the first one that comes to mind, but maybe there's some other ones that other people like. Linda.com. Linda, that's a great one, yeah. So, Linda's just great to learn a lot of things, and they happen to have a really strong WordPress section. Which if you all are not aware, if you live in Orange County or LA County, Linda.com is free with your library card. And that's true in Missouri as well. Whereas normally you have to pay for it. Yeah. So, Orange County, and I think LA County. And LA County, yeah. Good to know. If there's one thing you want me to talk about. I don't know about Riverside County or other counties. Thank you so much for that. I am actually available for the rest of the day. I'm gonna be here tomorrow as well. So if you wanna show me your website, if you wanna chat content, I am happy to meet with you and you can also tweet at me. That's my handle.