Subscribe
Share
Share
Embed
We talk with people interested in WordPress publishing. You'll hear interview with publishers who happen to be using WordPress, and also people in the WordPress space.
Hey everyone, this is Steve from PublishPress. And in this episode of the PublishPress podcast, I'm talking with Seth Rubenstein from the Pew Research Center. Now, Pew Research is a famous organization in the USA, which produces all sorts of information on American life. About Americans religious habits, their health, their voting habits, basically tons of data. And that is put into charts, graphs, PDFs, spreadsheets, you name it.
Steve Burge:The Pew Research Center is there to produce research and put tons of it online. And Seth has been leading the way in converting all of that information to Gutenberg blocks. He's long been on the bleeding edge of Gutenberg block development, using some of the coolest and newest features as soon as they come out. And so that's what we're talking about in this episode. Seth takes us behind the scenes of some of his work and shows us what an editor will see when they're editing graphs and charts and all this research information for Pew.
Steve Burge:Hey, Seth. Welcome to the PublishPress podcast.
Seth Rubenstein:Hi, Steve. Thanks for having me.
Steve Burge:Do you mind introducing yourself quickly? Who are you, and what do you do?
Seth Rubenstein:Sure. I'm Seth Rubenstein. I'm the lead engineer at the Pew Research Center. I manage a team of other developers, and we run the day to day operations of pewresearch.org, and we build their web platform.
Steve Burge:I feel like Pew Research is something that I always hear when I'm watching the news kind of in the background. What exactly is it? What do you do?
Seth Rubenstein:So Pew Research Center is well, we call ourselves a nonpartisan fact tank. We are their neighbors and where people across the country are on various topics and issues.
Steve Burge:So you collect you collect enormous amounts of data on Mhmm. Just American life in general?
Seth Rubenstein:Yeah. We we collect a lot of data on the American public. We put out a lot of polls to the American public. We can have a a polling group that we, we ask people questions about things by phrase topics, and, we present our findings.
Steve Burge:And I think I've seen you work with lots of election data and maybe some religious research as well. You have, like, a a big study of religious life in America coming up. Is that right?
Seth Rubenstein:That's correct. Yeah. We have, a large kind of religious census of the United States that we do every 10 years. It's called the religious landscape study, and it's up for, an update. And so in the end of February, a new, religious landscape study will be launching.
Steve Burge:So, if people know about you in the WordPress community or anything, it's gonna be your love of Gutenberg or your, your promotion of Gutenberg. You're probably one of the top 2 or 3 promoters of the platform out there. Can you tell us a little bit about why you picked it for Pew Research? Why are you so heavily invested in the block ecosystem in WordPress?
Seth Rubenstein:Yeah. We're we're really heavily invested in blocks. We're really heavily invested in Gutenberg and the block editor and the site editor, as concepts because they're really good for us for us as an engineering team, us as an organization, us as a web publisher. The first time that we really dove into blocks, it was pretty clear that for the first time, WordPress was going to offer up an idea for how to have an MVC structure for what you were making for WordPress. Right?
Steve Burge:Hold on a sec. You're saying an MVC structure?
Seth Rubenstein:Mhmm. Yeah. So, you know, model view controllers. So, you know, with block JSON, you can have a model. And, obviously, with render PHP, you got your view.
Seth Rubenstein:And then with your editing, you've got your controller. And so this was just a really good spec for me as a manager of other developers to kinda send to other junior developers that maybe don't know WordPress that well, they don't know PHP that well, but they do know JavaScript. Go make this thing. Right? And
Steve Burge:that's An MVC approach is easy for any kind of developer to work with. If they have a little experience, they they have a certain pattern to channel their development into.
Seth Rubenstein:Yeah. It's a it's a pattern to develop against. It's a kind of an ethos to creating functionality to make sure that's scalable, and easy to maintain for many years. And for us, it's for us, that's really important because, obviously, you know, our content goes back to the eighties. So, our website is eternal, and so the functionality needs to work.
Steve Burge:So the amount of data you have on your site is infinite almost. It's enormous amount of data.
Seth Rubenstein:It's a lot. Yeah. It's a lot.
Steve Burge:What about for the people who are actually putting this stuff on the website? What about the the editors? What's the benefit for the block editor for them?
Seth Rubenstein:For our our internal users, for our main customer, which is actually not the public. For my team, our main customer is our editors. For for them, they get a visual editing experience. You know, they get to speed up their work that much more. They don't have to mess with short codes.
Seth Rubenstein:They don't have to mess with custom fields or settings pages to make the homepage or whatever. You know, what they see is what they're gonna get. And this lets us build interfaces and tools for them to quickly do whatever they want to do. So that's definitely I mean, that's sped up our production. I can tell you that significantly.
Steve Burge:Oh, so do you have an example of this you could show us? Sure. I seem to remember you saying once in one of your talks that your goal was to kill the settings page. You didn't want people jumping from where they're writing a post to a setting screen, then back to the post, then to the preview. If people are using a block everything will be able to respond more quickly, they'll be able to visually see what they're working on.
Seth Rubenstein:Yeah. Actually, I can give a demo kind of of our homepage system. Wonderful. I think this is, an area that, where we struggled the most with production before, because it's a very visual thing. It connects to a lot of different data, a lot of different posts.
Seth Rubenstein:But managing that before was kind of a big ACF complex settings page that was daunting and overwhelming. So, let me bring up a homepage.
Steve Burge:So something like ACF or advanced custom fields is very powerful, but it's not exactly visual or thickly easy for people to edit.
Seth Rubenstein:And it's not, yeah, it's not exactly what I would call intuitive. If you don't know WordPress and you don't know kind of the user interface paradigms of WP admin of of old, then it's not exactly intuitive. So let me share this tab. Here we go. And I'll show you how home how we produce homepages.
Seth Rubenstein:So you see here, every home page is a post. The latest home page post gets displayed on the home page, and I will go in here and
Steve Burge:Ah, so you're not working with one single home page that gets updated. You have multiple home pages for each date almost.
Seth Rubenstein:Yeah. That's right. Yeah. So every every change to a home page is a post. What they can do is they can take the existing home page and say duplicate that so that you can kinda continue with, you know, yesterday's home page content.
Seth Rubenstein:And then here you'll see. And let me go ahead and open up the homepage as well.
Steve Burge:That is incredibly visual. What you're showing us there is almost identical to what you see on the front of the site.
Seth Rubenstein:Yeah. So here is our front page, and here is our editing interface for it. Right? So what the editors sees is what they're going to get.
Steve Burge:Exactly. Yeah.
Seth Rubenstein:Down to our newsletter sign ups, you know, we have a core query block on this page. All of this is just all in the editor. And so, I mean, I I I could go into really in-depth demo here of how this kind of process would go, but I think this is pretty clear how easy this would be to use. So let's say I have a new story for tomorrow's, tomorrow's front page. Let's just go I'm gonna go grab a post from my posts.
Seth Rubenstein:Let's just say let's say this one. Right? And we've built in a bunch of different kinda link tools and cross data tools with our homepage system, and our story item block. This is actually one of the first blocks we ever created. So I'm gonna copy this post URL.
Seth Rubenstein:This is the edit URL. You could use the preview link, you could use a publish link, whatever you want. And I'll go and delete delete this. And for the editor, they just type in story item. We're gonna pick the lead one because that has some settings.
Seth Rubenstein:And they paste in the URL, and it's gonna give them exactly the post that they want. And they click this and it pulls in the post. So all you gotta do is drop in a link and there you go. I mean, they didn't even have to drop in the story, I'm sorry. The, the edit link.
Seth Rubenstein:You could just drop in, I could be typing and drop in a post link, and we detect that this is coming from our this is a link to pureresearch.org, and we say, actually, you're gonna use this block when you paste in this text. So we automatically grab that for them. That took 30 seconds, if that
Steve Burge:Do you have a site which I presume is getting massive traffic throughout the US elections, for example, and probably will be again when your big Virgin survey comes out early next year? And that's all being done through fairly nontechnical people editing the just for the drag and drop interface here.
Seth Rubenstein:Mhmm. That's right. Yeah. So, you know, that's that's, I think, one really good example of what Gutenberg has brought to work for us. I think anyone that's worked in this space for a while can imagine how you might have done that sort of page construction before, a bunch of shortcodes or maybe a bunch of ACF repeater fields or whatever.
Seth Rubenstein:It didn't look like that, and it wasn't as quick as that. And it was most likely prone to being broken by users. They can only put on a page what we want them to be able to put on a page, and that's just huge.
Steve Burge:So you have enormous amounts of data on the site. You have, decades decades of this data. Are you very heavy on charts and visualizations?
Seth Rubenstein:We are. Yeah. We we are known for our charts, throughout throughout, I think, the news space. You you'll see our charts referenced in newspapers and used, on news websites a lot. And one of the our main plugins is actually our chart builder plugin.
Seth Rubenstein:We once again, we do this all in the block editor. So let me share my screen again, and we'll pull this up. For us, as I said, you know, blocks are a spec to develop against for all of our functionality. So when we build a block, it can't be used just in the editor. It has to be able to be used programmatically and dynamically by other developers on our team.
Seth Rubenstein:And so, charts are a good example of that. Let me pull open a few charts. So what I'm about to show is our chart builder plugin and our charts block, and I'll also show a little bit of our religious landscape study. So let's go take a look at an existing chart. And, for us, charts is a post type, and it works a lot like reusable block, post type almost.
Seth Rubenstein:Whatever goes into this post type can be referenced in any other post. And not only that, you can kinda edit the contents of these posts inside of other posts as you're working. So that if you have a a data update for a chart, that can propagate wherever that chart is used. So let's just take a look at this, mobile phone ownership 1. Okay.
Seth Rubenstein:So this is, our chart builder plugin. And I'm just gonna preview a simple mobile phone ownership chart. This is some of the data that we collect about the American public. And it starts off really simple. It is a table block.
Seth Rubenstein:This is how editors can add data to charts. We use a 3rd party block called flexible table block. Highly recommend it. It has keyboard shortcuts for adding new rows. It has a bunch of great interface elements that the core table block doesn't have.
Seth Rubenstein:One of the other things that we do is we add a import CSV, functionality to this block and to all to core table as well, so that editors can just drag and drop a CSV in here, and that imports all the data into the table. That's a lot of data input manually, so this makes it a little bit easier. And then it comes down to our chart block. Oh, wow. And this gets data in real time from the table block.
Seth Rubenstein:So that if I go in here and say, you know, actually, we're at 100% smartphone penetration. That updates in real time. Right? So if we did this, you could see here. Right?
Seth Rubenstein:That that went down pretty significantly. So for designers, for editors, what this experience used to be is this used to be a a big meta box at the end of the of these chart posts with, Highcharts JavaScript object that you had to type in manually. And I that broke a lot. People would easily break that. You know, you missed the colon, you missed a a quotation mark here, that that chart just didn't work.
Seth Rubenstein:So once again, this is they can't break this. There are options here, and there's a lot of options. There's a lot of customization for these charts. You can see, designers can pick how they want everything to be. I don't even know all the different chart things that this thing can do.
Seth Rubenstein:The designers know more about this than I do. You can pick what tool tips you wanna show. If if you wanna show them at all or what position they need to, you know, if they need to be offset or something, you can do that. There's just an insane amount of customization here. And this is just in the editor experience.
Seth Rubenstein:Right? So that's, just a good example of our Terp Builder plugin, how it can scale from the editor to developers' needs. I think that's one of the really powerful things about blocks, is that you have this interface for both editors and this contained thing that developers can use, almost a component. It's almost like a React component, really, it's how we treat them. And that's just one data visualization product.
Seth Rubenstein:We build quizzes, we build maps, we build other databases. This religious, landscape study database I just showed you, that actually is getting rebuilt right now all in blocks, and we can share more about that in the new year.
Steve Burge:Yeah. Does it work? Have you found that the actual pace that your team are able to publish, the, the amount of requests coming to the developers have reduced? Yes. Has blocks actually improved the performance of the Pew Research team?
Seth Rubenstein:Yeah. In in a number of ways. I can start off with the engineering team. The number of requests that come to us have reduced because we don't have to go make page templates for you guys. You know, we don't have to go fix things.
Seth Rubenstein:It doesn't look right. You could just go in and change the font size yourself. You can change the paddings and and all these things. For the designers, you know, they've they're now kind of prototyping page templates out in the site editor first, so they can kinda see exactly how that's gonna work before they come to us and say, we need a new feature. No, you don't.
Seth Rubenstein:You can do it with the tools that you have. We've Blocks has really shifted us, our team, into a we build and maintain tools for editors, for designers, rather than we are daily maintaining the website. They maintain the website, and Gutenberg has given us the ability to make tools from them to do so. That's kind of our our viewpoint on that.
Steve Burge:Do you find yourself still on the bleeding edge? I know you were one of the very early adopters of Gutenberg itself. Are you continuing to to hit the bleeding edge of the new features that are coming to Gutenberg?
Seth Rubenstein:Absolutely. Yeah. I mean, people that know know I'm a big proponent of the interactivity API. I've talked about that a lot this last year. There's what
Steve Burge:does it do? That's
Seth Rubenstein:the Inertivity API is this fantastic new API in WordPress for blocks, and it lets you let's just call it a WordPress flavor of React to make it kinda bring it down and make it easy to understand, for the front end. And what this lets you do is kinda hydrate your JavaScript driven applications on the server, before they get rendered to the client. And some people will maybe scoff at my description here. This is server side React components for WordPress.
Steve Burge:React is what's used to build Gutenberg in the admin area.
Seth Rubenstein:But
Steve Burge:you're pushing this technology to the front end of WordPress as well?
Seth Rubenstein:Yes. To the front end for the for the viewers. Right? So React is how we've how we build the the editing interface of Gutenberg. And the interactive API is gonna be how we build the front end interface for your visitors off of these blocks.
Seth Rubenstein:And with it, they can interact with each other. Interactivity API blocks can interact with other interactivity API blocks. And they can kinda nest down and get information and actions from each other. So really, I mean, a good way to think about this is they can be treated like React components. You could put an interactive block inside of another interactive block, and because it's in this other interactive block, it performs differently than if it were in this other interactive block.
Seth Rubenstein:And we've we've operationalized that across our website, across our platform. Everywhere you look, we we are running the interactive API. There's only a few products we don't use that with currently that will get converted next year. So, like, if you go to let me show you.
Steve Burge:So this is making WordPress pages much more dynamic?
Seth Rubenstein:Much more dynamic and faster, better performing because what you're not gonna get is that render, paint, and effect. Right? If you have JavaScript on a page, it loads after the page has been loaded. This will kinda let you do things, hydrate those changes or those templates or how it looks before the client side rendering starts, and then it kinda parses that in after the fact. So, for example, here on our publications page, we have this is a block.
Seth Rubenstein:This is a block we call facet template. This is another block called facet template. Each of these facets is a template. Within them is an interactive block to display their interface component. In this case, a checkbox.
Seth Rubenstein:In this case, a radio box. Right? Or in this case, kinda drop down search field. Here we go. Like, research teams.
Seth Rubenstein:These are all blocks that the Facet system ran dynamically generates, and all of them are talking to each other with the inactivity API. So that is you select things. They say, oh, you know, you can't make the selection here. Whatever. And it's fast, too.
Seth Rubenstein:I think that the best part about the API is the hydration part. So here, I've made my selections right, and the changes up Can you
Steve Burge:explain that quickly? What do you mean by, hydration?
Seth Rubenstein:Sure. So, you know, this block has a state to it. It's selected. Right? And as you select these, that state changes in JavaScript.
Seth Rubenstein:In other methods, when this page loads with these selections already selected in the URL, right, report in this region and so on and so forth, the page would load. And then it would paint in your selections to these these job these React components. Well, now that gets hydrated on the server so that the client is aware of the state before it even used to run. So here we go. I reloaded the page, and you saw there was there was no kind of paint in there for those selections.
Seth Rubenstein:They were already selected. They were already bolded because it had already been rendered effectively on the server and then spliced in on a client side when it was ready. So one of the big metrics for your Google ranking is, web paint time and, kind of, I can't remember the metric name, but, you know, how much your page shifts when it paints. This resolves that so that you don't have any page shift. Yeah.
Seth Rubenstein:Let's see. Like, yeah, cumulative layout shift or something like that. So this resolves for that because you you can you can account for that now. So there shouldn't be much shift, because all that has been hydrated or or rendered ahead of time. So the Interactivity API is a big area where we're big proponents, and we're kinda pushing the edge there.
Seth Rubenstein:Every single day, we we build Interactivity API blocks, and we continue to push the limits of that API. We work with the team behind the interactivity API too to help figure out how can we make this more extensible for developers and and what kind of things can you do with it.
Steve Burge:You're one of the the guinea pigs almost of really pushing the the boundaries of what is possible.
Seth Rubenstein:Guinea pigs on this. Yeah. I think it's safe to say we're probably the biggest, like, that uses the interactivity API, and we use it everywhere.
Steve Burge:So if you go to
Seth Rubenstein:deep researchers dot org, you click around, and something changes, that was most likely the API.
Steve Burge:Are we going to be able to see any of this available for other publishers? Are you looking to make any of your work available for for other publishers to download and use?
Seth Rubenstein:Yes. A number of our plugins are already available, open source for kind of, let's call them technical technical knowledge reasons. So our quiz builder plugin, our chart builder plugin, much of what makes our entire platform run, and our block library are all open source. Getting those to run is a little bit harder because we do have some kind of internal dependencies that we can't release yet for licensing legal reasons. We're working on those.
Seth Rubenstein:But in the new year, we do we're hoping to have Playground Blueprints for the Chart Builder plugin that I showed, our quiz builder plugin, a number of of things just so that people can get an idea of how those work in the editor, for themselves more than just looking at the code.
Steve Burge:So what that means is people will be able to click a link and get a prepopulated WordPress site with these chart plug ins ready to test and ready to see how they work. Mhmm. Is there anything else coming up in Gutenberg that you're excited for?
Seth Rubenstein:The biggest things I'm excited for are seeing phase 3 completed. Collaboration and real time real time collaboration and kind of in line editor commenting is gonna be huge for everyone. I don't think people are appreciating, really, what a seismic shift real time collaboration will be when it drops. How many times I don't know about you, but how many times have you had to step in and help an editor out and the editor, and you said, hey. Can you get out?
Seth Rubenstein:Can can you get it out of the editor so I can get in here? I have to do this so many times a day. And did that just that one thing, you won't have to do that in the future. Multiple people will be able to be an editor at once. That's really that's I think that's a huge thing.
Seth Rubenstein:Beyond that, the editor comments functionality that's coming with that, I think, is gonna be really big for us. I can't really speak for other people. We're we're still a a very print and PDF heavy workflow. Our researchers write in Microsoft Word. They make PDFs of the report, and then we have web producers make that web friendly.
Seth Rubenstein:They put that into WordPress. They put that in editor, and they make that web friendly. This year, that's going away. This year, we're onboarding our our editors and our writers in WordPress, and they're gonna start there, and they'll write their web first. But we need track changes.
Seth Rubenstein:We need editor comments to replace Word. Right? So that functionality brings us a long way to doing that.
Steve Burge:You're literally flipping the team's workflow from PDF first to website first.
Seth Rubenstein:Yeah. Yeah. Nobody reads our PDFs. So we realized that that having a PDF workflow was not really great, and having a web first workflow made the most sense. But now, we're really at a place that we can make that happen.
Seth Rubenstein:You know, before that, I think that we're required too much too much work for we're a small organization. We have limited resources. You know, that would require too many products for us to have to buy or pay for continuously. And this kinda gives us all of that for free in WordPress and then all the extensibility that WordPress offers that we can customize it to our own needs. You know?
Seth Rubenstein:That's the thing I'm most excited about.
Steve Burge:20 25 is gonna be a good year for Gutenberg?
Seth Rubenstein:Yes. I think so.
Steve Burge:Awesome. Okay. I really appreciate, all you've done to promote Gutenberg and keep it moving forward. And I'm looking forward to seeing some of the new stuff you're putting out next year. Final question for you.
Steve Burge:You're an online publisher. We do a lot of 9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:9:
Seth Rubenstein:Besides pureresearch.org. I would say, you know, ProPublica. Let me just give a shout out to ProPublica. I really I love ProPublica. They're a very mission oriented journalistic institution like ourselves.
Seth Rubenstein:And I think, you know, now more than ever, ProPublica's mission is critically important. Beyond that, they also have just a great website, and and, you know, they produce a lot of web tools and databases and and ways to kinda dive into their journalism on the web in interactive ways that I just think are really really great, really accessible for the public.
Steve Burge:There's a big philosophical and operational overlap between Pew Research and ProPublica.
Seth Rubenstein:Yeah. I would say so. Yeah.
Steve Burge:Oh, awesome. Thank you so much, Seth. All the best in 2025.
Seth Rubenstein:You as well.