Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Data junkies rejoice, this is the episode for you.
On this week’s episode of Dev Interrupted, Einat Orr, co-founder and CEO of Treeverse, sits down with us to talk about the state of data… where it’s been, where it’s going and why having bad data might be worse than having no data at all.
Want to learn more about coding with Java? Whether you're brand new to coding, or you're looking to improve the skills you already have, there are plenty of different options. How do you know which one you should pick? Here are some of the best podcasts out there right now, which can teach you a lot.
This podcast is no longer being made, but there's still an impressive back catalog of episodes to check out. They all hold up too, so it's something that's worth binging through. Hosted by Lou Maresca and Father Robert Ballecer, a Catholic priest, it's a podcast that's a little different from the norm.
I grabbed Adam intending to chat about all sorts of CSS stuff and his work at Google and on VisBug. But then we chatted pretty much the entire time about color and what’s coming there to the web platform.
WordPress.com is the fastest way to spin up a WordPress site. You’ll be able to build any sort of site around it to power your business or hobby. How do you make the most of it? Subscribe to their brand spankin’ new YouTube channel to learn more about using your site and what fellow customers are doing with theirs.
The post 355: With Adam Argyle appeared first on CodePen Blog.
We’ve got Steve Gardner on this week! We get into all sorts of nitty gritty detail on the ol’ Christmas Cannon, a Pen of pure joy. Steve has some absolute classics that show off the web at it’s very best, like the Airplanes Pen. Can’t beat Steve’s cleverness and execution.
Quirrel Joins Netlify and now we have Scheduled Functions (in Beta)! Wanna run your cloud functions on a time-based schedule? Now you can without even leaving your repo.
The post 354: With Steve Gardner appeared first on CodePen Blog.
On the podcast today we have Chris Lubkert and Rich Tabor, from Extendify. Extendify is a library of block patterns and full page layouts which you can use inside of the Block Editor.
Chris and Rich, as you will hear, decided a few years ago that they were going to dedicate themselves to working with blocks. They each had their own projects, but Rich recently joined the team because his vision aligned well with Chris’.
That vision is to provide designs which you can import directly into WordPress with just a few clicks. From there you can edit them in your own way.
Although it’s become more common to use blocks, a few years ago, the future of blocks, and whether or not they would be widely adopted, was still in doubt. So it was a brave move at the time to focus entirely on blocks.
Whilst the promise of easy website creation is broadly the goal of blocks, they’re not always easy to create and style. And that’s where Extendify comes in with their library of designs which all work with core WordPress blocks. You pick a design, and it’s immediately pulled into your site and is editable.
And that’s the thrust of the podcast today. What is Extendify? How does it work? What can you achieve with it? What do they plan to build in the future?
If you’d like to find out more you can read Sarah Gooding’s article entitled – Extendify Launches New Pattern Library Plugin.
[00:00:00] Nathan Wrigley: Welcome to the Jukebox podcast from WP Tavern. My name is Nathan Wrigley. Jukebox is a podcast which is dedicated to all things WordPress. The people, the events, the plugins, the themes, and in this case, the blocks and patterns. I would encourage you to subscribe to the podcast so you can get all the episodes automatically each and every week.
You can do that by searching for WP Tavern in your podcast player of choice, or go to WP tavern dot com forward slash feed forward slash podcast. You can also copy and paste that URL into most podcast players. I’d really like to hear from anyone out there who would like to come on the podcast and talk about whatever it is that you do within WordPress.
It might be that you’re a developer, a WordPress organizer, a contributor, a designer. If it’s about WordPress, I’m keen to hear from you, and hopefully get you on the show. Head over to WP tavern dot com forward slash contact forward slash jukebox, and use the contact form there.
So on the podcast today, we have Chris Lubkert and Rich Tabor from Extendify. Extendify is a library of block patterns and full page layouts, which you can use inside of the block editor. Chris and Rich, as you will hear, decided a few years ago that they were going to dedicate themselves to working with blocks. They each had their own projects, but Rich recently joined the team because his vision aligned well with Chris’s. That vision is to provide designs, which you can import directly into WordPress with just a few clicks. And from there you can edit them in your own way.
Although it’s become more common to use blocks, a few years ago, the future of blocks and whether or not they would be widely adopted was still in doubt. So it was a brave move at the time to focus entirely on blocks. Whilst the promise of easy website creation is broadly the goal of blocks, they’re not always easy to create and style. And that’s where Extendify comes in with their library of designs, which all work with the core WordPress blocks. You can pick a design and it’s immediately pulled into your site and is editable.
And that’s the thrust of the podcast today. What is Extendify? How does it work? What can you achieve with it? And what do they plan to do in the future?
If you’re interested in finding out more, you can find all the links in the show notes. Head over to WP tavern dot com forward slash podcast. And look for episode number 13.
And so without further delay, I bring you, Chris Lubkert and Rich Tabor.
[00:03:19] Nathan Wrigley: I am joined on the podcast today by Chris Lubkert and Rich Tabor. Hiya guys.
[00:03:26] Rich Tabor: Hey.
[00:03:27] Nathan Wrigley: Very nice to connect with you. We’re here today to talk about blocks. Chris and Rich have an interesting product, which I’m sure many of you will have come across. If you haven’t, probably the best thing to do is to pause the podcast and head over to Extendify dot com E X T E N D I F Y dot com. Familiarize yourself with that and then return here, and you will then know what we’re talking about. Guys, who’s behind this, which of you two gets the credit?
[00:03:57] Chris Lubkert: Rich gets all the credit for all the goodness that’s out there. Rich joined us several months ago and it’s been a huge benefit to our company and the product.
[00:04:06] Rich Tabor: I don’t know, Chris, I give you guys a lot of credit getting it rolling. I just came in and fine tuned a few things at the end there. But yeah, we’ve got an awesome team behind us, that’s really helping drive this thing through.
[00:04:16] Nathan Wrigley: Okay, right at the start of the podcast think is quite a nice idea if we familiarize ourselves with whoever’s on the show. So I’m going to ask you in turn, perhaps if we start with Chris and then we go to Rich, do you want to just give us a little bit of a background story, who you are, where you’ve come from, what your relationship is with WordPress, how you’ve ended up being involved with blocks at all.
[00:04:41] Chris Lubkert: Sure. Yeah. I started my, most of my career and experience has been from outside of the WordPress ecosystem. So my first deep dive into WordPress was joining Automattic and working on acquisitions and investments there, in addition to like internal projects to help the different divisions of the business grow. And that’s where, along with my co-founder Arthur Grabowski, we saw a huge opportunity in the space. WordPress is growing dramatically, as we all know, continues to grow, accelerate in many ways in it’s growth. But the experience for many users is still hard. And so with Gutenberg and full site editing on the horizon, we saw an opportunity to create an experience layer on top of that, that we were excited to go out and go pursue.
[00:05:25] Rich Tabor: So I’m Rich Tabor. My career in WordPress started with designing landing pages for a local marketing firm. And I quickly wanted to learn how to better design for them by understanding the limitations of the code of the engineering behind the scenes in WordPress. So that’s how I leaned into WordPress themes.
I ran a shop called Theme Beans for a number of years. Did a lot of minimal type themes for portfolios for photographers, more creative type themes. It was a great time. I soon found the whisper of Gutenberg at one of the WordCamps, and, at first I dismissed it like everyone else.
But I went home and did some research and I’m like I need to try building some of these block things. And I tried building a gallery block. I remember the very first block I tried building. And it was a miserable failure. I didn’t know. I didn’t know anything. Yeah, it was bad. It was so frustrating. I didn’t understand any of the concepts that I was trying to roll with. But you know, over time I was very curious and I knew that I was pretty confident that this would be the future of WordPress. So much was being invested by the community that I saw the future. I saw that this type of editing is needed in WordPress and it really is needed to empower folks to publish online and in an open source fashion, I knew it was the right direction. So I leaned in, I built some blocks. I released a few here and there eventually landed on Co Blocks and ran that up with Jeffrey Caradang, and that was a lot of fun. We learned a lot and got to experience that road together. Sold that to GoDaddy, and we grew to over 500,000 active installs I think as of a couple days ago, at least. It’s been a wildride. I learned so much at GoDaddy, leading products there on the WordPress experience team and just knew from the inside out, the struggles that folks were seeing with Gutenberg that they’re experiencing and in blocks or we’re solving a big need and they’re definitely necessary for this next evolution of WordPress. But experience-wise, there’s just so much more that we could do. And that’s one of the main reasons I came over to Extendify, like they were on the forefront of patterns and layouts and this experience layer on top of Gutenberg. And I knew I would fit right in and it’s working out well. It’s amazing and we’re rocking online and doing some really incredible things.
[00:07:38] Nathan Wrigley: It’s a curious moment, like a fork in the road, almost to some extent, because as you’ve described, you have a rich history of designing things on top of WordPress to make them look nice. And yet it was incredibly difficult and frustrating. And so I feel that tools like Extendify are perfectly positioned really in a way, because this new paradigm of creating things, but we’ve also got a technical debt of it being really difficult to create these things all on your own.
Who is part of the team? I mean, I’ve seen names being announced, and I don’t know if you’ve had much in terms of churn or growth. Who’s currently, as we’re speaking early February, 2022, who’s part of the Extendify team?
[00:08:20] Chris Lubkert: I started Extendify with my co-founder Arthur Grabowski. The two of us we met at Automattic and saw the opportunity and decided to go start a business around it and to support the WordPress experience for SMBs specifically, and Rich joined us leading product. So Rich is really the brains and the power behind a lot of the quality experiences that people see. And our team is six people total right now, but we also work with a few freelancers to help support us in various ways as well.
[00:08:51] Nathan Wrigley: So Extendify is a suite of blocks. I’m going to say, but you’ll probably have more to add than that. What’s the promise that you’re bringing? What is it that makes you different, because I’m sure in many ways, some of the things that you’re bringing to the table could be achieved by mere mortals like me with enough time. But I guess the idea is that you’re short circuiting the amount of time it takes to make websites beautiful. Is that essentially what you’re trying to do, make it easy for people to create nice, effective, beautiful websites
[00:09:25] Rich Tabor: Yeah, WordPress is hard. WordPress is challenging, even for a seasoned pro to go in and create, even within Gutenberg, it takes a lot of time and energy, and you really have to understand what’s going on, especially around the group block and the columns block and how those interact with rows and all the new stuff that WordPress is adding every single year.
So what we’re doing is building a suite of patterns and full-page layouts to start, that help you get to, like you said, a beautiful website fast. And it’s not just beautiful, but also very resourceful, like there’s jobs to be done that you need help getting done, and we’re here to fill that gap. That’s where we’re targeting right now.
[00:10:00] Chris Lubkert: I’d say we want it to be beautiful and effective for whatever someone’s looking to accomplish. Gutenberg, full site editing. It brings a lot of powerful tools to the WordPress experience that didn’t exist years ago. And our purpose is to bring an experience layer on top of that, that makes it easy for, whether it’s a DIY user building a site for themselves, or a builder freelancer building sites for clients. It makes it easier for them leverage the power of these new tools to create both beautiful and effective sites.
[00:10:30] Nathan Wrigley: One of things which we’ve seen in the block space, there’s lots of different companies out there who are offering different ways of achieving the same kind of goal. In some cases, they are sticking with Core blocks and allowing you to modify your designs simply with code blocks. In other cases, they’re bringing along there own proprietary blocks, which you need in order to manage those pages and the layouts that they create. My understanding is that you’re all in on your designs with Core blocks, if that’s not true, do correct me. But if that’s true, why did you go with that as opposed to building out your own blocks to achieve possibly different things.
[00:11:10] Rich Tabor: Yeah. You know, there’s a few key reasons. I would say number one is sustainability. So when we’re creating these patterns and you add them to your site you don’t have any other extraneous resources that you have to maintain or update or even install right off the bat. Like you get, one-click, instant, something beautiful and resourceful added to your page, instead of having to follow through a bunch of different steps.
And we found that that was a very important for the end user, but also for our team. Like we know creating blocks is getting easier every couple of weeks or so with the new create block package and whatnot, but still maintaining those and adding the new features that Core is adding on top of its own blocks is something that’s an overhead that we don’t necessarily want to take hold of ourselves.
And so, you know, it’s a, win-win, the end users get the latest, that Core has to offer and their blocks that they added to their page last month, still inherent all the new stuff whenever they updated their website. It’s just practice that we found to be very, very resourceful on our end, and we really are 100% in on this front.
[00:12:12] Nathan Wrigley: In terms of the feature set that Core brings. Have there been any limitations? Have there been moments where you had wished that you could do something with Core blocks, but it turned out that, as yet, that was not possible and you would need to go elsewhere and maybe download some sort of other block pack because, I have found certain things difficult to create and third-party solutions have made it trivially easy to create in terms of putting things over here and things onto here and grids and layouts and all of that stuff. Has there been any limitations, are there designs that you wished you could achieve that you simply can’t at the moment or have you found a way around that.
[00:12:52] Chris Lubkert: So Nathan, I think you are correct that in the short term, it would be easier for us to have just created our own suite of blocks and only use those and built any functionality we needed. And had that requirement for users that they had our blocks, our own block collection installed. But we think that’s to the detriment of the user. The world doesn’t need 28 different image blocks out there. There’s a lot of benefit to sticking with Core native blocks, as much as possible. Someone doesn’t accidentally uninstall some block collection and their whole site looks broken. Or something isn’t supported anymore, and they need to find a new solution and recreate a lot of pages that they’ve created before, because XYZ block collection, an abandoned project that’s not maintained, not secure, whatever. So, in many ways it would be easier for us to create our own blocks, but we took the hard challenge of how do we create beautiful, adaptive designs and layouts using the Core blocks whenever possible.
[00:13:51] Rich Tabor: Yeah, and, you know, on top of that, when we do come up with some different feature sets or ideas that we’re trying to flex and in some of our patterns and layouts. We take those to Core. We put an issue on Github. As a company we do a five for the future contribution every month, and we make sure that we contribute on the points that, a kind of tick the boxes that we think are important for Gutenberg users as a whole, but also, there’s things that we know would be fun to add, different type of features to extend the image block, additional color picker options. Like, there’s different things that we kind of hone in on as a company that we want to focus on and we contribute those back to Core. And I think that’s probably the most effective way to push change so that we can really not just make, the folks that are using Extendify have a better experience, but folks using WordPress have a better experience with Gutenberg.
[00:14:37] Nathan Wrigley: Thank you. Rich, I’m going to quote you at yourself. This is coming from Sarah Gooding’s article. She produced a piece over on the Tavern called Extendify launches new pattern library plugin. And in that piece you said all of our partners and layouts are built completely with Core blocks, infused with a clever utility design system.
So I can more or less guarantee, you know what the next question is? What is the clever utility design system? What’s going on under the hood there that you’ve cleverly designed.
[00:15:07] Rich Tabor: Yeah. So our utility styles are, I would say they’re essentially the glue between where we want Gutenberg to be extended to that once Core adapts and grows whenever new WordPress releases come out to where we are today. So, we’re adding some utilities that are class-based kind of like tailwind CSS. Where we can quickly add CSS grid support or Flexbox support and do some offset grids or make something very unique. While still maintaining a layer of the Core blocks, with our utility styles on top of that. So essentially you’re getting the best of both worlds. I think eventually we won’t need the utility styles. I think for now it is our glue till we get to where Core is going to be, maybe a year or two down the road, I think we’ll be at a very cool place in WordPress where we can really extend the Core experience and in a fashion that makes us do all these unique things that we’re doing within our library, but within Core. But for now they’re necessary to ensure the structure of these patterns and come up with some really creative looks.
[00:16:05] Nathan Wrigley: I’m just going to put Extendify over on one side for a moment, and I’m just going to talk about blocks and the WordPress block landscape at the moment. If we rewind a few years, nobody had used the block at all. They didn’t exist, and suddenly they came WordPress 5.0, we had the promise of Gutenberg. It was pretty basic at the time, but as things have matured, more and more people have started to use it. And I just wanted to have a little bit of a conversation about how you feel this ecosystem is growing. From somebody that obsesses about WordPress, like I imagined the three of us do. We’re immersed in this all the time, and so we see people talking about it and it’s all very relevant, but I am not working for a company that are trying to push the boundaries with blocks. So my question to both of you is do you see the sea change happening? Is there a general industry move in WordPress towards blocks? Is this slow? Is it steady or is it at breakneck speed? What’s really happening? And I guess you’re positioned perfectly because you’ve got a company, and you can see the numbers going through your checkout each day. So that’s my question really. How is this environment, the block environment, how is it all maturing?
[00:17:21] Chris Lubkert: What’s interesting Nathan is blocks are relatively new to WordPress, right? It’s been a few years and they’ve been gaining adoption, but it’s not a new paradigm when it comes to site creation or creating layouts and pages and things. So a block-based editing experience. I think it’s obvious to most of us in terms of what the experience should be, and it’s taken several different iterations to get there and to continue to make them progress, and we’re still not there yet, there’s still a lot of exciting features and functionality on the horizon. But that’s kinda how I think about blocks. And even early on, this is the question of, would they be adopted? It was obvious that they would, because this is a paradigm that’s used in many different situations and is clearly better than the alternative that we had at the time, so. There’s a transition period as functionality catches up. People will become more comfortable with it and build solutions on top of it. Like we have with Extendify, that extend the Core functionality, pun intended there. But yeah, it’s a natural evolution and one that’s exciting to be a part of and we’re excited to have it continue progressing.
[00:18:23] Nathan Wrigley: What about you Rich, are you bullish about the future? Are there things on the horizon which you can see and think, wow, we’re just scratching the surface here. Because I imagine a lot of the listeners are content to use blocks. Maybe they’re not, maybe they’re really dead set against it, but, I know what I can do with them right now, but I’m pretty sure that in, two years time I’ll be able to do a lot more, and somebody like you probably knows a lot more about that than I do.
[00:18:47] Rich Tabor: I mean it’s no secret. I’m pretty bullish about Gutenberg and blocks and full site editing and WordPress in general. Blocks are interesting. You know, they started a couple years ago, very small. Like my first block, I think was probably a block that you could just highlight text with. It was just text with a background color.
It’s been a couple of years now, blocks are getting more interesting. We’re seeing some new chart type blocks where you can create graphical representations of data in such, I think, blocks that are more oriented towards actual jobs that are being done. It’s something that Chris and I, and the team talk about a lot is, getting the jobs to be done. And then, and those kinds of blocks are going to be more interesting and more prevalent, I think in the near future. But at the end of the day, a block is just one component of your site. It’s not the whole experience, you know. Extendify we’re really leaning in on this holistic site building experience, we’re leaning in on full site editing. Even WordPress is leaning more in that direction. And it’s the full site editing is coming to fruition, and block themes are coming around.
So I think we really are just scratching the surface of what WordPress is going to look and feel like in, you know, three years, four years even, I think there’s a lot of change and a lot of progress, and I’m super stoked about the direction WordPress is going and just this time to be in the midst of it all. I think we’re just incredibly blessed to be in the midst of this revolution of Gutenberg and WordPress, and I’m just thrilled.
[00:20:08] Nathan Wrigley: Yeah, it really is very exciting times. I’m kind of imagining a future where we have app like functionality in blocks and they can achieve incredibly complex things. All you have to do is click a button and drag in a block, and it will do those incredibly complicated things. And it seems very exciting to me.
The next question really is all about Extendify solution and how we might interact with that within a WordPress install. So forgive me for asking a set of very basic questions because we’re on the outside and you obviously work in this every day. It’s pretty trivial what I’m going to ask, but how do we get Extendify how does that become part of our WordPress website? What’s the process
[00:20:45] Chris Lubkert: Yeah, so we launched a standalone plugin just recently. That’s the easiest way for users to get access to the full Extendify library of patterns and full page layouts, search for Extendify in the plugin directory. You’ll find it there and can get access to it. Free users, everyone can get 10 imports of patterns or layouts, the base patterns or layouts each month. So they can continue using it, and testing it out and seeing how it fits within their workflow. And we have a paid subscription that gives users access to pro patterns, which is a premium set of patterns that we have, and unlimited usage of the entire library as well. That’s how people can check out Extendify.
[00:21:26] Nathan Wrigley: You have a very simplified pricing structure. Sign up for the pro and you’re good to go. Was there a sort of deliberate attempt to keep it more or less free of tears? You’ve got one site license, which is called pro and then you’ve got pro on limited where it’s everything.
I was really curious about that because we often see a table of pricing and there’s maybe seven or eight different rows, potentially. You’ve just gone for free, pro unlimited. And the pro unlimited is limitless. And the pro is just one site, unlimited, but for that one site. That’s curious pricing. Just fascinating. Who came down on that?
[00:22:04] Chris Lubkert: We want to become an indispensable tool for anyone building sites on WordPress, whether it’s someone doing it for themselves, creating a site that they want to create for themselves or building sites on behalf of clients and putting both beautiful and effective and well-built products out there. So we did want to keep it simple, especially at the start we wanted people using the product. Want people using it for free and sharing their feedback with us. And we want people using it on multiple sites and sharing that feedback with us and getting that constant loop of information. That’s how we improve. So we consider ourselves early, still, you know, we’ve been at it for a little while, but there’s a long road ahead of us and a lot of exciting stuff we wanted to do. And that really relies on people using the product and us getting that information back from them. We really prioritize that element of it, having people use the product and us learning from it so that we can continue building something better and better meeting the needs of our users.
[00:22:57] Nathan Wrigley: So returning then to how we actually interact with it. We install the plugin. My understanding is you just drop in an API key or something like that. It’s basically setting less there’s not a lot to configure. You install it, show it your license key, and everything’s just right there without you having to think. Am I right in that?
[00:23:15] Chris Lubkert: You don’t even need a license key if you’re just using the free version so everyone can use it, without registering and try it out. We want people to try it out and see how it works. And again, going back to the feedback, share what they’ve found with us and share what they’d love to see more of with us. We always love to get that feedback. But yeah, once you had your license key, if you’re a paid subscriber, then that unlocks the unlimited access to the library and you’re good to go. So, in a lot of ways, it is very simple in terms of how the user interacts with it.
I think one thing that’s cool and I would encourage people to try is switching their theme, and switching their styles of their site and see how the library, the patterns, the layouts, all adapt to that. That’s where we don’t have settings in the library. You don’t need to pick a primary color and set up your preferred font, et cetera, everything adapts to whichever theme you’re using.
And we try to make it so that it should just work for people. And it’s, easier said than done but we work hard to make sure it works well across a variety of different setups and installs.
[00:24:14] Nathan Wrigley: I think the promise of these kinds of tools is so remarkable. The actuality, and I can speak from deep personal experience. I have the design skills of a potato. I’m prodigiously bad at making things look good. And so the idea of being able to click something, import a design really straightforwardly is brilliant. My problems begin from that moment on. In that I wish to modify things and to change things and make it suit the branding of the website. I might want to just move this left a little bit or put some rounded corners on there.
Can we get into that a little bit, talk about how easy it is to customize, and I do want you to be as brutally honest with yourselves as you can be here, you know, is it a easy system to work with? And of course, and I mean, Gutenberg your blocks and patterns just come in and you are left with the design system that Gutenberg has got at the moment. Does it have limitations or are you happy to say yep, try this out, you’ll be able to achieve everything.
[00:25:13] Rich Tabor: Yeah, I’ll take this one. We mentioned earlier about our utility style system. So that coupled with, some creative pattern building, lets our library adapt to your themes styles, pretty well, like Chris hinted at it’s a lot of work. It was a very huge challenge to tackle and something we’re still working at to improve, but for the most part, when you open up the library and added a full page layout, for example, it should adapt to your site. My goal when building this out was if you want to add a landing page to your site, you can go through this library, pick your favorite one, add it, and there just adapt it to your site. You don’t have to go in and remove all the wild colors that some of these other solutions out there will hard-code into their styles. And it kind of adapts and looks great right out of the bat. The one thing, going in on Core blocks, that can get challenging is we are relying a little bit more on what Gutenberg provides. 5.9 has added whole lot of different functionality, especially around, doing border radiuses or borders around group blocks and different types of topography settings. And I think Cora will continue to move down that direction. But for the meantime, some of those things are a little janky right now, but like I mentioned earlier, when we find those things, we tackle it, we go into Core, we write the issues and if we can, we put up the PR to try to help resolve that.
[00:26:30] Chris Lubkert: Yeah we don’t lock anything down, but our goal is that you Nathan, if you add a pattern to an existing site that you have, that you’re happy with the style and the branding, you don’t have to do those modifications. You don’t have to figure out what size the font should be. And, if it should be a rounded corner or not, or what color the button should be, you shouldn’t have to do those tasks every time.
You’re more than welcome to. You can certainly use, Extendify and create a terribly ugly site if you try hard enough. We don’t stop anything there but the idea is that you shouldn’t have to.
[00:27:02] Nathan Wrigley: With the library as it is at the moment. What’s the taxonomy going on there? How are we sort of navigating because I can see that currently this number, I’m sure is subject to change probably in an upward direction. Currently there are 1,400 plus site patterns. 70 plus full page layouts. That’s a lot, that’s a lot to, for me to consume. How do you make it easy for me to discover and browse the patterns and libraries and all of the things that you’ve got in there?
[00:27:31] Rich Tabor: As of right now, so we’ve got two different key mechanisms to filter down. So the first is your site type. Basically selecting the type of site you’re building, the industry that you’re building in. And this is unique to what we’re building, but essentially you can say yeah, I’m building a gym website or a restaurant website and right out of the gate, you’ll have all the patterns filtered to support those industries the best. You’ll have copy, a preset for those industries and you’ll have images that are also preset. So we’re also attacking the speed of getting to your, getting your site published even faster by doing that, so you’re not just having place a loader imagery, if you don’t want it. Which is pretty cool, and also very challenging thing that we accomplished. And the second piece is we do have the typical content type categories. So you can add hero areas or headlines, texts, different galleries. We have those kind of filters in place. We’re experimenting with a few other mechanisms to help filter. And as we add more patterns, I’m sure we’ll figure out a few other clever solutions as well.
[00:28:33] Nathan Wrigley: So you were just saying there, forgive me if I’ve misunderstood, but you were saying that, I think that the images that you bring in as placeholders for want of a better word, not placeholders, but something which is already in situ, they can remain on the site. We’re allowed to publish those to the web? We have the license for that?
[00:28:51] Rich Tabor: Yeah. So we’ve actually curated a few collections of different site industries behind the scenes that are pulled from Unsplash. So those are all available open for anyone to use. Yeah.
[00:29:02] Nathan Wrigley: In terms of the growth of the product, you clearly, your invested in this, you’re enjoying the experience, early days. The company is obviously growing. You’ve talked about the staff and whatnot. The roadmap for the future will be something I’d like to talk about.
But just before that, I don’t want you to feel that you need to throw numbers at me here, but is Extendify turning out to be a successful business? And the reason I’m asking that is not so that you can bare your soul simply that people, if they’re going to throw their weight behind this and build 10, 15, 20, a hundred client sites, they want to know you’re going to be around.
[00:29:40] Chris Lubkert: Yeah one thing we have not talked about. When we started out building Extendify, we raised some outside funding and outside capital from investors, both in and outside of the WordPress space to support what we were building. We wanted to make sure that we were able to build a real business behind this and not have it be a side project that was at risk of not continuing.
So we have funding to do that. We have a world-class team that we’re hiring for actually. So if anyone is interested in, in what we’re doing and passionate about the future of Gutenberg and WordPress, we’d love to, to talk to you. But Extendify is growing really well. If anything, we’re trying to increase our focus and continue to hire and build a team that can take us forward to where we wanna be.
[00:30:27] Nathan Wrigley: Okay. In terms of the roadmap for the feature set, and what have you, do you have any blue sky thinking? Is there anything that you would like to achieve in the near term? And again, it comes back to customers. If they become customers, it’s nice to think that the product is going to mature over time. So I just wondered if you had anything to add there.
[00:30:47] Rich Tabor: Yeah, definitely. To start, we really honed in and focused on our pattern collection. And right now those are pretty solid. We’ve got some really unique, beautiful patterns out there. Next we’re going to start combining those and coming out with improved page layouts. So full page layouts so you can add think landing pages, whole pages for restaurant menus. We want to make sure we can help you get that job done. And after that, we’re extending even further up the chain. So we’ve got patterns, layouts now, full site designs. We want to help you get a complete site done quickly, and we’re coming up with some experiments behind the scenes that we’re working through that really are very promising and very exciting. And thinking through some guided experience, for getting these sites set up. Particularly around folks who aren’t very familiar with WordPress, I think that’s the area that we will lean into. And then throughout that process, we’ll be integrating with additional functionality for these jobs to be done with appointments or with events, thinking through the type of patterns that were really help folks be successful online.
[00:31:48] Nathan Wrigley: In terms of that roadmap, are you still at a point where helpful suggestions are welcome? Or have you solidified that? I’m just curious to know if any customer in the recent past has said, I wish you would do this, and you’ve thought actually, we must do that because that’s a brilliant idea. Or are you firmly focused on what your own plans are that you’ve already decided?
[00:32:09] Rich Tabor: Oh no, we’re definitely always listening.
[00:32:10] Chris Lubkert: We’ve had customers, both free users and paid subscribers reach out let us know that, hey, XYZ would be helpful. This type of pattern. Sometimes people even send us a screenshot of what they’re trying to do. And that is really energizing to us. We love it. It’s awesome when someone asks for something, you build it, and then it gets used right away and it solves their pressing need for them. We have a long backlog of different patterns, layouts, designs, et cetera to add and continue to make the library fuller and better, but that feedback is awesome to get. Yeah, definitely eager to hear anyone’s experience with Extendify and what we could to do make their site editing Gutenberg experience better.
[00:32:53] Nathan Wrigley: Obviously you’ve got this suite of really beautifully designed patterns and what have you. I was just curious whether you had any options to save things that you’ve already done or sync things back up? Is it purely, is what we’ve got, this is Extendify . Take what you’ve got and download it onto your site and modify if you choose. Or is there any way outside of WordPress normal way of doing things? Any way of syncing things, having a design library which is just for you or potentially your clients, any of those kinds of things?
[00:33:26] Chris Lubkert: That’s on the horizon, Nathan. So today that is not functionality that exists within Extendify, but the the idea of saving presets or a collection of patterns or layouts that you use often. Curating a selection of patterns or layouts and making those available to clients so that they can continue to leverage the tool and get the benefit of it, but do so in a more controlled way that you’ve curated for them. That’s all on the horizon. Those are things that we’re excited to do. So that’s a good idea.
[00:33:55] Nathan Wrigley: Okay, there we go. I think I’ve asked all the questions that I wish to ask today. If people have been interested by what it is that you’ve said today, if they’re curious to check out Extendify, where’s the best place for them to find you guys? Let’s go Rich first and then Chris.
[00:34:12] Rich Tabor: Yeah. So I’m online. My personal account on Twitter is Richard underscore Tabor. I share a lot of Gutenberg, and a lot of interesting blocks I find in and a lot of the stuff we’re working on behind the scenes at Extendify. We’ve got Extendify on Twitter as well @extendifyinc. We do a lot of interesting pieces there, we share a lot of patterns that we’re building stuff we just released and that’s where you could follow it to keep up with the latest product updates.
[00:34:36] Nathan Wrigley: I will put those in the show notes and Chris.
[00:34:40] Chris Lubkert: Yeah. So on Twitter, I’m @chrislubkert. And. for Extentify, the best way to do it is just check out the plugin. Search for Extendify, add it to your site, play around, see what it’s like, and definitely share any feedback with us that you have. You can always reach us at, hey at extendify dot com or Rich or I individually at Rich at Extendify or Chris at Extendify, we love to hear from folks. So please check it out and let us know what you think.
[00:35:02] Nathan Wrigley: Thank you very much, both of you indeed. I appreciate you coming on the podcast, but also I appreciate the fact that you’re trying to do the difficult work of making WordPress a better solution in the future, even though we don’t quite know what that looks like perfectly yet, you’re giving it your best, and I really appreciate it. Thanks for coming on the show today.
[00:35:20] Chris Lubkert: It’s fun to be a part of. Yeah. Thanks Nathan.
Anyone who’s been in a rapidly scaling company with an ever-expanding engineering team knows that communication is never as simple as it seems.
That’s why we were so excited when Shankar Ramaswamy decided to sit down with Dev Interrupted.
Louis Hoebregts (aka Mamboleoo) has been creating wonderfully creative Pens on CodePen for many years. His early work, as we learn on this episode, was inspired by the CSS trickery of Lea Verou! He rotates his tools between HTML and CSS, SVG, and canvas, but tends to have an aspect of motion and the unexpected. Some of the most popular Pens have an aspect of education to them as well. Here’s a list of Louis’ Pens he chose to talk about, covering some of his history here, each of which is symbolic of a personal era and often unlocking new professional doors:
WooCommerce can do it all as far as adding eCommerce functionality to a WordPress site. One off product sales, for sure, including shipping and inventory management and all that. But it can also sell digital products. It can also sell memberships and subscriptions. Put on your what if hat. What if your business sold memberships? What could you offer? It’s always worth thinking about.
The post 353: With Louis Hoebregts appeared first on CodePen Blog.
You’ve heard of the supply chain, but what about the software supply chain?
Unlike the standard supply chain that you often hear about in the news, this week’s episode of Dev Interrupted dives into the supply chain responsible for holding together the systems that companies, orgs and governments depend upon.
On the podcast today we have Vinny McKee.
He’s the creator of the Wicked Block Builder plugin, which is a tool to make the job of creating your own custom blocks as easy as possible.
I’m sure that you know that WordPress’ editor is all about blocks. You can create content, and now whole websites with small components. A title here, and a paragraph there. But the real power of blocks is the way that they can be extended so that they can consume and display any kind of content in any way that you can imagine.
The WordPress landscape is moving towards blocks as the way to create and present all-the-things, and we’re just at the start of a very exciting journey.
You can download and try out blocks for almost everything. Some do one thing, other block packs bring entire suites of interesting blocks to the table.
But there is a problem… blocks are not all that easy to create. Yes, you might very well be a talented developer who has taken the lead in learning block creation. You burned the midnight oil and got your head around the complexities of it all. I suspect that it was an uphill struggle.
But WordPress’ mission is to democratise publishing. In an ideal world not just publishing, but extending WordPress would be something available to the masses.
Step in Vinny McKee. His Wicked Block Builder plugin is one of the tools out there that enables you to build your own blocks without the need to understand much of what’s going on behind the scenes, and there’s a lot going on behind the scenes.
Page Builders allowed users to create beautiful websites without needing to learn code, block builders are doing the same thing for blocks.
Today on the podcast we learn about why Vinny built the plugin, as well as how it works. What problems does it overcome, and are there any limitations to what you can build?
Wicked Block Builder on the WordPress repo
Justin Tadlock’s post “Wicked Plugins Launches UI-Based WordPress Block Builder”
Wicked Plugins Twitter account
[00:00:00] Nathan Wrigley: Welcome to the 11th edition of the Jukebox podcast from WP Tavern. My name is Nathan Wrigley. Jukebox is a podcast which is dedicated to all things WordPress, the people, the events, the plugins, the themes, and in this case, the creation of blocks with a plugin. Up until now, we’ve released this podcast each month. But we’re going to move to a weekly schedule from now on. And that leads to a couple of things. Firstly, it goes without saying that there will be lots more podcast episodes, and I would encourage you to subscribe to the podcast so that you can get all of those episodes automatically each and every week. You can do that by searching for WP Tavern in your podcast, player of choice, or by going to wptavern dot com forward slash feed forward slash podcast, and you can copy that URL into most podcast players. Secondly, with so many more episodes, I’d really like to hear from anyone out there who would like to come on the podcast and talk about whatever it is that you do with WordPress. It might be that you’re a developer, a WordCamp organizer, a contributor, a designer, honestly… if it’s about WordPress, I’m keen to hear from you and hopefully get you on the show. Head over to wptavern dot com forward slash contact forward slash jukebox, and use the form there. Once again, wptavern dot com forward slash contact forward slash jukebox. And I look forward to hearing from you.
So on the podcast today, we have Vinny McKee. He’s the creator of the Wicked Block Builder plugin, which is a tool to make the job of creating your own custom blocks, as easy as possible. I’m sure that you know, that the WordPress editor is all about blocks. You can create content and now whole websites with small components, a title here, and a paragraph there.
But the real power of blocks is the way that they can be extended so that they can consume and display any kind of content in any way that you can imagine. The WordPress landscape is moving towards blocks as the way to create and present all the things, and we’re just at the start of this very exciting journey. You can download and try out blocks for almost everything. Some do one thing. Other block packs bring entire suites of interesting blocks to the table. But there’s a problem. Blocks are not all that easy to create. Yes, you might very well be a talented developer who has taken the lead in learning block creation. You burned the midnight oil and got your head around all the complexities. I suspect that it was an uphill struggle. But WordPress’ is mission is to democratize publishing. In an ideal world, not just publishing, but extending WordPress would be something available to the masses. Step in Vinny McKee. His Wicked Block Builder plugin is one of the tools out there that enables you to build your own blocks without the need to understand much of what’s going on behind the scenes. And there’s a lot going on behind the scenes.
Page builders allowed users to create beautiful websites without needing to learn code. Block builders, well they’re doing the same thing for blocks. Today on the podcast we learn about why Vinny built the plugin as well as how it works. What problems does it overcome? And are there any limitations to what you can build? If you’re interested in trying it out, you can find the links in the show notes, head over to wptavern dot com forward slash podcast, and look for episode number 11. And so without further delay, I bring you Vinny McKee.
I am joined on the podcast today by Vinny McKee. Hello Vinny.
[00:04:40] Vinny McKee: Hey, Nathan. Thanks for having me on the podcast.
[00:04:42] Nathan Wrigley: You are most welcome. Now, Vinny is going to be talking to us today around the Gutenberg subject is the best way to describe it and blocks in particular. He has a great deal of expertise in this area and has a plugin which may be of real interest to the people who are listening to this podcast.
This whole episode really was brought to my attention by Justin Tadlock, who on the 14th of January, 2022, wrote a piece called Wicked Plugins Launches UI Based WordPress Block Builder. So be sure to go and check that out. So I asked Vinny if he wanted to come onto the podcast today and here we go.
We’re going to be talking about blocks and building blocks. First question though Vinny, if it’s all right with you, I’m going to ask a more generic question. Would you mind just telling us a little bit about yourself, your history with WordPress and so on.
[00:05:33] Vinny McKee: Yeah. So I’m a freelance web developer and plugin author. I’ve been a freelance developer since around 2006. And I think the first time I really started using WordPress was actually in 2006. At that time, I didn’t really know anything about it really. And to be honest, didn’t even really care that much about it at the time. It was just a way to solve what I needed at the time, which was two blogs for clients so that they could easily create blog posts.
And so then I think it was probably around maybe 2008 or 2009, if I have my timing correct, when I really started using WordPress more and started to build lightweight sites that used it more as a CMS and started to build custom themes for it and everything. And then of course, fast forward to today and I’m using WordPress almost exclusively for all of the clients sites I built or build.
[00:06:27] Nathan Wrigley: Where are you based?
[00:06:28] Vinny McKee: I am based in Seattle, Washington.
[00:06:31] Nathan Wrigley: Okay. So we’re probably going to be talking today around the block builder plugin that you’ve got, and probably it’s going to be the easiest thing to just mention where that URL is right at the start. So the company is called wicked plugins, and you can find wickedplugins dot com easily enough, and from there, you’re going to be searching around for wicked block builder that will enable you to see what we’re talking about today. There’s also a wordpress dot org version. And obviously that’s over at wordpress dot org forward slash plugins forward slash Wicked Block Builder. Each of those words is hyphenated. I will put those links into the show notes and anything else that we discussed today that comes up, I’ll endeavor to put those into the show notes as well.
Tell us why you decided to put all of your bits and pieces into blocks. I know that for many people, this is clearly the future. There’s a lot of interest in this, especially right now. But a lot of people are staying away from it at the same time. What is it that you saw all those months, years ago that made you endeavor to build this solution?
[00:07:35] Vinny McKee: Yeah, I think it’s similar to what WordPress has been great for a long time, which is extensibility. So I think what’s really cool about blocks and what I like about it is that you can extend the block editor by creating your own blocks. And so that gives you a lot of freedom. It gives you the ability to create blocks that are tailored to individual projects. And I think that’s really useful. And I think that’s one area where it stands apart from other ways that you can build a site with maybe a page builder or something.
I know you can extend other page builders as well, but I feel like with blocks and Gutenberg, I like that it’s baked directly into WordPress. And I just think that it’s neat that you can extend it just like you can extend WordPress in other ways.
[00:08:23] Nathan Wrigley: Yeah. I guess the page builder analogy is quite a good one in that if you are a heavy user of a particular page builder, you may well be interested in creating the equivalent of blocks. So app like functionality within that particular page builder. But the issue I suppose there is that it will be confined to that page builder, and so the audience potentially may be limited. Whereas the block based initiative enables everybody with the default install of WordPress to manage to do these bits and pieces.
Yeah. So really nice inspiration. So why did you decide to actually put your elbow to the metal as it were and get stuck into this. It seems that this is a problem of building blocks. It’s tremendously difficult if you’ve never done this before, but equally you could have just sat there and waited for somebody else to build a solution or indeed for that to be no solution at all. What compelled you to create a sort of GUI interface in order to assist people who have the challenge of building their own custom blocks?
[00:09:22] Vinny McKee: Yeah. So what happened is, as I started to use the block editor to build sites for clients, I found myself wanting to create my own blocks. And because I felt that I needed to do that in order to achieve the look and feel and layout and functionality that the designers I was working with wanted for their sites. And so, I felt like I needed to create my own blocks in order to have the control I wanted over the markup and to achieve all those things as far as the look and feel and layout and those types of things. So what I did is I started creating blocks for the sites that I was working on. But what I found is, as I was going through and creating these blocks, I noticed a few things.
One is that, so when you create a block, blocks have two different functions to generate their markup. There’s one called the edit function, which generates the markup that you see for the block when you edit a page and you see your block in the editor. And then, blocks also have what’s called a save function, which is responsible for generating the markup that actually gets saved to the database when you save a page, and then that’s what you see on the front end when you view the page. And so if you want your blocks to look the same in the editor, as they do on the front end and vice versa, which is what I wanted, you have to basically code the block twice. And, you know, even if the markup is almost identical for both views.
And so that was one thing where I noticed it was a duplication of effort and took a little bit of extra time. And even if you want the block to look exactly the same in both of those views, you have to tweak the code slightly. You can’t just copy and paste. And so it ends up being a lot of… it can be a lot of work.
Something else I noticed was that I was spending a lot of time referencing documentation as I was building blocks. So even after I learned how to build blocks, was was still looking at the documentation a lot, because I couldn’t remember things like, okay, what is that control named? If I wanted to add a text field to a block, for example, is that called text control or is that called text field?
And then I would always forget like what attributes those components or controls accepted. So for example, when I would add a drop down to a block, I would forget what the attributes that allowed you to set the options was called options, or was it called choices? And then how did, how did the data needed to be formatted to go into those options?
Things like that. So I still had to spend a lot of time looking at the documentation, even though I had learned how to build blocks. I kept running into design patterns that were hard. So for example, if I wanted to add an arbitrary number of items to a block, something that would be good for a repeater, for example, like adding an arbitrary number of images, or if you wanted to create like a team block that displayed a grid of people where you could sort the people in the block that would take awhile and it was hard to do.
I guess what I’m trying to say is that what I found was there a lot of things that were adding up to take a significant amount of time, and I just felt I needed to create these blocks for these in order to build the sites that I wanted, but that it was too time consuming for it to be economical. And that I just felt like I wouldn’t be able to produce these sites without being able to build these blocks faster.
[00:12:27] Nathan Wrigley: Yeah. This is the problem that we hear about so much is that the move over to blocks really does create a technical debt, really. What I mean by that is, it’s difficult. There’s a new, whole new raft of things that must be learnt, new techniques that need to be acquired, whole systems that you need to put in place in terms of software as well and what have you. And I feel that a lot of people are put off just by this problem. They simply don’t have the time. They’re working. They’re busy. They’re building websites, possibly for clients or what have you. And the time to go out and spend learning is simply not available to them, and obviously in your case, you managed to find that time and create that bridge for yourself and make it happen.
Was that a difficult journey? So going from no blocks, several years ago to the ability to now create not only blocks, but software, which builds blocks. Did you find that journey fraught with difficulty? Was it fairly straightforward? What was your impression?
[00:13:24] Vinny McKee: Yeah, for me, it was actually fairly difficult because prior to Gutenberg, I didn’t really have a lot of experience with React and I didn’t have a lot of experience with a lot of the tooling either that you would use in a React project. So for example, NPM, Webpack, and some of the other tools that we use to maybe set up a React project. I’d worked with it just a little bit before Gutenberg, but not much. And yeah, I didn’t have that much experience with it, and to be honest, I was pretty intimidated by it because that just wasn’t something that I was familiar with.
And so it did take me quite a while to figure out how to learn React of course, but then also I think for me, what was even more challenging was some of the command line stuff and configuration stuff. Setting up Webpack, for example, to be able to compile the project. And I know now there’s ways you can use other tools like WP Scripts.
I also wanted to understand for myself, make it easier, but yeah, at the time, I also wanted to understand for myself, you know, how those things worked, but yeah, it was a challenge. And even today there’ll be weeks where I might spend hours trying to solve a configuration issue with Webpack. Yeah, it was definitely challenging.
[00:14:37] Nathan Wrigley: I think that’s a really valid point. This is not something which is going to be for everybody. If you are of a certain mindset and you have the time available and possibly the skills available, this might be open to you. And then of course, there’s the other people who presumably you’ve built your Wicked Block Builder for, is the crowd of people who perhaps don’t want to go through all of those steps, learning all of those different things. You mentioned React and the build process and all of that. They just simply don’t want to do that. But they would like to dabble in creating blocks, either for themselves, or for their clients. And I guess that’s the tool that you’ve built. Have I got your target audience about right there? Is it people who are keen to build blocks, but don’t really wish to do the learning that might be required if you wanted to do it all by hand, if you know what I mean?
[00:15:28] Vinny McKee: Yeah. I think that’s a big part of it. And that was certainly one issue I was trying to solve was to make the barrier to entry much lower. But I think too, I was also, the main reason I was inspired to build it was actually to save myself time. Even as a developer, I wanted a way to be able to build blocks faster.
And so, yeah, I mean, it’s definitely for people that maybe don’t want to learn React, or set up the tools needed to build blocks from scratch. I also aimed it at developers as well, hopefully make their lives easier and make it much more efficient to create blocks so that when you’re working on a client project, you can spend less time working on some of those other things I mentioned earlier and focusing more on just creating the blocks you need.
[00:16:12] Nathan Wrigley: Okay. Let’s dig into the tool. It is a plugin for WordPress. As we mentioned at the top of the show, it’s available in a free version on the repo and also a commercial version over on the website, which I’ll link in the show notes so that anybody who doesn’t want to hear the URL in the podcast can just find it, but would you just at the outset, just describe the main differences between the free and the pro so that everybody is really clear where that boundary lies.
[00:16:40] Vinny McKee: They’re exactly the same. The only difference is that the pro version has a couple of advanced features. And so the main features that one has, is a repeater component that allows you to add repeating items to a block as well as conditional logic. And then it has a couple of other advanced components as well. But for the most part, the free version has almost everything and you can actually build the exact same blocks.
The only difference would be something maybe like a repeater where if you wanted to have an arbitrary number of links in a block with the free version you had maybe add slots for five links to your block or something. Whereas with the pro version, you could use a repeater so that you can add an arbitrary number of items or links the block.
[00:17:21] Nathan Wrigley: Okay. Got it. Thank you. That’s made it really clear. Okay. So we’re going to try to describe, cause it’s a difficult thing trying to describe what is a graphical user interface on a podcast, but we’ll give it our best go. As with all things plugin, you must install it on your website. And then you’re presented with a range of new menus in the admin area.
Wicked Block Builder is what I’m seeing currently. And you have the option to add new. And the intention is that you go through the tool and at the end of it, when you go to a post or a page, And you click the little inserter, the plus button, you will hopefully have yourself a ready-made block available to be used to put whatever kind of custom data it is that you want to display on your website.
So, with all that in mind, do you want to try, you know the tool far better than I, I’ve really had just the briefest of plays, but did you want to just describe the process that you would go to in order to set up a simple block with some simple attributes and just discuss what kind of things we’re doing.
[00:18:21] Vinny McKee: Sure. Yeah, I’ll do my best. Yeah. Like you said, once you install the plugin, then to create a block, you just go to Wicked Block Builder in your admin menu, and there’s an add new option. So you click add new. And what that does is that opens up the block builder tool, which is just an interface within WordPress that lets you create your block.
And so that tool is organized into six main screens. And so what you see first is the setting screen and the settings screen just lets you enter basic information about your block and configure some things. So for example, you can enter the name of your block. You can give it a description that you can choose, like what alignment options it supports and whether or not you’d like to make it dynamic.
So then the next screen is attributes. And so the attributes screen lets you configure the attributes for your block. And if you haven’t worked with blocks before then, what attributes are a way to store and, or extract data from your blocks. So they kind of hold the data that’s for your block. And so once you configure attributes, which to configure attributes, it’s really just a matter of dragging and dropping an attribute type, a type, meaning like the data type that you want that attribute to store.
So that could be like a string, for example, or, a true false value or a number and array as the other type of attribute. So once you’ve got your attributes added to your block, then the next screen is called the editor view. And like I was talking about before, there’s two views, two blocks, there’s the edit view, which is what you see in the block editor. And then there’s the front end view. In this plugin we start with the editor view and on that screen, what you do, that’s the kind of the meat of it and where you really build the block. And you build your block by dragging and dropping HTML elements and components. So components are things like text fields or drop downs or radio buttons or check boxes or color pickers, anything that you want to add to your block, to allow people to interact with it, to change settings or to input content.
And so what you do is you drag the HTML elements that you want. So like a div tag, for example, if you want your block to be a div and then maybe if you want another div nested inside of it, you would drag another div and nest it inside the first div. And then if you want a rich text control to be able to input some texts, you would drag that inside. You know, one of the divs, but the idea is that you have full control over the markup and, you create the markup however you want by dragging and dropping. And there’s no limits to, you know, what markup you can add that you can put any valid tags in. So what that does is create the editor view and then the next screen is the front end view.
So you have the option of building the output that your block will generate when it gets saved to the database, and what you see when the block is viewed on the front end, when you view a page. However, that screen is actually completely optional. You can skip that step. And if you do then plugin will use the markup and everything that you set up on the edit screen, and will use that as the, for the front end view.
That’s one of the ways that saves you time is you don’t actually have to create those two separate views anymore. You can just create the edit view and then the plugin will use that same view for the front end, if you want your block to look and use the same markup on the backend and the front end.
And then next is the sidebar screen and the sidebar screen works similar to the previous two screens. It lets you drag and drop HTML markup and components, but it puts all those things in the block sidebars when the block is selected in the page editor. Yeah, once the blocks selected, then whatever HTML and components you add to the sidebar appear on the block sidebar on the right hand side.
And finally there’s a style screen. And that’s just basically a CSS editor that lets you put in CSS for your block. It’s completely optional. You don’t have to put any CSS there. You can, you know, enqueue CSS like you normally would through your theme or through a plug-in or however you’re most comfortable with it, but it’s there for people who want a really easy way to include CSS for their block.
And that’s kind of the process of building the block and then you hit save. And from there, you should be able to add it to a page.
[00:22:38] Nathan Wrigley: I’m going to, to sort of run over a few of those bits and pieces. And I’m going to draw an analogy for those of you who have used a tool like Advanced Custom Fields or Metabox or something like that. The similarities here are fairly striking to me in that the attributes that the sort of fields that you might create, so for example, you would like an image when you need an image attribute, you might need like a number attribute or a true / false, like you said, and you can set all of these different things up and then you move on to the next area.
And as Vinny was just saying, this is how it’s going to look when you’re user inserts it, what is it going to look like to them as they’re actually creating the block? And then interestingly, you’ve got the front end view. That’s what it will look like once it’s complete and you’ve published it and it’s visible to the world.
And then, like you said, there’s the sidebar so that you can modify all of the settings that may be associated with that. And then obviously the style. So I think if you’ve used Advanced Custom Fields or Metabox or something like that before, you’ll be very quick to the party. You’ll learn how this works really quickly.
I have to say having had the chance to play with it a little bit today, I went through the three step… building your first block tutorial, which I found to be really straightforward. Probably took me about an hour, I would say. And I was able to follow along with the steps and I had a completely functional block, fairly straightforward example. It has an image, it has a title, some text, and then ultimately there’s a button, depending on what text you put in that button appears. It doesn’t do a lot, but it’s a really nice way to get going. So I would say that if you’re confused by any of this, go and look for the support documents that Wicked Blocker Builder guide, and you want the building your first block section.
I think you’ve done a really great job of explaining how it all works there. Well done.
[00:24:31] Vinny McKee: Thank you.
[00:24:32] Nathan Wrigley: So the backend then handles all of that. I’m just curious. Is there any situation that you can imagine where the editor view, what it is that we’re doing in the backend to actually create the block on our website, where you would like that to be radically different from the front end view. Perhaps the editor view is going to be much more basic and stripped back. And then ultimately the view that people see on the website is going to be a bit richer. I’m just trying to figure out why those two sections are separate.
[00:25:01] Vinny McKee: Yeah. So I think part of it could come down to user preference and then another part of it might just depend on block output, starting with user preference.
It’s possible that some users might just have a preference where in the editor view, maybe they want almost more of a forum based approach to inputting the data for the block. So rather than displaying a rich preview of the block, maybe they just want to way for clients to input data. But then on the front end, of course, you know, it needs to be formatted properly or the way that they want to look. And that might be one example where you would create a separate view for the front end versus the editor view. I think another example is where maybe you needed the market to be different. So for example, say you want to create a grid, a block that displays a grid of, logos for example, and you want each logo to be linkable, and this might be a contrived example because there’s probably other ways that you could do it as well. But just as an example, let’s say you wanted to create a block like that, and you could, in the end of their view, add like an image component that would allow you to select an image for the logo. And then you could add a text field that would allow you to enter the link for the logo. But you may not want to wrap the image component within a link in the editor view because you don’t want it to interfere with being able to select an image, and when you’re editing the blocks. So maybe you want to tweak the markup for the front end. So then on the front end, it would actually wrap the image within a link element, if that makes sense. So that’s another example. And especially with the free version, because there’s no conditional logic, that would be one way you could achieve altering the markup.
[00:26:40] Nathan Wrigley: Actually, the more I think about it, the more that I can imagine situations where the two might be really useful to be separated. So I’m just at the minute been looking recently at real estate agent websites, and it might be quite useful if you had a block to do with a house and you were uploading all of the bits and pieces associated with that house, particularly the images. You might want those images to display in a really full on way on the website, large colorful, and what have you, and you may just want the thumbnail on the backend so that you can see that something has been uploaded, but you don’t as the person maintaining that block, you don’t actually need to see them in all their glory. But the person coming to the website, who’s thinking about buying that house would probably wish to see them in all their glory. So yes, I’m making in roads into what you’re thinking there, I think. Is that the right idea there?
[00:27:26] Vinny McKee: Yeah, exactly. That’s a great example. And I think similar to that, something like maybe a slide show or like a hero section where maybe it displays just one image, but changes on page reload or something. So on the front end, you really only see one image, but on the back end, you need to be able to add multiple images, but you might want to way to show which images are selected. So you might display those images in the block, on the back end, but then on the front end, you would only see one image at a time. But yeah, the example that you gave to you, I think is, perfect.
[00:27:54] Nathan Wrigley: Yes. So the tool itself is a very much a drag and drop tool. You’re dragging in components that you wish your block to have, be those images, text fields, buttons, what have you. Imagine you’re building up these Lego bricks to make your block.
There must be a little bit of understanding of various bits and pieces of web technologies. For example, I would imagine you at the very basic you would need to have some understanding of HTML in order for this to work. Is there a bare minimum set of things that you need to be able to understand, to make basic use of the plugin?
[00:28:29] Vinny McKee: Yeah, like you mentioned, I think you have to have a decent understanding of how HTML works and how tags are nested, because you do create the markup yourself in this plugin, it is drag and drop, but yeah, you do have to kind of understand how markup works and then to understand some of the attributes that certain tags support in that case block attributes, but you know, HTML attributes that are added to a tag in case you need to configure those. For example, if you want to add a simple anchor link to your block, you would add an a tag, and then you might add an href attribute. But if you haven’t worked with HTML before and don’t know that’s what’s required to create a link, then yeah, you might be a little lost or that might be a little challenging.
And then too, I think, to get good results, you do have to know some CSS because just adding, you know, most blocks I would imagine that you want to have some styling. And so, you know, in theory, you could just create a block that’s unstyled that allows you to input some content. And then of course it could output it on the front end, but without any styling, you probably wouldn’t get the best results or the results you want.
So I think it does require a little bit CSS knowledge as well, although I think, you know, you can get pretty far with just very basic CSS. So there, I think it just depends on how far you want to take it.
[00:29:45] Nathan Wrigley: Yeah, if you want something functional, which works, you can probably get away with minimal CSS, but if you want it to look nice, then yes, there’s going to be a little bit of a learning curve there. So I guess caveat emptor, if you are going to be looking into this plugin, there is a little bit going on.
Now, as with all tools that make something as straightforward as this does, I’m curious to know what’s going on in the background that you are relieving us the burden of. So for example, I’m adding in my attributes and that literally is a two second job. I basically click a button and add an attribute and then give it a name, an attribute name, something that I can remember and use later. And I can do that, and I could probably put five or six different attributes into my block in the space of just a couple of seconds really. Again, the same would be true with the editor view. I’m able to create all of those bits and pieces and link them up to the attributes that I made. What complexity are you stripping away? What difficult things are going on in the background? Now it may be that there’s too many to talk about, but I’m curious as to some of the challenges that you’ve stripped away.
[00:30:51] Vinny McKee: Yeah. So, I mean I think one challenge is just the whole build process that’s involved with creating blocks from scratch. So, because you’re using a plugin, it’s going to, based on how you build the block, it’s going to generate that block for you. And so you don’t have to worry about, you know, any command line stuff or knowing JavaScript or knowing React any of those things because you’re creating the block to the plugin.
So I think that’s one big thing that it addresses. Things like the attributes, it’s not hard to add attributes to a block when you’re building from scratch, other than takes a little bit of time to just to code them. But it does make it a little bit easier, I think, to be able to do it through an interface.
Something else it does as well is if you’ve created a block from scratch before, you’ve probably run into this where if your block is, let’s say you create your block and then your block is used on some pages and then say, you need to make some changes to the markup of the block. What happens is if you just make those changes to the block, you’ll actually, the next time you go to edit a page, you’ll see an invalid content warning, which is kind of scary because it looks like the block is broken and it doesn’t display correctly in the editor. And so in order to avoid that, you actually have to create a deprecated version of the block and then behind the scenes, what WordPress does, is it migrates the markup from that block that was previously added to the page, to the current blocks version or markup.
What Wicked Block Builder does is behind the scenes. Anytime you make changes to your block, it automatically creates a deprecated version of it. So that in the next time you go to edit a page that already has that block, it won’t display an error. And then there’s some other things too, like I was talking about before, how you can just create the edit view, and if you want to look the same on the front end, you don’t have to worry about that. It’ll just create the front end view based on the edit view that you created, so.
[00:32:45] Nathan Wrigley: Yes, I was quite pleased in the tutorial that you did that, just simply putting the CSS in and missing out the front-end view step altogether. Still the block looked great because, presumably it was working on what you’d put into the edit view and the CSS that was there, which was about 50 lines or something like that, made it look really nice.
Okay. So I guess the offering that things like page builders brought to the table is that it makes things much easier. Some people are critical of things like page builders. I’m sure there’s many other things that we could point the finger at, but you get the idea, because they say that the code that is output on the front end of the website might not always be the most optimal. And I guess this is one of the features that Gutenberg has, one of the poster features is that it creates lean code. I’m just asking the same question of you. The way that your building blocks, do you have anything to say about, does it create a block that is streamlined and optimally built or have you had to make concessions in order to achieve the sort of GUI aspect of it? In other words, if I knew everything there was to know about building blocks and I did the same block by hand, and then did it through your tool, would there be a noticeable difference in either of them?
[00:34:06] Vinny McKee: Yeah. So I can’t think of a notable difference offhand, other than instead of the block being pre-compiled the block is generated on the fly when it’s used in the editor. It creates a native block, and so yeah, whatever attributes you add, those are all translated to the attributes that you would code by hand. It only outputs markup that you add to the block. The only exception to that is for the components that you add. So if you add like an image component, for example. There’s a little bit of markup that it adds in the editor view to handle being able to select the image and display the image. And then of course, when it’s saved on the front end, if you don’t output or if you don’t specify specifically how you want the output to be for that front end view, then the image component will automatically generate an image tag. But yeah, for the most part, it only puts out whatever markup you define an add to your block, but yeah, as far as how the block functions and works. It’s identical to a native block. It just happens to be generated on the fly when you edit a page as opposed to something that’s compiled ahead of time.
[00:35:17] Nathan Wrigley: Yeah. Thank you. That’s a good answer. In terms of where this is all stored, one thing that’s coming to my mind is if I am an agency owner say, and I have a niche, let’s go for real estate, as we were talking about that a moment ago, and I’m building several websites every month. And I put a lot of work into creating a block with your tool. Is there a way that I can use these on a multitude of websites? Is there an option to export a block and then import it onto a variety of different sites? How does all that side of it work?
[00:35:51] Vinny McKee: Yeah. So that’s actually a really good question. At the moment in the plugin itself, there is no way to export and import blocks. However, those blocks are stored as a custom post type. And then the data for the block itself is saved in a post meta field and a json object. And so you can actually because it’s just another post type you can use WordPress’s default export functionality and export them that way, and then import them using the WordPress importer tool. Of course, important export is something that we have in the roadmap and something that I plan to add to the plugin. But yeah, right now it doesn’t have that functionality built in, but you can achieve it through the WordPress tools.
[00:36:31] Nathan Wrigley: That’s great. We’ll come back to the sort of roadmap, cause there’s a few items which I think are worthy of discussion and we’ll do that in a few minutes time. Staying with the actual plugin and how it works currently. I’m interested, you mentioned about things like conditional logic. I know this is getting into the territory, I think of the pro version, but nevertheless, would you just describe what that enables you to do? What kind of conditions are we able to display our blocks on?
[00:36:57] Vinny McKee: Yeah. So if you’ve ever used a form builder and wanted to, you know, only show a certain field, if another condition is true, that’s essentially what conditional logic allows you to do.
And you can apply these conditions to all sorts of things. So the way it works is when you add, for example, an HTML tag to your block, it’s actually, all of the parts of the tag are broken up. So you can add like classes in line styles, attributes to that tag. And because they’re split up that way, you can actually add conditions to each of those things.
And so what that means is say, for example, you want to add, conditionally add a class to a block, say for example, you have a block where maybe you want to give an option of you have an image on one side and then text on the other side and you want to provide the option to swap them. So by default the images on the left, text on the right, but you have an option to flip them. So that text is on the left and then the image is on the right. Yep. Let’s say you add it. You create a class that changes that layout. So what you can do is you can add that class to the block. It says image on, right, but instead of always outputting it to the block, you can add a condition that says, okay, only add this class if the option display image on right is checked.
And so, so that’s an example, and then you can also use it to conditionally output tags. So what I was talking about before, where maybe you, you don’t want to output an image wrapped in a link tag on the back end, but you do on the front end. You could add some conditional logic to the tag itself and say, okay, only I’ll put this tag, you know, if this is true, or, and then there’s also conditional logic to show or hide things based on whether or not the block is selected in the editor. So things like that.
[00:38:41] Nathan Wrigley: The brain is ticking over all the different possibilities there. That sounds really ingenious. One of the things that I always thought would be nice if I were a plugin developer, which I am not, is it would be nice to see my plugin out in the wild being used by people and the curious and interesting ways that they can implement the plugin. And I’m wondering if you have any little anecdotal tales of people who’ve used your plugin and remarkable things that they may have done with it that perhaps you didn’t anticipate.
[00:39:10] Vinny McKee: Yeah. That’s a good question. I don’t know that I have any yet, because I just released the plugin in November. And so it really, yeah, I don’t know that I’ve had anyone reach out with any particular ways that they’ve used it. I guess I’ve had maybe some questions about how to do some things that I hadn’t thought of before. And so it made me realize that, oh, okay here’s another way that people might want to approach things.
[00:39:35] Nathan Wrigley: To be fair, I didn’t realize it was as new as that. So yeah, that’s absolutely fine. Like I said, right at the top of the show, there is a different pro version. The pro version, we won’t get into the actual pricing because it may be subject to change who knows, but there are three options. You can go for single site license, a 10 site license and the unlimited site license. So three different options. Of course you can. If you’d like stay on the free wordpress dot org repository version. That’s absolutely fine.
The last little bit, just before we tie this off is the roadmap. And obviously you’ve had some feedback. You’ve just described some of the things that have come back to you from your customers. Apart from the import and export which we talked about already, what are you hoping to be adding in the near term?
[00:40:20] Vinny McKee: Yeah. So in the near term, one thing that’s been requested multiple times or quite a bit is the ability to assign an icon to the block. I’m planning to add that in as well as, there’s also been requests to add more options as far as, so blocks what’s called these support features or these support flags where you can say, okay, this block supports something like an anchor so that you can in the block sidebar, you can add like an anchor and that’s something that’s kind of WordPress adds automatically, if the block says that, okay, I support this or things like topography, you can have font size and line height support, or you can add spacing support for things like padding and margins. So just adding some more settings so that you can enable those things for your block. And then of course adding more component types. So right now there’s all the basic ones you would expect, but then adding some more, like for just more component types. So you have more options of how you build your block. And then I would also like to add an ability to save the blocks as a json. So to like a folder within your theme or wherever you decide. The blocks when you create them in the interface, they would get saved to the database like they do now, but they would also get saved to a local json file. And so that way developers could commit their blocks to version control so that they kind of have so that they can version control their blocks. And that’s kind of what I’m hoping to add in the near term.
[00:41:43] Nathan Wrigley: Just something which has occured to me just as you were saying those things, there’s an increasing commercial marketplace for blocks, not as is the case with yours, the block builder, but the blocks themselves. There might be a marketplace for relatively inexpensive blocks, which do a single thing and do it really well.
And I was wondering if there’s any possibility from your plugin to commercialize the blocks that you make? I don’t know if that’s possible, even something you’re giving any thought to, but if I spend a lot of time creating a block that’s incredibly complicated and it has some value, with your tool, would there at any point ever be options to pull that out and make it available commercially.
[00:42:27] Vinny McKee: So I think the challenge right now is it in order for it to work, you do have to have the plugin to generate the blocks. So if you create the block and then export it and import it on another site, it’s only going to work if you have the plugin installed. I do think it would be really cool is if there was a way to actually export the block code. So that you could just import the block without having to have the block builder plugin installed. But I also think that’s a fairly complicated feature to build. So probably not something that I’ll be able to add soon, but I think if that were available, then yeah, there would be a way then that you could create blocks using the tool and then publish them and be able to distribute them without having to have the plugin in order to use the block.
[00:43:13] Nathan Wrigley: Well, thank you very much for joining us today and talking about your fabulous tool, Wicked Block Builder. As I mentioned, there will be links in the show notes down below to the repository version, as well as the Wicked Block Builder website as well. But Vinny really appreciate you coming on today.
Just prior to ending, if people are curious about what you’ve talked about today and wish to reach out to you, what are some of the best ways to do that?
[00:43:40] Vinny McKee: So, you can find me on Twitter @wickedplugins, or you can also contact us through our site at wickedplugins dot com.
[00:43:48] Nathan Wrigley: Thank you very much. I appreciate you joining us today.
[00:43:50] Vinny McKee: Thanks for having me, Nathan.
Aysenur Turk had a number of appearances on this year’s Top Hearted of 2021, including #1! In this podcast, I get to catch up with her, find out where she gets ideas and inspiration, how much time it takes to build something like her amazing layouts, and what her favorites are.
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.
The post 352: With Aysenur Turk appeared first on CodePen Blog.
Like most fast-growing companies, LinearB spends WAY too much time trying to hire developers.
So when we came across a brilliant article about hiring autistic talent, we knew we had to have its author Matt Nigh on the podcast. Matt is one of the most prominent thought leaders on neurodiversity in the workplace.
As you read this, CodePen is 100% on PostgreSQL for our main relational database. It was a transition that took a couple weeks of pretty intense effort, and lots of planning and prep before that. I’ve got Alex on the show to talk about it, as he was the main instigator and led the effort, but everyone contributed in some way.
Wondering why? Well…
There is a lot to talk about here, so we get into all the nitty-gritty detail, including how we pulled it off with near-zero downtime and the tools involved.
WooCommerce is eCommerce for WordPress. It’s powerful software in that it can do anything you could ever want to do in selling online. You can sell physical products. You can sell digital and downloadable products. You can sell memberships or tickets or appointments. The sky is the limit. I’ve used it personally for all those things and have had a great experience every time.
The post 351: Moving to PostgreSQL from MySQL appeared first on CodePen Blog.
Building a platform that 100,000 devs use every day is no accident, but it can happen (almost) overnight.
Daily.Dev is the fastest growing online community for developers to stay updated on the hottest developer news, and their mission is to build the home page that every developer deserves.
It’s back! We counted up all the hearts given to every Pen created in 2021 and created a list of the top 100. Marie and Chris chat about this year’s list. Who’s on it, what’s on it, and digging into the numbers where we can.
Remember that people can heart pens up to 3 times each, so if it looks like a Pen lower down the list has more hearts than one higher up the list, it’s because of the density of hearts. The number you see on the card only reflects the number of people that have hearted not the true number of hearts.
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="313"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>)
Lots of folks hitting multiple times. George Francis hit 6(!) times (7, 28, 59, 75, 80, 82), an impressive feat for a member who only joined in late 2020. Four people with four placements: Aysenur Turk (3, 11, 14… and 
1), Yoav Kadosh (17, 33, 72, 95), Dilum Sanjaya (22, 24, 64, 65), and Aybüke Ceylan (38, 46, 63, 91), and a couple of 2-position people. Woot!
“Full page” layouts were quite a trend on the Top 100 this year. That is, Pens that look like complete websites with widgets and cards and navigation and sidebars and the whole nine yards. That’s opposed to some past years where more minimal small-yet-surprising Pens were more dominant in the Top 100.
Advice for those shooting for the top? Talk about your work. Almost nobody on the list creates work and then never shares it. Share it on social media, blog about it, make a video, re-promote it multiple times. Be part of the community by liking other people’s work. Remember, your hearts come from other CodePen members. Also, feel free to update and revise your Pens. Many of the Top 100 are updated and improved even after their initial wave of popularity.
Did you Netlify offers auth? They call it Netlify Identity. Why would you need auth on a static site? Well, a static site can also by quite dynamic, that’s the nature of Jamstack. Say you’re building a TODO app. No problem! You can have users sign up and log in. You can store their data in a cloud database. You can pull the data for that user from the database based on information about the logged-in user because of Netlify Identity.
The post 350: 2021’s Most Hearted appeared first on CodePen Blog.
We knew we had to kick off the new year with something big - so welcome to Season 2 of Dev Interrupted!
This episode probes the murky depths of a time before the pandemic by exploring the story of LinearB's founding in 2018, how co-founders Dan Lines and Ori Keren met at Cloudlock in 2012 - and how they decided to co-found a company while 5,000 miles apart.
Olivia Ng has done loads of wonderful work here on CodePen and off (check out her super cool travel bucket list site) She got started just out of pure desire to build things. “I just really like the internet” she told me. Hear hear! Her eye for design takes all her work to the next level. She had a particular focus on grid for a while there, and used those interesting designs to teach it. Also find her on Twitter and on her personal website.
There are lots of reasons to look at Jetpack for your self-hosted WordPress site. One of which is the powerful search upgrade you get just by flipping a switch. Say you run a lot of WordPress sites, perhaps for clients as an agency would, now Jetpack offers a Licesning Dashboard for managing all the Jetpack subscriptions so that becomes a lot easier.
The post 349: With Olivia appeared first on CodePen Blog.
It's finally here, the end of season 1 of the podcast is upon us! To celebrate, Santa is bringing something special - entrepreneurship advice for all the would-be founders of the world, ages 1 to 92.
Brian Singer, co-founder & CPO of Nobl9, sits down with Dev Interrupted to help us close out season 1 with a conversation on what it takes to found your own company. Having founded a pair of companies, one of which he sold to Google, Brian has a deep understanding of what it takes to successfully found and scale a startup. More than that, he knows what VCs are looking for.
Jhey Tompkins is one of the most prolific CodePen creators out there! Find him as @jh3y on CodePen and @jh3yy on Twitter. His creations tend to have a twist of whimsey while being beautifully designed as well as pushing the platform in unique ways. You’ll always be surprised at a Jhey Pen! I talk with him about the creative process, problem-solving, and sharing what you learn.
For companies of all sizes, Notion provides one central and customizable workspace that can be tailored to fit any team and bring all teams together to get more done and move faster. Notion is an all-in-one team collaboration tool that combines note-taking, document sharing, wikis, project management, and much more into one space that’s simple, powerful, and beautifully designed. Find out how Notion may be the missing piece your team needs to grow, get more done, and delight everyone who uses it in the process.
The post 348: With Jhey appeared first on CodePen Blog.