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

But

And then you can also 2 popular packages essentially that Extract a lot of the webpack config away from you. 1 is maintained by the WordPress, know my way around environments, 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

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,

the default values for any one of those things. So you can say, hey. By default, I want my heading to be red,

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

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 It will run WordPress it will run React the actual blocks, And this phase, limited areas of the actual WordPress admin interface mentioned there where

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,

Yeah. Totally.

justified in, like, teal. You're like, come on. You're dealing it. Lower. Yeah. It is Beautiful website.

Verdana

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.

predefine the various colors that should be available there.

WordPress comes up here and there.

in the last 5 years or so, WordPress has changed quite a bit, and,

12 years ago, we would have everyone install lamp and map. And I just remember

local servers to run a PHP server,

Yeah. Exactly. For me, it was I always listen to syntax, and

and I think most of the installs are somewhere between those two

well, I was doing a lot of WordPress sites for an agency. The whole local flow is to have something like MAMP

getting people because even before that,

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,

Has the local development flow at all changed?

Version 18 in concurrent mode and is a very modern, 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 there also is A mechanism in WordPress now called theme JSON, And it handles all of the dockerization all kinds of things with WordPress. And, yes, I am also somebody who defaults using WordPress for a lot of things

Has it has it gotten,

Windows dev has gotten a lot. It was always a big pain on Windows.

WP Engine maintains the build version or a version of that JavaScript file within the plug in itself, and curating and creating editorial experiences.

MySQL.

December of 2018, I believe,

And,

is powered by React. And in version kind of 6 Point o, 6.2, which will be released in 2 weeks.

Flywheel,

And since WordPress version 5 point o, which released 4 different phases.

and that is one of the most popular tools, which just has a UI to allow you to spin up a WordPress instance, local WP, 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

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.

which used to be local by flywheel, loading that on the page and making sure it is loaded everywhere, essentially.

and then you install WordPress locally.

for you, so you don't need to interact with Docker yourself. Oh, nice. There are also

You add the database,

or XAMPP or any of these,

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 The actual editing experience in the WordPress admin Are they yes. Of course.

But some other useful helpers,

Changing the front end rendering

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

website,

40, 50 ish of those different blocks that you can use for Wow. Building your content.

aesthetics, colors, spacing options, topography options of your

a design token system, right, built Right into WordPress, we're using that 1 JSON file. You can configure the overall Focused developer, most standard sites have Three environments. There's the actual life site, use rsync or some other

the corresponding

regarding the majority of time, the way this works is

You can use that will help with that. I'll go into that in a second.

Styling wise, yes, a 100%, and there are additional things that Things And then regarding the styling layer, and the reason why I, myself, Kind of. So Okay.

I'm going to then create 6 products.

which there are, 4 of the themes that we're building for clients, for example, these days, there is no jQuery in those.

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

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.

PHP, HTML, and CSS for that specific block. Is that how it works? 7 or 8 other script tags,

The editing experience

poster visions. You can see who edited something.

their editing experience. So, like, you can have, like, custom workflows. You can have real time editing. Like, I remember 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

is just as important to the people that are using this website. So,

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 the thing that The right type of thing.

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

WordPress just locks the the whole post on you, Whereas Sanity says, I it's like Google Docs, you know? And you can have

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

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

But I'm sure, especially with with a lot of the clients you take on,

why is 10Up, a company with 300 developers,

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,

Where everything

is very hard Given that it could be just a a back end API and editor?

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

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 that

want to use WordPress these days. You know? Like, why are your

plug in. Or the alternative is go with a, Like a a page builder, like a Wix, or

ecosystem of

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

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 How does it work

a month, So my first question is is

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,

huge ecosystem

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

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.

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 activate and deactivate them and Pin them to certain versions

even on a different employer because it's so widespread,

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 is jQuery

UI for it as much as the back end for it as well. Yep. So That is something that is

kind of scenarios anyways.

Has a GraphQL API, has a REST API, can

has

Real differences, 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

WordPress

Should they be using WordPress for applications?

probably, a headless approach and not A fully visual editing experience makes more sense because the data gets represented differently in different But then everybody who needed to change something would need to create their own account or something. And so and your website.

how many people are using WordPress or or what you see

users and permissions, and you can extend it to your heart's content is, like, it Literally can be anything, and

websites, you know, because 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?

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? praying the freaking alright, I installed this

Are you using Webpack? Are you using a Webpack based?

that

to load

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

There are

And then that builds all of your,

file, then that plug in ships

plug in, and it needs,

team itself called WordPress scripts, which essentially now but I mentioned earlier in the last year, have that visual editing experience, of the, kind of, top 1,000 websites or of the web in general.

assets with that being post CSS most of the time and modern JavaScript rec could. And and it's able to figure out, kind

Okay. Okay. So if you did

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

on helping the rest of the team level up with modern WordPress development

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 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? of there's literally a plug in

is very interesting to me. You know? Like, it's still such a big part of the web. We we talked about it. So

the Syntax supper club.

They've been buying my courses for years. And 10 Up is like a those things are are mostly in the past because

Today, we have got Bobby and

So

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.

like snobs or anything like that, but, like, honestly, what WordPress looks like In 2023

This is

I sure hope you're hungry.

so buckle up and grab that old handle because this ride is going to get wild.

meaning, essentially, I spend 50% of my time on actual client projects And then the other 50% 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

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, Options. Okay. I remember Flywheel. Yeah. Yeah. When I was teaching WordPress, what, 8 years ago, we were all using mostly just using

Welcome to Syntax.

What are you interested in in modern WordPress these days? Yellow light would turn green when you restart the process. Just looking at it.

on today to talk about 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

A big agency company, I'll let him explain,

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.

Hoo. I'm starving.

And about 10 up in general, 10 up is a large agency with about 300 employees Then regarding that kind of collaborative And that, I don't know and understand jQuery, which is a funny thing to say. It's a WordPress Multi editor flow No. So every single plugin or every single theme would handle its own dependencies.

Fabian this is actually a funny story, is that Fabian sent me, like, a DM,

For kind of the type of sites that I'm working on,

super robust in the terms of the way that I like to build things, but, you know,

In practice, it's always felt a little rough. How how do you feel about headless overall, and do you have any,

with headless WordPress sites and headless sites in general, is something that has started about 5 years ago, and that rollout is happening in kind of maintains as kind of a very fast WordPress specific hosting, and those are the 2 I'm most familiar with, but maybe sometimes look the same, function the same, and have the same markup, essentially.

then The back end of WordPress already is use blocks in a headless world,

Connection in every option. That's

I have seen folks build beautiful and very cool is, for anybody who remembers the React scripts, which is essentially,

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 Any theme that I'm building, any plug ins that I'm building but the majority of them do still build custom themes.

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 Code deployments That operates mainly in the WordPress space and has kind of its roots in the WordPress space. Awesome.

in my experience, it's never been super,

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

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

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,

Have so far not been super interested in in it because is because Overall some Webpack builds and things that all happen in CI.

the editors to have that kind of rich editing experience that kind of resembles the front end, 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 this full site editing feature is something that kind of was released, which allows you to not just It is still huge. It is it does power 43% agents to just publish the changes,

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

The database The majority of sites that I'm working on are either using WP Engine or WordPress VIP, which is something that automatic I believe,

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

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

So therefore, it's tracked by by Git, but

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

as to PHP as NPM is to JavaScript? Pretty much. Roughly speaking, yes. Okay.

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,

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

storing files into a folder for WordPress?

in WordPress.

Write a quick CLI script to activate it on the correct environment

you can either Pretty much hosted in most places, which is one of the great things about WordPress. It just being

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.

Is that just

Mhmm. But for the most part,

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

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.

And then the developer on the flip side will say, okay, well, for every block that I've have in my

essentially a headless installation of the editor that just talks through the REST API with the rest of WordPress.

So And 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 We aim and WordPress now with the block based editor, edit the actual yes, you can do a lot of things. That doesn't mean you should always use it for everything, Yeah. Or you can build custom ones, or you can rely on the plug in plug in e ecosystem to provide those 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 for the front end, some projects do use headless approaches, edit a post.

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.

That

The majority of themes

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,

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

WordPress for editable websites,

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,

that

and essentially talking to a database with it. But 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, and only I work on are using of into the various,

kind of pain.

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

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, that contain contain all of your render logic, essentially.

the kind of tool maintained by Facebook,

And it always seemed like that was, like, a huge, tips and tricks for making headless a more seamless experience?

the Git could bring those files up, Then you could run the migration with those files.

there are better tools for some of these 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 so it is such a large player that folks are familiar with. It gives you an editorial 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, I've worked in the WordPress space for pretty much the last 10 years or so, Do kind of the traditional WordPress themes where you have your kind of That allows for very kind of rapid development, aims to create a visual editing experience where the actual And we're only using is to get, kind

and that, 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, different index PHP, 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.

But in WordPress, so many things are stored in the database,

because I just

that

there there's probably somebody out there doing

to files. So that way, when you did a migration

And for me, I like using

in in the Drupal world, we ended up having to have plug ins that would essentially write to files

That would write your configuration

still a must have for most,

or

are still reliant on jQuery.

that may still use jQuery, 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 Most hosts will support an An easy WordPress installation.

one of the issues is that large old plug ins Don't get updated. And so if you rely on a specific plug in for some kind of integration,

Like with many things in the WordPress space, Yes. You can use all of those core blocks, That is where, that using DocuSARs,

and the thing loads faster than my own personal website,

most websites. I can tell you

Be able to get away from its love affair with 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, When we're building custom blocks, when we're working kind of on custom themes,

I have never written a single line of jQuery code. And I Front page PHP. There's different PHP templates and powers so much of the web. I remember back in the day, Essentially, abstracts all of that away for you, and you just have a watch and a build command and essentially on the server, a PHP application.

but WordPress Core itself isn't using jQuery

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.

will WordPress ever Up. But you can

a lot anymore in

or it isn't using it For any front end code in any of the default themes if you are still using kind of that CMS to manage all of your content and you want

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

aspects of your site using blocks.

content of your post,

Experience of editing your content customization So if your that One plug in that you're talking about needs a JavaScript

this new rollout of this new editor

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

1, the actual editing experience itself, large scale React application when you kind of Go in and edit a page in WordPress.

But also edit, for example, your entire header navigation, footer navigation, all of the various

resembles what you'll see on the front end, and that is

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

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

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.

ever wanna concatenate that all into a single

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 can all happen by a CLI scripts that do those kind types of kind of replacements.

and there is, UI based tools. Like, I know,

and usually, if you want to have that type of integration editing, And we do

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 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.

a staging site, and a development site.

if database migrations need to happen,

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 With A thing so large as WordPress, inspired by that, a collection of And then regarding the actual database things,

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, And those blocks can be rearranged however you want to use them, maintains one tool called

a lot of things we're using GitHub for, and so we have GitHub Action GitHub workflow configured to automatic to automatically just

jQuery as, along with outside of just

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.

when

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.

in WordPress land? Or is that kind of hard because WordPress website. Are most people still

despite having describe what all of those plug ins are, and you can programmatically

plug ins sort of enqueue their own JavaScript? Are you using build tools? Are you using things like Vite and Webpack

So right now, the experience is still relatively close to what you,

phase And that is what you can then use to build the entire site. Nice.

and being able to kind of simultaneously

this collaborate or sorry. This And I chose to build I'm always a big fan of using the right tool for and it handles The 2nd phase was making the entirety of the site customizable.

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?