Yoast partner and CTO, Omar Reiss and content team lead Willemien Hallebeek took us behind the scenes of the making of the Open-Source Story, a richly illustrated and interactive post about the nature of open-source from a collaborative business point of view. They also shared how they built it with the WordPress block editor, explain their approaches and answer your questions.
Transcript
Birgit Pauli-Haack: 26 Gutenberg Live Q&A. My name is Birgit Pauli-Haack and I’m your host, and the curator of Gutenberg Times. Thank you all for watching, it’s great to have you.
In today’s show, we will discuss The Making of the Post Open Source Better Solutions and more inclusive society that the content creators at Yoast and the techies put together. I’m extremely honored to have as guests three wonderful experts to discuss this and answer all your questions. We have Willemien Hallebeek, she’s the manager of content at Yoast. Hi, Willemien. How are you this evening?
Willemien Hallebeek: Hi. I’m doing great. Thank you so much for having us.
Birgit Pauli-Haack: It’s awesome that you’re here and then I finally get to meet you. I read a lot of your content. We also have with us Anne McCarthy, developer relations wrangler at Automattic and on loan to the WordPress open source project. She’s also co-host of the show. Good afternoon, Anne. How are you today?
Willemien Hallebeek: Doing great. Thanks so much for having me.
Birgit Pauli-Haack: Awesome. And then, we have Omar Reiss, partner and CTO at Yoast. Hi, Omar. Welcome to the show. Thank you for all three of you, you’ve taken the time out of your day and be with us together. So how are you doing?
Omar Reiss: Great, great. Thank you so much for having us.
Birgit Pauli-Haack: All right. Well, and welcome to Bob from Las Vegas. Who else is in there? Yeah, well, use the chat window to let us know more about you, dear listeners. Before we do proper introductions, in less than a minute, I hope, I have a few housekeeping notes and an announcement. This is going to be a mixed conversation, so we have demos, we have the questions that we have, and then we have your questions. If you have questions, please add them to the YouTube chat on the right, or use the Q&A feature on the bottom of your screen to let us know your questions. We will give answers in between segments, so put them in here so they’re in the queue and we can get right to them. Feel free also to share your thoughts and comments in the chat, but please be kind, even if you disagree. This is a family-friendly endeavor.
Announcement
Before we go into the deep weeds, and I have you here and your attention, State of the Word, the annual keynote by WordPress co-founder Matt Mullenweg is next week. Because WordCamp US was canceled, this is going to be a live stream event simultaneously streamed to the WordPress YouTube channel, the WordPress Facebook page, and the WordPress Twitter account. So mark your calendar. It’s on December 17th at 16:00 UTC. That is 11 a.m in Eastern, it’s 8 a.m Pacific, and it’s 5 o’clock Middle European time, I think.
For the Q&A part of the live stream, and that’s something totally new, you can pre-record your question via a video. And a big emphasis on landscape format, not landscape, and send it before the event. Actually, the deadline for that is tomorrow, so you don’t have a whole lot of time left. Detailed instructions are in the news post on the WordPress.org, so go there. Yes, so that’s out of the way.
Introductions
I’m thrilled you’re all here. So let’s start. Omar, it’s been a while that we connected on WordCamp. I think we met in 2019 or so in … no, ’18.
Omar Reiss: 2018.
Birgit Pauli-Haack: In Nashville.
Omar Reiss: Yeah.
Birgit Pauli-Haack: You’re a partner with Yoast, one of four, now six, I heard, or the border is now six, and you’re the chief technology officer. What exactly are you doing with Yoast? What’s your responsibility?
Omar Reiss: Well, yeah, I’m just in charge of everything that has to do with technology at Yoast. So the development teams, the QA teams, and the devops teams all report to me. I am also responsible for software architecture, so basically, the design of the code itself.
Birgit Pauli-Haack: All right. Interesting. Are you also going to fix my printer or you don’t have any printers anymore?
Omar Reiss: No. That’s the only part of technology that I’m not responsible for at the Yoast. That’s part of the operations side of things.
Birgit Pauli-Haack: All right. Well, thank you. Yoast is, after Automattic, the biggest corporate contributor to the open source project, WordPress open source project. How deep are you involved in this part of the Yoast team.
Omar Reiss: Well, I’m starting to get quite involved again. The team is led by Francesca Morano, who you might know.
Birgit Pauli-Haack: Yes.
Omar Reiss: I led a couple of WordPress releases. I think we have meetings every Tuesday where we discuss our efforts, and I’m generally present there. It kind of got the contributor virus reactivated, and I plan to work on some build tooling stuff for WordPress 5.7. So, yeah, ready to get back in the game.
Birgit Pauli-Haack: Okay, excellent.
Anne, we had many, many chats conversations on Slack about the various aspects of Gutenberg adoption events and the testing part of it. I’m so thrilled that you’re a co-host on the show today. You work as developer relations wrangler on loan through the WordPress project. What exactly do you do?
Anne McCarthy: It’s a good question. I also just want to say it’s so awesome to actually be able to collaborate with you on this. I feel like we talk so much. It’s really, really an honor, so thank you for having me.
Yeah, I focus on the developer experience, whether that’s through creating better product feedback loops, through things like the full site outreach program, or calls for testing, trying to help get developers better connected both with each other and with the wider community and sharing resources. I helped kind of start a thing called Hallway Hangouts, which a bunch of people have done, which is super exciting. Trying to make it easier for new devs, that they’re first coming in to get acquainted with the community and get onboarded. So there’s been a couple different like documentation initiatives with that.
Most recently, if you join co-editor for the first time, you’ll get a nice little Slack bot ping introducing you to things. So trying to be a bit creative there, especially while we can’t gather in person. And probably the last thing is just community-wide communication to get people excited about what’s happening with development and kind of just making it known in a way that’s user-focused and just builds excitement about the future of WordPress. So that’s kind of it in a nutshell.
Birgit Pauli-Haack: Yeah, but that’s a lot of work. I’m glad that you’re doing it.
Willemien, it’s such a pleasure to meet you, manager of content. Knowing Yoast’s work in SEO, that sounds like a big job. What is it exactly that you do and how many people do you have doing it?
Willemien Hallebeek: Well, yeah, it’s a great job. It details a lot of content. Yoast.com has a lot of content. My main focus used to be on our blog, but since you’re short while, I’m also responsible for all the content on Yoast.com. That means we have a lot of help pages, feature pages, product pages. Well, I’m responsible for the entire thing, so make sure what’s created, and check the coherence and consistency of it. Because we’re growing, more people are working on our content, we want to prevent that we’re doing on one side something and on the other side the same thing. Yeah. It’s like the overview, overall responsibility of the content.
How many people? Yeah, that’s actually quite difficult. Well, I have three people in my blog team, well, we’re three actually; and three people from our academy team, they make our courses but also contribute a lot to the website; and then we have some people who actually work on the website but are not necessarily in my team, people creating content for our product pages, feature pages.
Birgit Pauli-Haack: Yeah, interesting.
Willemien Hallebeek: Yeah.
Birgit Pauli-Haack: Who writes documentation at Yoast?
Willemien Hallebeek: Documentation. I think … Omar, I think it’s Jimmy who writes for the dev portal documentation, right?
Omar Reiss: Yeah. Even Joost himself still writes a lot of documentation. Jono-
Willemien Hallebeek: Yeah.
Omar Reiss: … Jimmy. That’s a lot of development documentation and the support team does a lot of the help documentation.
Birgit Pauli-Haack: Okay.
Omar Reiss: I think the academy team recently rewrote a lot of the stuff as well.
Willemien Hallebeek: Exactly, yeah. Yeah. We had a huge knowledge base, which was transformed to our help section of the site, and academy did a great job in making that very easy to understand for people. Because if you’re looking for a help article, it needs to be you know understandable for many people.
Omar Reiss: Yeah. It’s not mainly the academy job. Yeah.
Birgit Pauli-Haack: It needs all the green lights on the Yoast plug-in, right?
Willemien Hallebeek: Exactly, yeah. Yeah. We read all of that on our website. Yeah.
Open-Source Story
Birgit Pauli-Haack: So taking this open-source story that’s our topic today, as an example, so what’s your process from idea to publishing? What’s the genesis pretty much of that post on your site?
Willemien Hallebeek: Yeah. The idea, I think Omar can tell that story best because he was there when the idea was born. I just took it on later.
Omar Reiss: You can tell something about the creation process that’s been mostly your job.
Willemien Hallebeek: Exactly. I can tell …
Omar Reiss: But let me give a brief, I think I was with Marieke at a WordCamp, Marieke, our CEO, and she gave a really great talk about gender stereotypes and prejudices. It’s a really, really nice talk. If you’re into diversity, I think it’s a really nice talk to also go look up on WordPress.tv. At Yoast, we’ve traditionally been really strong in our core values. We have a couple of things that are important to us, diversity is one, open source is another one. We have all these great stories that we tell on WordCamps, wouldn’t it be awesome to have these in a digital story format on Yoast.com as well, as really rich content that is dynamic and interactive?
With Gutenberg being present at the time, that was actually something that seemed really attainable. We basically said, “Let’s go. Let’s turn our important sort of core value stories that are close to our hearts. Let’s turn them into digital stories on Yoast.com and really give people something special. And then we turn to Willemien to create that.
Willemien Hallebeek: Yeah.
Omar Reiss: That’s how that process goes.
Willemien Hallebeek: And then I was involved.
Birgit Pauli-Haack: Yeah, go ahead.
Willemien Hallebeek: I got this idea, and then what we did was I started, first, we thought what do we want to tell people of course. And then I started gathering content we already had on our website, because we had some story, well, not stories, just more posts about why open source is great, or how to contribute. We had smaller parts of the story already on our website. I started gathering that and writing a complete story of it. We would really have a long read, and then I started thinking about what is a nice way to visualize this? We also had videos and we had a copy on some parts. I thought about a quiz for instance that we could add.
So, yeah, that was just a big document actually with ideas and content, some links to videos and that went to our design department. They’ve created this awesome design of the page. They already kept in mind the blocks that were created previously for the prejudice story. Because they’ve kept that in mind, in fact, it was quite easy to create the content in the editor because the blocks were there, the content was there, and mainly, it was just on the getting it in.
Birgit Pauli-Haack: Sure.
Willemien Hallebeek: Making sure it all looks fine on the front end.
Birgit Pauli-Haack: Yeah. I think it would be a good occasion here to have Omar kind of walk us through the back end, just scroll through the front end and then also through the back end of it and kind of talk about those segments. You can certainly, both of you kind of talk about things. What do you think?
Omar Reiss: Definitely.
Birgit Pauli-Haack: Okay.
Omar Reiss: Let me show you the page.
Birgit Pauli-Haack: Yeah.
Omar Reiss: Just for reference, I’ve also opened up the first one that we made, which is the ‘Gender, stereotypes and prejudice’ one and you see that it’s also got animations; the open source one, we left it out for this time, but something that you can also do with Gutenberg, and I might show a little bit later. Basically, most of the stuff you see here, even this probably, it can be done with Gutenberg natively, which is really nice, even though, in our case, this table of contents is block, because we generated it with a special block, but we’ll show you about that later.
Birgit Pauli-Haack: Okay.
Omar Reiss: This was added later, right, Willemien?
Willemien Hallebeek: Yeah, it was added later. It was actually some feedback from Yoast. He thought, well, maybe we could have something at the beginning just making clear what you can find in the story. Because it’s a long story, so you want to take people by the hand and already give them some idea of what’s in it.
Omar Reiss: Yeah. The funny thing is right at the start of the story you see this sort of card game where you can basically do sort of a quiz, where you can guess, so is this washing machine? Is it partly or created with the help of open source technology? And then you can guess like, “Well, no, it’s a washing machine, it’s not open source.” It’s like … no, oops.
Anne McCarthy: I love this. I thought this was such a cool way to bring home the power of open source and engage with the page.
Omar Reiss: Right.
Willemien Hallebeek: Yeah. This part was really, because I thought, well, maybe people know some software is open source, but perhaps they don’t know washing machines can be open source.
Omar Reiss: This kind of quiz sort of format we actually reused it from the stereotype where you have to choose if this is a stereotype or a prejudice. Basically, “This sentence, is it the prejudice?” And they’re like, “Yes, well done. It’s a prejudice because it makes a harmful judgment based ….” It’s the exact same kind of quiz format where you have to guess if it’s one or the other, but it’s a completely different game because this is aimed at understanding the difference between a stereotype and a prejudice. Here, it’s aimed at sort of simply guessing if open source is involved or not. You can even imagine a true or false game or whatever. There’s many different things that you could use this block for.
But the funny thing is that, like for instance, behind here, you can see a nice cover. That’s something that is just using Gutenberg natively. I’ll show you that in a minute. Yeah. So it’s got all kinds of this kind of interactive elements. You can see that there is a regular video here and that it has a sort of special functionality, that you can read also the transcript of that video. So it’s in there, if you want to read it; and if you want to hide it, you can hide it. So that makes it a really dynamic story. You can watch the video and it will tell you a little bit more, and then you continue farther into the story.
Yeah. Like I said, most of what you can see here, you can do this in Gutenberg. There’s nothing needed to make this work. It’s just an image in a column block, and I will show you that later, which I think is amazing because what we set out to do … like, you have a couple of these examples of big publishers like the New York Times who creates these really compelling interactive digital stories. That’s really costly to do and they need designers and developers to make it. Basically, all of them have tried also turning that stuff into a framework that can be reused to create other stories. Well, basically, with Gutenberg, in a few blocks you have this framework. It’s really easy for anyone to sort of create this sort of rich, compelling content by themselves. It only requires a few blocks and a really nice book editor. So, yeah.
Anne McCarthy: That reminds me of the snow article from New York Times. I think Mel Choyce might have given a WordPress TV. I think it’s a WordPress TV talked about that, how you can recreate that in Gutenberg and how much it’s unlocked. It’s super cool.
Omar Reiss: I’d love to see that talk. That’s exactly the kind of ….
Anne McCarthy: I’ll get back on you when I find it.
Omar Reiss: That’s exactly the kind of example that I was thinking about.
Anne McCarthy: Yeah.
Omar Reiss: It’s also the example that I gave I think about four years ago in the cafeteria of the Yoast.
Willemien Hallebeek: Yeah, I remember.
Omar Reiss: I gave a presentation about digital storytelling and I gave that example as well. It’s like so cool what you could do. But it was so hard to make that at that time.
Anne McCarthy: They spent months on that, right? It was a huge undertaking from them to do that.
Omar Reiss: Exactly. You can see there’s some design things that are being reused. I’ll show you some examples from the other story as well what we did. Let me look if I can find another compelling block.
This is the important. This ‘Thrive for the future’ talk here, which is a talk by Joost and Marieke, and it’s been done in different forms also by Joost alone and he also did it together in a couple of occasions, which is really sort of our story about open source. That story sort of explained here in WordPress.tv, but then it’s also completely explained here in the whole ‘Tragedy of the commons’ and how open source can help lead to a sort of reverse tragedy of the commons, and how can we get to a victory of the commons. Basically, the whole fight for the future thing in WordPress is explained and why it’s important. It’s a really important story for us and we really like to tell it. And you see the ‘Five for the Future’ is explained here.
Birgit Pauli-Haack: Right. Are these column blocks or are these media and text blocks?
Omar Reiss: We should watch it. Let’s briefly go to the back end to see what this looks like. Let’s first go to those blocks that we were just looking at. Yeah, we were looking at this one, right?
Birgit Pauli-Haack: Oh, they’re column blocks, yeah. Okay, got it.
Omar Reiss: So these are column blocks. I think, just here, if you look at this, this is I think is a group block. No, that’s a column block, and then this is a group block, and then these are columns. It’s so incredible what you can just do with playing old Gutenberg right out of the box.
Birgit Pauli-Haack: Yeah. So that’s a gallery, I would assume, the pictures up there.
Omar Reiss: Oh, yeah. We’re looking at this one. Which one did you say, gallery?
Birgit Pauli-Haack: The four pictures, kind of in the further up I think it was.
Omar Reiss: Oh, yeah. Right. So it seems like this is also a column block with multiple images.
Birgit Pauli-Haack: Yeah.
Omar Reiss: And then to right below each other. This is a group.
Birgit Pauli-Haack: Yeah.
Omar Reiss: And you can see the structure here.
Birgit Pauli-Haack: Yeah, it’s called the list view now. It was the block navigator. Just kind of a little tidbit here, we changed the interface, everything.
Omar Reiss: Yeah. That’s been quite some interface changes, but fortunately, it all still works.
Birgit Pauli-Haack: Right.
Omar Reiss: I think a good thing to take a look at now is the how we use ACF. Because that’s made it so much easier to do this stuff, right?
Birgit Pauli-Haack: Yeah.
Omar Reiss: We actually have a native table of contents block in Yoast SEO, but it doesn’t include this sort of image format. So if you go to that, you see these images that are in front of the table of contents and then basically the sub-headings. We created the sort of custom fields block for that where you can….
Birgit Pauli-Haack: Oh, okay, yeah.
Omar Reiss: Yeah. Basically this is … I think it’s a repeater where you can have multiple links.
Birgit Pauli-Haack: These are the three sections, yeah.
Willemien Hallebeek: Yeah.
Omar Reiss: Yeah. The downside of this is that it’s not 100% what-you-see-is-what-you-get. But the upside of this is that it’s really easy to give rich elements, interactive elements and just fill them with the data and the content that’s needed.
Birgit Pauli-Haack: Yeah, even more so with the quiz, I would think.
Omar Reiss: Definitely, this is a really good example. So this is the quiz. What I really find compelling about is that here you see there’s a Cover block, there’s a Group inside there with a Heading and a Paragraph, which is these two, and then the Yoast Stories Card Game and it all just seamlessly works together. I think it’s really miraculous how intuitive that is.
Birgit Pauli-Haack: Yeah. So, in ACF, you create your field group, and then you tell in the field group that is for a block, and then you need to…?
Omar Reiss: Yeah. Let me show you the card game. Here, this is our field groups in ACF. Basically, what we did is we defined upfront what a card game is in terms of data. Here, we’ve defined that, we’re saying basically a card game is a repeater block and every sort of card game has its own image: Option A, Option B, Statement, and Explanation. Yeah, what you get here to put there. Basically, what ACF requires you to do to turn a sort of field group into a block is you need to register a template for that block, and then the template can use the fields. And then that’s basically how you can use it as a blog.
Anne McCarthy: How quickly did you realize you needed to use ACF for this? Did you try to use Gutenberg first and then it was like, “This isn’t going to work, we have to switch over,” or did you live with this?
Omar Reiss: No. Basically, we knew that it wasn’t possible to do it with Gutenberg natively without coding a block so we would have to create a custom block. Then you can do it with ACF, which is really simple to do, especially if you have a little bit of development power. But anybody who’s able to create a WordPress theme or even tweak a WordPress theme could create an ACF block.
If you want to create a custom sort of Javascript powered what-you-see-is-what-you-get block in Gutenberg, it’s much more work, basically. You have to completely think through the entire interface of how to interact with that. Yeah, it’s really not trivial to do, especially if you want to make something dynamic and interactive.
Birgit Pauli-Haack: Have you tried any other of the non-Javascript block builders like Block Lab that’s now Genesis Blocks Pro, I think it’s called, the other one is called Lazy Blocks?
Omar Reiss: I haven’t tried those yet. But I have created a lot of custom blocks sort of from scratch. Also, Yoast SEO has got a couple of ones. So we are definitely familiar with how to create native blocks, so to speak. But I haven’t tried the other sort of custom block solutions that are out there.
Birgit Pauli-Haack: Yeah. I did a few months back, maybe a year and a half ago, kind of a summary on that, on the W Tavern from creating blocks without Javascript and comparing all three of them. I’m going to try if I can grab that and share it in a bit. Yeah. Oh, and then you wanted to show us the video, the special features?
Video data in ACF Block
Omar Reiss: Yeah. I just wanted to show you this example because I think it would have been nice to create this as a native block, because this is a video. A video is something that the Gutenberg Editor actually knows how to do. But then again, because we also wanted to have a transcript, we sort of took a shortcut. And it was just the easiest thing to do this in an ACF block because I would only have to worry about the template. Well, it kind of works, but then again, this would not have been hard to do more natively. Maybe if we put in like two hours extra, then this could have been a nicer, better experience.
Birgit Pauli-Haack: Well, I’m always on the impression, if it works, why change it?
Omar Reiss: Yeah, that’s true as well.
Anne McCarthy: It also adds a nice experience for people who are building the content to kind of prime them to include a transcript, which I think on the content side I’m sure that’s also helpful.
Birgit Pauli-Haack: Yes, it’s absolutely helpful. Yeah. Because not everybody can listen to audio on their computers.
Willemien Hallebeek: Yeah, exactly. That’s why these are added.
Omar Reiss: I think I’d like to show … Oh, sorry?
Willemien Hallebeek: I just want to say we added them to these two videos.
Birgit Pauli-Haack: Yeah. I’m just making a call for our audience here. If you have any questions to Willemien and Omar, please use the Q&A on the bottom of the screen and then we can kind of read them here for both of them to answer. Just not seeing any, so I think I need to coax a little bit more.
Anne McCarthy: Won’t you pull up the animations? I know, Omar, you said you might show how that’s done.
Animations
Omar Reiss: Wanted to show you is there’s two things about this post that I really like, that I also wanted to showcase, because it shows a little bit more what’s possible even. All of these animations are powered by a library called Lottie. Lottie is basically a Javascript library that allows you to animate SVGs in a certain format. If you use I think Adobe, some kind of Adobe product, it’s really easy to make those animations with Lottie. It’s a library by Airbnb. Basically, what I did is I included Lottie with Yoast.com. So it now comes with Yoast.com and you can now directly export these sort of animated SVGs from Adobe and upload them to Yoast.com and use them in any content, basically.
So this was an experiment to do that. I think it’s really cool that sort of Yoast.com now by default supports these animations in the block editor. I actually got it to work … Let me, this is going to be a live demo risk, but I’m still going to take it. Let me see. I think they work also in the editor themselves, which I was like, you know, my nerd heart beating….
Anne McCarthy: I have one of those moments.
Omar Reiss: Yeah. So because I want, when I upload those images, and I hope I can find an example, yeah … that I can see them animate in the editor.
Anne McCarthy: Wow, that’s really cool.
Omar Reiss: That would be the magic moment for me. That, I got to work so. Yeah, that was a really big, big victory and a lot of fun.
Anne McCarthy: Do you share how you’re doing it all? Have you all written up like the process you went through, to integrate the library?
Omar Reiss: Yeah, actually I think I do.
Anne McCarthy: That would be super cool to see.
Omar Reiss: Yeah. Frontliners …
Anne McCarthy: I’m glad we all Google the same way for things.
Omar Reiss: Yeah. I wrote this post.
Anne McCarthy: But Yoast app just wouldn’t be showing up in Google.
Omar Reiss: In 2020, I wrote this post ‘Digital storytelling in the age of blocks’ where I explained every step and, basically, the basics just use the block editor. I also show how we did a lot of the stuff and also the templating and stuff. Because one of the things that I was excited about, and I also show in this post, is that we actually use the Yoast FAQ block. Let me try to find it.
Birgit Pauli-Haack: Yeah. I’m glad you mentioned that.
Omar Reiss: Here, in this post, this is just the Yoast FAQ block. You can see that this “Are men smarter than women?” This format is not what you see on the front end because what you see on the front end is this, it’s where the answer is actually hidden and these prejudices are shown. And then you sort of first get to think about it and then you show the answer and you hopefully get confronted with something to think about even more.
So what I did is on the front end I filtered the blocks, the Yoast FAQ block, and came up with a different representation of the same block, which sort of turned it a little bit in this game format. It’s just one other example of how incredibly flexible the block editor is and blocks are to use to your advantage. I thought it was really compelling, nice example of how we can reuse an existing block actually made by a plugin in our, in this case, our plugin. But, yeah, that was really exciting for me.
In terms of demo, I think that’s the most important thing. Is there anything you would like me to showcase or show?
Questions
Birgit Pauli-Haack: Well, ask the people in the audience I think … well, we certainly have a few questions.
Anne McCarthy: I’m also happy to jump in with some too because this has been really fun.
Birgit Pauli-Haack: When do you decide between kind of using something like ACF or do you want to do custom build blocks. It’s certainly one that I’m always struggling with. Also, what does Willemien think about ACF versus a custom-built block and all that.
Willemien Hallebeek: Well, yeah, I’m really the least technical person here. Awesome. I think that the nice thing is if you really use block … for us, it’s mostly important that you can see what you get. So, yeah, if it gets closest to that, if you’re creating the content in the back end, it’s just so nice that you don’t have to switch all the time between preview and go back to the editor and doesn’t really look like what you want to. Yeah, that’s mainly ….
Birgit Pauli-Haack: Yeah. That’s a very important one.
Willemien Hallebeek: I think, well, it’s just nice to see, to do most stuff in the editor whenever it’s possible, what Omar said as well.
Omar Reiss: And if-
Birgit Pauli-Haack: Yeah. Go ahead, Omar.
Omar Reiss: No, I just want to share, if anybody wants to see anything, I can always share again.
Birgit Pauli-Haack: Yeah, sure.
Omar Reiss: But I like to see you large as well, so that’s right.
Birgit Pauli-Haack: Yeah. I think it’s important to, what you say, Willemien, in terms of, well, on that blog or post, you only had maybe three videos in ACF and that quiz, but when you look at larger publishers’ websites, yeah, I went to the WordCamp for publishers and one of the speakers showed nine pages of ACF fields with all kinds of different data. But only when you hit Preview, you were able to actually see what you put where and where it will show up. I think that what you see is what you get is really important. Yeah.
Willemien Hallebeek: Yeah. It makes our job a lot easier, yeah.
Omar Reiss: I totally agree with the long list of ACF that is not a great user experience. We’ve created a couple of dynamic blocks because this is what we’re talking about. Basically, blocks that are rendered in the PHP via a template, that’s very easy to create.
What I think I prefer in those blocks and maybe the other examples that you gave just now Birgit. It more like that is where you have sort of the server-side render component in the editor where you actually see what is being rendered in the editor. And you do the editing in the sidebar and then, on mobile, this is not the best experience maybe, but it’s a really nice experience on desktop where you can actually see what you’re editing. That might be a good middle ground. But generally the reason why we chose ACF blocks for this kind of stuff is just also cost. A cost reason because it’s just you know it’s really easy, much easier to do and cheaper.
Anne McCarthy: Yeah. Quickly, there’s an attendee question that we can answer. The question’s anonymous and it’s, “How About Site Speed in such long stories? Were there any measurements done in terms of site speed both front-end and back end good question yes thank you well a really.
Birgit Pauli-Haack: Good question, thank you.
Omar Reiss: Well, it’s a really good question. I remember having the question the first time, I don’t know, did you look at site speed for the open source post that we did.
Willemien Hallebeek: We did. After we posted it, we checked it. We found out we could improve some images so we really we turned them all into png to make sure they can be with clouds there. They now are transferred, they’re now made into a web pea and I think that’s the fastest way and to make them as small as possible actually I think there are also Lazy Loaded now, right?
Willemien Hallebeek: Yeah. I think yeah.
Omar Reiss: When you scroll….
Willemien Hallebeek: Yeah. Lazy Loading. I don’t know about the animations and those are actually ….
Omar Reiss: SVGs, yeah.
Birgit Pauli-Haack: Yeah.
Omar Reiss: So the animated image, I remember also looking at that, they’re not very big but there are a lot of them on the page. I think in the end we also … but I should check if that if that indeed works. But I think we also managed to lazily load those SVGs.
Birgit Pauli-Haack: It’s always a little bit of a technical, so what’s speed and what’s perceived speed.
Omar Reiss: Yeah.
Birgit Pauli-Haack: So as soon as I can read something very quickly, yeah, I don’t care that much how long it takes that what I’m not who I’m not scrolling to is not there. Yet, yes, it kind of comes back comes later so I think that … have you done any measurements in that regard or optimized your site like the text is not, that the site doesn’t have to be fully built to show people something, or fully rendered.
Omar Reiss: I think the main thing that we lazily load is the images. So those are not rendered on page. But all the rest is entirely cached in CloudFlare, so generally Yoast.com pages, even bigger pages are really quite fast to load because they’re completely cached and nothing has to be sort of made ready to download before it can come to your browser.
Willemien Hallebeek: Yeah. It’s definitely something to keep in mind when you create a story like this.
Birgit Pauli-Haack: So does that answer the question of Anonymous? All right. Yes. Okay, good.
I had also a question that we put together. Now that it’s out there and how you built it, if you had it to do all over again, would you do anything differently or what is it to improve?
Willemien Hallebeek: I can’t tell, but after looking again at the other story, I just really regret that we didn’t add more animations in it. Yeah, because they mostly make it just more fun to watch, more dynamic. But they also take more time to be created, to be developed. So, it’s kind of the….
Anne McCarthy: The victory of the commons, I feel like that could have been really cool, like people cycling together kind of thing.
Willemien Hallebeek: Yeah, exactly.
Anne McCarthy: The animations.
Omar Reiss: And you can make it alive, right? Yeah. There’s lots of ideas, right? We are actually planning on another big one. I think it’s coming out in a couple of weeks.
Willemien Hallebeek: Yeah, Schema.
Omar Reiss: It’s a big one on Schema. But the idea from the start was to have a framework and to improve on it. Basically, we wanted to just see how difficult is it to create a framework for digital storytelling now that we have this awesome block editor. I think the experience with this second post, the second story, was that it really didn’t require a lot of extra work to build it technically. We got a new table of contents idea there and it was built by a front end there. It was added to what we had already and mostly we could build with the building blocks that we had. I do think that it would be nice to explore the other options, for instance, that you shared, I think Atomic Blocks, is that the one??
Birgit Pauli-Haack: Atomic Blocks. Yeah. You mean not using Javascript but a templating thing for that?
Omar Reiss: Yeah.
Birgit Pauli-Haack: One is the Genesis Blocks actually, which is the Block Lab out of Australia, was bought by WP Engines, and they are now Genesis Blocks Pro I think.
Omar Reiss: Right. Yeah.
Birgit Pauli-Haack: They have a free version in the repository. That was actually quite powerful. Actually, when I scrolled through this and now listening to you, have you thought about would it be even faster to put together if you had section block patterns instead of kind of having, yeah, together three … I can see that the columns block was the group block with a different background and with the different images in there take actually quite a bit to put together from scratch. If you had a block pattern then you could just kind of pull it in and say, “Okay. I have these two guys to the right with text and then in the middle column and just kind of pull it in with the background.” Yeah. Have you thought about doing that and kind of improving on your framework?
Omar Reiss: Yeah, definitely. I haven’t thought about it yet, but it sounds like a great idea.
Willemien Hallebeek: Yeah. It sounds like a dream for a content editor to be able to drag it in. Yeah.
Anne McCarthy: I made a site recently and I did something like that with some patterns where at first I was like manually copying-pasting, removing the stuff I didn’t want and all of a sudden I was like, “Wait a second. I can just have a pattern, have it ago, and just plug and play,” so for content, it’s amazing, especially….
Omar Reiss: Did you need to do any development for that or is it something that you can do as a content editor?
Anne McCarthy: No. I did it just on the side. A lot of it was done, for this site in particular, I did it on WordPress.com which has come in with built-in like I think 117 block patterns. So this was just kind of like a for fun. I have a lot of for fun sites.
Omar Reiss: Nice.
Anne McCarthy: But it was kind of showing the future where we’re going to go. I’ll link to the WordPress.com pattern library.
Birgit Pauli-Haack: Yeah, it’s pretty cool. Well, there is a plugin out there by JB Audras where you can actually convert your reusable blocks to block patterns, kind of get over that problem that if you change reusable blocks you change it on all of them instead of using it as a template. Here, in his plugin, he has a feature where you can actually transfer it. And then there’s another plugin out there called Block Pattern Builder and the author is Blockmeister. They also let you kind of highlight a block and then have a menu in the more options block save as a block pattern.
Yeah. So content creators can at least start out with that. And if you need them tweaking you can hand it to your designer because it’s pretty much templating, yeah, that can be added to theme. Yeah. There is a resource list of all the things Block Patterns on the Gutenberg Times. I think it was the second last post that I did and it has a lot of additional ideas on themes that have come with Block Patterns. So it’s definitely something to take a look at.
Anne McCarthy: Did you all explore or have you looked into Google’s web stories plugin? Because I feel like they’re trying to accomplish a similar thing. I haven’t played around with it yet though.
Willemien Hallebeek: Yeah. We’re actually experimenting a bit with that as well. It was really nice that we got a tweet from someone who is also working on the web stories and he contacted us saying, “Well, this is actually…”
Anne McCarthy: Perfect use case.
Willemien Hallebeek: Yeah. This would be a perfect web story. Definitely, I think we’re now in the process of getting it on Yoast.com. We really want to start creating some web stories. Well, I don’t know if we’re going to choose this topic or another one, but yeah, definitely, something we’d like to … it will be like, yeah, we have to play around with it and see what we can make with. It might be a bit you know shorter I think. The content needs to be even more snackable than what we have here.
Anne McCarthy: Do you struggle with that at all, of trying to make something snackable like you said versus like a long form, or have you intentionally gone more long form with this stuff?
Willemien Hallebeek: Yeah. I think it’s intentionally more long form because … yeah. We really want to tell the story well and otherwise it gets … snackable, is nice but this is something like maybe elaborate a bit more.
Anne McCarthy: I’m all for long form, so you can consider me a fan.
Birgit Pauli-Haack: Me too. Me too. But I liked how you broke it up. Yeah. So it’s kind of snackable to kind of come back and say okay yeah this is the topic and then they have bullet lists and not this wall of text that others have. So you kind of really … yeah.
Anne McCarthy: The best of both worlds.
Birgit Pauli-Haack: Both worlds, yeah. Yeah, and having a good designer as well, with the iconography. Even if it’s just a non-animated thing, it still kind of breaks up the text so much. Yeah. My favorite block right now is the media and text block because the image can change the size of it, depending on the text. So you can fill the full bleed of the column with an image and then you have the text next to it. So I really like that.
Willemien Hallebeek: So it’s dynamic to the amount of text you ….
Birgit Pauli-Haack: Yeah.
Willemien Hallebeek: Great.
Birgit Pauli-Haack: So if you have a long picture, you don’t need to have long text to go with it there. You can say crop it to the text size and that’s really good.
Willemien Hallebeek: Yeah.
Birgit Pauli-Haack: So use it a bit more.
Willemien Hallebeek: Yeah.
Birgit Pauli-Haack: That’s why I was asking are these columns or are these media and text blocks at the beginning. And I can see that columns from the idea is really easy to grasp, “Okay. I have two columns, three columns, four columns,” but then, yeah, so I really like that.
Well, yeah, so we don’t have any more audience questions. Do you have any more questions, Anne, that you want to ask them?
Anne McCarthy: I’d love to know if you have any more stories coming up, just like content wise? Is there another WordPress related open source maybe inspired story that you all are trying to tell, like a next version because these are the next things we we’re going to get into.
Willemien Hallebeek: We wanted to build the next story on Schema and structured data. So that will be coming out.
Birgit Pauli-Haack: There’s a there’s a lot of things to do: that’s reviews, it’s recipes.
Willemien Hallebeek: Oh, yeah.
Omar Reiss: Also, just the higher level, philosophically.
Willemien Hallebeek: Yeah. I think we will be….
Omar Reiss: It’s super interesting. It’s basically the story of open data and of the sort of evolution of the web. Yeah. So that’s also something near and dear.
Birgit Pauli-Haack: So you’re going back to Adam and Eve, practically.
Willemien Hallebeek: Yeah. I’m not sure if you go back that far, but … No.
Birgit Pauli-Haack: It’s not your fault, that’s 2000 years. Yeah. Andrea had a question here from the audience, “Based on your experience working in the block editor for complex posts like this, is there a particular request you’d like to make to the team working on Gutenberg?” Apart from switching off the full screen.
Omar Reiss: I’m leaving it to our competitor, but otherwise … I also have a request, but I think it’s already on the roadmap.
Willemien Hallebeek: Okay. Yeah. That’s a hard question. Yeah. Well, let me think about it. Yeah. Maybe we have to add some help from front end, making tweaks to headings and stuff to be able to move them easily. I don’t know if that’s something ….
Anne McCarthy: Yeah, drag-and-drop is a big thing.
Birgit Pauli-Haack: Oh, maybe the alignment, kind of full width.
Willemien Hallebeek: Alignment option.
Omar Reiss: Yeah, alignment options.
Anne McCarthy: Yeah.
Birgit Pauli-Haack: Do you want to control line heights as well?
Willemien Hallebeek: Yeah.
Birgit Pauli-Haack: Sometimes it’s something a little bit too compressed and if you have more line height, control ….
Omar Reiss: Sometimes you might have like a heading in the design, which I think it’s probably already possible where you have a relatively small heading, but you need a bigger heading level. That’s probably already possible. I can almost not imagine that to be a problem today. I know you have a font size. You have a font size.
Anne McCarthy: Yeah, there’s a font size. I regularly mess with that.
Willemien Hallebeek: Yeah.
Anne McCarthy: Well, the heading, yeah.
Omar Reiss: Yeah. I would personally really, really like collaborative editing features.
Birgit Pauli-Haack: Okay.
Omar Reiss: It would make me completely skip Google Docs in writing. I really like collaborative editing personally for whatever I do. It’s not for everyone maybe, but especially the commenting part of that.
Willemien Hallebeek: Yeah.
Omar Reiss: I don’t need to be in the same document with someone necessarily, but I would really like some editorial workflows where you can comment on stuff and give suggestions.
Birgit Pauli-Haack: Yeah.
Willemien Hallebeek: Yeah. Skip the heading part, focus on that, that’s better, that’s the best idea, definitely.
Birgit Pauli-Haack: Yeah. What I struggle with is that, if I have an older post yeah and when I edit it I have to kind of copy it somewhere else, edit it, and then get it back because I cannot finish it in one session. And I cannot schedule these revisions, yeah.
Willemien Hallebeek: Yeah.
Birgit Pauli-Haack: And that’s kind of one thing, but, yeah, collaboration is on the roadmap. You’re right, Omar.
Anne McCarthy: I just dropped a link to something Riad had experimented with. Yeah.
Birgit Pauli-Haack: Riad had experimented with it, yeah. Quite, quite a bit actually here. Site up there it’s called Asblocks.com, but it’s on the roadmap for the next phase. So, I think 2023 or something like that.
Omar Reiss: Yeah.
Birgit Pauli-Haack: Or 22, yeah. I think ’21 is already over and I’m thinking ’22, but that’s not right. That’s not right. ’20 is almost over.
Anne McCarthy: We’re still just trying to get through 2020. I mean, I think there’s also already a plug-in offering it. And yeah, and I really reapps work on this as well. I remember when he tweeted his AS blocks out, it’s, yeah, good to be reminded of that.
Birgit Pauli-Haack: Yeah.
Omar Reiss: But it’s just so exciting. I want to see it. Also, we will probably utilize it if we have something like that in Yoast SEO. We can imagine using a sort of commenting system to give inline feedback really granularly. That I think could turn into a really amazing experience where you sort of enable sort of SEO mode and you get really granular SEO comments sort of automated editorial workflows, that kind of stuff.
Birgit Pauli-Haack: Yeah.
Willemien Hallebeek: Yeah.
Omar Reiss: Really promising.
Willemien Hallebeek: We already have the readability analysis that says, “Your sentences are too long.” So if you could get this kind of feedback on a more granular level that would be super helpful.
Birgit Pauli-Haack: Yeah. Andrea, you indeed specialize in hard questions, that’s okay.
Omar Reiss: It’s really cool to see you also like the collaborative editing.
Birgit Pauli-Haack: So much, yeah. So we are at the end of our show. I could probably talk with you another two more hours, but I want to, yeah, let you go. And we probably can do this again. Thank you for the questions from the audience. At this point, I have two more questions for you, all three of you.
Do you have any announcements that you couldn’t get to talk about before, what you want people to keep in mind? If people want to get in touch with you, what would be the best way? Willemein, do you want to start?
Willemien Hallebeek: Yeah. I don’t really have any announcements I think.
Birgit Pauli-Haack: Which is fine.
Willemien Hallebeek: Yeah. Well, you can find me on Twitter and reach out to me on willemien@yoast.com.
Birgit Pauli-Haack: Via email, yeah, cool.
Willemien Hallebeek: Yeah, the best, fastest way.
Birgit Pauli-Haack: Yeah. Omar?
Omar Reiss: The best way to reach me is either Twitter @OmarReiss or on the WordPress Slack where I typically respond quite fast. No announcements here either.
Birgit Pauli-Haack: No announcement.
Omar Reiss: I would like to say that I really enjoyed this webinar, of course.
Birgit Pauli-Haack: Okay. We enjoyed having you, of course. Anne?
Anne McCarthy: I actually do have some announcements.
Birgit Pauli-Haack: Yeah.
Anne McCarthy: There’s a great post speaking of kind of the phases of the core editor. Matias just posted a really awesome update kind of showing what’s happening with editing. I think it’s really worth reading through and kind of getting excited about it. I read through it and just kind of had my brain exploding with ideas and hopefully it does the same for you.
I also just want to give a big props to the 5.16 that release just came out this week. It was the first women in non-binary-led release for WordPress, which feels pretty historic. So I just want to like shout that out and major props to everyone involved in that effort.
And then, for keeping in touch. I’m a weird millennial who doesn’t like social media, but I blog at nomad.blog and you can find me on WordPress.org slack as annezazu. Feel free to reach out to me either place.
Birgit Pauli-Haack: All right. And that’s it. Big thank you to the viewers. Big thank you to you for being here. You can reach out to me on twitter or on the WordPress Slack. You could also send emails to pauli@gutenbergtimes.com, a recording of this will be available in a few minutes on YouTube and I’ll share it of course also with a panelist, so you can share it, but also over the social media.
Well, it was a joy talking to you. Yeah. I wish everybody wonderful holidays. Happy Hanukkah to Israel and the Jewish community Merry Christmas and happy holiday. This is also the last show of the year from Gutenberg Times we won’t have a Changelog because the team. We always do a Changelog podcast after the release and the release moved a week into my holiday or into my vacation time, so we will be back January 8th with a Changelog and we will cover two Gutenberg releases. And so, that’s my announcement. I wish you all yeah good evening, a nice afternoon, and thank you for watching and being with me here.
Willemien Hallebeek: Thanks so much, Brigit. This was wonderful.
Birgit Pauli-Haack: Thank you.
Omar Reiss: Thank you so much. It was a pleasure.
Birgit Pauli-Haack: Thank you.
Resources mentioned
- Open source: Better solutions and a more inclusive society
- Gender, stereotypes and prejudice; a sociological exploration
- Block Building with our JavaScript by Birgit Pauli-Haack at WPTavern
- Lottie library (Animation)
- Digital storytelling in the age of blocks
- Introducing Patterns: Prebuilt Blocks for Beautifully Designed Websites
- The WordPress Block Patterns Resource List
- AsBlocks – end-to-end encrypted (private) collaborative writing environment
- Google Doc-Style Editorial Commenting for WordPress
- Status Check: Site Editing and Customization by Matias Ventura (Core Team)
