On July 22, 2022, Michael Piccorossi, Head of Digital Strategy and Seth Rubenstein, Lead Developer at Pew Research Center talked to co-hosts Anne McCarthy, WordPress Product Liason and Birgit Pauli-Haack, WordPress Developer advocate and curater at Gutenberg Times, on they use a mixture of Core and Custom Blocks to streamline their publishing process, and to create powerful charts and quizzes for the Pew Research Center.
Resources
Seth Rubenstein’s Example Code Repo (GitHub)
Issue: Allow usage of block based “template parts” without using block based “templates”: https://bit.ly/3aWn55a (GitHub)
Comparing Patterns, Template Parts, and Reusable Blocks (WordPress Support)
Tracking issue: Missing Query block functionality (GitHub)
FSE Program Testing Call #15: Category Customization (WordPress Make Blog)
Connect on Twitter
- Michael Piccorossi @mpiccorossi
- Seth Rubenstein @SethRubenstein
- Pew Research @pewresearch
Speaker information
Michael Piccorossi is the Director of Digital Strategy at the Pew Research Center where he leads a multidisciplinary team that includes web development, design, product, user experience, analytics, social media and video. He has extensive experience with all phases of digital product and audience development. Before Pew Research, he was Director of Online Operations at U.S. News & World Report.
Seth Rubenstein is the Lead Developer at the Pew Research Center, where he leads a team of 3 developers. He has 12 years of experience in developing enterprise level WordPress applications. Before joining Pew Research, he was the Senior WordPress Developer at the Center for American Progress.
Transcript of Live Q & A
Birgit Pauli-Haack: Welcome to our 32nd live Q&A on Gutenberg Times. It’s a great way to connect with people who are using Gutenberg and we have an excellent show today for you. My name is Birgit Pauli-Haack, and I’m the host of and the publisher of Gutenberg Times. Thanks for joining everybody. With me is a co-host, Anne McCarthy, who’s the WordPress Product Liaison. Howdy, Anne, thank you for being here.
Anne McCarthy: Thanks for having me. I’m very excited to introduce how we’re going to talk to folks in the Pew Research Center about how they use a mixture of core and custom blocks to streamline their publishing process and to create a lot of the stuff that you know and love from them, with their charts and quizzes and all that good stuff. So with me here today, Seth Rubenstein, lead developer… Rubenstein. Apologies, lead developer and Michael Piccorossi Director of Digital Strategy. Thank you both so much for coming Seth and Michael apologies if I completely ruined both your last names and thank you so much for taking the time to just talk about all the cool stuff you’re doing at the WordPress block editor. I know it’s going to inspire a lot of folks. How are you both doing today? We’ll start with Seth.
Seth Rubenstein: Oh, I’m doing fine. I’m living in the middle of a post-home renovation construction zone, but other than that I’m doing great.
Anne McCarthy: Amazing. Minor details, Michael, how are you doing?
Michael Piccorossi: I’m doing great. Thanks. Thanks for having us. We’re really excited to talk about the work that we’re doing and how we might help other people with what they’re trying to do. So, thanks.
Birgit Pauli-Haack: Yeah. So I’m so happy. Totally thrilled. I couldn’t wait because we were talking about this since end of May and now it’s end of June. I had to wait two months, but we do proper introduction in less than a minute, but I have a few housekeeping notes. So please use the chat feature to let us know where you are watching from.
Then for the question process, for those who are watching on YouTube livestream, use the chat bot next to the video player for your questions. Here on Zoom, use the Q&A button on the bottom of the screen for your questions and the chat bubble to share your thoughts and comments.
A little reminder, yes, please be kind even if you disagree. This is a family-friendly endeavor.
So before we head first into the behind-the-scenes tour we are going to get, I want to ask both of you to tell us briefly about your WordPress story and how long have you been using it. Seth first, and then Michael.
Seth Rubenstein: Sure. I’ll go first. I mean, I’ve been using WordPress for, I don’t know, 18 years or something like that now? I started using WordPress in college. I was responsible for all the school’s clubs and newspaper, websites and all that stuff. So that’s when I started to learn WordPress.
Then I just went successively from one job to the next, building out different WordPress products. I think I built one of the first learning management systems in WordPress many, many years ago, in my first job. Then I started at Pew in 2015 and they were doing some interesting stuff with WordPress and WordPress Multisite and we just went from there. I’m excited to show you what we have built over the last couple of years.
Birgit Pauli-Haack: Well, that’s a great career and a lot of nonprofit and going from Drupal to WordPress must have been a major switch of culture as well. So, Michael, how about you? What is your story?
Michael Piccorossi: Yeah, I’ve been doing digital stuff for more than 20 years, more years than I like to admit sometimes. Prior to Pew Research, I managed a team at U.S. News & World Report. We built a custom-based, a Python-based CMS and e-commerce system. That was back like in 2006. So I’ve been doing a lot of different content management things.
I started at Pew Research in 2009. When I got here, we had four different CMSs, none of them WordPress, 2 DotNet, Drupal, custom PHP so it was really kind of a mess. One of my first hires after I got here was another person you may know from the WordPress community, Russ Heimlick. He was our first web developer and he and I talked about where we should take this organization and we decided that WordPress was the right way to go.
So we ran a custom-hosted version out of a data center in Virginia for a while and then Seth joined us, as he said in 2015. For a couple of years, we were managing on our own AWS infrastructure and then we moved over to WordPress VIP in 2018, and we’ve been really happy working in that environment ever since. So we’ve really never been happier and we’re really committed to the platform.
Anne McCarthy: I love this. This is very cool. I’m going to later have a question so just tuck this away for now, around why you chose WordPress, especially with what seems to be more of an emphasis on the data side of things. I’ve read books about how for humanity’s sake, we need to find ways to preserve data for the long term. So I’m curious, that played into part of, for human knowledge sake of, what platform can we choose that will have the most longevity and sustainability into the future? So I’m fascinated by that entire concept when it comes to this kind of work and research, but just tuck that away for later. I just had to mention it for now.
Michael Piccorossi: Sure.
Anne McCarthy: Oh, Birgit, you’re muted. Sorry.
Birgit Pauli-Haack: … to type some things. I apologize, our chat was disabled for a few minutes here and now you can all tell us where you’re watching from. I’m sorry about that, but it seems to be that Zoom is changing the default settings all the time, and I had this set up. Well anyway, so Michael, so what do you exactly do at the Pew Research Center?
Michael Piccorossi: Sure, sure. So me personally, I’m the director of Digital Strategy. It’s really product and strategy and like I said, I’ve been here for 13 years now. So I oversee a larger team of 20 people. In addition to the web dev, I also oversee the design team, video products, social, email, user experience, and audience measurement. So basically I’m the chief cat hurder.
I think we’re similar to a lot of news organizations. So I really describe us as, we’re news adjacent. So, the work of the center is, if you’re not familiar with it, we are a nonpartisan, non-advocacy, public opinion polling, demographic analysis and a variety of other social science research. Historically, the roots of the center is in survey research and polling, but in the last five years, we’ve really made a strategic shift to seek new ways of measuring public opinion and that facilitated us starting our data labs team. They’re doing data science and computational social science so that’s a new area of research for us.
Our core product, as is baked into our name is, nonpartisan, non-advocacy research. So these authoritative, data-driven reports, they’re big things, they’re multi chapter, and those are still really in many ways, one of our core products, but we also do shorter but equally rigorous and authoritative data-rich blog posts and things like that.
But the digital team here also, in addition to doing all of the regular day-to-day publishing, we’ll publish in a given year maybe 40 or 50 data-driven features based on center research. And they run the gamut from D3 visualizations to interactive maps, data lookup tools, essays, and quizzes. And I don’t want to overlook the fact that we’ll publish about 2,500 static charts in a given year and it’s really an important part of how we get our information out there. So shout out to our design team, I think they’re the best in the business and I think they do great stuff. So it just doesn’t have to be interactive to be important to us.
I think in general, one of our real special sauce for these features that we do is, allowing users to see themselves in our data. So Anne mentioned some of our quizzes and things like that. That’s really in terms of broad reach, we know that for the public, that’s what they want to see. So that’s it.
So, like I said, we are really similar to a news organization and we’re involved in a lot of the same communities as news orgs, Online News Association, NYCAR, the News Product Alliance, those are sort of the people we hang out with.
In addition to being a pointing head and middle manager, I’m really a product guy at heart so I really do spend a lot of time in WordPress. So that’s my story.
Birgit Pauli-Haack: Right. Well, thank you, Michael. I had no idea about the full scope of the Pew Research Center. I only have been an avid reader of the internet research since the early 90s, I think because that was the one research where you knew who’s online and who’s online where, and especially then with the advent of user-generated content, social media, it was really nice. Yeah. It was the one authority about internet usage, especially in America. So I’m really happy that I know now more about it. So Seth, what do you do at Pew Research Center?
Seth Rubenstein: Well, I am the lead developer. So when I started at Pew, there were a few developers, but there wasn’t a defined dev team and there wasn’t modern dev team practices. So a lot of the challenge was getting that spun up in the first couple of years.
Now, we have three other developers beside myself. We have two developers that focus on these digital features that Michael alluded to maps, interactives, we call them scrolly teleinteractives. You scroll through and different things happen. Then another developer and myself, we manage the majority of the WordPress app and especially now, the Gutenberg infrastructure.
Birgit Pauli-Haack: Yeah. I just want to go through the chat. Hi to Washington DC. Heimlich is here. No. Nice, wonderful. Bud is here. Hi Bud. Henrietta, Matt and well, yeah, Ann is online the chat and thank you for greeting everybody.
So the Genesis of this live Q&A is actually that I, around the Web 6.0 release, Seth tweeted the following, “For all its naysayers, Gutenberg is a gamechanger for digital and news apps. It’s a force multiplier for your team and we’ve spent about the last three years going all-in, in block development.” Then in the thread, you shared quite a few videos of examples and it was really interesting. I jumped at it and DMed you if you and your team come on the show. So what is it that you’re going to show us today?
Seth Rubenstein: Sure. So I have a couple of examples from that kind of thread. I think we’ll dive in and I’ll show you how we can build out homepages, that’s one thing, how we are using Gutenberg in a quasi full-site editing method to edit taxonomy archive pages, as well as a couple examples of how we build out digital features like quizzes, like charts and interactives now, some of these scrolly tele things I’ve told you about.
We also have this other concept of a quote sorter, where we get quotes from the public and we sort them into different groups and things so you can browse that information. We’ve just created the ability for this, and it’s not launched yet, to build those out in Gutenberg. So let me share my screen here.
Birgit Pauli-Haack: Yeah, that would be lovely. Well to the audience, if you have questions, just put it in the chat and after the demo, well, Anne and I get the privilege of first questions and then we’ll go through your questions and have Seth and Michael answer them.
Seth Rubenstein: Sure.
Birgit Pauli-Haack: Go ahead, Seth.
Seth Rubenstein: So the first thing that you see when you hit pewresearch.org is this page here. In the past, this might have been something built out with God knows how many short codes, if that was even possible at all. So now, and I’ll just kind of, I have a couple tabs lined up here, now, it’s very simple for an editor to come in and build out a homepage, especially with things like block patterns. We’ve established some of these basic sections of the homepage that you can just drag and drop in.
So let’s see, I’ll just throw one together real quick and maybe we’ll do that. So the first block that we built in our journey on Gutenberg was what we call story item block. It’s definitely our most used block. It’s our most custom, the most developed out block. With it, you can just drop in a story and we have a couple of different variations. We’re using block variations throughout our block library for quick shortcuts to…
Anne McCarthy: It’s so cool you’re using variations for this, I just have to say. I’m like… I’m already seeing the pieces and like this is amazing.
Seth Rubenstein: Yeah. And using WordPress REST API and all of the WordPress components to build these things out. So let me just type in a post. I’m running this on my local dev so it will be a little bit slower. An editor can just search for a post or they can drop in either a live link or another feature that they requested, which I think has come in handy is the edit URL for like an article that’s not been published yet, so we can go try to grab some information about that.
Then once in here, this block is using block context as well. We have found block context to be extremely important to our efforts, to guide producers into how things should be set up and set restrictions on how things should work. So for example, we have our own grid block as well. If I were redoing it today, I probably would stick with the core column blocks, but this was years ago and there were some features and stuff and we didn’t know how to tap into core blocks the way we do now. So we just went through and made our own grid block.
The column block passes down through block context, the width of the column so that, for example, a story item block, when you’re choosing the image position can say, “Oh, you can’t do left or right position because this column is not large enough.” So this is great because this makes sure that, once again, I go back to shortcuts because this is how it used to be. With shortcuts, you really could place those restrictions on the interface that maybe had to happen on the back end and an editor would go and drop in a short code and they will, “This doesn’t look the way I wanted it to look. I didn’t know about these restrictions.”
So now an editor can come in here and do all this visually. They could set an image size, enable different features, like bulleted items underneath here. They can include links in here, whatever.
Then we are also using the query block. This is one of our more recent core block modifications. I’ll actually get rid of this to show you how that works. So you can drop in a query block and we are registering through the block API, our own variation here. We’ve got all the basic query block things, but we’ve added our own thing, which will drop in the default settings for the story item block.
This, I think also alludes to what I was describing in that thread of our block first approach. Everything is a block in the site, or at least everything’s moving in that direction, to be a block in the site. To give you an idea of what that looks like, lets just save this real quick.
Another important thing and probably the most important thing about Gutenberg is the fact that what you build here, hopefully is how it’s going to look on the front end. We’re still dealing with some typography stuff. I think when we go in all-in a full-site editing, that’ll be more one-to-one. But now if I come over to our new homepage… Come on. What I’ve built out here is exactly as you’re going to see it on the front so there should be no mistakes, there should be no, this doesn’t look how I thought it was going to look like, all that stuff is visible in the back end.
On the front end here, in the query block, obviously, I’m sure most people aren’t aware the nuts and bolts on how the query block works, but on the back end, obviously there’s a block called post template block and that is rendering out your blocks using PHP on the backend. This is a story in a block, basically being rendered out in PHP on the backend. These aren’t actually static blocks. These are dynamic. So the query block gets the information. It says, “There’s a post type we want a query,” then it outputs all that using the story item block as a template. So that’s homepages.
I think the other thing I wanted to dive into was the taxonomy pages. Where do I have that? So this is an example of a taxonomy page for us, our most important taxonomy topic.
Birgit Pauli-Haack: Sorry, but so what I’m hearing is, that you are actually way ahead of the Gutenberg team. You have build query blocks and templates all before it actually went to the plugin.
Seth Rubenstein: We did build out our own query block originally, because when we first started looking at doing query blocks in places, the query block did not have taxonomy support, or at least very, very minimal taxonomy support. That’s since changed so we have now moved over to the core query block, but there were a lot of cases where we had to build out stuff before it was ready in Gutenberg, and then come back later and figure out if we were going to use the core block that Gutenberg had built out. In the most cases we do, we do end up going with whatever the core block is.
So this is, I think, our best example of our approach to full-site editing before we got full-site editing. So this is your standard taxonomy archive page, but we have two positions, one we call menu and the other we’re called top. Actually, we have another one at the bottom called bottom. These link up to a post type that we’re calling taxonomy block area, which is not super creative, but it describes what it does. There’s a taxonomy for that for location, menu, top, bottom. So you can go into here and you can say, edit the menu, edit the top, whatever and just like on the homepage, you can build out these featured content areas in Gutenberg using whatever block you want, in this case story item. We also have a promo block we built out on our own MailChimp block and that’s what you get.
Michael Piccorossi: Yeah.
Seth Rubenstein: Then… Yeah, go ahead.
Michael Piccorossi: I just wanted to add, yes. So last summer we launched a site redesign with a whole new information architecture and a multi-level content taxonomy. As Seth pointed out, these topic pages were really the central component of that entire redesign. Being able to manage these in the ways that he’s discussing has really been transformational for us. One of the things I like is, you can create one of these topic blocks and assign it to multiple pages if they’re the same. We can also create these pages in a very short period of time, literally in minutes. Usually, it’s more the editorial decisions that take longer than any of the actual production stuff.
Seth Rubenstein: So yeah. Yeah. The other nice thing is that you can schedule these, because we are ostensibly, a news site. We, I think we, Mike alluded to, like to think of ourselves as being a resource for the news rather than being an actual news service, but we post things that are on the topics of the day and so we can change these. We can schedule changes out. We can schedule tomorrow’s homepage, we can schedule next week’s big release of some report we have, we can schedule the topic page changes that’ll happen for that, because this is just a post-type. So we just create a new post, slot it into this topic in the top location and schedule it for next Wednesday to publish at 10:00 AM. This will change at 10:00 AM. So that’s also, I think been a really great feature and that of course applies to homepages and any of these full-site editing things that we’re doing.
Then the other thing is that we… This is one of the things that we’re going to have to struggle with in the next couple months is, we also built out our own navigation block. When I say we built out, we forked the early efforts of the Gutenberg team’s navigation block and we went a little bit further with how we needed it to work. So a lot of that change was making these different menu links that would point to topic pages specifically, and stuff like this and the ability to have a sub menu and that would follow our CSS and stuff like that. So that’s taxonomy pages, that’s full-site editing.
The other thing I wanted to show was quizzes. We might not have enough time to show us some of these other interactive, but the quizzes stuff, this we launched last fall in order to support what is by far, our most popular product. I mean, it blows our analytics out of the water every year. That is our political typology quiz. It’s definitely one of our complex interactives too. If you haven’t taken this, you should, it’s pretty fun. People will enjoy it.
Anne McCarthy: I’ve taken this with friends, like at a bar years ago. We’re like, “Let’s all take the quiz and we can talk about it.” Yes. This is really fun.
Seth Rubenstein: And we have a group feature too. So if you sign up for an account on our website, you get a little login and you can go create your own little community group. So you can say, here’s how this group of people is responding to this, which is fun. So here’s what it looks like. Go through, ask questions, to answer them, et cetera, et cetera, et cetera.
Before, we were using Gravity Forms for this. Before that, there was a completely homegrown system. That was, we were finding, kind of taking down the site under load. So we switched to Gravity Forms pretty quickly when I started just to get things stable. We could have stayed there, right? We could have kept iterating on that Gravity Forms built system that we had, but we want everything to be a block, we want everything to be under Gutenberg. So we built our quiz builder in Gutenberg.
To give you an idea of how that works, this is a framework that we’ve played around with, to great success. I’m just calling it the controller block paradigm. So here we have one parent level block, the controller. All it does is, it stores some attributes. It doesn’t really do anything, at least on the back end here and it’s just a way for us to contain inside blocks or inner blocks.
Then within that, we have a pages block that controls the pages and a results block that controls the results. Then in each of these, you can insert any of the core blocks, headings, images, whatever, but we also have a question block and then an answer block. As you go through here, you just type out what the answer is or what the question is. You can set an image, question type, all these sort things. This is way more visual than we had, and what you build out here is what you see.
I have a smaller example that I can show you a little bit more of what’s going on in the back end. For example, this quiz. This is a pretty simple quiz for us. This is what we call it knowledge quiz, as opposed to typology quiz, meaning there are correct answers here. So as you go through, you just click the little smiley face to determine that’s the correct answer, not correct answer. But then when we get down to the bottom here, I think this is the most exciting part, or the best example of block context, is, the results block. So here, an editor can drop in all the different things that you might see in a results page, “You scored X out of whatever, share your score.” You can build out some horizontal bar chart blocks that we’ve built out, all this sort of stuff.
Then we have a general response table block. Let me just run through this quiz real quick and show you how that works. So when you hit the quiz, at first, what we do is, on the back end in PHP, we’re pulling out all of the question and the answer blocks and we’re formatting it out so that you get the correct layout. None of these are going to be right. I’m going to get a terrible score, but just click through some of these.
Michael Piccorossi: We’re not here to judge.
Seth Rubenstein: No. Might have missed one. That’s okay.
Birgit Pauli-Haack: You won’t be graded.
Seth Rubenstein: Okay. So then you submit your quiz. When you submit the quiz, we store your results as an archetype rather than each individual entry. So we say, “Here’s all the possible combinations of answers. Here’s what you gave. Let’s store that.” That way, the next person that gives that possible combination of answers, we’re not duplicating database space for no reason. We just store that archetype of answers.
When you hit the quiz page again, with URL rewrite here for this archetype query bar, we go to the database, we grab that. Then through block context, we pass that through the controller block as your score. So that means that all of the blocks put in the results block, grab that context from the controller block, what the score is, and they can change accordingly. Maybe the bar chart changes to match what your score is. This thing changes to whatever your score is. Then of course the table response goes through and it gets the database entry and returns all this stuff through block context to the table block.
So that was really exciting for us. That proved out the concept that we could do interactive things. We could build out little mini web apps, basically, for users and they could interact with them and we could construct a data model around that. So that’s our quizzes. What else do I have for you?
Birgit Pauli-Haack: Those are pretty neat, yeah.
Seth Rubenstein: Chart builder. This is definitely one of the more exciting things we’ve been working on lately. We launched this in the spring and it’s a twofold project for us. One there’s the backend charting library and then there is the WordPress plugin part of it.
Let me get this load again. As I mentioned, we have three developers on our team. One other developer is working with me on all this stuff. This is from one of our other developers, Ben Wormald. He spearheaded this project and it came out just fantastic. Not only did we gain the ability for editors to come in and make charts, but using the Gutenberg PHP API, we are using this in a more static database, which I’ll show you in a moment, to generate charts for that. So it provides us one endpoint for accessing charts and creating charts.
So it starts off with a table. This one has a lot of data, just an example I threw together. We’re using block transforms here, so we can target the table block and say-
Anne McCarthy: You are using everything, you have the you have the transforms, you have-
Seth Rubenstein: We’re using the whole kitchen sink. Yes.
Anne McCarthy: Yeah, it’s amazing. This is really, really cool.
Seth Rubenstein: So you can start off with the chart builder block and that’ll have a table in there and you can fill that information, or you can just start out with a table and convert that to a chart. So I’ll do that now.
So once again, the concept here is, you have a controller block, the builder controller, you have your table for your data. Then if we come down to the bottom here, you’ve got your chart. As you edit data, let me just see if I can change this, you’ll see that this stuff updates in real time, which is fantastic.
Then in the chart itself… Oops, I think this data’s not formatted for that, you can customize pretty much all the visual aspects, spacing, what type of chart it is, colors, et cetera, et cetera. Let me let this load again one more time.
Anne McCarthy: So fond of live demos.
Seth Rubenstein: Isn’t it? Isn’t it great.
Anne McCarthy: I was doing some the other day where I was like, “Let me make this really dramatic,” and then it broke and I was like, “Got it. Okay, cool. I found the edge.”
Michael Piccorossi: Seth, this is independent of whatever charting library you want to use, correct?
Seth Rubenstein: That’s correct. Yeah. I spoke about this in the thread that I posted to Twitter. Some people were asking questions about it. And that we do intend to open source the block at some point so you’ll gain the ability to convert tables to charts and then pick all your different settings that you might have, but it will be up to you to create the middleware to link that to your own charting library. We won’t be open sourcing our charting library.
So let me just see. I mean, we have a lot of options here. I’m not going to go through all of these. Let me just tweak some of the visual stuff for better effect. So you can tweak this however you want. We’re also using the resizing component so that you could do that visually in real time if you’d like. You can go in and give this title, test charts or a subtitle, whatever you want. So best chart builder, there’s a lot more complex things you can do with it. This is a very simple chart. To give you an idea of once again, our whole block process, let me just go to this page real quick.
This is a database that we run. It’s very exhaustive, called the religious landscape study. It has a lot of information about all the various religious groups in the United States, populations, things like this. In those, we have a lot of charts. Maps are not part of it yet, but all of these charts, all the bar charts, pie charts, and things like that, you might see that in this product are actually rendering out a block via PHP. So this is just the chart builder block being manually rendered through PHP on the back end. That way, any updates we make to chart builder for editors also get applied here to this product.
I think that’s another important part to make about Gutenberg is that it’s not just in the Gutenberg editor, anything you make there, any block you make there you can also do in PHP. I think that’s important for maybe the PHP-only developers in the WordPress community to know is that, this doesn’t have to be just a JavaScript-only thing. You can utilize this using PHP as well. So that’s chart builder.
I think that’s all the demos I have for right now. I do have a repo I was going to share of some of the modifications that we’ve done to core blocks. So like I walk through those real quick. Let me just pull open a post, because I think that’s probably the best example of this.
Michael Piccorossi: I would just one add one thing on chart builder. Since we do so many charts, it’s unlikely that we’re going to do all of our charts using chart builder, but for really custom-lead charts, or these data-driven acts like Seth just showed it, it’s really fantastic and we’d like to be able to use more of it when it’s appropriate for the content.
Seth Rubenstein: Yeah. No not every chart will be this, so it’s right. Yeah. Sometimes it’s just the fidelity that you go with a static chart that we just can’t achieve. I don’t know that we’d ever be able to achieve in Wizzy Wig drag-and-drop builder.
So this is an example of a post for us. Once again, what you see here is what you get. This is another block that we built out, the collapsible block. We use these at the top of all of our posts. What else was I going to show about that? Let this load.
One of the other things that we had to build out with Gutenberg, one of the other things that Gutenberg gives you is, I think a great UI library that we’ve never really had in WordPress, with WordPress components and with inspector controls and advanced panels and stuff like this.
So another part of our Gutenberg journey was not just the blocks, but how are we going to utilize this editor to its fullest extent for our publishing platform? Part of that is, we’ve built out some controls for the stuff that you might see here in the sidebar. So the report PDF, top line promo, you can change these things around, you can drag and drop them just in a more visual way than you were able to before.
In the past, we used advanced custom fields for all this stuff, and that was great and all, but once again, there was only so much you could do to customize how that looked, how it worked. It had to fit in that ACF framework, but here, we’re given all those tools by Gutenberg through components to build out exactly what we want.
One of the things here is, this is a block. The table contents is a block that’s being rendered out in PHP on the back end. What that also means is, that if you build out an essay or something and you want to throw a table of contents in, you can. You can just throw the table of contents block in the editor. But one of the core customizations that we had to do, we’ve done a number, is, add support to the heading block to support our table of contents block. So when you’re going through here, let’s go to… Well, actually this is using an older version of that block, not a good example, but I’ll change it out.
When you’re going through here, you can type in a heading block, right? Just, and we’ve added a little icon. Not much is going on here. We’ve added one attribute called is chapter, and then we’ve added an icon to toggle that on or off. So I’m going to toggle that on. Then this might freak out because of the variety of blocks from this older post and it didn’t show up, but each of these is one of our older blocks called the chapter block, another thing we had to build out before we could figure out how we were going to book into core blocks.
The way that works is… This is a high level, I’ll share this link in the chat so people can take a look at these examples. I’ve got two examples here. One is how we’ve added chapter support to headings and how we’ve added an alternate mobile background for the cover block. So that when you’re on mobile, maybe you get a different sized image for your cover block than you might get on desktop.
So the heading block is comprised of two things obviously. One is using the PHP API that Gutenberg affords is adding an attribute in. It can be very easy to do. You can just use the block type metadata filter to change a lot of things, but specifically you can splice in new attributes in this case this chapter, which is just a bullion yes or no. Then you can affect the rendering of it using the render block filter. We’re doing this in a lot of places with the core blocks. We say if you do have the chapter attribute and it’s true, then we just add a little data attribute to the H element. So that’s a very simple example. People can take a look at this and use this.
Another part of that obviously is the actual little toolbar icon itself. Once again, this is pretty simple too, using the filters, the JavaScript filters in Gutenberg. So you intercept the editing block. You say, Hey, if this isn’t the heading block, just give what was already there. Otherwise, we put in a little toolbar button and click it. Sets the attribute or unsets it. Then also have a variation which I alluded to. We use variations a lot as shortcuts. So you could just type in slash chapter if you wanted to and that would insert a heading with the chapter already selected. So it’s pretty easy to actually take a core block and give it completely new functionality that it didn’t have before, which I think is great. We’re trying to get more of our stuff into using core blocks.
I don’t have any examples of this, but probably our most modified core block is the group block. We’ve added the ability to make it sticky, so that a group will stick to the top of the pages you scroll. We’ve added the ability to set a responsive threshold. When you reach set threshold, then it will move itself to this div or this idea or something that so that editors can change things around the page based on whether you’re on mobile or not.
The other example is, in the cover block, we are adding another media field, or actually I guess, more of an ID field so that you can associate an image ID so that when you go to mobile, the cover block, we use a different version of the image. Same thing here. Intercept the block edit. You say, if you’re not the cover, just go ahead and return to what you’re doing.
Otherwise, we have a little panel that we insert into the editor and a component that we’ve written. It’s a riff on a variety of different things in core for a drop zone for media. That’s also in this example if people want to use it. On the back end, it’s pretty simple here too. We’re using jetpack_is_mobile to detect if someone’s on mobile. If so, we get the image ID and splice it in, replace the image with that. So these are pretty easy, simple core block customizations, but I think if people dive in here, they might get a feel for what is possible for taking core blocks and making your own block library out of that basically.
Anne McCarthy: Thanks so much for putting that in GitHub too.
Seth Rubenstein: Yeah, no problem. No problem.
Anne McCarthy: Yeah. That’s awesome.
Seth Rubenstein: But also just one last thing, this is a story in a block being rendered out in PHP. This is actually one of those full-site editing template block areas I told you about before. So we’re going to have something at the end of our sidebar. We have a little block area there that people can go into Gutenberg and drop this stuff out. Michael manages this most popular list using every usable block so that I can show up on the homepage or the sidebar anywhere else and we added it in one place and it edits everywhere. Yeah. So I think that’s all of my demos today.
Michael Piccorossi: Yeah. We use reusable blocks in a couple of different contexts so, there’s
Seth Rubenstein: Mm-hmm. Oh yeah. We use them at the end of posts as well for various promos, newsletter signups, this sort of things.
Birgit Pauli-Haack: This was an awesome demonstration. Thank you so much. I’m totally thrilled that you brought some code examples that we can share with the developers that are watching and also maybe come back to in the recorded version and want to follow up on, on some of the things.
Seth Rubenstein: Sure. No problem. Sure.
Birgit Pauli-Haack: Yeah. So what are our first questions here?
Anne McCarthy: I’ll just say I’m itching to ask a bunch of questions.
Birgit Pauli-Haack: Yeah. Go ahead.
Anne McCarthy: Yeah. Can I jump in?
Birgit Pauli-Haack: Oh, absolutely.
Anne McCarthy: I want to just drop this GitHub issue in that I think will be of interest. This is like hyper practical, but just around allowing usage of block-based template parts without actually accessing the whole template. A lot of what you’re describing with the taxonomy pages fuels very similar to that, where you can create template areas and then have access to just edit those. So that’s something I really look forward to and I see as a huge way… I’ve heard from a lot of different page agencies and organizations that’s what they’d love to have access to. It’s like we can define a template area and just allow people to edit that, that would be huge rather than opening up the whole gamut.
Birgit Pauli-Haack: Yeah. Yeah.
Anne McCarthy: So I wanted to put that out there. And I definitely think you could have some really cool insights in helping shape this going forward so I want to encourage, be like, bring all your insights and all your experience of maybe what has tripped up users or what features you’d want to see.
Birgit Pauli-Haack: Oh, absolutely.
Anne McCarthy: … all that good stuff. Yeah. I’d love to go back to the original, why WordPress? Was it part of wanting to rely on the open web? Was it what made you want to adopt Gutenberg? Is that also related to data consistency over time and not in the migrate stuff? I’m very curious with all the work that you do and the value brand.
Seth Rubenstein: Sure. I think I could touch on the why Gutenberg stuff real quick and I think maybe Michael can touch on the why word WordPress stuff. I’m sure that the audience here knows why WordPress. It’s, we’re all fans of it, but at the why Gutenberg front, I think that it was just kind of, I don’t know, kismet that we were looking to redo these topic pages. We were looking to make all these big editorial changes to the site and the question was, how are we going to manage all this? How are people going to slot in these different stories to these templates and so on and so forth? I think I had gone to a word camp for publishers in Chicago-
Anne McCarthy: Oh yeah.
Seth Rubenstein: … a couple years back, and I really didn’t know much about Gutenberg. I knew it was coming and I really hadn’t tried it out. I think I was resistant to it. I think a lot of WordPress devs were and part of the reason I made the thread is, because I think some people still are, because it really is a complete sea change for WordPress. I’m a self-taught WordPress developer and I’m only a self-taught WordPress developer because when I started in WordPress, there were frameworks, there were guidelines, coding standards, there was the WordPress way to do things so that made it easy to get in.
Now, we’re dealing with something entirely new and a completely new paradigm with blocks. So the guidelines aren’t there yet, the frameworks aren’t there yet, the Gutenberg way isn’t really well defined yet. I’m hoping that what we show here and what we give back to the community in the next couple of months as we open source more of this stuff and review more code is, we can help shape what is the Gutenberg way of doing things.
Michael Piccorossi: Yeah, and if-
Seth Rubenstein: … yeah, it was just fortuitous that we stumbled upon it at the right time.
Michael Piccorossi: Yeah. Going back to the earlier times, as I mentioned, when I got here, we were running every different type of CMS except for WordPress. And actually Russell and I at the time, did an analysis. And kudos to Russell too, because he really sort of pushed me in this direction, but it was open web, was part of it. We liked the open source ethos. We liked the fact that we weren’t getting charged a per user license or anything like that. So, a lot of it was commitment to opensource and it really was I think a really smart decision for us and it got us into the WordPress ecosystem. Then when Russell moved on and I was looking for a new developer, the community was really strong and we were able to find Seth and it just has always been a really good, a good fit for us.
One thing on the Gutenberg thing, I think Seth has been really great about, we don’t try to swallow the ocean at one time. As you pointed out, we dealt with the topic pages first and we roll out one little component of this thing to this one little portion of our site. As he mentioned, we’re about to bring a medium blog in-house and I think that’s going to be the first time we take our next big step with this full-site editing. So, really doing it incrementally is, I think, a really smart product ethos for us so that’s how it’s worked great for us.
Anne McCarthy: That’s really neat. It’s amazing to hear about both historically and just at the right time and working for publishers, folks should definitely check them out. I think two years ago went and talked to them about full siting, in the early, early, early days. So it’s neat to hear them mentioned as a way in.
I’m curious too, because I know some folks have, I was talking to someone else this week who’s from Agencyland and how much the workflow has changed as people have adopted Gutenberg. I’m curious if that is the case with editors or people you’re working with, or it’s both a technology change and a workflow change. That’s the piece that I think often gets overlooked as people just talk about the technological change and mean to do things like learn JavaScript deeply or dig into blocks. But then I think there’s also a very real organizational way of how do you train people up in this new way or potentially have design look at things after the fact or before, and switching around the workflow. So I’d be curious to know what that’s been like.
Michael Piccorossi: I was… Do you mind?
Seth Rubenstein: Go ahead definitely.
Michael Piccorossi: One thing, I actually think to be candid, I think that’s an area we’re making sure that everybody’s on the same page, it’s an area where we’re always striving to do better. There is this tension between innovation and making sure that your editors understand what’s going on. I’m sure they would probably plus one on this. So I would say that it’s not something that we’ve really solved the problem. I think it’s common in most organizations like, so I think-
Anne McCarthy: You’re definitely not alone there.
Michael Piccorossi: Yeah. I think it’s one thing I think we’re aspire to is doing a better job at making sure that everybody’s up to speed as we roll stuff out, but I think we do what we can. So Seth, do you want to add to that or?
Seth Rubenstein: I think that that is still a struggle for us, for anyone. I was listening to a Gutenberg podcast, it might have been Gutenberg Changelog or something like that a while back. There was some guest on. I think he’s the head of Florida’s state’s web properties or something. He had mentioned that what they did when they brought on Gutenberg was, they recorded a bunch of videos and snuck it into the help menu. I thought that was really clever. That’s something that we’re going to look to do by the end of the year, too.
It has been a struggle to get people to understand Gutenberg and not just the editor interface, but the concept of blocks and inner blocks and how they’ll nest together and stuff like that. We have a lot of blocks and we’ve tried a bunch of different ideas as far as interface and how you interact with these things. I think we’re finally settling on a good practice. We try to keep things in the block toolbar if you need them a lot, otherwise we hide them away in panels. There’s a fine line of when to use a block style, when should that just be a toggle on an attribute or something. That stuff’s hard to figure out and I don’t know that anyone has the right answer yet, but we’re trying.
Birgit Pauli-Haack: Yeah. So we have one question from Matt Redford and I think it touches on that. “How do you find content editors with reusable blocks? When I’ve exposed them,” he writes, “to users before the idea that it was a global element they were inserting and changing rather than something they thought they would be duplicating, caused issues.”
Seth Rubenstein: Yeah. It has caused issues. We had… I think there’s a lot of confusion about the difference between a reusable block and a block pattern. I know there’s a ticket. It’s been pretty active the last couple days, actually on-
Birgit Pauli-Haack: Actually yeah.
Seth Rubenstein: … exploring the interface for that. I think it looks like it’s heading in the right direction to me. I’m pretty excited to see if this makes it into the plugin soon, but it’s been a problem because someone will drop in a reusable block thinking that this is like a template, a block template, and they’ll edit something. Maybe that something was a post ID attribute that told that block specific information about that post and now, every single post that was using that block is referencing that one thing. That has been a problem for us. So getting people to use block patterns I think has been harder to do. People instinctively go to the reusable blocks. I’m not sure why. Maybe it’s a little bit easier to surface, but it has been a problem.
Birgit Pauli-Haack: Yeah. It was also the first concept for two, for almost three years before pattern.
Seth Rubenstein: Oh, right, right. We didn’t have patterns. Yeah, exactly.
Michael Piccorossi: Yeah. I think it’s a UX issue right on the admin side and communicating to the end user what you’re… Yeah. I agree with Seth. It’s something where we haven’t really looked and so, and yeah.
Anne McCarthy: I’ll note… Oh, sorry.
Birgit Pauli-Haack: Go ahead.
Anne McCarthy: I was going to say, one of the things that I’m really looking forward to tied to this is, block locking and adding the ability to disable editing and block locking specifically for the reusable block. This was actually looked into for 6.0 and did not make the cut, but it is something that is on the line because this is something that has come up a lot in the community is, the reasonable block, being able to edit in a way that is more intuitive.
This is also where I think I saw you all using some block locking whenever you’re going through the demos, which is very neat. So I’m excited to see that system expand, but we have to make it intuitive for editors too. So if you limit options, it needs to make sense. I liked how you were doing that, where some of the options with the custom blocks that you have going already pick different headers and different image sizes. There’s a lot of interesting work being done there.
Seth Rubenstein: Yeah. We’re using block locking in some situations. We’re also… I have found, it’s useful if you’re making a custom block that has a lot of inner blocks is, you can set the template, lock that, but unlock maybe some of the inner blocks that you want people to edit. I think that’s worked out pretty well actually to funnel people into how you want people to use this block. They click and say, “Oh, I can’t change that,” you know?
Birgit Pauli-Haack: Yeah. There’s something that… Just with the 13.7 version of Gutenberg plugin, you can now with one toggle actually lock all the inner blocks as well. So you don’t have to go from block to block to block, but I’m now thinking about reversing a test for that to say, “Okay, what happens if I want to edit just one block? What do I have to do?” and if that block works. It’s kind of the QA person in me, that is saying, let’s see if we can go back to the original idea.
So, but I wanted to go back to two things. Well, it’s actually one thing. So there is this whole 10 years big, great plugins that helped out a lot of people, millions of developers. One is Gravity Forms and the other one is ACF, advanced custom fields. You said you were using them, but then moved away from it. Can you dive in that a little bit more?
Seth Rubenstein: Sure. No shade to those plugs. I mean, Gravity Forms is phenomenal as is Advanced Custom Fields. I mean, I don’t know where we would’ve been without ACF years ago, honestly, because I think the broader, Hey, WordPress needs a field’s API stuff, stuttered out after a while and there really no movement happened there because Gutenberg was coming and ACF was great. So mad props to Eliot Condon and I guess Delicious Brains now owns them. I don’t know.
Birgit Pauli-Haack: They’re sold to WP Engine now.
Seth Rubenstein: Oh, okay. Wow. Yeah. So we stuck with ACF for a while into our Gutenberg transition. I think we have a few locations where it’s still being used, taxonomy term, edit page, we’re still using ACF for some fields there, but it just made sense that for all of the stuff that was in the editor screen when you’re actually editing a post or something, to go all-in on Gutenberg. That’s the whole point of what we’re doing. We are going all-in on Gutenberg.
We have this UI library with WordPress components and it felt like a shame not to use it. So almost all the stuff that originally was in ACF report materials, I showed you that in the block side bar, table of contents, child posts… We do a lot of reports, so we have one post and we’ll associate other posts as a child of that so they appear in the information architecture correctly. That’s now all happening using WordPress components and REST API and stuff like that.
So, there was no reason not to use ACF. There was no reason not to use Gravity Forms. It was just a matter of long term, we have to maintain these things. Everything you have to maintain, and it’s better, I think if we’re all-in on Gutenberg and the concept of blocks, to handle all that stuff.
Birgit Pauli-Haack: Well, thank you. So with ACF, moving away from just kind of thinking about, you would need to build a block about that. Then with the block, came the interfaces, well, the inspector control on the right hand side of the side bar?
Seth Rubenstein: Mm-hmm. Yeah.
Birgit Pauli-Haack: Yeah. All right. Do we have any more questions from the audience? And do you have more questions?
Anne McCarthy: I mean, I feel like I always have more questions. I’m curious, what’s your wish? It looks like-
Birgit Pauli-Haack: Yeah, we’ve got another two minutes.
Anne McCarthy: I know. Sure. It’s like, do you have anything that’s on your mind where maybe it’s really out there, but either current pain points or wishlist items far into the future? I’d be curious.
Seth Rubenstein: I think a lot of them center around full-site editing and I haven’t gone deep into full site editing yet. That’s happening next month. As Michael said, we have a new sub-site we’re launching, so that we’re going to use that as an opportunity to learn about block themes and full-site editing.
I think if there’s one wish that I would have it is, that on the PHP side of things, of core blocks, there were more filters. The query block is a good example of this. You have to intercept the whole thing. If you want to modify it, you have to intercept the whole post template block and the WP query there, which we are doing unfortunately. I would love it if you could just tap into the query arguments before they’re sent to WP query in the query loop block and modify things. So I think probably even more PHP APIs and more endpoints that we can access through PHP would be my top wish list. I think on the JavaScript side thing, I mean, whatever you want to change is there, it’s pretty easy to do. That’s probably my biggest thing.
Anne McCarthy: I dropped in an issue if you want to. I think it’s related to what you’re talking about, because this is also… I’ve heard from a lot of agency folks that they tend to hack apart the query block and extend it for their own purposes. So it’d be neat to gather what those main requests are, see what’s going on and see what can evolve from there, what’s missing. So that’s a great one. It’s a good call out.
Birgit Pauli-Haack: So there is JavaScript is one change coming. I don’t know if it will really affect you, but it is on the components. They are all now refactored with TypeScript and I think it’s a big project.
Seth Rubenstein: Yeah, it is.
Birgit Pauli-Haack: So to increase the developer experience because TypeScript, then your IDE taps into that and helps you with the types of the parameters and everything. So, yeah, I just wanted to tell you, this is coming.
Seth Rubenstein: That’ll be great. We use, many years ago now, we settled on Semantic UI as a way to bootstrap our theme redevelopment efforts. We were standardizing everything under one parent theme and we went with Semantic QI. They have a great react set of components. I actually think Microsoft hired the guy who made that to lead their TypeScript team, because they’re so good. So yeah, getting all those hints and stuff while you’re typing out those components is great so I look forward to that.
Birgit Pauli-Haack: All right. Okay. So I think that’s all the time we had. It has been very, very interesting and totally inspiring to think a little bit beyond what normal websites do, especially in the news side. So at this point, I only have two more questions to all three of you. So are there any announcements that you have and couldn’t get into, because we were talking other things? The other thing is, when people want to get in touch with you, how could they? What’s the best way? Michael, did you want to start?
Michael Piccorossi: I would just say I don’t really have any announcements, but if you want to get in touch with me, you can email me mpiccorossi@pewresearch.org. You can hit me up on Twitter. Those are the two ways to do it. If you can figure out how to spell my name from Twitter, then you can M that my last name @pewresearch, you can get to me. So thank you for having us. It’s really been enjoyable.
Birgit Pauli-Haack: Wonderful, wonderful. Seth?
Seth Rubenstein: Yeah, you can get ahold of me on Twitter, LinkedIn, wherever I have links or might get a profile. If you’re interested in getting in touch with me, that link for that repo is in the chat so you can find that there. And yeah, thank you for having us. It’s great to show what we’ve built. We’re very proud of it. We think we’ve built a pretty rocksolid Gutenberg news publishing system and it’s cool to show it off.
Birgit Pauli-Haack: Anne?
Anne McCarthy: I’ll close this off. I’m just going to plug the latest call for testing the cool setting outreach program I have too. So if you’re interested in the staff and whatever stage you were in, whether you’re deep in the customizations and Gutenberg first, like these folks are, or if you’re scared to adopt feedback on all this stuff and what would make it easier is really helpful, there’s a whole outreach program designed to bring that stuff in and I would love to hear about the blockers. So I just want to nudge that.
Otherwise, I am not really on social media. So LinkedIn, I don’t know if that counts as social media, but I’m on LinkedIn and you can also find me at nomad.blog. There’s a contact form and I welcome people to use it.
Birgit Pauli-Haack: And for those who are on the WordPress Slack, it’s on the WordPress Slack and my name, Birgit Pauli-Haack, bph on Twitter, on Slack and also pauli@gutenbergtimes.com. So I don’t have an announcement either, but just my brain is really full of these great demos. I’m going to watch this probably quite a few times again.
Speaking about recording, after YouTube is through the rendering, it will be on YouTube, on our Gutenberg Times channel and a big thank you to the viewers and to our panelists. It was fabulous. It’s wonderful to see that. I know there are quite a few developers on the Gutenberg team or around that are going to look for that, especially also digital strategists like Michael, to what is really possible. I think you’re really, really on the forefront on the… I’m not allowed to say that so I’m saying the leading edge of the Gutenberg development. So thank you so much.If you have questions or so, send me to pauli@gutenbergtimes.com. Thanks everybody and bye-bye. Let’s get out of here. Thank you. Bye-bye.
