Supper Club × Fabian Kägy - Modern WordPress - Blocks, Page builders, Headless, Custom Fields

Welcome to Syntax.

Today, we have got Bobby and on today to talk about WordPress in general. Modern WordPress, where it's at, like, should are people still using it? Is it What parts do people not know about? Lots of people have tried WordPress 11 years ago and think that it's exactly the same as it is today.

So Fabian this is actually a funny story, is that Fabian sent me, like, a DM, and he's like, hey, I work at 10Up, which I'm very familiar with 10Up. I've I've trained a bunch of their employees 1 on 1.

They've been buying my courses for years. And 10 Up is like a A big agency company, I'll let him explain, in the WordPress world and does a lot of the big stuff. So thanks so much for coming on, Fabian. Thanks so much for having me. Excited to be on. Let's,

give us a rundown. Who who are you? What do you do? All that good stuff. So my name is Fabian. I, work For 10 up, as you already mentioned, as an associate director of editorial engineering, meaning, essentially, I spend 50% of my time on actual client projects And then the other 50% on helping the rest of the team level up with modern WordPress development and curating and creating editorial experiences.

And about 10 up in general, 10 up is a large agency with about 300 employees That operates mainly in the WordPress space and has kind of its roots in the WordPress space. Awesome.

Why is it That that you wanted to come on and and sort of talk about the stuff. It's it's funny because we get we get lots of people asked to to come on and Almost always the answer is not not that we're like like snobs or anything like that, but, like, honestly, what WordPress looks like In 2023 is very interesting to me. You know? Like, it's still such a big part of the web. We we talked about it. So What are you interested in in modern WordPress these days?

Yeah. Exactly. For me, it was I always listen to syntax, and WordPress comes up here and there.

And in the last 5 years or so, WordPress has changed quite a bit, and, that is why I felt like, hey. We can chat about some modern WordPress stuff. And as just a couple of numbers for WordPress itself, It is still huge. It is it does power 43% of the, kind of, top 1,000 websites or of the web in general.

And since WordPress version 5 point o, which released December of 2018, I believe, The actual editing experience in the WordPress admin is powered by React. And in version kind of 6 Point o, 6.2, which will be released in 2 weeks.

It will run WordPress it will run React Version 18 in concurrent mode and is a very modern, large scale React application and powers so much of the web. I remember back in the day,

well, I was doing a lot of WordPress sites for an agency. The whole local flow is to have something like MAMP or XAMPP or any of these, local servers to run a PHP server, MySQL.

You add the database, and then you install WordPress locally.

Has the local development flow at all changed? Has it has it gotten,

a little bit more streamlined, or what what does it look like in 2023 to spin up a local WordPress site. I would say it has gotten streamlined quite a bit. It is, like with most things, a dockerized workflow most of the time. So either you're on A CLI tool that spins up your Docker instance, the WordPress team itself maintains one tool called WordPress e n v, which is an NPM package that you can install, and there's a j JSON config file where you configure kind of your WordPress installation.

And it handles all of the dockerization for you, so you don't need to interact with Docker yourself. Oh, nice. There are also UI based tools. Like, I know, WP Engine maintains local WP, which used to be local by flywheel, and that is one of the most popular tools, which just has a UI to allow you to spin up a WordPress instance, and I think most of the installs are somewhere between those two

Options. Okay. I remember Flywheel. Yeah. Yeah. When I was teaching WordPress, what, 8 years ago, we were all using mostly just using Flywheel, getting people because even before that, 12 years ago, we would have everyone install lamp and map. And I just remember praying the freaking Yellow light would turn green when you restart the process. Just looking at it.

And, those things are are mostly in the past because Windows dev has gotten a lot. It was always a big pain on Windows.

Tools like MAMP and doing your own Nginx config are are still there, but it's Not nearly as necessary. It's nice to throw it all into a Docker image. Let's say let's let's ask the question. It's like, why do people still want to use WordPress these days. You know? Like, why are your why is 10Up, a company with 300 developers, able to get so much business. Like, why are people still asking for WordPress as a CMS and as a a theme builder? One of the main reasons why WordPress is still getting chosen so much for sites. It's just that

it is such a large player that folks are familiar with. It gives you an editorial burns, and it gives you an experience that you may already be familiar with regardless of whether you used it before on a different project or, even on a different employer because it's so widespread, many folks are familiar with it. And even if you kind of are not the developer, You have used the interface before, and you kind of know your your way around it. Also, it being open source and it having been around for so long. There is just this huge ecosystem of plug ins and, extensions that build on top of it, and That allows for very kind of rapid development, but also a very rich feature set without necessarily having to build everything custom. Yeah. Honestly, that's That's the killer thing with WordPress is that you

that huge ecosystem of there's literally a plug in Where everything is very hard to to move. Like, if you think about, like, what are the alternatives to using WordPress is, one alternative is just Build it yourself, use some sort of headless CMS, Prismic, Sanity.

There's a 1,000,000 of them out there. I think I was gonna talk to Scott, Like, we need to do some sort of, like, CMS round up once we're done all these Yeah. JavaScript framework round ups. And you gotta like, you wanna To sell tickets, you gotta book it yourself you gotta build it yourself or use some, like, $14 a month, plug in. Or the alternative is go with a, Like a a page builder, like a Wix, or Builder IO, or what are the other ones? Say what's the Squarespace. That's the one. Squarespace. Yeah. It's it's kinda interesting that there's such a huge ecosystem of mostly free. I know you have to pay for a lot of the stuff. But even then, a lot of the licensing options in WordPress plugins are very favorable developers, you know, like you pay once or you have to pay you can pay yearly but you can unlimited sites and whatnot. It's really nice. So like when people are building WordPress website. Are most people still using the theme for the front end as well? Because that is the the downside to doing like a Reacting is if you want, like, a plug in, you need the front end UI for it as much as the back end for it as well. Yep. So That is something that is

in the midst of changing right now. Yes. WordPress is still using themes for a lot of the stuff or for the majority of things.

You can also use WordPress for headless installation. WordPress has a very powerful REST API built in that is easy to extend that You can leverage, and that also gets leveraged by WordPress itself for pretty much everything these days.

So The back end of WordPress already is essentially a headless installation of the editor that just talks through the REST API with the rest of WordPress.

And for the front end, some projects do use headless approaches, but the majority of them do still build custom themes.

But the way that themes get built has changed quite a lot in the last 5 years and even more so in last 1 year or so.

The majority of themes Do kind of the traditional WordPress themes where you have your kind of different index PHP, Front page PHP. There's different PHP templates that contain contain all of your render logic, essentially.

That is still there, but because of the block based editor that is is very similar to what we recently heard in one of the, like, latest episodes about Builder. Io is Mhmm. Kind of a block based editing interface where all of your different components throughout the entire site are individual blocks, And those blocks can be rearranged however you want to use them,

and that kind of gives you that flexibility that not so much is stored in the actual hard coded templates anymore, But instead it is built in these different blocks. Oh, I was gonna ask about that. So the way that most people are doing it is they're Essentially, WordPress is now like a page builder with the the block UI. So for anyone who's not used it, you can You go to an about page, and instead of just having you get 1 text area to put everything you want, and you have to make custom fields if you want for that thing. You can just say, Here's your builder. You can add, drag and drop your different blocks that you want, 3 people, a map, 6 products.

And then the developer on the flip side will say, okay, well, for every block that I've have in my website, I'm going to then create the corresponding PHP, HTML, and CSS for that specific block. Is that how it works?

Kind of. So Okay.

Yes. There are the different blocks, and the different blocks do ship with their default markup and default styles.

Changing the front end rendering of the actual blocks, changing the markup of that is something that You can get into, but it's not super recommended.

Styling wise, yes, a 100%, and there are additional things that You can use that will help with that. I'll go into that in a second.

But regarding the actual blocks, Yes. You can use all of those core blocks, which there are, I believe, 40, 50 ish of those different blocks that you can use for Wow. Building your content.

Yeah. Or you can build custom ones, or you can rely on the plug in plug in e ecosystem to provide those Custom things. So there isn't a map block, for example, in WordPress core, but there are many different map blocks out there, or you can build your custom map block if you wanted to use it.

And then regarding the styling layer, there also is A mechanism in WordPress now called theme JSON, which is essentially, a design token system, right, built Right into WordPress, we're using that 1 JSON file. You can configure the overall aesthetics, colors, spacing options, topography options of your Overall site. And then those are the default values or those are the available options that you have in that editor for all the blocks, And that is what you can then use to build the entire site. Nice.

Like, what like, what kind of like, you would put a color in the theme JSON, and then the The user on the back end could say,

I want this text to be that specific color, or is this is this something else? Yep. So the theme JSON file Consists of 2 different sections. There's the settings section, and there's the style section. And in the settings, you can provide different kinds of presets. So you can define your global color palette, and then those are the colors that show up in all of the different color pickers throughout the entire site. So So if you wanted to change your heading color, you can predefine the various colors that should be available there.

And then you can also Override that palette on a per block basis and kind of say, hey. I want these 3 colors to be available for this block, but these 5 other colors for that other block. There's the style section where you can actually define the pre the default values for any one of those things. So you can say, hey. By default, I want my heading to be red,

But the editor should be able to change it to green or blue instead, for example. Oh, that's super handy. I I always I had a bunch of PHP code When in my starter WordPress theme, that would take all the tiny MCE colors away and that only put in the loud colors because there's nothing worse than, like, giving a website To a client. And then before you know it, it's freaking Verdana justified in, like, teal. You're like, come on. You're dealing it. Lower. Yeah. It is Beautiful website.

Yeah. Totally.

What what are your, thoughts on headless WordPress nowadays? You know, I I think Headless was, like, really exciting when it first dropped. It's like, oh, we can use WordPress and our our front end tools outside of, you know, any other context.

But In practice, it's always felt a little rough. How how do you feel about headless overall, and do you have any, tips and tricks for making headless a more seamless experience?

I, myself, have not had a chance to work on too many different headless builds. And I'm I'm not entirely convinced that it is always the right thing For kind of the type of sites that I'm working on, I have seen folks build beautiful and very cool Things with headless WordPress sites and headless sites in general, the thing that the reason why I, myself, Have so far not been super interested in in it because is because if you are still using kind of that CMS to manage all of your content and you want the editors to have that kind of rich editing experience that kind of resembles the front end, Then it becomes so much more difficult because now you have to manage your components in those 2 different places.

And if you are providing all those different options to change the layout in the editor and to have all those kind of have that visual editing experience, then I kind of I think there are too many trade offs with it still. That being said, there are other teams that turn up even that build many headless sites that kind of use a Next. Js stack or, I've also seen a Remix implementation of just using the WordPress REST API or using GraphQL plug ins to then use blocks in a headless world,

but I'm I'm not the specialist on that area. Yeah. Yeah. In my experience, it it that disconnect where, you're unable to now take advantage of many of the The reasons why you'd wanna use, like, a rich editor like that then goes away. And it it becomes a little tough because you have to kind of build on every Connection in every option. That's in my experience, it's never been super, super robust in the terms of the way that I like to build things, but, you know, it is interesting to know that some people out there are doing the, you know, big projects in this type of thing. It'd be interesting to know exactly, like, What's the use case where it really shines first? What's the use case where you're better off sticking to a a standard WordPress flow? Right? Yeah. I think one of the

Real differences, once you consume your data in more than 1 kind of presentation layer, once you Start using WordPress as your CMS for both your mobile applications and your website.

That is where, probably, a headless approach and not A fully visual editing experience makes more sense because the data gets represented differently in different kind of scenarios anyways.

But for the strictly speaking website experience where you're editing just the website and you have that those visual options of the website available. Yeah. I'm I'm curious

how many people are using WordPress or or what you see outside of just websites, you know, because WordPress Has a GraphQL API, has a REST API, can has users and permissions, and you can extend it to your heart's content is, like, it Literally can be anything, and it is a pretty significant player in the e commerce space. But then, like, there's other Ticketing and I will forget the name for all these. But just basically, like, are people using WordPress for applications? Should they be using WordPress for applications? Given that it could be just a a back end API and editor?

Are they yes. Of course.

With A thing so large as WordPress, there there's probably somebody out there doing all kinds of things with WordPress. And, yes, I am also somebody who defaults using WordPress for a lot of things because I just know my way around Kind of how to work with it how to work with it is just purely a back end, not rendering anything, but just using the API and essentially talking to a database with it. But there are better tools for some of these and that, yes, you can do a lot of things. That doesn't mean you should always use it for everything, But it is impressive what you can build with it. I have used it for all sorts of crazy things, but I'm not sure it's always the right tool to use for all those things. When you use a tool that is purpose built for something, that also has a lot of benefits. For example, Last year, I was looking into ways in which I could build a documentation site for a lot of this Gutenberg stuff Mhmm. Or a lot of this kind of block editor stuff.

And I chose to build that using DocuSARs, the kind of tool maintained by Facebook, Because I wanted to have markdown files in a Git repository so that everybody can easily contribute to it. And, yes, you could have built the same thing in WordPress, But then everybody who needed to change something would need to create their own account or something. And so I'm always a big fan of using the right tool for The right type of thing.

And for me, I like using WordPress for editable websites,

But, yes, you can certainly use it to do more than that. What is what is, like, Git and version control flow look like in in a modern WordPress system? I I I'm from, like, more of a Drupal background. And I remember in in the Drupal world, we ended up having to have plug ins that would essentially write to files That would write your configuration to files. So that way, when you did a migration that the Git could bring those files up, Then you could run the migration with those files.

And it always seemed like that was, like, a huge, kind of pain.

But in WordPress, so many things are stored in the database, that that's a bit of a mystery to me. Like, what does it really They look like they have, like, a version control system in WordPress these days. The majority of things

I work on are using A standard Gitflow that you would expect for any other type of projects where you have your kind of main branch, pre prod staging environment, and then different Feature branches or fixed branches for whatever you're working on. And then a lot of things we're using GitHub for, and so we have GitHub Action GitHub workflow configured to automatic to automatically just use rsync or some other agents to just publish the changes, and there is, some Webpack builds and things that all happen in CI.

Until all of the build files for your plug ins, themes, all of those things just get pushed to the various servers depending on what branch you kind of push to.

And then regarding the actual database things, the majority of time, the way this works is most standard sites have Three environments. There's the actual life site, a staging site, and a development site.

And we do Code deployments kind of into the various, environments, and usually, The database does not really get migrated. So we just migrate the database down from production to the lower environment so we can test with real world's data, But the actual data entry happens on the production site or when we're prepping for a relaunch of a site that happens With the DNS server pointed to another domain and then we switch the DNS over or those types of things. And if database migrations need to happen, That can all happen by a CLI scripts that do those kind types of kind of replacements.

Mhmm. But for the most part, The database we're only using is to get, kind

of example content of production environments into lower environments And not so much migrating data. Oh, yeah. Okay. So this might be, like, a me being ignorant thing. But, like, if you install a plug in, so to say, Is that just storing files into a folder for WordPress? So therefore, it's tracked by by Git, but

or or is there a database component for things like that? The Actual activation of the plug in is stored in the database.

The rest of it is stored in the file system. Okay. If you want to install, for example, a plug in that you aren't Building yourself, but instead that is of the official repository or some other vendor, we're using composer to To install all of that and to manage the different versions of those plug ins that are installed. Mhmm. And so that all gets managed that way, and then you can either Write a quick CLI script to activate it on the correct environment if you want to have that type of integration

or You activate it in the environment where you're working. Cool. And is it is it is it accurate to say that composer is as to PHP as NPM is to JavaScript? Pretty much. Roughly speaking, yes. Okay.

Roughly speaking. Cool. Yeah. Just for those p h none people who haven't touched a lot of PHP lately. Yeah. I think that there's a lot of folks in the WordPress world that it's just a Wild West. And you install a plug in locally.

How do you know that when you deploy that thing, like it's not in your code anywhere? Right? You literally have to drag and drop the whole folder Up. But you can describe what all of those plug ins are, and you can programmatically activate and deactivate them and Pin them to certain versions with composer plus PHP scripts, which is really cool. Let's talk about oh, I got so many so many questions here. I know our notes. JavaScript is bland in in WordPress.

So my first question is is will WordPress ever Be able to get away from its love affair with jQuery, or is jQuery still a must have for most,

most websites. I can tell you I've worked in the WordPress space for pretty much the last 10 years or so, And I have never written a single line of jQuery code. And I I don't know and understand jQuery, which is a funny thing to say. It's a WordPress Focused developer, 4 of the themes that we're building for clients, for example, these days, there is no jQuery in those.

Yes. We may end up shipping jQuery on in individual sites if a plug in that they require to use still has it as a dependency.

And that, Like with many things in the WordPress space, one of the issues is that maybe sometimes large old plug ins Don't get updated. And so if you rely on a specific plug in for some kind of integration, that may still use jQuery, but WordPress Core itself isn't using jQuery a lot anymore in or it isn't using it For any front end code in any of the default themes and only limited areas of the actual WordPress admin interface are still reliant on jQuery.

Any of the new editor type of stuff is fully built in React, and any new areas are also using React as the baseline for it. That's nice. It's funny. I was just running through the 10 app website,

and the thing loads faster than my own personal website, despite having jQuery as, along with 7 or 8 other script tags, being loaded on it. So it's just gonna show you you can make this type of stuff fast. We'll talk about perfect just a second. Let's we'll stay on the The jQuery or sorry, the JavaScript road now.

How does it work when plug ins sort of enqueue their own JavaScript? Are you using build tools? Are you using things like Vite and Webpack in WordPress land? Or is that kind of hard because

You don't know what JavaScript will be loaded when a plug in needs it. A lot of the stuff that we're building, that I'm building as part of I work at 10 up or when I approach a WordPress site.

Any theme that I'm building, any plug ins that I'm building Are you using Webpack? Are you using a Webpack based? There are 2 popular packages essentially that Extract a lot of the webpack config away from you. 1 is maintained by the WordPress, team itself called WordPress scripts, which essentially is, for anybody who remembers the React scripts, inspired by that, a collection of various scripts that handle A lot of the tooling that you would need and a lot of the conflict that you would need. And then there's one maintained by 10 up, which is called 10 up toolkit that Essentially, abstracts all of that away for you, and you just have a watch and a build command and some other useful helpers, And then that builds all of your, assets with that being post CSS most of the time and modern JavaScript rec could. And and it's able to figure out,

alright, I installed this plug in, and it needs, to load This JavaScript file that's part of the plug in, it's able it knows about that plug in's JavaScript, and it's able to then bundle that in?

No. So every single plugin or every single theme would handle its own dependencies.

So if your that One plug in that you're talking about needs a JavaScript file, then that plug in ships the build version or a version of that JavaScript file within the plug in itself, and it handles loading that on the page and making sure it is loaded everywhere, essentially.

Okay. Okay. So if you did ever wanna concatenate that all into a single JavaScript file, that's Probably more something that would have to be handled about, like, a Cloudflare proxy level that would parse the page and bundle it all for you. Okay.

What about, like, like, a live reloading and all that good stuff? Is is that an authoring experience that you're you're able to offer?

When we're building custom blocks, when we're working kind of on custom themes, that is something that is built into our webpack config Where it is using hot module reloading like any React application would, and so any CSS changes, JavaScript changes, all Kind of use hot life reloading.

That's nice. What about, like, hosting? Where where are the where do people go to host WordPress sites these days? You can still

Pretty much hosted in most places, which is one of the great things about WordPress. It just being essentially on the server, a PHP application.

Most hosts will support an An easy WordPress installation.

The majority of sites that I'm working on are either using WP Engine or WordPress VIP, which is something that automatic kind of maintains as kind of a very fast WordPress specific hosting, and those are the 2 I'm most familiar with, but There are many, many hosts out there that will run kind of a fast word per site. I'm I'm also curious about Like, obviously, we we talked about theme development

and all of the stuff on the the actual front end.

But I'm sure, especially with with a lot of the clients you take on, The editing experience is just as important to the people that are using this website. So, we think a lot about one of our sponsors, Sanity. So Sanity is like a they're a headless CMS and they they have they put a lot of time into their editing experience. So, like, you can have, like, custom workflows. You can have real time editing. Like, I remember WordPress just locks the the whole post on you, Whereas Sanity says, I it's like Google Docs, you know? And you can have poster visions. You can see who edited something.

Is it like, what what does the editing experience look like

for actually making custom back end Workflows and UIs and things like that? Yes. So this is right up my wheelhouse, this is what I spend most of my time doing. Okay.

The actual so there are there were a couple of pieces to your questions there.

1, the actual editing experience itself, We aim and WordPress now with the block based editor, aims to create a visual editing experience where the actual Experience of editing your content resembles what you'll see on the front end, and that is a one to 1 representation where you see all of the different options and are able to just click into the text and edit it. You're not doing that, strictly speaking, on the front end. You're still navigating to kind of the admin page and kind of see it there. But Yeah. The individual components look the same, function the same, and have the same markup, essentially.

Then regarding that kind of collaborative editing, this new rollout of this new editor is something that has started about 5 years ago, and that rollout is happening in 4 different phases.

The first one was just to bring all of this into WordPress itself.

The 2nd phase was making the entirety of the site customizable.

And so now but I mentioned earlier in the last year, this full site editing feature is something that kind of was released, which allows you to not just edit the actual content of your post, But also edit, for example, your entire header navigation, footer navigation, all of the various aspects of your site using blocks.

And this phase, this collaborate or sorry. This customization phase is wrapping up with this WordPress release right now and the next one afterwards. So we're in the end stages of this customization phase, And the 3rd phase is collaboration, which is which will be focused on that real time multi Multi editor flow and being able to kind of simultaneously edit a post.

So right now, the experience is still relatively close to what you, mentioned there where when you kind of Go in and edit a page in WordPress.

It will show it to the other users. Hey.

Somebody is editing this page. Do you want to take over, Or do you want to exit? There are revisions. There are all of those types of things. You can plan that that you wanted to publish a post. There are also plug ins to have