 We're ready to start. Okay, allow me to introduce Andrea Zollner. Andrea is a chief content creator at Siteground, and their one and only Canadian employee. She lives in Montreal where she's speaking both English, a highly efficient language, and French, an impossibly poetic one, shaped her approach to copywriting and strategic brand messaging for an international audience. When she's not writing content about WordPress and hosting, she's updating her travel blog. The travel blog is called The Capsule Suitcase, and she hopes one day to have a hobby that doesn't involve websites. Please join me in welcoming Andrea Zollner. Can you hear me alright? No. Can you hear me now? Microphone. Well, I'm as close as I think I can be. Maybe there's two ways. If I just project a little bit more, is that working? Yeah. Yeah. Alright, so thank you so much for attending my talk on this 11th hour, the 11th day, the 11th month. It was pretty easy for me to remember when my time slot was, because in Canada that's Remembrance Day. We have a minute of silence every November 11th. So, today we're going to be talking about Googlebird, the new editor that hits on everyone's lips. But I am by no means a developer. I'm a content creator. I'm a blogger. I use WordPress as an end user, and so I wanted to take a look at Googlebird and sort of dissect it and play with it and to present it as a new tool for bloggers. And so I titled my talk Storytelling with Googlebird because I studied journalism. Now I'm the chief content creator at SiteGround, but for a long time I was working in media and publishing and corporate communications. And so any tool that promotes WordPress and pushes WordPress as a publishing tool gets me excited. And so I wanted a few people that are like, Yay, Googlebird! Because everyone else is discussing all of the complications in the pitfalls, which are totally valid, but you won't get that in this talk. In this talk I'm going to try and be as positive as possible about the opportunities that come with Googlebird. So now that I've shared a little bit about myself, I'm from Montreal. I am known to use Twitter at times, so that's my handle if you want to reach out to me. And I'm excited about Googlebird, which is something that's made me heart for other people. And now that I've shared that, I want to know a little bit about you specifically. Have you been using Googlebird? Have you tested it out? How many here have tested it out so far? All right, that's a fair amount of people. So if you're not really familiar with what Googlebird is, you kind of hear about it, if you haven't looked into it. Very quickly, Googlebird is going to be a new editing experience in WordPress, and it's slated to come out with the release of WordPress 5.0, which is just a matter of weeks away, supposedly. So the main differences are really the experience you're going to have with the editor. And so you'll see in the back sort of the dashboard as you know it, the editor as you know it, and then now in the front you'll see the new Googlebird editor and how it looks. So the differences will impact a lot of the themes and the plugin developers, but as a user, most of the changes are going to be held right there in the editor. So if you haven't used it yet, like I said, it's going to be the official editor in the new release, but you can also install the Googlebird plugin. In fact, in the last release of WordPress, there was a little button that prompted you to install it to try it out, and right next to it, there's also the option to install the classic editor. So once WordPress 5.0 is rolled out, you can install the classic editor, which is the way that the Gutenberg core team made it as easy as possible to transition from one to the next. So if you need a bit more time to transition to Gutenberg and you want to test it out, you can install a classic editor on your blog and continue to have the same experience that you've had. Because I know for a lot of people, stopping dead in your tracks, you're busy people to learn a whole new way of editing, especially if you have all these automations and workflows that you do on a day-to-day basis. You know, it takes time to learn something, if you work it into your jobs. So if you want to take some time to do it, that's great, you have options to do it at your own pace. So as a journalism student, I was really interested to see a demo of Gutenberg because it reminded me of something that came out when I was studying, which was snowfall. So if you have worked in digital media before, you may have heard the term to snowfall. And so that sort of came about around 2012 when The New York Times released this really awesome multimedia piece called Snowfall. And you know, I was a plucky journalism student then, and it just seemed really exciting that we could take in-depth reporting and turn it into a micro-site like this that walked you through like how, why, the who of the stories. The New York Times had done this really in-depth reporting on an avalanche, a really deadly avalanche. And it integrated all of these maps and these interactive videos and these storytelling elements that really changed the way that a lot of people thought about storytelling online. It opened up all these new ways of presenting people and encouraging people to really engage with content in a new way. In fact, after it was released, I think within six days, it had 3.5 million page views, 2.9 million visitors, nearly a third of whom had never visited the Times website before. So for an industry that was like on the decline, journalism and, you know, news, having a third of your visitors being newcomers to your website was kind of a big coup. And a lot of newsrooms were then catching on to this trend, putting out their own versions of this and so that's when we started having things like, are we going to snowfall this story or when are we going to do a snowfall? I mean, in fact, it won like a Pulitzer Prize and a Peabody Award and a lot of people say it's quoted to have changed digital media and news reporting forever. So I did a bit of research about the technical specs of snowfall and, of course, a lot of it is jQuery. Back in 2012, you know, the team that developed this said that they used some modal slideshows that they already used for other projects, underscore, jplayer, the HTML5 video, jQuery, reel and address, and some trigger scroll-based events that they took inspiration from a jQuery plugin. So I'll just scroll through this a little bit quicker, but yeah. So with Gutenberg, I would say that anyone can snowfall. Now that we have all these tools built in right into WordPress, it's a lot easier for just the ordinary person to integrate all these videos and images and to really bring your content to life without having a newsroom full of professional digital content creators and designers. So I think it's really exciting. It's a really exciting time, and I'm going to walk you through some of the features that you can use in Gutenberg to do something similar to snowfall or adapt it to whatever it is you're doing. Whether you're a blogger, whether you run your own business website, or whether you are working for a agency, all of these tools can be applied to your content. So let's take a look at Gutenberg just from the get-go. So if you take a look at the right-hand bar there, you have your document toolbar, and a lot of that is going to be super similar to the stuff that you've seen in the current editor. So you have your stats, the visibility, the publish date, all of those settings that you need to set for your page or your post before you publish. You have your featured image and your discussion and sharing all of that that's already built in. But you also have the block tab, and the block tab comes alive because Gutenberg is designed around these block elements. So if you hover over the main text area, you'll see a little plus button, and you can start adding these blocks, and a menu will appear that you can search. And I got pretty good at searching because there's so many options that I kind of like to develop my own favorite ones, and so those most used ones come to the top, and really other ones you can just search them by keyword. So when you add a block, all of a sudden the block tool are on site, pops up, and you can control each individual block, whether it's a text, an image, a shortcode, all of the different blocks that are available have their own set of handles and controls that you can use. So that's a really exciting way that you can start thinking and laying out your content because you're going to be able to fine-tune and control every single one of those pieces. Keep in mind that because a lot of this depends not a lot, but some of it does depend on your theme, you may have some blocks appear that other websites that you manage don't have. So for example, I have Yoast SEO built into or I have it installed on one of my websites, and so in Gutenberg I have a couple of blocks that are generated by Yoast, which are some structured data blocks. So depending on what plugins you have and how your theme is designed, you may have a couple of different options for a couple of less options. But generally speaking, these are some of the main blocks, and I put them into a couple of categories, like text styling, media, quotes has its own because there are a lot of different options on how to manage quotes, lay-outs, and your classic code books. So these are a lot of the options that you can use to start designing your own snuffles. So let's get right into it, because this is the bulk of the presentation, right? You want to know, okay, here are all these options, but is it really that important to me or is it really that useful to me? I just want to get some text on a page. But really what I hope to accomplish today is to inspire you to show you, if you were scared about Gutenberg at first, just to show you quickly how to use the tools that's available to you and what you can do to implement it into your workflows. So the first tip that I have is use Gutenberg to add style to your text. This one kind of seems like a no-brainer. Everyone wants to add a little bit of style to their text, meaning for a long time we had options like italics and underscore underlines and bold, and you could control your headings, you could change the colors. And if you wanted to get into CSS, you could do a lot more than that. But now you can sort of do it without having to go outside of the main editor and you can add a lot of different interesting elements that will stylize your text. So whether that's just your basic paragraph that you want to work with, a whole quote. Now you can actually use columns in Gutenberg, which is super awesome. You don't have to hand code that or anything or depend on your theme to provide that kind of style. I think you can go ahead and add columns of text yourself. You can stylize your verses, your quotes. You can add really advanced lists and you can control the headings that you use in your sub headers. Because one of the things that I like to recommend to people is don't just dump text on a page. No one wants to engage with that. It's really scary to have a long, long bit of text. But it's a lot easier to engage with if you have spacing, if you have diversity in the type of text layout that you have. And so those visual grates also allow for a hierarchy of information. And by using full quotes, you can also decide what salient quotes people are going to retain from your content and what they're going to do, what they're going to remember when they leave the page. So in Gutenberg, again, everything is built like a clock. So here we have some text elements that I just sort of dumped a bunch of them on the page. But you can see pretty much what's on the page here. You have a couple of columns and some full quotes. Yeah, see, this is just like a diverse grouping of headings. And so there's a lot of possibilities by diversifying your text. You can do a drop cap, the columns, like I said, and some really neat full quotes just to diversify what's available to you. Andrew, what is a verse in your last slide? We had a verse. Yeah, so a verse would be probably a quote from a book or from some other source that you want stylized a little bit differently, something that breaks apart from your regular text. The next one is images. This one's also kind of a new bringer. When we think about what's on our page, we have text and we have images. Now in Gutenberg, we have a lot more options for our images. So whether you want to do like a full screen of images with a couple of different galleries. Before we just had to rely on a couple of preset gallery styles unless you went and installed a bunch of plugins to get exactly the look that you want. And then things like, you know, retjustified images with text. All of that would take a lot longer to design and you wouldn't always get the result that you want when you looked at a tablet or a phone either. So it got kind of complicated for just the average user to really put what they had in their mind onto the page. So with Gutenberg, you can have, you know, just images but you have a lot more options on how to style them. Some gallery options, cover image, which is a really cool tool that you can use to add an image, add a color overlay and add text right onto the image without having to use a third party thing like Canva or one of the tools you have on your computer. And then you also, we have a lot of options for envis. So if you just want to go pull something from Instagram, pull something from Flickr, you can do it right in your editor and you can just copy and paste directly and it'll generate just like that. So that just adds a really nice element to storytelling and to adding images. And I also have a screenshot of something that kind of looks like a service block. Yeah, I have a question here. So I didn't mean to interrupt, but I just, if you pull something from Instagram and it's a little video, it'll look just auto-play. I believe you still have to click on it. Okay. Yeah, but I would test it out, like anything. So I have a screenshot here of these four blocks because one of the cool things that people do with galleries is use them to design these buttons. A lot of people want to create websites that have very visually striking ways to interact with links. And if you want to have like a display of different services, but you don't want it to just be boring, text links, you can use a gallery to then add hyperlinks and create a really tidy, unique way of displaying your services or maybe link to other blog posts that you've categorized and however you decide to do it, you can use the gallery now to do it really easily and seamlessly. And so number three is to integrate other types of host types. So that sounds like a really boring point, but playing with Gutenberg, I realized that when people engage with your content, oftentimes you as an author you want them to stay on your website by sending them somewhere else. Whether it's related content to that specific blog post or whether there's an action that you want them to take after engaging with your content, like signing up, registering for an event or downloading an e-book, or going to an e-commerce store that you have related to your website. All of these actions are things that you want people to do right after they engage with your content. Not later, and you want them to stay on your website as much as possible. And what Gutenberg does is make it super easy to pull all of that content into one page and then you can design and experience for your customers or for your readers. When they come onto your website they can read your text, but if you want them to continue reading you can then pull all of the related content and display it using ShortCodes, which we were able to do before but now it's a little bit more intuitive and to also show different content in the same category. You can also display archives, you can lay so related posts and you can also add files. So if you are sharing information about an event and you want people to download a registration form or you want people to download an e-book or some guidelines, anything that's sort of a PDF document or something like that, you don't have to send them into another part of the website or you don't have to link in a very, you know, boring way that you can actually start building these pages that have a little bit more interest. So this is like a snapshot of the editor side. So here what I've done is I've just used a ShortCode to show portfolio entries because that's another type of content. So we have our post types like post but we also have the basic ones like portfolio and testimonials which we can use ShortCodes to control. And so by using ShortCodes we can display them, we can choose if we have a thumbnail or not, we can put them into columns and then around that using some of the Gutenberg blocks we can also add content that we stylized to then support those those ShortCodes that we've created. So whether we want to get people to engage in a certain way we can create call to actions or recommendations and we can also create these really neat buttons that then link to other parts of our website in a very engaging way in a very encouraging way. So, you know, on the front end it kind of looks like this. Like I have two posts that I went and generated with my ShortCode and then I have a link to more articles and then I have a link to files. So this is a very rudimentary example of how you can start building landing pages that do exactly what you want to do, you know, have exactly the content that you want to put together for the experience you're trying to create for your readers. And so that's just another way of using the Gutenberg blocks to really define different experiences for your customers and not have to use a bunch of plugins to do it. Number four is to add multimedia. Again, storytelling, a lot of it is visual. So like in the Snowfall example, using maps that are attractive, gifts somewhat attractive, at least maps that show things, gifts, videos, all these things that add a little bit of interest to your content. Now at Gutenberg you can just do it by adding a block. And so, I mean, these are just the basic ones, audio and video. But if you type in video into the Gutenberg block selector you'll also have options to embed from YouTube. For audio you can embed from Spotify and all sorts of other third-party services. And so, you know, in a page you can end up having a really diverse and interesting interesting experience because you've got and pulled content from different sources and you've crafted exactly the content that you'd like to present. So different media services are being added to the list all the time. So it kind of looks like this in the editor. Once you embed an image or sorry, a video or an audio you also have a whole bunch of different controls that appear. And so, on the side you have, you know, autoplay and loop and, you know, someone asked a question about Instagram. I'm not sure about that but I do know for uploads that are directly from your WordPress installation you do have the ability to control how that video is going to play. So if someone's scrolling down your page and you want a video to autoplay then you can control that experience. Now, another way that Gutenberg has made it easier for people to create the kind of pages that they want is that they have some tools to add breathing room and I think people underestimate the importance of white space when you're designing a page or when you're a content creator because you want your page to breathe and you want to have room for people to digest the content and you want them to understand the flow of what you're presenting and, you know, a lot of the time before we would just have to do hard returns or go into HTML and add non-breaking spaces or, and then those would never say or there'd always be a problem when we're trying to edit the content and they wouldn't save our layout and these were just some of the headaches that we'd have as elementary users and now with Gutenberg you know, those are built in so you can create columns which allow you to organize your text in different ways. You can add tables without having to hand code them and they're responsive. You can, you know, create different ways of managing your content that allow your reader to not be overwhelmed and to have a breathe. You can add page nation you know, you can have page breaks so people can, you can split up your content in a way that is, that makes sense. You know, you have different, you have different themes, people can go through the pages separately and you can also have spacers which is just another non-breaking space to know an extra space that you don't have to hand code yourself. The more tag and the separator tag so these are all ways to add space to your content that, you know, will make it a little bit more enjoyable for people to engage with them and the last, not the last one but the last one is to build in a call to action. I think, people think of call to actions as an orange button that says buy now but even, right, but even, even just your typical blog uses like the call to action idea in different ways. So when you ask people to continue reading that's sort of a call to action when you ask them to subscribe or to check out your related articles. You know, these are all ways you want people to engage with your website and to make, to make a decision to keep engaging with it. So call to actions with Gutenberg of course we have our button block which is a super cool tool that you can use. But, we do have the button block which is a really neat way that you can just choose a button and choose the color, choose how it's designed and all of that is just going to be seamlessly done right in Gutenberg. You don't have to get the CSS like one used to have to. You don't have to copy it and find the color exactly that you're looking for through the hex code. You can just go ahead and build your button and it'll say right in your content and that's one of the ways that you can go. Yeah, so is it blurry on that screen or is that just neat? It's very small. Very small. Yeah. Anyway, all my slides are going to be available. So you can take a look at these videos. I will tweet out a link later today so you can check out all the demo videos that I had in this presentation and see if you can start playing around with it yourself. So this is just me. One of the cool things that we've learned up also is they show you an accessibility app. So if your color combination is not very legible, it'll give you a warning sign. So if you're trying to do like black on dark brown or say this isn't possible to read, please fix it. You can, yeah, which is helpful. You can set your just like a bit different types and that's just an easy way like I use that all the time, whether it's to read more or, you know, sometimes by travel blog, I think it's other things and I'll use a button because it just makes it a little bit more friendly. But there's other tools in Google that you can use to evoke a similar call to action. Yeah, so you can use a pull quote. If that's something that you want to do to draw attention to a certain action or draw attention to an idea, you can use a pull quote and it doesn't have to be a quote. You can use it to say something encouraging like and also you can control the colors like I said. The other thing is to use an image. So instead of having to design your image outside of Gutenberg like with Canva or something, you can just build it right into Gutenberg. So you pick your image from your media library, you upload something new and with the tools you can then add color over it, you can add text over it, then all of a sudden it becomes this really neat self-contained little call to action button that you can reuse on other parts of your website as well. And speaking of reusing your blocks, that's one of the really awesome things about Gutenberg is that if you've spent all this time designing a cool call to action block like we just saw, then you can save it and it will be saved into your favorites forever and you can use it on your different pages on your different block posts and it'll always have a consistent look and that's especially useful if you have a multi-author blog for your managing and there are multiple people contributing you can go ahead and ask your design team to design some blocks that follow your branding guidelines and they'll be saved into your favorites and then whoever uses that website can then go into your Gutenberg blocks you can name it something separate and they'll be able to reuse that block whether it's like a call to action or if it's something with a shortcut that links to other types of content on your website. Again, all of these blocks you can save as you label them from the page to page. This is just an example a pretty stupid example of a purple block but the idea is there it's just that you custom-regulate yourself and it's going to be there for you to reuse from time to time and blow through that really quickly that means that we're going to have loads of time for questions but in summary what I'll say about Gutenberg is that use it to stylize your text to add images to maximize the post-type that you have on your blog or your website to add audio and video and to make it dynamic with more multimedia to add white space you can make things brief a little add a call to action whether that's like a direct action or with a link or an idea and you can also create these reuse little blocks so that your website is always consistent and seamlessly in line with your writing type Okay, remember to follow Andrea at her handle there Andrea is on there on Twitter she'll be tweeting out the videos you can also go to the work camp website and go to schedule and you'll see all the slides for all the presenters so who has a question mine actually isn't a question I just wanted to say for anyone who hasn't seen Snowfall what that is about is the huge avalanche that took out it was in Snorkely so it's about a local thing from ten years ago it's still up on the web and it's totally worth watching so what's the experience like if the client is used to typing a paragraph to be returned typing another paragraph to be returned does Gutenberg disrupt that flow and force you to create a new paragraph every time you want to type a new traditional paragraph no, so you have the option to add a block that's a paragraph and within that block you could have very similar experience to what you had before there's also the classic block which also does the same thing so if you add a classic text block then you'll have a similar experience but it'll be within the block structure but then if you decide you want to put you decide you want to put an image inside of one of those then is it easy enough to split them up? then it is easy to split them up because you have the option to change regular or if you are opening up something that was designed to be the original editor you have the option if you click on it to turn it into a block then so then if you decided after you written this long text that you wanted to create separate blocks for you to add images in between you do have that option yeah alright, anybody else? if you're looking to save buttons or different blocks you've created are those available for anyone that logs in or is that just for your login? I believe that they're available for anyone who logs in who has certain level of permission so I think if they're an author and a bug they're allowed to use it but I think that would also depend on how you set up your permission and your access I would play around with it but my experience so far has been that if it saves any in your WordPress installation anyone who's an author should be able to okay anybody else? kind of related to that question the, a lot of all those choices remind me of the I'm old enough to remember the introduction of desktop publishing and the ensuing amateurish layouts things like that are there sort of admin controls that give different levels of does not have access to these tools to different users? I don't know I don't think we're there yet I don't think people have come up with all these case studies yet but I think that is a great question because I, you know I had a similar experience when I was using something like Keynote for example for the Mac users you know another version of PowerPoint and all these different templates that were available and I thought great people in my, in my class you know are going to have these beautiful slides all of a sudden you only have these templates how can you go wrong and then I get to class and everyone is using one different theme per slide so they would have these, these Frankenstein presentations until all the options ended up making it worse but I think that there's probably going to be either some development in or some plugin that's going to allow people to just lock down on the options I don't know that it exists yet but I'm sure it's coming because that's going to happen. Here. Hi. I was just curious if there were any specific tools in Gutenberg for integrating maps into like block posts and things like that. Well we have the classic HTML block so anything that's coded in HTML you can easily just embed right in there. I think a lot of again it's so early that you know I think there's a lot of plugin developers that are going to be playing around with adapting whatever their plugin does to block formats for Gutenberg so if there are some tools out there that already exist for map integrations for example it may not be very long before that's designed for Gutenberg and where that becomes a block writing Gutenberg where you can embed from third-party map creators or whether it's well with Google again you can do that now but there might be some other more advanced map technologies for map third-party services that are a little bit trickier to handle but I'd say right now HTML is the easiest block if you're using anything outside of the Gutenberg realm. Okay, plenty of time any other questions? Alright, well thank you Andrea.