Episode 16: AMP Stories and Gutenberg w/ Pascal Birchler, Cathi Bosco, Alberto Medina and Weston Ruter

In this Live Q & A we covered some general news from the AMP Project, and AMP plugin and then discussed AMP Stories and their creation with our expert panelists: Cathi Bosco (@BeTheBreeze), UX Architect and Designer, while working with XWP worked on AMP Stories with the Google team, Pascal Birchler (@swissspidy), developer at Google WordPress team and lead for the AMP Stories in the AMP plugin and Alberto Medina (@iAlbMedina), CMS Developer relations team at Google. Surprise Guest: Weston Ruter (@westonruter), Technical Lead of AMP Plugins at Google.


Show and Transcript sponsored by Pantheon

Resources


Table of Contents

Transcript

Birgit Pauli-Haack:  All right. So welcome to the 16th episode of the Gutenberg Times Live Q&A. My name is Birgit Pauli-Haack and I’m your host. I’m the curator of Gutenberg Times. Thank you all for watching and it’s so great to have you. In today’s show, we will discuss the AMP project, AMP stories, and Gutenberg. I’m going to start with what’s AMP and what are AMP stories, what have publishers been able to do with them, and how you can take advantage of AMP and AMP stories in the worker’s speaker system.

And I’m thrilled to have these brilliant experts here with us today. Thank you for coming and, as you can see, we have a surprise guest, as well. So we have Alberto Medina. He leads the CMS development relationship team at Google and works on additional types of technologies aimed at making the web the best platform to publish and consume content. Hello.

 Next to him is Weston Ruter. And he is the lead for the AMP plugin on the AMP project team. The AMP plugin for WordPress. And then we have Pascal, who is the lead developer for the AMP stories on the AMP plugin for WordPress project. I get it right, everybody’s nodding their head. Thanks. And then I have Cathi Bosco. She’s a UX architect and designer. And while working with XWP, she worked on the AMP stories with the Google team. So we do a proper introduction in less than a minute.

I have just a few announcements. This show is sponsored by Pantheon. Pantheon is quickly becoming the go-to WebOps platform for alpha developers and agile marketers who are seeking to deliver the world’s best web experiences on Google and WordPress. Pantheon considers AMP a first class technology enabling the open web to deliver results faster. A big thank you to the team at Pantheon for sponsoring this live Q&A. While I have you all paying attention, I just want everyone to know that the next live Q&A is already next week.

So we did a break between April and July. And then do two in a week almost. And next week is a discussion with Byline Times editor Peter Jukes and Yes we work team members Andrew Staffell and Thomas Eagle about how custom works allow journalist to compose engaging layouts without the help of designers and how ACF blocks making testing and iteration easier for developers. So August 2nd at 2:00 PM Eastern and 18:00 UTC.

New Podcast: Gutenberg Changelog

If that’s not enough, you probably already know that Mark Uraine, designer at Automattic and core contributor and I co-host a new podcast called the Gutenberg Changelog. Subscribe to it with your favorite pod catcher. We will keep you up to date on what’s released, what’s in development, and what’s next for Gutenberg in phase two.

All right, so that’s all the preliminaries, a little housekeeping. So this phone line today is like all those Live Q&A went before, is we do use the Zoom Q&A feature if you want to, but we can also use …

Sorry. Went over to YouTube and it was automatically playing. So the YouTube chat, if you have questions, that would be great. So where’s everybody from? Do we have people here? Yeah, we have Fabian from Germany. Hi, Fabian. You did great work at the JavaScript role WordPress conference two weeks ago or something like that. And one of the others will chime in later. Yeah, so groovy. We hope you all have questions, but let’s get going. Let’s start with the speaker introductions. Alberto, we are following each other on Twitter. And for a while now, but we met at WordCamp US last year, but we didn’t get to talk much. I did watch some of your talks in Google IO and AMP Conference, of course. And tell us a little bit about … Yeah, you’re from Venezuela. How did you get to San Francisco and what do you do for fun?

Alberto Medina:  Yeah!

Birgit Pauli-Haack:  If it’s not WordPress? Yes.

Alberto Medina:  Yeah, so I’m from Venezuela and I came to San Francisco via Boston where I went to school. So I went to grad school in Boston and then I learned in San Francisco. Yeah, so for fun, I work for Google. And when I’m not having fun, I like to play the guitar and waste time. So that’s, maybe, you know … 

Birgit Pauli-Haack:  That’s pretty good. Have you ever played in a band?

Alberto Medina:  I have, but fortunately I don’t have to make a living with that.

Birgit Pauli-Haack:  Yeah. So next to you is the surprise guest of this Gutenberg Live Q&A. It’s Weston Ruter. Do you want to introduce him to us or, Weston, what are you doing in our talk? I know you’re in Australia and we normally could get you in the other time zones and everything.

Weston Ruter:  Actually, no, I live here in Portland right now. This is where I live, but I was on vacation in Minnesota for …

Birgit Pauli-Haack:  Why do I think that you’re in Australia?

Weston Ruter:  I don’t know.

Birgit Pauli-Haack:  Well, I put Alberto into Italy, so that’s a common theme.

Weston Ruter: Yes. Yeah, we work together on the CMS DevRel team at Google. And we’ve been integrating with WordPress for a long time. And I’m involved with AMP since about two years now. About a year and a half.

Alberto Medina:  Yeah, three years. And he’s the main engineer, the lead engineer. So everything that good stuff are his fault and the bad stuff is also his fault.

Weston Ruter:  Except for AMP stories, that’s all Pascal.

Alberto Medina:  Yeah.

Birgit Pauli-Haack:  So Pascal, you’ve been a WordPress co-committer for quite a few years. Do you live in Zurich? I got that right, right?

Pascal Birchler:  Yes, I live in Zurich, Switzerland.

Birgit Pauli-Haack:  So what do you do for fun and what do you do at Google apart from making these awesome AMP stories?

Pascal Birchler:  So I’ve been contributing to WordPress for quite a while. It takes up a lot of my time, spare time and all, but I usually go snowboarding, meeting with friends, and traveling is a big part. At school, I’m part of the same team as Alberto and Weston. I’m a developer programs engineer, so I help build solutions in the content management system space to allow publishers to be successful on the web.

Birgit Pauli-Haack:  All right. And Cathi, we have been Twitter followers for a while, but you grabbed my attention when you showed off your AMP stories and your photos from Japan from the AMP conference. So what do you do now? And when you’re not in front of a computer, what’s your day job?

Cathi Bosco:  Well, I’m a consultant and a UX architect, so I work with agencies and companies to improve their presence on the open web. And I like improving the open web in general on projects on a contract basis. For fun, I used to run a lot and I’m recovering from some injuries, so now I hike a little. And for fun, I like to really party, and cuddle with my greyhound, and watch movies, and read, and cook.

Birgit Pauli-Haack:  That’s awesome. Yeah, I’m sorry that you got injured. Yeah, I got injured on February 2 and I haven’t been back to running since. And it’s really hard to do because it helps us with the mental … Well, myself with the mental health.

Pascal Birchler:  Yes, definitely. Yes.

What is AMP?

Birgit Pauli-Haack:  Well, thank you all four of you to be with us here and take your time. Let’s get into the middle of things. So the AMP plugin for WordPress 1.2 version was released a little over a month ago. Before we do that, maybe we can talk a little bit about the AMP project itself.

What is it set out to do? And do you want to that, Alberto, and get us into the groove of this? [00:09:10]

Alberto Medina:  Sure. So to make it quick, so in a nutshell AMP is a component based web framework that is designed to make it easy to build sites that are beautiful, performing, and what used to call user first. So that put the user on the forefront of the object, of the web presence. And the project is characterized by several key parts, right? First, it’s an open source project. Everybody’s working to contribute and there are hundreds of contributors around the world. It’s an HTML framework, that means that there are a library of constant components that are designed for efficiency and high level complexity.

 But that can be used in an easy way. It’s built for speed. It provides a lot of coding and performance practices out of the box. So that’s one of the main strengths of the framework. It’s completely cross-browser compatible. Everything that you’re doing now, you’re cascading all browsers. Yeah, doesn’t that mean elements are defined on project.

Weston Ruter:  Yeah, and it’s just HTML, CSS, and JavaScript. There’s nothing proprietary about it. And if you want to have an AMP page, you would have to publish it to your own website. That’s not something that you have to host somewhere to be considered a valid AMP page. If you publish it to your website, and it’s valid, if it conforms to the specification that indicates what an AMP page is, then it’s a non AMP page. And then once it’s an invalid AMP page, then it’s eligible to also be cached from an AMP cache.

 And it’s not just a Google thing, there’s also a Bing cache, AMP cache, there’s a conclave cache, there’s other AMP caches, as well. And those AMP caches are an additional layer on top of the AMP page that you surf from your origin, which enables for your pages to be served even faster when you’re encountering that content on a provider like Google search or Bing search.

Birgit Pauli-Haack:  Well, technology. You need to switch it on. So for the first couple of years, AMP has received a fair amount of flack from the publishing industry. And I don’t know any time where Google hasn’t received any flack from commercial industries, but some of them it was seen as the big land grab by Google because it cached content on its own servers. And at some point, assets that were also linking back to Google and not to the publisher’s website.

This seems to have changed in the last two years. So what have you learned as project leaders from this criticism and controversy?

Alberto Medina:  Yeah, that’s a very important question, right? So in order to answer it in context, it’s very important to realize where it came from. So when AMP was developed, it emerged as a response to the origin need of doing something about performance with the mobile web. So the situation around 2010 was so bad that a lot of people thought literally that the web was dying. And that the whole guiding platform were going to basically take over and the web was going to die.

 So that was the situation that actually triggered the decisions that we need to do something or we are going to be all out of business, right? So at the moment that AMP was developed, there were a lot of decisions that needed to be made, right? So how do we achieve near instant loading, right? In an environment like the web? How do we prevent the addition of components in a website that block the rendering of the site? So there were a lot of questions, challenging questions that actually were reflective of the bad performance of the web.

And then a lot of decisions were made. Many of them were right on target, some of them were more difficult to make. For example, the addition of an AMP cache. Given the technology available at the time, needed to be served with a URL of the cache rather than the URL directly of the origin, and so on. For example, also given the limitations of the library at the beginning, it was decided that AMP would be served as a third mode to the original side, and that kind of thing. And that also people complain about it, and you have other side, and then so on.

However, to put things in context, AMP has gone a long way in the last three years. And we have actually addressed many of the concerns. And some of the concerns have been addressed by actually improvement in the Word platform itself. For example, serving the AMP pages from the cache with the origin URL has been addressed via a new web API, a new web standard that’s called Site Sign. It changes that allow you to distribute certified content from a given publisher no matter from what platform it’s delivered.

 Without going into details, as you said, the situation has improved so much. And also, it’s very important to mention that an objective of the AMP project, as well, is try to get the learnings. AMP has provided a well leap pad to provide awesome experiences in the web. And then one of the objectives is to try to get some of those learnings and then bake them in into the web platform so everybody can get advantage of them without using AMP. And we will be making AMP more lean. And then we would focus on providing high level, complex functionality that actually can be done efficiently.

Birgit Pauli-Haack:  Awesome. Thank you for walking us through this. So with the AMP plugin for WordPress, a site owner can now make their own AMP site AMP ready, so to speak. But that’s not the only thing that is needed to success. What are the pieces that need to be in place for that? Pascal, or Weston, or Cathi. [00:15:52]

Cathi Bosco:  I mean, if I can do it, anyone can do it, right?

Birgit Pauli-Haack:  Right.

Weston Ruter:  Yeah, well, their plugin, it strives to allow you to use AMP in WordPress the WordPress way. So you can use WordPress themes or plugins like you world normally, but the AMP plugin then ensures that the output of these things or plugins don’t violate AMP’s specification. And so if you have some disallowed markup, like a script, or some HTML tag that isn’t allowed on my AMP for performance reasons, then AMP plugin will intercept that and remove it so that it won’t cause the page to be invalid and to hurt the performance of the page.

 And so when you use the AMP plugin on your site, it’s best to do so using a theme or a plugin that has already learned to be AMP compatible. And you can find a list of those on AMP-WP.org. But as well, if you are using any theme or plugin that isn’t already known to be credible, the default behavior when you use it with AMP plugin is as if you had JavaScript turned off in your browser because it just removes that custom JavaScript. In large part, that’s one of the major things that it does.

 And so as long as you have a theme or plugin that is an acceptable fallback experience for when you don’t have JavaScript turned on, then you’re going to get that as the baseline experience in your AMP page. But then with that as a baseline, then you can go back in and you can add the components that add interactivity that you would want otherwise.

Where has AMP been most successful?

Birgit Pauli-Haack:  Yeah. And this is where I think we can ask our first set of questions. I got them via email and this is Andrew Taylor, some of you know him, asks, “Where has AMP been most successful?” And I’m thinking from the question, it could be either industry and/or geographical area because AMP is the fastest way to do it on mobile. So it will also be in emerging countries and developing countries.

Alberto Medina:  Yeah.

Birgit Pauli-Haack:  I assume, but you probably have a better feeling for that.

Alberto Medina:  Yeah, we got into the industry. AMP started with a focus on the news ecosystem. So that’s what it was called as a ready mobile page. It’s not called that anymore, it’s just AMP, but at that time it was very useful for news publishers that have simple pages that needed to be found quickly. But since then, now with all the power that the lab already has, AMP is used in any industry and can because the objective is not AMP itself or the experience. AMP actually can cause a huge impact in any domain.

Respect to the geographic area, it is true that your perception of AMP is different if you’re sitting on a 4G network with an iPhone 10 than if you are sitting in Bangalore, India, with a 2G connection and a $50 phone, right? So for everybody, AMP represents awesome experience, but for some people AMP represents the different between being able to read the news and not. So I would say in areas where there is problems with connectivity, low end devices, it’s previous. I mean, we can see how people in Asia and Latin America actually embrace because they see the value.

Birgit Pauli-Haack:  Yeah. I can see that, yeah. So Drew Gorden, also Pantheon, asked

What things to trip up teams when they’re want to be deploying AMP? [00:20:03]

So Pascal, what are you seeing WordPress support forums, or on GitHub, in that regard?

Pascal Birchler:  So as Weston mentioned before, AMP has certain restrictions. And one of them is that JavaScript is not allowed on your website. So when users first installed the AMP plugin and they realized that some plugin they use at some custom JavaScript website. And they realize it doesn’t work, you at first have to explain to them why it doesn’t work, and then you have to show them how they can achieve the same level of interactivity using the components that AMP provides. That’s what we usually see more.

But a good thing is more and more plugins and themes see the potential of AMP. And have built in AMP compatibility right from the get go. So when you have the AMP plugin and you have some other plugin, like JetPack then you don’t have to make any changes. And it’s automatically AMP compatible, for example.

Weston Ruter:  Another big one is the amount of CSS that a theme is using. The AMP specification limits the amount of CSS to 50 kilobytes. And that has to be in lined inside the page. And the AMP plugin automatically gathers up all the CSS that’s being used on a page, including external styles, and styles, and style elements. And then it will concatenate all together into the single style element that AMP requires.

 And then it’ll also perform tree shaking to remove the styles that are not clearly being used on a page. But stepping the case, there is still a lot of themes out there that have way more CSS than even the tree shaker can possibly reduce it to the 50 kilobyte limit. So that’s another issue that you may encounter, is the themes and plugins that are just using too much CSS to be compatible.

Birgit Pauli-Haack:  So I say hi to Jaqueline Delia and she brought in a question:

What is the roadmap for future versions of the AMP plugin that might improve adoption?” [00:22:28]

Alberto Medina:  Yeah, so I will start that one. One of the main objectives that is in our team is to make a content page in WordPress as successful as possible to everyone, right? And WordPress is an amazing ecosystem for many reasons. And one of the things that I really like is that it’s very inclusive, right? There are developers of all skills level, there are users that know nothing about technology, but they take advantage of WordPress. So we are working towards the notion of tonky solutions for the WordPress ecosystem.

Now, AMP itself is a component of that strategy, right? The plugin does amazing work. And we estimate that about 80% or more of the work that is needed to make a site AMP compatible, the plugin does it for you. And our object is in the roadmap, it’s closing that gap in between what can be automated and what needs to be developed by the user itself. And so a lot of the tasks that are in our roadmap are in that goal.

Birgit Pauli-Haack:  Well, Weston mentioned that there are already some things out there that already support AMP out of the box. Would you have an example there? [00:23:46]

Weston Ruter:  Yeah, the GoDaddy primer theme just added AMP compatibility, for example. And their child themes are also in the process of being made compatible, but also the core theme. 

Alberto Medina:  Genesis.

Weston Ruter:  Yeah, Genesis. Genesis’ framework is AMP compatible and the core themes are AMP compatible in WordPress.

Alberto Medina:  WP forums. 

How to get AMP for your own site?

Birgit Pauli-Haack:  Good. Cool. All right, and then well, what advisement would you have for teams who are considering using AMP on their own site? [00:24:32] It’s just put it on the staging site and see what shakes loose, the tree shaking. Not only restricted to CSS, do it with all of it, and the plugins, and everything. That’s pretty much how I would do it. What else would be good?

Alberto Medina:  I would say that a good start is there are two paths, right? So if you are starting a new site or you are trying to convert an existing site to AMP compatibility. The first one is easier because you started from scratch, you know what the limitations are, and your focus is to … Let’s take advantage of the power of AMP to build a beautiful site. And then you get a core theme that is AMP compatible and you style it and that’s a beautiful path. The other path is that you have from big site, with a lot of JavaScript, and huge amount of CSS, and then you want to make it AMP.

And that is a more challenging, but the good news is that the plugin comes loaded with powerful tools and guidance to help developers to identify what needs to be done, contextualize what things need to be done, and then in many cases automatically doing them for them. So it’s an analysis and I want to let Pascal and Weston to pitch in more on the details of how you engage with the plugin.

I guess that the compatibility tool is that we cannot go probably into too much detail here because of the sake of time, but it’s a process in which you have to, what we call ‘AMP debug your site’ and the plugin basically tells you, “you have a problem here.” There is a JavaScript and then you see and the plugin tells you exactly where the problem comes from. And then you have to identify how to fix it or find a solution. “Oh, I’m using a forms plugin that is not AMP compatible.” There is one that is AMP compatible, just then switch the plugin and so on.

And engage with the forum, okay? So the forum is vibrant and they’re really excited to see what is happening. Weston, Pascal, you know I pitch in anytime that I can.  But this team and James Osborne have been doing a great job also, tackling questions there. So we are here, so let’s make this happen.

Favorite AMP Stories

Birgit Pauli-Haack:  All right, well, awesome. But if you’re still skeptical about AMP, then you still can use the AMP stories because the plugin actually you can switch off the overall AMP part and still use the AMP stories. I find this really is an entry drug, so to speak. Very smart move, so let’s talk about it a bit. Before we get into the technology, and the thoughts about the AMP stories, do you have all a favorite story that you want to show off and that you want to talk us through why? Cathi? [00:27:09]

Cathi Bosco:  Yes. I have so many that I love. I love AMP stories. I think the way we use the web has changed the way we communicate. And AMP stories is the natural product of that. So the San Francisco Chronicle has published some beautiful AMP stories with immersive video, beautiful photography. I love one that they did about a ballet camp that resurrected itself after the fires there. That’s a beautiful one. It’s nice the way the San Francisco Chronicle and the Washington … 

Birgit Pauli-Haack:  I’m going to share my screen and go there.

Cathi Bosco:  Oh great. They have the slide over slide presentation and the side by side presentation. So in their desktop version, you get the same content as a viewer as you would if you were looking at a mobile. Maybe a little bit more immersive.

Birgit Pauli-Haack:  Is that what you’re seeing? The show must go on.

Cathi Bosco:  We are not seeing that. No.

Birgit Pauli-Haack:  You’re not seeing it?

Cathi Bosco:  We’re seeing YouTube Channel.

Birgit Pauli-Haack:  Well, I need to … Technology, you know? How about that? Nope. I’m showing the wrong one.

Weston Ruter:  Now, yes.

Cathi Bosco:  Now we see it. We can experience what that’s like, to be immersed in this visual storytelling media. Beautiful. You can own your own story with the WordPress plugin. So you don’t have to use a third party, you can publish your own. I think that’s powerful. The stories are discoverable in search. You can link to them from your website and link out of them through the stories. You can embed them. Monetization is possible with three different kinds of ads. So I think this is theme developers, and plugin developers, and just product developers need to be building in AMP if only for the performance and the visual communications of stories. They’re just incredible.

It’s a real opportunity for WordPress ecosystem. And I’ve got it on my site, I experiment with it. And because we’re in beta, some of the stories are still broken, and the teams are working really hard at this phase to bring this to it’s success finale. But don’t overlook AMP, it’s not the same as it was four years ago. It is powerful and it is going to be the way of the future, I think. I don’t work for the project.

Birgit Pauli-Haack:  Well, thank you very much for walking us through this. So we have two questions. Jacqueline, “What is the roadmap for the AMP stories in WordPress?” And I think we’re going to move that a little bit later when we first talk through it before we talk about the roadmap, what’s in the future. So I hope you don’t mind, Jacqueline. So Alberto, what’s your favorite AMP story? [00:30:58]

Alberto Medina:  One of the one that has both impressed me and shocked me at the same time is a story that was published by the Washington Post on the Yemen War. It won a Pulitzer Prize for the story. The images are a little bit disturbing because it’s a lot about the war in Yemen that nobody is talking about too much surprisingly. But I think that the reason why it won the Pulitzer Prize is it shows the power of the format to actually connect the reader emotionally with a story that you are telling, right? So actually, you can feel the pain, right? And you “Wow.” And then the story ends and you are like, “Wow. I went there and came back.” So it’s an amazing example of the power of the format for me.

Birgit Pauli-Haack:  Yeah. And I like how the pictures, like this one, and then the following text is on the background of the last, so … 

Alberto Medina:  Exactly.

Birgit Pauli-Haack:  Yeah, it’s really …

Cathi Bosco:  It’s the first AMP story to win a Pulitzer Prize.

Birgit Pauli-Haack:  Right, yeah.

Cathi Bosco:  Right?

Birgit Pauli-Haack:  That’s awesome. Yeah, and how about you Pascal? Do you have a favorite one? [00:32:16]

Pascal Birchler:  Yes, indeed. So the Washington Post one is really a great story, as well, but just recently, I stumbled upon a story by the National Geographic about the Stonewall Riots 50 years ago. So I haven’t heard of it before, but when I tapped through the story to learn more about it, it really caught my attention. It’s this the immersiveness that we all take about. You see these pictures, you heard the voices of people in the videos. So it’s a very amazing way of consuming the contents.

Birgit Pauli-Haack:  So we have sound coming through, but it’s not from me.  Maybe it is.

Pascal Birchler:  From the story. Yeah.

Cathi Bosco:  It really gives you a sense of what it’s like to be there or to talk with these people. You get their gestures, you get their voice.

Birgit Pauli-Haack:  Yeah. So the AMP stories are actually mobile first. And that really grabbed me. It was the first mobile experience that I actually enjoyed going through. So hang on.

So I had a few sound things in here. But it was the first mobile experience I really said, “Well, this is new. This is totally exciting.” And you can combine the pictures, you can combine text, you can do animation, and video. So this is really cool. What about you, Weston?

Cathi Bosco:  Can I say one more thing about AMP stories because I’m a little bit passionate about AMP stories. The other thing I want to say about AMP stories is stories as media exist, right? So there’s stories on Instagram, and Facebook, and these private channels where you are the product for those companies. With AMP stories, you own your own content and you are not a product of some other business. It is so much healthier. It is like a non toxic version of stories on top of the fact that you can do such amazing journalism.

So I think that’s important to point out.

Birgit Pauli-Haack:  Yeah, absolutely. And this one, I have always had a hesitation with Snapchat, and Facebook, and Instagram because their stories, most of them are ephemeral unless you put a certain effort behind it. And as a professional content producer, but most businesses don’t have someone who needs to connect every single day with new audiences and keep it going. They can’t afford it.

Cathi Bosco:  I would argue that it also feeds into a dark pattern of addiction on phones, where you’ve got, “I might miss out on something. It’s only going to be there for a second.” And I don’t think that that’s good for society.

Birgit Pauli-Haack:  Yeah. Absolutely. FOMO is real, fear of missing out. Yeah, so Weston, now that you joined us, there is that exercise to show off your favorite AMP story. Do you have one that you can think of?

Weston Ruter:  Well, I was just thinking of the one that Alberto referred to, so I’m just going to copy him.

Alberto Medina:  That has impacted all of us because this one is very revolutionary.

What’s next for AMP Stories in WordPress?

Birgit Pauli-Haack:  Yeah. Okay. Well, let’s grab Chatleen’s questions on what is the roadmap for AMP stories in WordPress? I did a little research and so my idea was there was these other story things. Can we push it to those other places? And you cannot because none of them have open APIs for that. So we’re getting a little bit away from the question. Pascal, what you’re going to do next on the AMP stories? [00:36:36]

Pascal Birchler:  Well, there’s just so many thing I would love to work on. So what we did around work in Europe, we released the first version of the AMP pack and it  contains the AMP story editor. And now, we’re just working on making it better and better everyday, making it more user friendly as authors to create amazing stories using basically Gutenberg editor under the hood. And that contains a lot of things … I’m hearing some sounds.

Birgit Pauli-Haack:  Sorry.

Pascal Birchler:  So next, we’re going to release a minor version with minor bug fixes and improvements to the editor. And then we have a long roadmap with new features coming up in the editor, making it easier for you to create this immersive experience without having all this knowledge, without having to develop a famous single thing. So yeah, lots of stuff coming up.

Cathi Bosco:  Jackie, my colleague and I, we have a request. We’ll put it in GitHub, too, but we would love to be able to turn desktop view off or on, on a per story basis.

Birgit Pauli-Haack:  On a what basis?

Cathi Bosco:  On a per story basis. So as you publish a story, you should have the option of whether or not it should be also a full landscape mode or not. I’ll put it in GitHub, but I just wanted to plant the seed.

Pascal Birchler:  That’s another excellent suggestion. And, of course, having desktop support always means you need a way to make sure it looks great on desktop, too, while editing. Which causes lots of challenges for us developers to make this happen and make it as seamless as possible.

Birgit Pauli-Haack:  So a minor request, if I may chime in there, is what I really would like is to have a Ken Burns effect on the still images to actually make them move a little bit, or zoom in slowly. I don’t know. Is that a pipe dream? [00:38:41]

Alberto Medina:  Granted. Granted. We are going to do what you wish.

Pascal Birchler:  Yeah, you’re not the only one.

Birgit Pauli-Haack:  I wouldn’t think so.

Alberto Medina:  Ken Burns questioned that too, so we’re going to.

Pascal Birchler:  So yeah, for those who don’t know Ken Burns effect, is when the image is moving and zooming at the same time. If you would want to build that on your own using web technologies, it might be a bit more difficult. So what we want to do is make it possible with a click of a button. So that’s one of our goals.

Birgit Pauli-Haack:  Yeah. That’s the Gutenberg goal for anything, right?

Alberto Medina:  And to resume answering to that, credit to Pascal, and Weston, and the team that are doing it now because one of the things that is important is that developing the AMP stories editor for WordPress have actually required deep knowledge of how Gutenberg works. And working with the Gutenberg team to actually … There’s a synergy between both projects, right?

That we discover something and probably they are doing it, or we see them, and then they improve the Gutenberg, or we take things that they’re doing and bring it to the editor. So we have been working on the leading edge of WordPress as a platform and at the leading edge of formats for the web that is as AMP stories are read in a new format.  So as I said, you know, we have the best team.

Cathi Bosco:  Yeah, it’s really good.

Birgit Pauli-Haack:  Did you say leading edge or did you say bleeding edge?

Alberto Medina:  I intended to say bleeding edge, but I said leading edge.

Birgit Pauli-Haack:  Yeah, if I understood, so Weston and I … And I know now why I thought you were in Australia, because it was in the middle of the night that were meeting on Slack, and you were telling me about new things. Not midnight, but it was four o’clock in the morning or five o’clock in the morning. And then normally, I wasn’t up at that hour. And you mentioned that you needed a certain Gutenberg, that you need a Gutenberg plugin. You cannot do this with a WordPress 5.0 version right now. You need the Gutenberg plugin. What are the things in the plugin that you specifically needed for or need for AMP stories? [00:41:09]

Weston Ruter:  Pascal can better answer that question?

Pascal Birchler:  Yeah, probably. So when we started working or building on top of our prototype that existed when we started working on that in January, we used the version or we used WordPress 5.0 to build on top of that. And during development, we encountered some issues here and there in Gutenberg. Gutenberg was also under heavy development. It still is, there’s a new release every two weeks or so, or every month. And sometimes, there are things in it which were crucial for the AMP stories editor, as well. Not only new features, but also bug fixes.

So once we were working on it, and then the editor was crashing. And obviously, that’s not a good thing. And that’s when we came to the conclusion that it makes more sense to require this specific or the latest version of the Gutenberg plugin because it offers just the best user experience.

Best Practices for creating AMP Stories

Birgit Pauli-Haack:  Right. Well, what I was really fascinated about is that I can turn my text into the vertical text. That’s really cool. All these little things, but it makes a nice visual experience. But Cathi, I have a question for you. You work on the design implementation for that, but do you have ideas what is best practices to create AMP stories? When is too much to watch? [00:42:58]

Cathi Bosco:  Yeah, sure. I think it’s a minimal story, visual storytelling medium. And at amp.dev, the documentation for AMP and AMP stories at amp.dev is incredible. Before you make an AMP story, you should look through the best practices there because it will save you a lot of frustrating hardship. You don’t want to put large volumes of text, you don’t want things moving around too much. Maybe you want one or two videos. I can’t wait for Ken Burns effect for things.

 So when you put text over a picture, it can be difficult to read. So using a background color in your text over a picture in an image in the background is nice, or video in the background. It’s just fantastic, but you have to use restraint because sometimes less is more. My first story was crazy. And I was like, “Okay, now I know how everything works. Let me go in and refine my presentation.” So the documentation is great.

Birgit Pauli-Haack:  Good to know. Good to know. I just came back from Boston and I have not stopped talking about it yet. And I was at the Institute for Contemporary Art. And right now, they have an exhibition called “Less is a bore”.

Cathi Bosco:  Less is a bore, huh?

Birgit Pauli-Haack:  Less is a bore. Yeah. An architect and design artist. They fuzzy the line between decorative art and fine art. And say, “Yeah, who cares? We want to do this and it’s art.” And it doesn’t matter. Yeah, so I had to laugh when we were talking about this, but it depends on your audience and who you’re telling the story to.

Cathi Bosco:  Right.

Building AMP Compatible Gutenberg Blocks

Birgit Pauli-Haack:  Yeah. Jacqueline has another question. Thank you, Jacqueline, for the questions. Are there any considerations developers need to pay attention to when building custom blocks in WordPress for AMP compatibility? So not so much about AMP stories, but I think we have the experts here to talk about this. [00:45:08]

Weston Ruter: Yeah. Well, in terms of the editor itself, there’s not really anything special that you need to do for AMP. The main thing is make sure that if you have custom styles, that your block depends on them. You should enqueue those styles only if you are including the bottom of the page. The tree shaker does remove styles that most styles that are not being used, but the tree shaker is very effective at tree shaking something that didn’t exist to begin with. So if you don’t need the CSS on the page, don’t include it on the page. And that’s the best way to go.

And then if you have dynamic functionality in the block, then you may want to make use of a writer callback that will have a check inside of it to see if it is being a pinpoint function returns true. And if so, then you can return AMP specific markup using AMP components. Otherwise, you could fall back to the original content. So you could do a conditional block in that way. And generally, your blocks can be just the way you normally develop them.

How to fit AMP Stories into Your Content Strategy?

Birgit Pauli-Haack:  Awesome. Yeah, good. So that’s a relief to hear, actually. So when we talk about a business case for AMP stories, now we’re playing around, we find it cool. We’re photographers, we’re doing it on our private site, but what’s a business case … What are stories that businesses could build together or put together for showcasing things? What ideas are you pushing around? [00:47:03]

Alberto Medina:  We started ones with the question it has multiple things that can be set. I think that it’s important to always keep the ultimate goal. Success as a web publisher is all about user experience. And user experience entails many components. One of them is content quality. What is your content strategy? AMP stories is an awesome way to expand your content offering to your users. It is useful to have something to say in a story because … So you have to have something of value to communicate to your leadership, right? But I see AMP stories as an addition to your repertoire, or tools, right?

 So you could have, for example, a blogging strategy in which you augmented it with AMP stories that allows users to go and get immersed into something that you want to say and then come back to your blog. For the travel industry, right? So if you’re selling travel bag ideas, you could, A, we sell these packages, and you don’t check this one, and then you go. And suddenly, “I want to go there.” And then at the end of the tour, you say bye. And then you go back to your site and then you close the deal.

 And so overthinking how we’re going to make our users happy. And one thing to consumer we are producing. Yeah, that’s my perspective.

Cathi Bosco:  Yeah, it’s a huge compliment to your existing content strategy, for sure.

How to include Ads into your AMP Stories?

Birgit Pauli-Haack:  Yeah. I would argue that before they get in too deep, they probably want to see AMP stories with the highlights of things. And then if something really interests them very much, you need to definitely provide also the connection with the deeper content or the details and all of that. When you work with the news sections, news need to accommodate ads. So I can see that you just now have one panel. That would be an ad and then go back to your story, but are there other ways to implement that? [00:49:28]

Alberto Medina:  Yeah, so basically that is the monetization strategy, is you have to have pages that are advertisement. The question is how do you do that in a way that doesn’t interrupt the user experience, right? So you will not be allowed to insert an ad at the second page of your story. You will not be allowed to insert two pages of ads back to back. Or like certain percentage of pages of the overall story. So some kind of user experience on the ads part.

If it’s possible to do that, the monetization capabilities of AMP stories is evolving. Right now, I would say that it’s simple and their run-time then helps to ensure that these premises are satisfied. And you’ll say that you want ads and then without going into details of how the communication with the algorithm and do they have these sales or not. But basically, the run-time is going to say, “Okay, you want to put an ad, I’m going to let you put it here.” And so on.

Weston Ruter:  Yeah. I mean, you could manually create a page that has an image on it that you consider to be an advertisement. But generally, if you’re connecting with an ad provider, then there’s a thing called an AMP story auto ads that you configure with a filter. And then you supply the configuration that declared adjacent array object that just tells the ad provider how to configure the ads to be injected into the story. And then it’s done for you so you don’t manually create the story pages with the ads on them.

Birgit Pauli-Haack:  Okay. All right, so how are the ad provider, publishers adopting to the AMP story ads format? [00:51:52]

Alberto Medina:  That is more like the AMP project itself. So AMP has support from many, many, many ad providers and ad networks. So AMP stories is tapping into that ecosystem, as well. And the advantage of AMP that is very declarative as question indicated, right? So you notify which provider, and what is your account ID, and things like that. But it’s always this interaction between the AMP ecosystem and the ads ecosystem. Similar to what’s happening with analytics, as well.

Cathi Bosco:  It’s much more readable format, though. It’s not like when you’re reading a post of a webpage content and it’s ad every other paragraph, and you’re scrolling through. You can’t even read those. I think the format that’s being introduced with Google AdSense and AMP stories, it’s old magazine. One page would be the ad. You know you’re at the ad, you scroll past the ad. It doesn’t disrupt and push so much stuff into your … It’s pretty effective.

 I think it’s a good format. I’m sure it will improve, but …

Birgit Pauli-Haack:  Brings us back to the original why is AMP even in the world, is because advertising and publisher are ruining the web for all of us. And now, we need to go back to the basics. So Anne Katzeff has a question. And it is, “Do you think Google will start penalizing sites for not using AMP?” [00:53:21]

Alberto Medina:  No.

Birgit Pauli-Haack:  So I think … 

Alberto Medina:  Sorry, the perspective that I bring to this is like … We’re not interested in AMP because of AMP. The ultimate goal is user experience. Google wants users to get a user experience that is also what they engage with the web. We may penalize and I cannot talk for search or anything. It’s my perspective, but speed is a factor in ranking. That is one little in this humongous equation that you’re ranking in the search results. So if you offer bad user experience, then you will not succeed.

And if you don’t succeed, you will not show up in search results because people are going to want to be looking for you. People aren’t going to want to be linking to your content. People haven’t interacted in your site because they don’t want to see it. Most people, you’re going to abandon your site if you’re loading more than 5 seconds, 10 seconds. So AMP is not a signal by itself. It’s quality.

Birgit Pauli-Haack:  So if you get to a very fast website with the tools that you’re already using, you don’t need to apply AMP to the site because it also will have a fast user experience. So that’s good to know. Are there other things that you need to do with the AMP stories, for searching? Meta tags or anything like that? Is that built into or what makes Google find those AMP stories? [00:55:04]

Cathi Bosco:  Pascal?

Pascal Birchler:  So, I mean, in the AMP, under the hood, an AMP story is just a regular HTML document that can be found and linked to on the web. So if you link to your story somewhere, to Google, and users, and other search engines can find it, then there’s no difference. I’m not sure if it’s still experimental, but in Google search, it highlights visual stories separately.

Birgit Pauli-Haack:  In carousel, right?

Cathi Bosco:  The carousel.

Alberto Medina:  Yeah, so besides features that could be part of the search product, right? The search’s holes are different than the certain features as a product, right? So the AMP story’s carousel doesn’t mean that we are notifying the services hole to show AMP stories. And the AMP stories carousel is a feature of this search results page. But to compliment what Pascal said, AMP stories are just HTML content, just open web. So anything that you do for SEO also applies for AMP stories. You know, make sure that your title representative of what people could be searching for.

Make sure that you name your AMP stories exciting so people lean to them. So you have a lot of people lean to your stories, you’re going to show up at the top. And you could take advantage then of the features of the search product that actually highlight stories. Your story has to be good. So just because you have an AMP story doesn’t mean that you’re going to put a bunch of like single-color pages with emojis and then you’re going to show up in Google, no.

Birgit Pauli-Haack:  Well, except you’re in the travel industry, right? Because Google in IO this year announced that they are favoring AMP stories from the travel industry as a first time … So people get a little bit more excited about it and get some benefit out of it to advertise their destinations. So I hope that a lot of tour guides and travel bloggers actually take advantage of that because all of a sudden they cannot get ahead of … Maybe TripAdvisor, maybe other travel sites that have been on the web and helpful to the web for everybody.

Cathi Bosco:  We did notice today, some of us who are experimenting with optimizing our stories for search did notice that stories are coming up under image search.

Birgit Pauli-Haack:  Okay.

Cathi Bosco:  So I think as stories are more adopted, they’re going to have to be good solutions for sharing them beyond what we have now. I experiment on my site and I’m using Yoast to optimize my content and my stories. So it works well for search, but AMP stories is still in beta. It’s new, it’s not a criticism, but when I share a link to one of my AMP stories, the featured image doesn’t come with it. The description doesn’t come it, but you can still share out links. So that’s going to get better and better. We’re going to make sure, right?

Weston Rudder:  Yeah, and the AMP plugin provides an RSS feed for the latest stories. So even if you don’t directly link to them anywhere, they will still be discovered by crawlers. And it does also automatically generate the schema.org metadata. And so I’m curious, Cathi, why you didn’t see a featured image when you shared it. So that might be a bug.

Cathi Bosco:  Yeah, okay. It might be. I was surprised. I keep testing it with the new versions and it’s just the link.

Birgit Pauli-Haack:  So it doesn’t come with a card on Twitter or on Facebook that doesn’t pull the image in. Yeah, so- 

Weston Rudder:  It should. So if it’s not, if you can post an issue, Cathi, and I can report that.

Cathi Bosco:  I will. I’d be happy to.

Birgit Pauli-Haack:  You wanted to say something, Pascal?

Pascal Birchler:  No, just wanted to say thanks for testing and raising this issue.

Birgit Pauli-Haack:  Good. So we’re up to our last question. I’m sorry, we’re a little bit over, but Chatleen has … When building AMP stories, how does image sizes, video clips, et cetera, affect the performance on serving those best practices? [00:59:36]

Pascal Birchler:  That’s an excellent question. So there’s two things. First of all, in the AMP story’s editor for WordPress, we try to encourage you to not use too big images or too big videos. So there will be warnings in case a video is too large. And of course, we also try to use reasonable image sizes. Not like the full size image, but one that is contained to the size of the story. And second, because AMP stories use AMP under the hood. It will try its best to not load images and videos too early. So if you have a 20 page story, the images and videos from the last page won’t get loaded until you get near there.

 Which just makes it very user friendly.

Cathi Bosco:  And can you talk-

Birgit Pauli-Haack:  Go ahead.

Weston Rudder:  We have a board request open for JetPack to extend its photon module to add special support for stories, as well, to ensure that if you have a full size image that you drop into a story, and it doesn’t have the image size generated for the story page, then it will constrain the height. So they won’t be excessive. And then for video, though, that’s an open question. Still trying to figure out the best way to … WordPress has the ability to resize images when you upload them, but it doesn’t have any ability to trans code videos or resize videos. So that’s a big challenge.

Cathi Bosco:  It seems like a great opportunity for someone to create a platform where you can upload your video and have it AMP story ready, and take it away. That could be a service.

Birgit Pauli-Haack:  It wouldn’t be so nice if Google didn’t have a video thing.

Weston Rudder:  And there’s options like VideoPress and Cloudinary and other options. But that’s an open question that we need to still figure out the best solution.

Alberto Medina:  It’s in our roadmap to solve that problem because it’s definitely a must.

Birgit Pauli-Haack:  Yeah, it’s also probably interesting to see what happens with the image when you have them one on mobile. But then you flip the switch and somebody sees it on desktop, that’s a whole different aspect ratio. And obviously, also a different size in terms of downloads. So that’s going to be really interesting on how that’s going to be handled.

Cathi Bosco:  Can I ask one more question quickly?

Birgit Pauli-Haack:  Sure.

Cathi Bosco:  In terms of live stories, live stories are part of the roadmap for the WordPress plugin. Is that correct? [01:02:24]

Pascal Birchler:  Yes, so live stories itself, like in the AMP stories picture, is a rather new thing. And we’re excited to play with it for the WordPress editor as well.

Cathi Bosco:  I can see that in a sporting event, where there’s a whole number of four on a golf course. And you show that progression of the game with your AMP story and updates live. That’ll be awesome.

Pascal Birchler:  I’m not golfing, but nice.

Cathi Bosco:  I’m not golfing either, but it was the only example that popped in my mind.

Birgit Pauli-Haack:  Yeah, so I think I could talk with you four all day long because I’m so excited about the AMP stories, but I think that’s all the time we had for today. It has been very interesting and inspiring. Wow, I’ve got so many ideas to go back and … Well, I’m not going to do anything else now. I’m going to do all my photos and do something with that. At this point, I have two more questions for you. And first of all, do you have any announcements you couldn’t get in before or that you want people to keep in mind? And the other one is if people want to get in touch with you, what would be the best way.

Birgit Pauli-Haack:  So do you want to start, Pascal? You get all the noise anyway.

Pascal Birchler:  I think this is a good reminder for people to mention that AMP is an open source project. And so is the AMP purpose plugin. And especially because the AMP stories, editor is so new, we’re looking forward to year around feedback. So if you’re interested in getting involved, then just let us know. We’re listening. And the best way to get in touch with us, so for the plugin, would be GitHub. So it’s github.com/ampproject/amp-wp.

 And otherwise, it’s Twitter. For me it’s @swissspidey. Alberto, what’s your Twitter handle?

Alberto Medina:  @IAlbMedina. It’s like the twitter handle of a kid, but that’s mine. I don’t know how to change it.

Cathi Bosco:  You keep it. That’s good.

Alberto Medina:  Yeah, I would like to say that, just to remind all of us at the CMS DevRel team that AMP stories is one element of our more comprehensive story that we are trying to push by making WordPress an awesome platform for creating awesome content. And there are similar aspects to that. And this one, we’re also working on the Google site kit that brings search console analytics monetization and page speed insights in an easy way to your site. We are working with the ecosystem on trying to advance the notion of tonky solutions.

 But all this is going to happen is we all work together. I’m so looking forward to what we are going to do as an ecosystem, as a community. So let’s do it.

Weston Rudder:  Yeah, we also are going to be releasing the 1.2.1 version shortly. And there’s a beta out available on GitHub right now that you can test. Also, in addition to AMP and Sitekit, we’re also working on PWA for WordPress. And so that enhances a WordPress site with the ability to access content offline, to do things like installing it to your home screen, and add more app like functionality to WordPress site without having to radically change, even not having to do anything special to do that.

Birgit Pauli-Haack:  Just an intersect, PWA is progressive? [01:06:40]

Weston Rudder:  Progressive Web App. Yeah. And the 0.3 version should be published soon. And this is what was used on the WordCamp Europe website to allow for the scheduled page to always be available, even if the WiFi connection was flaky.

Alberto Medina:  Progressive Web App, just quickly, is an umbrella term that refers to a set of technologies that allow you to create app like capabilities to your web application. The ones that wasn’t mentioned. Just for the audience maybe some have not heard the word PWA before.

Birgit Pauli-Haack:  Yeah. Thank you so much. I’m grateful. Cathi?

Cathi Bosco:  What was the question? Oh, my goodness. Okay.

Birgit Pauli-Haack:  You have an announcement that you couldn’t get in before.

Weston Rudder:  Well, I want to compliment the project because I think that the project, being open sourced and having a written governance document is such a healthy sign and a great foundation for the community, to grow with it, and understand it, and communicate well within it. I’m working with the governance project for WordPress to try to just put a little bit of structure in place. Not make rules or change anything, but just illuminate and have things written down. So I’m doing that. That’s a little announcement. You can find me at cathibosco.com where I’m experimenting with AMP stories and AMP now, thanks to help from my colleagues like Jackie, who called in with some great questions.

 And I’m on Twitter @BeTheBreeze. So I’m slightly obsessive, so once I get really immersed in a project, I tend to hang on for quite a while. And I really love this.

Birgit Pauli-Haack:  Well, thank you so much. So my announcement is that next Live Q&A will be next week August 2nd at 2:00 PM Eastern and 18:00 UTC. We’ll be talking about using Gutenberg to bring speed and flexibility to news and editorial site and not be AMP. But it was not part of it, but yeah. So a big thank you to our viewers. There were some great questions. And if you have more questions, you can always reach me on pauli@gutenburgtimes.com. And if I can’t answer it, I know where the experts are. And the recording will be available in a few minutes on YouTube, but I pushed it actually to the wrong channel.

Birgit Pauli-Haack:  I tweeted it out, though, the link. And I will move it over to Gutenberg Times in a bit. And the transcript will be available in a few days and then we’ll publish both of it on the Gutenberg Times. As mentioned, this show was sponsored by Pantheon. Big thank you, again, to the team. And if want to sponsor our next Live Q&A’s, please contact me, as well. Thank you Cathi, Pascal, Alberto, Weston. It’s been a privilege to have you on the show and a great joy talking to you all.

Cathi Bosco:  Thank you for all you do. I really appreciate it.

Birgit Pauli-Haack:  Well, thank you. So everybody, be well. Goodbye and good luck. Bye.

Alberto Medina:  Bye. Thanks.

Pascal Birchler:  Bye, everyone.

Birgit Pauli-Haack:  Okay, let’s get out of here.  There’s my link. Bye.

On Gutenberg (Resources) – Matt Mullenweg’s Summer Update at WordCamp Europe

Matt Mullenweg gave attendees of WordCamp Europe a Tour around the Block editor in WordPress.

He starts out with a recap of the four phases of Gutenberg, then he showed-off the newest features available in the block editor. He also highlighted a few examples of Gutenberg in the wild, talked about what’s coming out next and shared information about the experiments the developer team is working on. Mullenweg closed the scripted version with an update on the Mobile version for the block editor, followed by a town hall style Q & A.

Today, I finally took the time to listen to Matt Mullenweg whole talk and give you a time-stamped summary of all the good things he mentioned in his talk. For your enhanced viewing pleasure you’ll find a table of contents and linked a few resources for your deep dive. The time stamps let you jump to the particular section in the video on WordPress.TV, published today. Last but not least, you’ll find links to the reporting and commentary of other WordPress publications.

Don’t miss these amazing speaker at the JavaScript for WordPress conference July 12, 2019

The four phases of Gutenberg

(3:03) As announced at WordCamp US in December 2018 there are four phases of Gutenberg.

  1. Blocks for writing and editing (Released Dec 2018 WordPress 5.0)
  2. Widgets, navigation and customization beyond the editing screen. (That where we are now)
  3. Collaboration, multi-user editing and workflows
  4. Multi-lingual support

New features in the block editor

(4:49) Mullenweg showed-off quite a few features that where added to the block editor in the last six month after the official release:

  • Block Manager
  • Cover Block with nested blocks
  • Grouping of Blocks for reuse and moving
  • Nesting blocks in columns
  • Latest post widget
  • “Snackbar” notices – little notices that announce successful operations or give feedback to users

Gutenberg in the Wild

(8:38)

  • “Artifactor” by Humanmade, Ltd – customblocks for editors creating an almost front-end like creation experience.
  • Ingenuity.Siemens.com behind the scenes look at an AI supported writing tool, also by HumanMade, Ltd.
  • Tech for Campaign – political season in US – 19 out of 21 democratic candidates use WordPress for their campaign websites. And WhiteHouse.gov switched also to WordPress this year.
  • Education leads Home – nonprofit site with native Gutenberg blocks and Co-Blocks. On a side note, it actually changes to dark-mode when your operating system is also set to dark-mode.
  • Laraberg – Laravel + Gutenberg integration

Cool Plugins

Plugin Banner: Grids Layout Builder
  • Grids: Layout Builder for WordPress
  • CoBlocks – with its work on Typography or the Divider Block

Drupal community adopted Gutenberg

(12:41) – Also, Matt Mullenweg is excited about the other favorite open-source CMS, Drupal has adopted Gutenberg and integrated it rather quickly.

So with Gutenberg you can imagine Drupal and WordPress developers working side-by-side creating and improving Blocks that are immediately accessible for both communities

Matt Mullenweg, Berlin June 21, 2019

150,000 posts published every day with Gutenberg

Coming up Next in Gutenberg [WIP]

(14:49) This are things that are either in the prototype stage in code, or just in design. They are not ready yet, but already quite exciting to see.

  • Block Directory / Library – a system to install new blocks from within the editor. Mark and I discussed the progress on the Gutenberg Changlog and provide a list of blog posts by Mel Choyce and Alex Shields
  • Block WP-Admin menu: The Block Library seems to fit in nicely with other WP-Admin menu items around the Block editor, like manage block, reusable blocks and a separate install blocks admin page. (demo’d by Matt in his talk)
  • Navigation Block – build your site’s menu through the Block editor admin space. [WIP]

Gutenberg Experiments

(18:37) Things the dev team is trying out.

  • With Motion – Motion will give user a better understanding of what just happened when they use some of the block editor’s features. As an example: moving an block. It happens so fast, that some user get confused. Adding motion to the block editor with a slight time delay can help users to understand and make her feel more in control. Matias Ventura wrote about it: Using Motions to express change. This has been merged into master and will be available in the next Gutenberg release.
  • Footnotes – Experimental plugin is available. It’s a small group how needs this feature and it hasn’t been available in WordPress core.
  • Snap to Grid – Helps users resize blocks and align them properly to a grid defined by the theme. This feature received quite some spontaneous applause at WordCamp Europe.

Gutenberg on Mobile

(22:00) Matt ended the scripted part of his talk with showing off the mobile experience. The mobile team actually has to replicate the Gutenberg experience, and are moving fast to catch up to the desktop version of the block editor.

Gutenberg in Q & A

  • (36:03) How are the issues from the Accessibility Audit addressed? GitHub Issues created by the Auditores
  • (39:27) What will happen with Themes once everything is in Gutenberg, will they be obsolete?
  • (42:16) Will there be new Theme initiatives, like Underscore etc.
  • (56:15) Has Matt’s opinion about the Rest API changed? (Gutenberg was partially delayed because the REST API needed to be augmented to make Gutenberg possible)
  • (58:59) How far are we along solving the problems Gutenberg is supposed to solve?

WordCamp Europe talk on Video on WordPress.TV

Matt’s Talk Covered by other sites

Live Tweet by Alex Denning – Follow the thread

Gutenberg blocks go nested!

Update July 5, 2019

In the last six months quite a few things have changed for nesting Gutenberg blocks via the default blocks. Below you’ll find display and videos for Group Block, Media + Text Block and Cover Block.

Group Block

For example, I can use the Media + Text block in a Group Block and put it on a different background.

Gutenberg Changelog logo by Mark Uraine

New Podcast:
Gutenberg Changelog, hosted by Mark Uraine and Birgit Pauli-Haack

Subscribe:
Spotify | Google | iTunes | Stitcher | Overcast

Steve Burge at OS Training wrote a tutorial on How to use the Group Block

Columns w/ Layout

Or when using the Columns block, I have now the option to select different layouts.

How to add a group block and a media+text block and change the background.

Cover Block

The cover block now can hold multiple blocks. Below is a video on how to use it.

Next Gutenberg Times Live Q & A:

July 26, 2019 at 2 pm EDT / 18:00 UTC

Updated November 16, 2018

Gutenberg has now a “Media + Text” block. We use it to announce today’s episode on YouTube. We saved it as a reusable block so I can add it quickly to other popular posts on our site. It’s very easy to use and has quite a few settings for you to modify the look & feel to it.

Gutenberg Changelog logo by Mark Uraine

New Podcast:
Gutenberg Changelog, hosted by Mark Uraine and Birgit Pauli-Haack

Subscribe:
Spotify | Google | iTunes | Stitcher | Overcast

Update October 8, 2018

“With nested blocks, you can set a template. When added a page, all the inner blocks are already displayed. You can lock the parent block so blocks inside never change.” 

Raquel M. Smith, who builds plugins for food blogs at WPTasty for a living, published a tutorial on creating nested blocks for developers. 

Igor Benic also published a post on the same topic: How to enable InnerBlocks in your Gutenberg Block

Update June 19, 2018.

The early iteration of nested blocks turn out to have a few issues. And some of them will be resolved when Andrew Duthie finishes his work on the pull request:  “Blocks: Render columns as nested column (wrapper)” 41172652-83195ff0-6b22-11e8-98eb-c417771c4c14 February 16, 2016

WordPress content creators have been waiting for it since Gutenberg was announced: nested blocks. You can now create multi-column layouts and include pictures and add other blocks into those columns. On February 6th, Andrew Duthie’s Pull Request (PR) was merged to the master branch of Gutenberg. The new version Gutenberg 2.2 was released today. Matias Ventura in his announcement for the new release, labeled this  particular features as “experimental” It would still need further work and has some browser hiccups. Keep this in mind when you start working with it

From the PR comments we learned: [Now there is] a new Columns block which behaves similarly to the Text Columns block, except that it allows insertion of blocks within the rendered columns.

We tested it earlier this week with the master dev build version on our local development environment. Here is a short view.

It still feels a little rough around the edges for different browsers or with the alignment on the front-end. Minor quirks that will be fixed in later iterations, I am sure.

For Developers

Developers building custom blocks can also use nested blocks and restrict the type of blocks that can be added to their block. For instance, a team member block can only have an image, a heading and a paragraph, but the user would not be able to add an embed block or a gallery block.

Andrew explained the various API changes for nested blocks as well as the limits for this first iteration of nested blocks in his comments from February 6th. 

Courses for Developers - JavaScript for WordPress with Zac Gordon
Check ’em out now!

📢 Now on available: Advanced Gutenberg Development  📢

Photo by Dmitri Popov on Unsplash

Mullenweg announced Gutenberg Roadmap

Updated July 4th, 2019 with Mullenweg’s Summer update.

WordCamp Europe 2019

At WordCamp Europe, Matt Mullenweg gave his Summer Update.

Progress on Nine Projects.

February 11, 2019.

  • #1 Navigation Menu is still in discussion on GitHub. (#13690)
  • #2 has been moved forward already for quite a bit. The latest Gutenberg release(5.0), incorporated the RSS widget. Mel Choyce publishes regular updates on this particular project
  • #3 is coupled with #2
  • #4 hasn’t started yet
  • #5 Partial integration in core is scheduled for the WordPress 5.1 release
  • #6 & #7 haven’t started yet
  • #8 hastn’t started yet. It is the one that’s most exciting to me, as the proliferation of blocks are getting a bit overwhelming.
  • #9 The Core is still discussing best methodology and taxonomy for ticket gardening. Jon Desrosiers published a proposal on how to handle punted tickets in the short term and also how to manage the other open tickets.

Updates for Gutenberg Phase 2

Every Friday, Mark Uraine publishes Updates for Gutenberg Phase 2 on the make/design blog. Here is the list:

Nine Projects for 2019

Dec 8th, 2019. A couple days after the WordPress 5.0 release, Matt Mullenweg posted on the make/core blog the 9 projects for 2019, highlighting what he outlined in his State of the Word at WordCamp US 2018

  1. Creating a block for navigation menus.
  2. Porting all existing widgets to blocks.
  3. Upgrading the widgets-editing areas in wp-admin/widgets.php and the Customizer to support blocks.
  4. Providing a way for themes to visually register content areas, and exposing that in Gutenberg.
  5. Merging the site health check plugin into Core, to assist with debugging and encouraging good software hygiene.
  6. Providing a way for users to opt-in to automatic plugin and theme updates.
  7. Providing a way for users to opt-in to automatic updates of major Core releases.
  8. Building a WordPress.org directory for discovering blocks, and a way to seamlessly install them.
  9. Forming a Triage team to tackle our 6,500 open issues on Trac.

WordPress 5.0 “Bebo” released on December 6th, 2018

December 6th, 2018. Today around 1:30pm ET, the core team released the WordPress 5.0 and with it the new block editor  as default editor for content creators. 

Putting the final touches on the WordPress 5.0 release:  Tammie Lister, Gary Pendersgast, Jonathan Desrosiers and William Earnhardt at WordCamp US  2018
Putting the final touches on the WordPress 5.0 release: Tammie Lister, Gary Pendergast, Jonathan Desrosiers and William Earnhardt at WordCamp US 2018

December 3rd, 2018.  Matt Mullenweg posted the new target date for the WordPress 5.0: December 6th, 2018, the same day PHP 7.3 will be released. WordPress 5.0 includes not only the new Block editor but also compatibility fixes for the new PHP version.

Based on the stability, testing, and reports on the release candidates for WordPress 5.0 so far, we are now targeting Thursday December 6th for public release and announcement. 5.0.1 will open for commits soon, and will be an area people can choose to focus on at the contributor day at WordCamp US in Nashville this Sunday.
As before, if new information arises that indicates the software is not stable, we will adjust or remove the target date.

Below Questions and Answers are taken from Matt Mullenweg’s  Gutenberg FAQs  as well as from his post about the new target date.

Do I have to switch to Gutenberg when WordPress 5.0 is released?

Not at all. When it’s released, you get to choose what happens. You can install the Classic Editor plugin today and when 5.0 is released, nothing will change. We’ve commited to supporting and updating Classic Editor until 2022. If you’d like to install Gutenberg early, you can do that now too. The Classic Editor plugin has been available for 13 months now, and Gutenberg has been available for 18 months. Both have been heavily promoted since August 2018, and more than 1.3 million .org sites have opted-in already to either experience, so nothing will change for them when they update to 5.0.

Is it terrible to do a release in December?

Some people think so, some don’t. There have been 9 major WordPress releases in previous Decembers. December releases actually comprise 34% of our major releases in the past decade.

What if I don’t want to update on that date, or I’m not ready?

That’s totally okay, there’s nothing that says you must update the moment there’s a new version released. You can push the button whenever you’re ready.

What if I want to upgrade but I’m not ready for Gutenberg?

No problem, install the Classic Editor plugin and 5.0 will be indistinguishable from 4.9.8 for your posting and editing experience, and you’ll still get the other improvements and fixes that have gone into 5.0. Classic Editor is supported until 2022, and now allows you to switch between Classic and Gutenberg on a per-user or per-post level.

November 30, 2018. WordPress 5.0 RC2  is scheduled for  today. Earlier this morning the team released Gutenberg 4.6.1.  “This brings plugin up to parity with RC2 packages”  noted Matias Ventura on the #core-editor Slack channel. 
Read also today’s status update on the Make.Core Blog

When will 5.0 be released?

Read Matt Mullenweg’s answer in his blog post: “WordPress 5.0: A Gutenberg FAQ

We have had a stable RC1, which stands for first release candidate, and about to do our second one. There is only currently one known blocker and it’s cosmetic. The stability and open issues in the release candidates thus far makes me optimistic we can release soon, but as before the primary driver will be the stability and quality of the underlying software. We made the mistake prior of announcing dates when lots of code was still changing, and had to delay because of regressions and bugs. Now that things aren’t changing, we’re approaching a time we can commit to a date soon.

Matt Mullenweg answer in his blog post  Nov 29, 2018

November 23, 2018 WordPress 5.0 RC1 – the first release candidate was released about 4 days late.  On Nov 21, Matias Ventura wrote: “The date for 5.0 release is under consideration, given it’s not plausible for it to be the on 27th. “

Continue reading “Mullenweg announced Gutenberg Roadmap”

Update #106 Upcoming Events, Block building, Plugins and tutorials

Is already June 2019, WordCamp Europe has come to an end, and I realized, I have been curating the Gutenberg News and Updates around the WordPress ecosystem now already for two years. WOW. “All good things take time” is a quote from my father who just turned 92 this week.

What have we been doing over the last month without a post? Well, between client work, organizer work for WordCamps US, my own travel to WordCamps – Boston is next, then WordCamp for Publishers – working on the JavaScript for WordPress Conference w/ Zac Gordon, and our local WordPress Meetup, there weren’t enough hours in the day.

It’s not because nothing happened in Gutenberg Land-ia. As a subscriber of our e News, you received your weekly Gutenberg fix.

And now without further ado here is the Table of Contents for this week’s post:

Podcast: Gutenberg Changelog and Live Q & As

The new podcast “Gutenberg Changelog” is now available on the podcast directories of Google Music, Apple iTunes, Stitcher and Spotify and, of course, via RSS for any other players and readers

Mark Uriane, designer at Automattic and core contributor, and I will be co-hosting a weekly show, talking through the Gutenberg news of the week. We plan to record on Friday afternoons and publish over the weekend. The intro-episode came out this week, just in time (JIT) for WordCamp Europe.
Due to travel and vacation we won’t be able to start with our weekly schedule until July 12th, 2019.
If you have stories, ideas and suggestions, or questions send them via email to changelog@gutenbergtimes.com.

I also started planning more Gutenberg Times Live Q & As via Zoom and YouTube. The next show will be about the AMP plugin bringing AMP Stories to Gutenberg and WordPress. Save the date: July 26th, at 2 pm EDT / 18:00 UTC for our show talking to AMP plugin team members Alberto Medina, Pascal Birchler and Cathi Bosco. Registration is already open.

Registration is open. Reserve your seat!

This show will be sponsored by Pantheon. Their team has also been looking into making AMP part of their hosting and development stack and help WordPress agencies succeed in the fight of speed, security and providing and excellent user experience.

If you subscribe to the eNews on Saturdays you will among the first people to learn about more scheduled shows. You can watch previous shows on YouTube via this Live Q & A archive page.

WordCamp and Conferences

Online conferences are all the rage now!

Schedule announced for JavaScript for WP Conference 📢

Gutenberg has its own track on July 12th, 2019 (Times are EDT)

  • 9:00 am Becoming a Core Contributor by Ajit Bohra
  • 10:00 am Growing JavaScript Skills with WordPress by Grzegorz Ziółkowski
  • 11:00 am JavaScript Hooks in WordPress by Adam Silverstein
  • 12: 00 pm Examples of JavaScript Hooks in the Real World
    by Ernest Smuga
  • 1:30 pm – Internationalization with Gutenberg by Pascal Birchler
  • 1:30 pm – The Gutenberg Plugin Landscape by Birgit Pauli-Haack
  • 2:30 pm – The Gutenberg Slot Fill Systems by Ryan Welcher
  • 3:30 pm – Breaking Apart Block Data by Kelly Dwan
  • 4:30 pm – Gutenberg Components Outside of the Editor by Igor Benic
  • 5:30 pm Testing Your JavaScript by Josh Pollock

Register Now for Free

Speaker Applications are open

Updates WordPress Core & Design

Riad Benguella’s full Changelog

https://wptavern.com/gutenberg-6-0-adds-layout-picker-to-columns-block

Discussion on new Block Directory for Plugins

Design Team

Meta Team

Themes and Layouts for the Block Editor

Tutorial by Stephan Nijman
Published by Heart Internet
There are multiple levels of Gutenberg-readiness. Enabling Align-wide and Align-full, styling for the various blocks (columns, images, cover, gallery), custom color and font-size pickers for your customers to stay within the brands boundaries. With a ton of resources for theme developers and a list of block-ready themes for site owners. Written by Birgit Pauli-Haack

Block editor for content creators

Reusable Blocks as Templates
“Gutenberg. It’s real, it’s happening, and it’s terrifying because you don’t know how you’re going to do everything you do today. What if Mika Epstein told you that for the majority of the simple tasks out there, no only will you still be able to do them, they’ll be even easier?
Let Mika show you how with the magical, repeatable, Gutenberg block.”

Building blocks and extending Gutenberg

https://zao.is/blog/2019/05/30/an-introduction-to-gutenbergs-block-parser-class/

WordPress Data API

Zac Gordon’s talk at WordCamp Miami

Zac Gordon, Master educator, advocating for JavaScript Deeply has three courses for WordPress developers. Check them out.

On May 25, 2019, we shut down our Patreon page and sent a note to our faithful patrons in gratitude for the their ongoing support. On top of the publishing schedule for our eNews, blog posts and Live Q & A shows, I was not able to dedicate additional time to keeping the Patreon page up to date . Earlier this month the Gutenberg Times was accepted in Jetpack’s beta test for the recurring payments button. You can support us now right here.

Photos from Around the World

Featured Image: Photo by Amador Loureiro on Unsplash

Gutenberg at WordCamp Europe – Schedule Your LiveStream

It’s been two years since I took a first glimps at Gutenberg, the new block editor at WordCamp Europe 2017 during Matt Mullenweg’s talk. At this year’s WordCamp Europe, developers, designers and consultants will talk about the various aspects the block editor from block building and semantic content to the future of Gutenberg. I won’t make it to WordCamp Europe, so I will be watching as much as possible via the Live stream. Here is my schedule.

Scheduled Gutenberg talks and discussions at WordCamp Europe

Times are in local time in Berlin, find US EDT in parenthesis

Friday June 21, 2019


Affiliate Link


Saturday, June 22, 2019

And if you can’t get enough for educational material put the 2nd Annual Javascript for WordPress conference on your calendar! 8 hrs workshops, 40 Speakers and lots to learn on Contributor day.

98 Plugins for the new WordPress Block editor

Over the last 18 months, we have used and tested quite a few plugins providing Blocks beyond the default blocks of Gutenberg or add-ons to the workings of the block editor. Then I started making a list and it became a major undertaking! I was not able to test all plugins mentioned here. So use at your own risk.

We found plugins in the following categories:

Check the Changelog for recent updates

This list of Block editor plugins is not complete, but we are aiming for it. This is a very fast moving target, and I appreciate your help:

If you built or found a plugin that should be on this list, fill out the form on this page and we will add it during our next round of updates. We are exploring building a richer interface for our #280Blocks database. For now this list is it.

Here are the Quick Links to the various plugins sections of this list.

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

Wide Banner

All-in-one or one block at a time?

There are multiple reasons why a plugin developer would opt for a block collection rather then single purpose block plugins. Two stand-out: One is to make a companion plugin to a Theme, the other is development speed and maintainability. Once a developer starts creating blocks, doing it within the same plugin saves time creating and maintaining the underlying architecture, and she only has to upload one new update. Having it all in one block also simplifies promotion and support.

For the site-owner it’s not that clear cut, though. You might want to use four blocks from one set, and just one from the other set, and the rest will populate the block inserter view.

The block editor has this nice feature to narrow down the creators choice with the last used or often used blocks to be displayed first, and the powerful slash command that helps with the selection of blocks. Some people might get distracted by the vast amount of choices, once you installed two or more block collections. Some of the plugins provide you with a enable/disable feature so you can switch off the blocks you don’t need, and there is are also two plugins available that do this on a site wide basis rather then just for a the blocks of a particular plugin.

Single Purpose Blocks do one thing and only one thing, and do it well. My favorite is the Guidepost by Nick Hamze and the 360 Image by Kevin Bazira. Another reason is to provide a integration path for 3rd party services, like embedding Gumroad digital products, or connect with Mailchimp.

Contributors are discussing who they can make a block manager a built-in feature for WordPress Core. If you are interested you can follow along here.

The most intriguing idea for distributing Gutenberg blocks is Gutenberg Cloud, with a centralized place for blocks and the content creator can select just the blocks they need for a particular site. Gutenberg Cloud was created by Drupal Community members, and aims to o keep blocks CMS agnostic.

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

Block Suites provide you with a set of various blocks for your posts and pages. They are all bundled into a single plugin. You can have more than one collection installed. As always, make sure you test them for plugin conflict with existing plugins. For your post you can mix and mash blocks for different plugins. It’s actually quite cool.

30 Block Suites – Collections for your WordPress Site


ACF Blocks

Advanced Gutenberg

Advanced Gutenberg Blocks

Atomic Blocks

Blocks Kit

Bokez

CoBlocks

Cosmic Blocks

Demoify Blocks

Designer Blocks

Easy Blocks

Editor Blocks for Gutenberg

Elegant Blocks

Enhanced Blocks

Getwid

GhostKit

GutenBee

HT Blocks

Mega Blocks

This plugin was closed on May 9, 2019 and is no longer available for download.

Nelio Maps

Get this plugins on WordPress.org

Ninja Gutenberg Blocks

OtFm Gutenberg Spoiler

Otter Blocks

Premium Blocks

Qubely Blocks

Snow Monkey

Stackable

Stag Blocks

Ultimate Addons for Gutenberg

Ultimate Blocks

Ultra Blocks

WP Munich Blocks

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

29 Single Purpose Blocks Plugins

Single Purpose Blocks do one thing only, but that very well. Some are very specific in their focus, and some extend existing blocks with much more settings and configurations.

360 Image

360 Video

Accordion Block

Block Gallery – Photo Gallery Gutenberg Blocks

Coming Soon & Maintenance Mode

Events Calendar Shortcode & Block

FAQ Blocks

FooGallery

Gosign – Masonry Post Block

GT3 Photo & Video Gallery Block

Guten Post Layouts

Illustrations Block

Info Blocks

Logo Carousel block
“This plugin was closed on May 23, 2019 and is no longer available for download.”

Listicles

MathML Block

Meow Gallery Block

Organic Profile Block

PDF Viewer

Pop-Up Block

Post Layouts

Pricing Table Block

“This plugin was closed on April 16, 2019 and is no longer available for download.”

Recipe Card Blocks

Simple Code Block

Social Share Buttons

Secure Blocks

Timeline Blocks

WordPress Download Manager

WPSeed Container Block

Video and Image Slider

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

Courses for Developers - JavaScript for WordPress with Zac Gordon
Check ’em out now!

📢 Now on available: Advanced Gutenberg Development  📢

7 Block Plugins for eCommerce

In this eCommerce category, we list block that provide product blocks for both, eCommerce plugins as well as 3rd Party services.

BigCommerce

Dispensary Blocks

Easy Digital Downloads

Ecwid

Gumroad

WooCommerce Blocks

Product Blocks for WooCommerce

Closed July 8th, 2019

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

6 Blocks for 3rd Party Services

EmbedPress

Flow Platform Embed

Google Maps Gutenberg Block

Google Fonts for WordPress

Kona – Instagram Feed

Newsletter Block for Mailchimp

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

8 Layout and Page Design Plugins

Caxton

Grid Block

Grids

Gutenberg Blocks Design Library

Guten Post Layout

Kadence Blocks

Stylist

Drop Shadow Boxes

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

18 Tools for the Block Editor

Advanced Rich Text Tools

Animated Blocks

Archive Mapping and Post Selector Gutenberg Block

Block Background

Block Lab

Blockbuddy

BlockContext

Blocks CSS

Blocks CSS: CSS Animations for Gutenberg Blocks

Disable Gutenberg Blocks

EditorsKit (renamed from Block Options)

Fabrica Reusable Block Instances

Gutenberg Custom Fields

Gutenberg Manager

JSON Content Importer

Lazy Blocks – Gutenberg Blocks Constructor

Syntax Highligher

WPSiteSynch for Content

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

How we selected plugins for this list?

As a member of the Global Community Team and part of the organizer Team of WordCamp US, I subscribe to the four freedoms of WordPress and only list plugins that are 100% compatible with the WordPress GPL license.

This first edition also only lists plugins available in the repository, as they are easily downloaded and added to your site. Developers also went through the effort to have their plugin reviewed by the guardians of the ecosystem, the Plugin Review Team.

Some plugins we mention in our Update posts are only available on GitHub are mostly shared with fellow developers to show use cases, explore various ways for a problem solutions, or as examples to shorted the start-up ramp for new developers. Some are so specific and geared towards one custom solution, that it won’t make sense to make them available for a larger groups of site owners, but can provide some additional models for other developers. As soon they make it into the plugins respository, we will list them here, too.

What to do when you run into trouble?

If you at anytime in exploring any plugin you run into trouble, please use the Health Check and Troubleshooting plugin to narrow down the cause and then use the Support Forums associated with the particular plugin to get support and report a bug to the developers. They will be more than happy to help you out and appreciate any feedback.

Blocks Suites | Single Blocks | eCommerce | 3rd Party Services | Layouts | Tools

Featured Image: Photo by Cobro on Unsplash

Changelog

  • June 3 Added Getwid
  • †May 24:
    • Added WPSiteSynch, Drop Shadow Boxes, Info Boxes.Removed: Logo Carousel block, Pricing Table Block, Mega Blocks
  • May 9: Added ACF Blocks
  • Apr 30: added Block CSS 4 Animations, Reusable Block Instances
  • Apr 11: added Grids
  • Apr 7: Added Listicles, Guten Post Layout, Enhanced Blocks
  • Mar 28: Added MathML Block, FlowPlayer embed, Footnotes, Dispensary Blocks, Product Blocks for Woo, Nelio Maps and Timeline
  • Mar 15: Added EmbedPress, BlockContext
  • Mar 10: added Block Options
  • Mar 9: added Accordion Block, Pop-Up Block
  • Mar 8: added Events Calendar Shortcode & Block
  • Mar 7: Ultimate Blocks, Grid blocks, Container Block
  • Mar 7, 2019: Initial list with 75 plugins

Building Blocks without Javascript? Yes, you can.

Not everyone is able or willing to build blocks in JavaScript just yet. I found three plugins who help with that.: Block Lab, ACF (Advanced Custom Fields) and Lazy Blocks.

Creating a Team member block was the simple use case for my test. I made notes, screenshots and videos along the way. Last week, with the generous help from Sarah Gooding, the write-up was published on the WPTavern.

More Tools for Block Building in PHP

With the wider reach of the article, others chimed in and shared their discoveries and opinions as well. Here are two:

PHP vs. Twig, I’ve used Twig within ACF blocks, often in conjunction with the Timber plugin. The PHP file that is used to display the block just needs to gather the data for the Twig template and then render it. It adds a bit more complexity (and two files, a PHP and a Twig, per block) but as Twig is pretty easy for folx to mess with, it’s been a good solution for me.

David Dashifen Kees on the WPTavern

(…) a viable PHP-only option for creating a block is Carbon Fields.

A quick comparison:

  • Carbon Fields has no UI within the admin area, which means that the creation of a block is only accomplished via code in a plugin or theme.
  • The creation of the block itself is very easy and follows the same pattern that the rest of the library uses to create meta boxes, widgets, theme options panels, etc.

wrote Steve Ryan in his comment


Featured image: Photo by Matthew T Rader on Unsplash

What does ‘Gutenberg-ready’ mean for WordPress themes?

This week on Heart Internet.

“The new Blocks include baseline support in all themes, enhancements to opt-in to and the ability to extend and customize.”

Gutenberg Handbook, Theme Support chapter

That’s how the developer handbook for the block editor of starts its Theme Support chapter.

In other words, there are a few features the block editor offers, that might not be available yet for your theme and your site, so it’s not pure binary, works or doesn’t work.

There are multiple levels of Gutenberg-readiness.

It goes from enabling Align-wide and Align-full styling for the various blocks (columns, images, cover, gallery), to include styling for each core block to providing custom color and font-size pickers for your customers content creators, so they stay within the brands boundaries.

In this article, I’ll talk about all these different ways your theme can interact with the block editor. We’ll talk about stylesheets, CSS specificity and layout. There are voices, and mine is among them, that building blocks are the domains of plugins. Themes provide the glue between features and front-end, and a site owner should be able to switch out their theme without losing content or composition. Of course, like everything else in life, the edges are blurry and the block editor is still in its infancy.

In my guest blog post at Heart Internet, we will look at

  • Block styles
  • Align-wide and align-full
  • Custom colour palettes
  • Block font sizes

I also share a lot of resources and a list of Gutenberg-ready themes.

Head on over to HeartInternet site and read the full article

Featured Image: Photo by Cristina Gottardi on Unsplash

Update #105 ACF Blocks – AMP Stories – Accessibility Report & Gutenberg 5.6

Wow! A lot has happened since the last round-up post. Where to begin? I just returned from WordCamp Atlanta and among other things, I listened to every Gutenberg related talk: Micah Wood, Rich Tabor and Victor Ramirez. They did a terrific job helping content creators, developers, publishers and consultants dive deeper into the most significant change in WordPress since Custom Post Types. The possibilities are endless.

There has been a lot more going in the last four weeks, and I hope you come back to this post multiple times to take it all in.

Some highlights:

  • The Accessibility Report via WPCampus was published.
  • ACF came out with its 5.8 version providing a non-JavaScript way to built blocks at scale.
  • Building AMP Stories will be possible soon, check out the Alpha version of the AMP plugin
  • After Drupal, another CMS OctoberCMS is testing the waters in using Gutenberg as editor, and there is a Laravel plugin called Laraberg.
  • Two more version of Gutenberg plugin 5.5 and 5.6 came out.

These are only five of the 30+ other notable blog posts, plugins, themes and tutorials around the block editor listed. Enjoy! I am so glad you are here! — Yours, Birgit 💕

PS: Tell me what you enjoy or are missing, or what cool things you are working on. Or anything really. Leave a comment or write an email to pauli@gutenbergtimes.com

Table of Contents

Using Gutenberg for Content Creators, Editors and Bloggers

Andrea Zoellner:
Empower Your Storytelling With Gutenberg:
How to use blocks to boost your communication
WordCamp Orange County 2019

WPCampus releases results of the Gutenberg accessibility audit

“An inaccessible editing experience has real and significant consequences for many people in our community. The findings provided by Tenon are serious, and deserve to be considered with thought and care.” wrote Rachel Cherry on WPCampus.


Plugins for Gutenberg

Rohit Motwani: Adapt or dine – How to make your plugin Gutenberg compatible and WooComerce QandA

Themes for the Block editor

Building Blocks Tutorials, Slide-decks and more

WordPress Design & Development News

Gutenberg Beyond WordPress