 Thank you. Yeah, so welcome, everyone. Thanks for coming out. I came to Miami last year and really Loved it, so glad to be back. Weather this time of year is great. I have my slides up. There's a link here. I also tweeted them out. My twitter handle is atailor Me, so if you want to follow along, like john said last time, Don't worry about trying to jot down too many notes or Anything. There's lots of resource links and Stuff, everything that's kind of highlighted. Blue with an underline in the slides is a link. So you can go check out the slides and download those things And look at resources later on. So my name is andrew Taylor. I work at pantheon. We're a managed wordpress and drupal hosting platform. So i get to dive in and play with a lot of things on Wordpress, and part of my role is to give back to the Community, which i really enjoy. So coming out, speaking at Conferences, things like this, and helping a lot of our Agency partners. Away from the computer, I live in portland, organ. I love the northwest. I love actually good craft here, too. So i haven't found a spot in miami if you know anything. Then perhaps we can grab a drink and answer questions as Well. Email is andrew at pantheon.io, And i'll be at the happiness bar after. So if you have follow-up questions. And i did want to give props to weston. Weston is the customizer tech lead. It's really kind of his code baby and has been for a Long time. Weston is a great guy. He lives in portland as well. He's been a great mentor and Friend. So a lot of things i've learned and Some of the examples i'm going to show have come from weston. So i just wanted to give a shout out to him and all the Work he's done on the customizer over the years. Before we dive into the javascript api, i kind of want To take a look at what the customizer is for those that Aren't familiar. It's sort of this live preview Interface and wordpress that was introduced all the way Back in 2012. So it's been quite a while. Before that, we had the settings api. You're probably familiar with That if you've ever installed a plug-in or a theme and in the Wordpress admin, it has its own screen. There's a bunch of options, maybe tabs. That's the settings api. So the customizer back in 2012 came out as a way to improve upon that because With the settings api, users go in and they save some Settings but then they're published. They're live. If your site's getting traffic, you have to go look at the Front end and make sure this thing you configured. If i just downloaded a theme and it says choose a color Scheme, light or dark. And i changed from light to dark. That doesn't tell me much. I have no idea what that's Going to look like. I have to save the setting and go Look at it and maybe i don't like it. Users have already seen it. It's in my cache. And it kind of is a headache. So in 2015, the theme review Team made it required after the customizer had been out for a While that all theme settings go into the customizer so that You have this live preview and users can see what the Changes are going to look like before they're actually Published. And so this is sort of where a Lot of people have experience with the customizer is Building out these theme options and settings because that's Required if you're uploading your theme to wordpress.org. And there are advantages to that. So that save and surprise we Talked about is gone. It gives you a great framework For the interface and staging changes. We have change sets now so you can actually go in and Schedule changes to be made. I can kind of show that real Quick. So if i come in here, i have this theme. I created some options for the hero at the top. The image, these sorts of things. If i come in and make a Change next to publish, i can actually save a draft to share It with other folks. But i can also schedule it. So think if i wanted to, if i had an e-commerce site and There's a black friday sale coming up. I don't have to wake up thursday at midnight and go Through these things. I can schedule them ahead of time So that when that comes around, they're just going to publish. I can have an updated header, advertising the sale, those Sorts of things. So a much better user experience Than we get with the settings api. The changes are also previewed. We kind of saw over there on The right-hand side the preview pane. We get that drafting. So if you have someone, Maybe you have an intern coming in or, you know, in Wordpress with post, you can have an author draft something and An editor publish it. Now we can do that same Sort of thing within the customizer for changes. That kind of really brings, like, a staging to production. I have had lots of times as a developer, you get client Request or things that you have to do and you want to do it on your test site first. You don't want to do it right on production. But then they say, that looks great. Go live. To click through ten settings again, maybe you write it on a post It note or something of what you're supposed to do. But now you can come in and actually just make those on Production directly, save it as a draft, and you can share that URL with the client and when they get approval, one click, There it goes. Really easy. And so you can do some other cool things, too, as a developer. With this change set uuid, you can actually go in, Append that to the url in your wordpress site, and even if You're building an advanced, let's say, reactor angular, something On the front end that uses the rest api, that change set will Update the responses from the rest api so that they have These preview changes in them. So even if you're not using php For your front end, you're relying on the rest api, you can Still preview what those settings would look like. These are all benefits you get if you use the customizer For your settings, but if you try and do them yourself, then you Don't get these benefits. Also, i have built-in controls and Things. We get a consistent ui. So if we come back over here, in my theme options, i'll close This little settings. I have media uploader. There's a slider here. There's color pickers. All of these sorts of things that when i was working with The settings api or rolling my own stuff, i have to create All of these inputs. Especially a media uploader Working with the media manager. I don't have to hassle with that api. The customizer is going to take care of it for you. You get that consistent user interface so that your settings Page doesn't look different than the next plugin or the next thing. The users using wordpress have this consistency. That's great. We also get contextual display. So if i come over here, this banner is just on the home Page, but if i come in and click through a different post, that Settings can go away and kind of hide. Then if we go back to the home page, we see our settings are Popping back in because they're only active on the home page. So if you have settings that are specific to one template, Then they're not going to show up here and confuse the user That they have these settings that are changing and they Don't see what's happening. They're not doing anything. They will only show up if they navigate to that template. So you can have these contextual controls that pop in and out. So that's sort of the background and the history of the Customizer. Some reasons you might want to use it. So now we can actually dive in and take a look. The customizer is built on an mvc framework. So at the top level, we have panels. These are sort of your higher level organizational pieces. These are kind of views if we're talking about mvc. We have sections which are still views in their subitems of Panel. So if i'm building my theme options, i will have a panel. That's where you want to put your plugin or theme options at The top level. Click into that and i might have Typography and color and, you know, the banner options. All of these things can be different subsections within That panel. And then we have controllers and settings. So controllers are actually the html inputs we are talking about. So a text area, slider, media uploader, all of these things. The physical html inputs and controls. And those are connected to settings, which are going to be our models. This is actually the data that's stored in the database. So if i come in here and i look at my example again, And i am changing the text size. So the control is the slider. But if we go back in the setting, It's actually the value saved in the database. Which, you know, if i crank it up this high, maybe it's 48. And so that's what's going to save to the database. I can pull that in on the front end and say my text font size Needs to be 48 pixels. So those are kind of connected Very tightly for every control you have. You need to have an underlying setting so that when the user Changes something, that data is going to be saved. And then we have partials, which are kind of a mix. These are really cool. They're basically the wordpress 4.5. Introduced selective refresh. So you can come in, and when you Change something, rather than reloading that entire preview On the right, a partial is a connected controller and piece Of the preview. So if i have my banner up here, This can be a partial so that if i come in and change this Image and we'll go to more of the sunny trees, you can see Just that section of the page reloaded. It didn't reload the Entire thing. So if i come in here also, you get Some cool things like i can click on edit. It's going to bring me right to that setting. And if i change the number of posts in my recent post down To 2, then just that piece of the page reloads. So this control here is connected to just this partial. They call it a partial because it's just one piece of the view of the preview. So those are really great. You get kind of that instant preview. So people expect modern applications, modern javascript That they're working with. You don't want to sit there and Wait for a clunky full page reload. Taking advantage of Partials allows you to have that preview. And all of these things i've showed you so far can be Done with the php api. We can do a lot. We have those contextual controls. We have selective refresh. We have settings validation also, which is kind of nice. I can come in here. And so if i go back, and we Will go into our hero. And if i add word press here, but i Don't capitalize the p, we get an error. We have some setting validation that says capital p dang it Because you will get shamed if you don't capitalize the p on Your word press. So you can give these helpful hints to The user. We can do all of this with the php api. And you might be thinking, well, this is great. But i thought we were talking about javascript. And we're getting there. So under the hood, the Customizer is a single page javascript application. It's javascript driven from the start. And we just have this tiny piece of php api that allows us to do A fraction of the things that you can actually do with the Javascript api. So when you write items in php for The customizer, you can register settings and controls and Panels and all of these things we looked at. Word press will actually go in, and we can see kind of the Php classes and things here, how they map out to the Javascript equivalent. So if you've worked with the Php side, it's not that big of a leap to jump to the Javascript classes. And everything you register in Php, the customizer just turns it into json, dumps it out, and Then loops through it in javascript. So you're not actually Creating things in php, the customizer is just taking what You said you want to register in php, and then it actually Creates it in javascript when the customizer initializes. So we can look at some of these things in php, just Some slides in here for reference. If you're trying to make That conversion going from working with the customizer in Php in javascript, some examples, all the items that say Thing here, that can be a panel, a setting, a control, all These things we've talked about are a thing in the customizer. It's built of this collection of values, and so we have all Of these items that you can interact with. And so i'm suggesting that cut out the middle man. Don't write things in php. Wordpress is getting Becoming increasingly more javascript driven, especially We had a whole day kind of Gutenberg workshop yesterday. Javascript is becoming more prolific in wordpress. If you want to expand those skills and you want to work With the customizer, then i would encourage you to start With javascript. Or maybe start things in php and Then convert them to javascript and see what that feels Like. Get it working in php as a Start, migrate to javascript, or once you get comfortable, Just start with javascript from the beginning. So now i want to talk about finally what you're here to see, The javascript api. And what can it do? We've seen some pretty cool things with just php, but With the javascript api, you get so much more. We can lazy load data from the rest api, dynamic settings. When i'm registering things in php, i have to actually write A line of php to register every one of these controls, Every one of these settings. And let's say i wanted to go in Here and add a field, i would have to actually go edit a php File. This is a hero image. If the client came to me and requested that, all right, This hero is great, but we really want our home page to Have a slider, and we want to be able to add multiple Slides to that. If i don't want to go in And have to hard code these slides and get an email every Time they want to change something, i want to do it in the Customizer so i can empower the client to make those changes Themselves, but i can't really do that with php. How do i give them the ability to add a new slide? What if they want two slides or five slides? How do i write php to determine that? You really can't. And that's where you have To do things in javascript dynamically. So i have some other items here. We can see these posts, these Featured items here. This is built with the javascript Api of the customizer. And i have three items. But i can add one. And now i'm going to get a fourth. If i select an existing post, i can use the rest api to Pull in the featured image and the title from that post. But i can also give the user a way to customize it. So i can say word camp miami rocks. I can come in and we'll get a nice picture of the beach For word camp miami. Change some of these things. And this is really cool because we can see kind of the partials And things registering but also now instead of three items We have four. And let's say i don't like the way that four Looks, you know, three is kind of nice. I'm going to delete an old one. These are not things you could allow your client to do with php. You can't do these dynamic interactions. So we get those dynamically added just in time. We're creating these controls as the user needs them rather than Having to pre-define them and pre-register them. So you can go to, you know, as many as you want. We also get a two-way binding between the preview and the Pain that is kind of unlocked a little bit with partials. And you can do some of that with php where, like, i Changed my image and it just reloaded this section. But look at over here. We have our items. If i go in here and actually publish this, then our trashed One is going to go away. But i can rearrange these. I can also rearrange them over here. So either way we get this two-way kind of binding between The preview pane and the controls. If i come in here to edit this and i want this titled center, Normally if you're doing like php or something, you're not using The javascript api. You could give someone controls here. But then this is clunky, right? i have to go in and type 30. And maybe i want it at the middle. This is not a good Experience for your user to sit here and type these things. Using the javascript api, we can add drag and drop. I can use the jQuery ui to make this draggable and then Dynamically, wherever it's dragged, update those settings over here On the control side from what's done in the preview. So that two-way binding is really, really powerful. So are dynamic settings. And with those dynamic settings, You can actually, you'll have to write a filter on the php Side so that the server is aware as you create items that It has a setting to save to the database. But you can just do that pretty easy with the filter. You can go in and say, you know, featured item underscore and Then have a regex pattern or something that anytime something Comes in, feature item 1, 2, 3, 4, et cetera, we can map those to settings. And it works alongside the rest api. So we kind of showed there that i was able to have this control Where it lists existing posts, a user picks one, and then It pulls in the title and image from that post. That's all being done through the rest api. And those are sort of features that i couldn't do when working Just with the php side. JavaScript really unlocks that Potential to have some of those more custom controls and things. There's also inline editing. It's not something i have set up For the demo, but if you're curious, there is a plugin Called customize inline editing that actually allows you To edit title and excerpt in some things for your posts inline In the customizer, which is really kind of cool. And so we talked about the customizer being an mvc framework. It's backbone-like. It's sort of its own javascript Application, but it's similar to backbone models and things. And when you work with it, you want to set items. So we come in here, we see control.section.set or Control, priority set, checking if things are active. You don't want to do this, so if you come in and you're trying To find something yourself, manipulate the DOM directly, That's not really a best practice. You want to go in and you Update that state, you set that state, and the customizer Will react. So let's kind of take a look at it. I'm going to back out of my slides here so i can copy and Paste some of these items. But we'll come into the console. And since we're just working with javascript, i can put this in The console here. And so i have title tagline is Just the machine name for our site identity here. And i'm going to take its priority and set it to 10,000. Now it's at the bottom. I can check if there's a Section named has colors. We can kind of, or a section Named colors. We can see it here at the top, and that's going to return true. So i could use that in some of my other logic. You can watch other controls, See what they're doing, see if they exist, and adapt accordingly. Here we're going to focus. This is really nice. We're going to focus on blog description. So imagine in the preview Side, if a user clicks on something that brings them to a Template, and then you just can bring them right to the settings for that template And have that really nice user experience. I can set the blog Description to word camp miami rocks. And we can see that it updates there in real time. And if you haven't seen it before, the customizer has this responsive Sort of preview. And so i can come in here. And with the javascript api, i can set that to mobile. Or i can come back and toggle it back to desktop. So really cool, i would encourage you to just pop open the console When you're in the customizer, play around with some of these things, Start digging in the apis, and just see what you can do. And if you really want to go further, then you can check out Wp.Customize. This is the object in wordpress core that runs the customizer. It's pretty overloaded. There's a lot in there. Everything's attached to it. I said before we have these value Collections, so panels, settings, controls, all of these things are collections. And we also have global events, which are nice. We're going to talk about those in a second. And everything that's exported in php, we kind of saw earlier that all gets Dumped out is json. That's accessible to you. So you could start with some basic controls. And if you already have things written in php, you can access those. But then you can also add some items in javascript. So you don't have to completely start over. You can use javascript to access what you already have in php And maybe build on top of it. And here's just some patterns When you're working with the javascript api. So there's kind of this uppercase and lowercase. So we have wp.Customize.Control is what you're going to Use to actually choose a control. But if you wanted to build a new one, then it would be Wp.Customize.Control with a capital c. And so we'll kind of see that. This is an example of validation. So when we are checking if wordpress has the capital p, this Is what that would look like using javascript in the Customizer. And so you could just add the snippet. You can add client-side validation, even if you have Existing controls in php. And this is a great way to kind Of get your toes wet and get some experience with the Javascript api. So we can see here that we have Kind of our blog description. And then we're taking that Setting. And then we're just going to Bind to every time that value's changed. We're going to check it against our pattern. If the p's not uppercase, then we're going to create a Notification. And we have these events That you can listen to. So we have wp.Customize events. It uses jQuery callbacks under the hood. You don't really have to worry about that. But you can bind to Events, you can dispatch your own events, you can unbind, and You can kind of chain these things together. But let's just go back and think about, even if we weren't Building a slider here, if we just wanted to keep the one Hero image, we kind of have these options, what happens If someone goes to tablet, maybe we should have a Different font size for tablet and mobile than the really big One on desktop. And you could do it in php. You could register multiple controls so that we had a setting For desktop, tablet, and mobile. And so you could start that Way, but then you could use javascript and bind to those Events that every time they change that preview, then we Can take them to the proper control. So you can do these Small things, start simple, and do some items like that. You might have a section for desktop, tablet, and mobile, And just focus the right section when the user changes those. And that's pretty quick javascript to implement. It's really nice to get started, do some of these easy things, And then dive in and go, okay, well, i'm going to refactor And just write all of my controls in javascript from the Beginning. So rather than going back and forth, We're going to create and delete them as this changes Rather than having some sitting there that aren't applicable. So you can start out small and then work your way up as you Get more comfortable with the javascript api. And i have some resource links, but i know there's probably Going to be a lot of questions about, well, what's going to Happen with geutenberg? And the answer is not quite Sure yet, right? geutenberg is still working on getting Into the editor. melchoice, who's the design Lead for the customizer, had a great talk at loopconf Just here in february. There's a link here to the Video. i recommend you watch it if you're Interested in kind of what's possible in the future. But if i had to venture a guess, which is just my personal Speculation, then i would say after geutenberg goes into The editor, i can see it expanding so that people can Edit header and footer regions with blocks and these Sorts of things. And then it would make sense For that to integrate with the customizer and have that Live preview as well when we're outside of the editor and You're talking about the entire site. So just some things to look forward to in the future, Especially as wordpress goes more and more javascript. You kind of want to become familiar with these things. A lot of people are heads down in geutenberg and react. But also kind of learn the customizer because at some Point they're probably going to be working together. And you'll be able to do really cool things that other Folks can't offer if you are able to work with both of Them. And just some development tips here. There's this customized browser history plugin i really like. So i'll go ahead and publish these changes to get rid of our Change set here. But as i scroll, then we can See it's kind of adding the scroll value here. If i come in and click on something, if i go to a Different post, then we can see this url has been Appended. And by default with the Customizer, when you go in and you want someone to look at Like settings for a template or something, when they go visit The customizer, the url is just going to take them to the Home page, which isn't very good if you want them to view Something specific. So this browser history plugin Tracks where you're clicking in the customizer. And then when you share those urls, takes them to that Same spot. So really pretty cool. You can also check out logs if you have wpd bug on. There is a customized dev tools plugin. And it will log a bunch of stuff to your console. Just be careful. It's kind of like the fire hose. Every single event, when the preview and pain are talking to Each other and pulling and stuff, it gets pretty crazy. But you can kind of look at those logs and see what's Going on under the hood. And a ton of resource links. So i gave props to weston In the beginning. He has done a lot of work With building out these javascript examples. Stuff that is published. You can go take a peek at the Code, kind of tear it apart. And that's how i learn best is Kind of looking at things, dissecting them, reverse Engineering them. So go and look at some of the stuff. And you want to build really cool things in the customizer With javascript beyond what you can do with php. A lot of it is already built out in these examples. And you can just tweak it for your needs. So thanks. That's all i have. I think maybe we have time for a couple of questions. And i'll also be around at the happiness bar as well afterwards. Well, thank you, ander. So who's going to learn javascript All over again? So do you have one question? Yeah, so the question was it seems like a lot of platforms Are moving to javascript. And you know, that's correct. Users today expect that instant, like, live preview kind of Thing that you're not going to get with other technologies. And javascript empowers that. So especially as folks like Are on, you know, native mobile apps, or they're using Facebook or something, and it's kind of this live updating All the time, those sorts of things you can't really do With a standard website. So people are adopting Javascript because the web needs to match that Experience people are getting elsewhere, and that's sort of The expectation they have. We have a couple more. Maybe can you pass the mic for the live stream? So on the php side of wordpress, we have wonderful hooks like Apply filters and do action to make everything we build Extensible. How does that work when we start Building all of our features in javascript for the Customizer? How do you make it so that your plugin can be Extended by other developers? Yeah, so that's a good question. And everything you do in The customizer, all those settings and controls you register, If someone else writes a plugin, they can access those and see What controls you have. They can access that current State and see, you know, if i was talking about creating a Slider, you could go in and see if i have two or three Slides. You can look at what else is going on. We also talked about events, so you can bind to events. So we looked at kind of the going from desktop to Tablet, that responsive preview. Well, if that was a plugin you wrote, i could bind to That event and every time something happens there, React to it. And so that's the same sort of Thing you can do when you're working with other things and Making your customizer code extensible is just make sure You're emitting events and kind of doing some of those Things so that other people can hook in. It's the same thing if you write on the php side, you Have to actually write apply filters or do action, Otherwise people can't hook into that. It's just doing those same sorts of practices in javascript So your code is accessible.