04 Using React to build WordPress content Blocks (Gutenberg)
5:14AM Nov 21, 2019
One of the reasons why I like to talk about WordPress is that it has come a long way for the past couple of years is just when into an incredible momentum with the community. And it all started with the Gutenberg editor. It was a controversial update to the to the WordPress core. But he finally made it into into WordPress five back in 2018 and December 2018. And in there's there's more there's actually many, many ways that you can create really modern workflows around WordPress as we all know, it has a really bad reputation and so we'll we'll we'll get to that. And we'll get to that to that question as well. So what what is WordPress we all know is a content management system is built on the LAMP stack. So Linux, Apache, my SQL and PHP, right so it's a pretty old stack. is like I will, if I will just throw a number I will say is over 20 years old. Right? So, you know a lot of the most experienced web developers that I know started with PHP is definitely something's been around for a long time PHP subdivision seven buddy kind of when on a nuclear winter when there was almost I think you went on for like almost 10 years where there was no no updates to the programming language. So right now WordPress, and this is this is this light is updated, so it powers over 34% of all websites. The first version was made public in 2003. started as a blogging platform and still the core, the core core of WordPress and the core functionality of WordPress is still deals with that original idea of a blogging platform. It's not widely used as that anymore because there's all the platforms like medium and you know, everyone, everybody want every company wants it. A piece of that pie. So back then if you wanted to have a WordPress, you want to have a blog, you will you will go to something like WordPress right away. Now there's many options. It is an open source. The code base is an open source is under the GDPR license in 2018. wordpress included, begs editor as part of his core, his current version is 5.5 point three BH the minimum version for WordPress right now still a pretty outdated PHP 5.6. But the idea is that they're going to bump that up to seven in this this upcoming month. That is another issue, right? So it doesn't matter, that you bumped the version if you're not refactoring your code because you're not taking advantage of the main optimizations of the new version. So so there's definitely going to be a lot of work on that. The WordPress versions are being made a very All really, really quick if the idea is to have at least two releases every month or something like that. So things are moving really, really fast. I mean, this went from 5.0 to 5.3 in less than a year. So a lot, a lot of really good developments there. So who owns WordPress? So wordpress.org is the organization behind the open source project. But there is a company called automatic who, who here hasn't heard about automatic so that's one of the things that a lot of people don't know. So automatic is the company behind wordpress. com So wordpress.org and WordPress, com are different things. wordpress.org or is the community that is in charge of developing the the WordPress open source project, while WordPress com is a company is owned by automatic where you can host your website they have all kinds of WordPress hosting management products. And it's a it's a pretty successful company automatic is also owns woo commerce, which is the most popular ecommerce platform out there. Some of you might have heard about magento. All of those are PHP based
platforms, basically. I mean, you guys heard about the Macy's
credit card hack this week. So that was a magento site.
So yeah, needless to say, the whole, you know, PHP the there's a lot of security issues with that. With magenta itself, yeah, yeah. But as soon as PHP seven was released, like that week alone, there were just all kinds of security issues reported. So it's very interesting to see how that develops. Automatic is a unicorn is valued at more than a billion dollars. It's a great question. The work for their team is completely remote. And you Have you guys heard of like work camps, for example. They have work camps all over the world. They also have local work camps and national wide work camps. If there's anything that I have to say about the WordPress community is the most amazing, supportive, inclusive and diverse tech community out there. I never felt you know, strange as a stranger was a imposter syndrome or out of my league in any of this word camps I ever been in. And I can't say the same thing about all the conferences. So it is an amazing community is one of the most supportive communities out there. So that here's a tip. All WordPress versions are named after jazz musicians. The last version 5.3 is named after
Rahsan Roland Kirk is an American jazz musician who knew that? Right? Okay,
Media heavy sites that WordPress is it is the architecture is is very monolithic. The entire application lives inside that WordPress installation. What a lot of people are doing is they are breaking down all those pieces and deploying them in different microservices. So one of the most popular parts of WordPress, the media library. So that's what you upload your images, PDFs, videos, although it's not recommended. You're better off using You know, when I can embed a video player like we see our YouTube but that that uploads folder is going to get really big and out of control really quick. So what a lot of people do is they just upload that the upload that to an s3 Amazon bucket and they modify the media library or they just create a plugin so they can manage that that way and Kind of Bill and leaf cases, as the security issues keep coming popping up. That has to be somebody keeping an eye on this WordPress installation, constant updating, removing stuff that you know using. So So yeah, it comes with with a lot of power comes a lot of responsibility. Right. So but it's still a very popular platform. The I know the State Department runs all their websites on WordPress.
Native multilingual support that's going to be part of
There's still some people reported issues in...
So what is it headless WordPress? This is a definitely a trend these days with tools like Gatsby, Have you guys heard about Gatsby, you know now it's a very exciting time for react because the ecosystem is growing so fast. And now you have tools like Gatsby, or next JS where you can now you can render react on the back end that a lot of companies are reworking the entire content, the content networks and creating what they call the content mesh, so some of their sites might be a WordPress site. Some of this has might be I guess, besides some size might be a headless WordPress installation and another side might be So right now, just that separation of concerns is working, it seems to be working very well for a lot of companies. So decoupling parts of your application for better architecture and performance allows for cloud based architecture. So now you can easily deploy to AWS, Google Cloud, things like Digital Ocean. Now you can integrate view react anchor applications as a WordPress page. And I heard this is a very popular setup for like large advertising agencies that they recommend and this a lot to their clients. Any questions about the hell is WordPress? You see, you can see the benefit, right? So you have a very solid one thing about WordPress is that everybody knows it. And people feel very comfortable because he's using it because he has years and years of user experience testing that have built that back end UI for people. So when people hear WordPress like oh yeah, you went off to the blockchains go to login in here, here's your username and your password and they can go to the backend, they feel very comfortable building it. Well, if you try to recreate that UI, that backend UI yourself is going to be tough. A lot of the earlier static site generators, like Jekyll, for example, require you to have a little bit of technical skills you have to deployed using markdown. So a lot of you know, especially we like people like me, that has to work with markers. You know, there's a barrier to entry right there. Now you have to explain what a markdown file is to a, you know, a marketing manager. While if you choose, tell them hey, here's your password. Here's your username, go to WordPress and write your article for your article in there. And then through the API, then you feed that into your front end. Yeah, so the New York Times dash cron for Bloomberg Times Magazine use WordPress for the editorial process. Is anybody here? Is your company using WordPress for any anything? Yeah, yeah. But it's mostly content, right? And what agency Okay, yeah. One thing about WordPress is you don't you don't really use WordPress to build a product, for example, startups will they have the the the capital and the money to do something from scratch, right. And they don't want to invest on something like PHP that they consider insecure and old. And so when it comes to the job market, there's definitely, especially for new developers, you know, PHP and WordPress have like a really bad rap. But there's still a lot of jobs out there. And as a great way for you to get your foot in the door.
and then some new developers they wouldn't have to learn PHP
There's a little bit of PHP that you still running in the browser
integrating that into a repository,
GitHub, depending I'll get deployments, testing circles, see what is it called circle ci ci Travis so you you building like pretty robust workflow for whatever you doing right out of the box. That's very tough to do with WordPress, but there are communities out there that have built frameworks that would allow you to do that. Now, there is a framework called roots. Has anybody heard of roots is a pretty solid framework for WordPress. Well, we'll go over that enough, you know, in a few minutes. Yeah, question. Okay. So yeah, you could use blade you can use some of these frameworks use mustache Pog, which used to be Jade, right? Oh, yeah.
it will allow you to actually build a build a build process that will give you the optimized assets for the front end. right out of the box. If you build a theme. those assets are not optimized. You serve in all that stuff the way it is you dumping all the CSS files, all the HTML, all of that Java grip on modified on optimize to the front end. Can you SAS for example out of the box with WordPress, you have to write a plain CSS. So rude to hear this. But so what's IO is composed of three products is called. One of them is Sage bedrock and trellis. bedrock basically turns your WordPress into a more app like architecture. So pretty much makes it look like a Rails app. So you have this folder, you have a source folder, you have an app folder. And it just makes it easier for people like you guys are come from a modern workflow to get along with the architecture a little bit better. It makes it a little bit more secure as well. So you can start bedrock now you have a app like WordPress installation. Then on top of that, then you can run Sage which is a a framework to develop themes in work Press. So data in WordPress lives in the database. And then you can have themes that which is basically what you're deploying to the front end. Says uses web pack, you can use SAS. So it's a pretty solid, modern front end development workflow. They are part of the same family but yard I think there are independent projects, right. Like I used all three of them at the same time.
Those weren't developed by
Well, no, this is developed by definitely the community thing. Yeah. as open source. They do have some paid products. But this is like their, their foundation product. Basically, it's called roots.
So it's not WordPress, in that WordPress framework. There's also the larrago framework that poers roots. And then the other frameworks like sage and bedrock and Trellis,
yeah, so sage, you can use blade templates, which is like a lateral thing, but that's for stage. So that's why Your themes.
And then for trellis. What trellis is is server server provisioning. So you run a virtual machine, and then you develop on that virtual machine. And then you can that you can deploy directly to AWS or Digital Ocean. So you know, pretty solid, you know, still know a lot of WordPress development developers that deployed through FTP. So they make a change in the CSS file, they go back to their folder, then drag the CSS file to this or that to the other window. And so this is basically command line deployment. And that's for Yeah, that's what the what do you mean by that?
Like, you know,
like visiting the site? It seems like there's a lot of frameworks on top of each other.
or anything like that with that kind of orchestration or
Raise conditions or something like that it's like multiple people are working on the same copies of something. And they may want to save it to the their local database and their local Docker image and push it up.
Yeah, the database is always always stuff.
Are there younger developers filtering in, or can you like over time, can you see that that group is just kind of getting older?
I lately I have seen a more balanced kind of Yeah, yeah age group because a lot of people that do WordPress for a living are like old and small town owners. So you know something something Minnesota and the guy builds WordPress sites for, you know all the dentist in his County,
kind of like that.
But But yeah, I mean scenes, the whole
Do you know if those are object-oriented or are they procedural?
I think that procedural at this point yeah.
so this is pretty much what a WordPress installation will look like. You have your core folders, which you're not supposed to touch, and then you content which is where everything is going to happen, right? So you have your themes, that's where you can develop things with sage. Or you know, there's another one called WP rig but he uses go for, for compiling assets. You plugins, this is where you put them where Brooke is going to go this one of the things that I was like, when what number was released, I was thought that Gutenberg was going to be embedded in the theme, but you have to actually make it available as a plugin. So you kind of coding uploading, right? You get the book. Yeah. And then you upload folder In one of the most annoying things about WordPress, and this is something that I always end up modifying is everything you upload to the middle library. It gets saved in by day by month. And so if you have, for example company where you're releasing, let's say an annual report, and you have to replace it, it's just better to keep those assets on his own folder. You could call it for example, annual report. And that's what you keep your annual reports. But to do that through the media library, there's some modifications that you need to do. And WP config that's where you can change all the options. That's what you put your database password your, your host, and I know that so that's pretty much what the core architecture WordPress looks like. So now taxonomy, so WordPress works with taxonomy, some post ups, which is again, kind of like that legacy blogging platform. idea. The default taxonomy is or categories and tags is just a way for you to categorize and to manage your data. And the post types are is where your data is actually going to live. So you have pages, bows, media, maybe the maybe the, there's more, but you could extend this, you could extend this through through the WordPress API, you can create your own post ads, you can create more taxonomy. And the good number blog actually needs to use that as well in order to save and to display the data. So why, why the blog editing experience, it just gave people more freedom inside the editor. And when I first heard about this, it's just alarms went in my head, right? You don't want your clients, you want to limit your clients ability to change that page as much as possible. If they pay you to create a page where they could choose upload text. That's all they should be going. You don't want to champion the layout. You don't want them installing plugins, and so There's been a lot of talk about how much how powerful this editor is, and how in an experience hands could become a problem. Eventually, somebody made the comparison. Remember back in the 90s, where you had all this, like browser plugins, and you ended up with like a toolbox. Exactly. And you ended up with like a fat at, you know, bottom, the top without a VC like cars and all that crap. So right now, that is, that's one of the worries about the blog editing experience. That's just people, it's just going to start installing uninstalling things. And then it's your edit your editors just going to become a mess, a total mess
That's what happens anyway, if you had the old plugins, and that's what they would do to the old editor.
Yeah. So yeah,
yeah, pretty much. So there's some talks about how you could organize those editors. There's some there's a product out there. I think that the editorsare, sir from the cloud or something. So So yeah, one of the things that you can do with the editor is actually you can create a layout with the editor. So now you can go in and say, Okay, give me a block that has three columns. And I want to put this much information in this column, I want to put an image in this. So now you're using, you know, design powers to your client. So that could, you know, turn into a problem really, really quick. But is there and people are using it. As a developer, you could very much luck, those those options on the editor based on your user profile. So you could you when you register as a user, in WordPress, you have editors, you have authors, you have publishers, and you can, you know, create more, more of those as you go. But as a developer, you could also you know, have control over that. So this is interesting when that whole fiasco happen. With react, changing Facebook, basically changing the license. too, I don't know what it was. But if I understand that correctly, I'm not a lawyer. I don't I don't give legal advice of any kind. But basically what they said was if you use react on your product, you can never Sue Facebook for stealing your idea or something like that. So it created a huge uproar with the development community developer community. And eventually, like a few days later, they reverted back to a few months, right? Yeah, yeah, a few months. Yeah. So as part of that, WordPress almost halted the entire block editing experience. They said, we're not we can have this on a product is a huge legal liability for us to have it. So that happened. So how do you consume their WordPress REST API? First, you got to understand the end points. There's just too many to cover. You need to understand what you're building is what you build in a static or dynamic static meaning it's just displaying information. From the database and he's not writing anything into the database, or is it dynamic, meaning you're writing from the front end, you can actually write into the database. That's what the difference between dynamic and static. So a good number block, you have a state what is called attributes. And the way that you update attributes is not with set state, but with set attributes. Normal CRUD operations, there's not much difference there. You can create more endpoints if you want, you can use graph QL. There's a lot of talks about including graphic us in WordPress core, I think that that will happen eventually. There is a plugin called WP graph QL or something like that. That is great. Is uses the default authentication for the API is cookie based. So as soon as you log in, now you can you can create sessions How we doing okay. Or you can extend that you can use our, also whatever other authentication plugin you but that will require you to install a plugin. So if you want to start experimenting with Gutenberg, there is a MPM package that has everything ready for you is co create with them blog, you can install it globally and all you need to do is go to the plugins folder and create a blog there with the blog and name it and what that gives you is a whole pretty much like a create react app is a web pack based flow workflow
the file system for guten block looks like. So you have a plug in the PHP Which is where your that's I think that's where your metadata goes, then you have you ended up PHP. And that's where you start using the WordPress API to
write information to database, your information database, your blog, the JS, that's where all your rack components are going to go.
You your styles,
is coming as a global variable called attributes. So all that is already passed into this php file as a goal variable. So that's kind of how you declare variables in PHP. And then you render you you return your PHP with the PHP echo function. So this is how you install components. There's a lot of components from the WordPress
repository is color picker pop ups tool tips.
There's another thing that a lot of people don't know. And that's WordPress is still using subversion for their repositories. But there is a clone of that exact same code in GitHub. But you can't submit tickets or or, or request through GitHub. You have to do it through subversion.
But Gutenberg's in github?
Gutenberg's in github. Yes.
Does it have any Engine X support?
Yes. So you have any questions? you want to use WordPress, yeah? Thank you.
So who's got some questions?
Where do you work on WordPress?
It's a global, on the corporate side, but because the company has presence in all these different countries, they wanted to make custom content available for that specific country. So we have a network of sites which is something that WordPress allows is that a multi site installation So is directory base so you go to a con com then there's the global site but if you go to a con comm slash UK now you're going to the UK site and that site is featuring content that is relevant to that to that area. So that's why we chose WordPress because WordPress out of the box offers you the multi multi site architecture. It is it is an editorial syndication platform basically. So I can create content on on on universal and then I can say okay, syndicate to the UK, to Saudi Arabia to Greece to Hong Kong, and then hit press, I mean, publish and then that content gets syndicated to those those sites
with the headless um, have you have you have you done some of those assuming you have experienced like, actually deploying or Lucas. So my concern with that is, is the UX experience because one of the reasons that WordPress comes up a lot of people requested people understand it, they know it and then once you've broken it into headless the workflow of right in the WordPress back end and preview it is completely different. Correct? So have you have you have you dealt with that from a human point of view.
So we have a kind of like a local, internal WordPress full WordPress, where they can actually preview what they're doing. And when they're happy and done with their changes, then they send me an email and then I push those changes to production
OK so you are uding it to sort of stage Okay, which is not like actually running a complete like JS front end and then feed in the content and from a WordPress back end
I am. So what I do the command that I have the automated workflow that I have is a basically rebuild the site on the front end and update all those files. So now they pick up the changes from this, this WordPress site would they were previewing and if publish into production.
So did you end up double building the front end, then? I mean, if you're you're getting a preview of WordPress that's presumably using the conventional themes. And then if you're sending that off API wise, into some other front end, you've essentially doubled it.
Pretty much. Okay, pretty much blood, the front end. Yeah, excited. But the front end that we're running internally is not optimized. Like I don't care how slow that front end is, the one in production is optimized. And that's what the that's the one where most of my work goes into, in making sure that that site is fast and it loads any it loads faster mobile. And that's the side that we were getting that Google Analytics from, and that's why we have auto marketing scripts running, basically.
I mean, arguably, couldn't you just run a staging copy of the of the front end and then Edit and then just have the the WP JSON API request from your local servers and then like that, pretty much feasible? Because then you don't you don't necessarily have to build a theme if you're doing everything over WPJ song. Right? It's more about the people using it. Yeah, I'm able to preview it. Right now at that point, you know, I think there's there's a lot of like internal stuff that they're coming with experience now like, Oh, I just, you know, I should be able to quick preview and see my site and right if it's got to go out to an API and they get written, rendered and spit out some other which way then it starts to, to, not to feel broken.
So one of the the most challenging parts is is how do you like Yeah, you got this amazing headless WordPress is supervising whatever and and now, you users work for your company. They're the content managers now how you make them happy. They don't want to learn anything. So they used to she's going to WordPress, copying and pasting from a Word file and then uploading the images to the middle library and hitting upload. When the first time I started working with static site generators was Jekyll. And that was being too because now they had to learn how to write on markdown and They had to learn how to teach them how to upload images to the to the server, and how to reference them in the markdown the right way. So I feel that with this headless thing, because WordPress is so popular, it just is just scary. But still, as people just understand that and eventually they get used to it.
People are using the headless WordPress. Is that performing enough to be like two people use that as an origin server? Are they still protecting it? Like really, really heavily the CDN, some caching layers,
there's Adefinitely CDNs and caching layers when it comes to protecting it. I think that it's just static file. So there's nothing for you to do hack, really. Right. So I know that, for example, with Gatsby like if they want to add some sort of discussion board then they will use something like discuss, they wouldn't try to plug into the main No database with that.
questions? Comments? suggestions,
WordPress has a pretty good slack. is this covered on the Slack? Is there a channel
no. So I probably sent you the slides that we can make them available to the group. This is one of those things that you just got to dive in and to strike out on your own. I do have a blog, I'm probably going to be hiring in February, so not right now just submitted the job request this morning. So let me know what you're definitely gonna be working on WordPress. But the idea is to we looking at traffic and we identified which are those, like global sites can be broken down into a network of static site generators basically.
That's what we
were exploring right now.
Cool. All right. Thank you.