 Hey everyone, thanks for coming and I appreciate you all coming here and I'm clearly not Jonathan So I apologize for that, but I'm glad that I could fill in in his stead So today we're gonna be talking about Extending WordPress with with slot fill. It's something that I am super passionate about and I enjoy it And I talk about it whenever people will let me so before I do this introduce myself real quickly My name is Ryan Welcher. I'm a developer advocate sponsored by automatic where as my bio said I work to remove barriers of adoption For WordPress and Gutenberg. I've been a developer for since about 2004 and I've used WordPress since about 2009 give or take I'm a regular contributor to the Gutenberg project and to WordPress So so what is slot fill at a super high level slot fills an extension paradigm that allows developers to add elements to existing UIs in WordPress It's it does so by allowing us to register plugins containing content or what we're calling fills to be displayed in a specific location Or slot somewhere in a UI Items are rendered outside of their elementary and so this is very similar to react portals If you don't know what react portals is it doesn't matter where this is just sort of it's a similarity Currently there are 12 Locations or slots available a couple of them are experimental So I probably shouldn't show you but I'm going to show you them anyways and well Yeah, and slots are location-based So while they differ in implementation they can be sort of philosophically compared to the actions from the hooks API In that they are They're their source order dependent So they're rendered in the order that you register them and they're obviously register or sorry render it in a very specific location Excuse me, so Let's look at a very simple basic slot fill system So it can piss of three components the first component is called the slot component and wherever this component is rendered Any fills that are associated with this Component will have their content rendered in the slot location The component is that three props with the name prop, which is the name of the slot a fill props object Which is an object of properties that any fills that are targeting this slot will have access to and then we have a bubbles Virtually it's a boolean that basically changes the event bubbling behavior Yeah So this is what a very basic slot would look like it's imported from the WordPress components package And then there's all the props I just talked about the fill component is the next part So this component is used to provide content to a slot The this component can be rendered anywhere Inside the UI even in a completely different react or like elementary and react, which is what makes this so so sort of powerful It accepts a single prop and that's name and that's the name of the slot that this fill targets This is all gonna make a lot more sense in the manner that's where and so the last piece Oh, sorry. Here's a here's an example of what that code would look like So the last piece of the puzzle is the slot fill provider component This is the magical glue that connects fills and slots Basically, it wraps the UI and its job is to detect any slots and any fills somewhere in its child Or sorry inside of it or any of its child components and then move the fill content to the slot location Yeah, and it has no props So a basic slotful system kind of works like this an application or component is wrapped inside a slot fill provider The name slot is rendered somewhere in there inside the application a fill with the same name is rendered somewhere else and Then that fill content is rendered in the associated slot location So here's that and here's kind of like a code representation of what that looks like It's so does this thing work? We got the slot fill provider up here followed by these my awesome app that I've built and then inside I'm Rendering a slot and then later on a fill and then when that would render the contents would render in the slot location This is sort of like another graphical representation again wrapping our UI inside of a slot fill provider We're exposing a named slot on the right-hand side and on the left-hand side on the right-hand side. We're Exposing to our sorry We're adding to fills and then the slot fill provider would take over and move the fill Contents into the slot location in the order in which they've been registered So how does WordPress do it? So everything that we've seen and talked about so far is Kind of a closed system all the JavaScripts we have access to we have to build this this is reacts We need to build process all that sort of stuff Well as extenders and developers of WordPress How do we get access to this because we can't just rebuild the block editor every single time we want to add code to it? so the way that we extend it is By using these two new pieces that are introduced by WordPress the first is a is a function called Called register plugin and its job is to provide the entry point to the system And then it accesses this sort of like global list of array this array of register plugins and the second piece is Another component called the plug-in area component and its job is to reach into that list of register plugins and then render them in Internally and and and then that's how that works. So let's look at the register plugin function. It's part of the WordPress plugins package. It has two parameters The first is a name and it has to be it's a string and it's a name and it has to be a unique name Among all plugins that have been registered and the second one is a settings object Which has three properties the first proper render is the only one that's that's required and that's going to refer to a component That will be rendered and inside of that component. We can have one or more fills There's icon which is optional and it's used to define a visual asset to be associated with this plug-in some fills will Inherit an icon from your register plug-in call I just won't and then the third is scope and it's only there for completion sake because We don't use it for anything right now And in fact, you shouldn't use it You should never define scope unless you're doing something custom with the plug-in area And I'll talk about that second because your your plugins won't show up So this is a simple example of register plug-in So the plug-in area component is sort of the last piece of the puzzle And like I said it it renders all the register plugins inside a hidden div and then it has two props It has scope like we just talked about and Any if you define a scope for a plug-in area, then your registered plug-in calls have to also Define that same scope and then there's an on-air function. It just handles errors And so this would be what that looks like So the wordpress lot fill systems a little bit more complicated So you just have to bear with me and just trust me that this is kind of how it works But so a slot fill provider wraps the editor provider component the editor provider component It's like a component that gives us a block editor inside of it We've got a layout component where a bunch of slots are exposed Fills are registered using the plugins API and then fills are rendered in the hidden div by the plug-in area component And then fill content is rendered in the appropriate place This is sort of a pseudo code for how that all looks and feels and then this is a bit of a graphical thing again So we have our register plug-in that adds to the list the plug-in area down there in the bottom right Renders those fills and then the slot fill provider will take over and render the content in the appropriate slot wherever that is So Excuse me so so far so far everything we've seen has been the basic slot the very basic components So that's not how the slot fills are actually made They're actually not just simple components their name components They usually contain other functionality and have inner components in this example You can see how the plug-in post status info slot fill is structured And if you notice that the slot is exposed with the fill itself, and that's where we get the name slot fill I'm making that up. I'm assuming that's where the name slot fill Yeah, so once that's been Built now we can then expose this somewhere inside of the UI. So this is actually what the post In this simplified example of the the plug-in post status info slot is exposed inside the post status Component now this component is is where the where you see all the stuff about your post now I've truncated a bunch of the stuff in there because there's it wouldn't fit on the slide So but just take my word for it that that's how it works and then so when we register a fill We can then import the plug-in post status slot fill from the edit post package And then wrap whatever we want to appear inside that that slot in the plug-in post status info And once that renders it would look a little something like that Oh, I should probably leave these if you want me to leave the slides up a little longer with the code for pictures Whatever just let me know I'm happy to do that cool, so Currently there are like I said, there are 12 slots available So I'm gonna go through them all and so we've already seen the plug-in post status info one in the last slide So the next one I'll talk about is the plug-in pre-published panel So this one adds a panel to the pre-published sidebar that that you get when you hit publish the first time It takes three props. We have an optional class name We have a title the title is what will appear in that panel if you leave the title off The the header will not display and then there's an an initial open flag that will tell you whether or not the The panel itself is open and if there's no title provided, it's always open So the code to render that would look like this We're just pulling in the appropriate slot fill up here for the pre-published the plug-in pre-published panel I'm gonna get sick of saying that for the end of this for sure And then we're just wrapping our our content in here and then when that renders it looks like yes With my little avocado down there at the bottom The next one is plug-in post publish panel. So this is almost exactly the same It just happens after you've you've published in that sort of like hey, yeah, you published post is live screen So you can add it there the the props are all the same again. We have class name We have title and we have a initial open the code for that looks a bit like this the only difference between this and the last code slide is the name of the the slot fill and so That's pretty common when you're working with slothful because it's so because it's so location-based you might I mean It's exactly the same code under the hood. It's just in a different spot. So it's a bit of a lot of sort of repeating things Yeah, and then some of that renders it would look like this That's my custom panel with the avocado down here. The avocado is a running theme for this developer advocate. I don't know Next one is plug-in more menu item This renders a menu item in the plugins group in the more menu drop-down, which is a real hard thing to say but it's in that three-button drop-down and And it can be used as a button or a link depending on on the props past So it accepts the H and H ref prop and when this is used it's used as an anchor instead of a button It supports an icon It supports an on-click which is just a function that will be run when you click on it And then the bottom when they're it will take any additional props that you've passed to it And it will actually trickle them through to the underlying component on underneath. That's why I have this sort of spread operator there So an example here would be I'm going to add an item that that links out to the slot fill reference guide on the block editor Handbook and I'm adding target and rel and those are not props that this slot fill supports So those will be trickled down into the the button basically the button on underneath and then we add some text there And then when that renders it looks like that Maybe click on that. It'll take you out to the right place next one is Plug-in block settings menu item. These names are fun. So it's up to get used to them It adds a new item in the block settings menu on any allowed blocks So this is how you would add something to a specific block in their menu So it it takes four props the allowed blocks prop is an array of blocks that this will appear on If you don't add this it'll appear across all blocks There is some logic around selecting multiple blocks and and whether or not it it It displays a bleed if if you have three blocks selected and one of them is not in the allowed block list Then this won't will not show up That's kind of an edge case then we have we've icon We have the label that that will appear and then we have the on the on click again So this is an example of that We have the allowed blocks This is going to add a add a button to the paragraph block with a very long label And then when you click on it it will alert clicked so the most useless code example I could possibly come up with And so that's what it looks like. So I've clicked this this button or here and this shows up down here And if I click that it will alert Plug-in sidebar, I'm sure everyone in the room has seen this if they're if they're not sure what it is You've definitely seen it before this one is a sidebar when activated in the right hand top right hand corner by the Published buttons that that's where where you would see this It the contents of this fill will show up inside of the sort of sidebar That's that's open when you click the button. So this needs a name which is an identifier for this sidebar We have a class name. We have a title that's displayed at the top of the sidebar We have an is it's pinnable Boolean that will Say whether or not you can actually pin it in in the top there and we have an icon. So code looks like this I'm giving a name a title and my avocado icon again, and then a little bit content and then when that When that renders it looks like that. So this is something that I'm sure everyone has seen before tons of plugins This I think this was one of the first Slots that that was available. So many many many plugins like Yoast was one of the first ones to really use it So yeah There's plug-in sidebar more menu item this one is I think it's a bit old Because this only works with with this slot filled that I just showed you with the plug-in sidebar So if you don't and you get one when you register the plug-in sidebar What this does is this adds a button to the more menu a drop-down that opens up a sidebar That's really what it does. So the the two Props it's the target Which is the name of the sidebar of the plug-in sidebar that you want to open and then again an icon So in this example, I'm doing both I'm adding the plug-in sidebar down here and giving it a name and then this is adding the The button that will target the same name and then that shows up here. So if I click this This sidebar will expand Yeah Okay document setting panel. This is my personal favorite of all those slot fills I guess this is my favorite. It's a weird thing to be have favorites for I guess Render's items below the status and ability panel in the document sidebar. So this takes a name class name a title That will be displayed and then again an icon the Code looks like this Everything we're doing always in imports from the edit post. I should mention and I didn't earlier But I should mention this that The slots appear in the package where you find them So in this case, we're looking at everything in edit post So that's where all of these slots are exported from in the package Yeah, so when this is rendered it looks like this and we have a little component there So this is the the experimental one that I'm going to show you it's in the block editor handbook So it's not a secret or anything, but I will say please use this with caution. It's experimental Experimental things can change and break all all all the things, but this allows replacing the the dashboard Button to go back out of full screen. It has no no props the code looks like this So you can see we're importing the experimental dashboard stuff and and aliasing it and then rendering This out and when then when they're sorry We're adding this full screen close mode full screen mode close button or component And then when that renders it looks like this so that I've replaced the WordPress logo with an avocado And use with caution, please just use with caution Cool, so there's currently three slots available in the site editor I'm not gonna put you through going through all them because they're exactly the same The only thing you have to do is pull them out of the edit site package instead of the edit post package Yeah, so that's it more. We need more slots. We don't have enough slots Well, we can get more slots if you help us get more slots. So if you have any use case for a new slot in any low location and highly Highly recommend and encourage you to go to that link create an issue and and and talk about it because these are the extension points that every Developer uses and everyone every developer needs and we've only got 12 and compare that with what we used to have back of the Classic editor experience when that, you know something like 8.6 million Yeah, so okay now I want to talk about some fun things that you can do with with lots of wow I'm really I'm really motoring here. I have to slow down a little bit Yeah, cool, so we're gonna create our own slot fills So there's a function that will help you do that you can use this function called create slot fill and it takes up a Parameter of a string and basically what that's going to do is return to you a fill Component and a slot component with matching name Properties, so just it's just to help her function So a basic Slot fill example would look a bit like this. We're gonna import our create slot fill We're going to create a slot in a fill with a particular name then we create a new component called Basic create slot fill so the best Okay, the best practice here that that was totally clear the best practice here is to name The component the same as what you're naming it up here. It's just the way that is there's no rhyme or reason to it That's just what's what's being done and then It's going to get its children and then we're going to wrap the children inside of the fill component And then we just add a dot slot property to our component and add the slot component to it And then we export it and that's really all all you have to do Sorry, I guess I should have probably gone through it that way And yeah, so for the next bunch of slides just assume I have a settings screen that is going to be rendered so this is how we expose the the slot So we've created our slot. We're importing it now We're exposing it inside of her settings screen and then we're going to register a plug-in Which is going to use that custom slot that we've made and it's going to wrap this This this string which I don't know why I have it in back text with nothing in there But when he is and then when that renders it'll look like this. So this is my setting screen. This is a panel, right? so What if we have fill props so fill props are can be any slot can use them and they can be pretty powerful So if you like, you know, this isn't much of an example But what if you say how you know if you were localizing some data that was like the user data And you want to say hello user and then you wanted all of your your your fills to to reference that it's maybe it's a bad example But that's what I'm going with and then so what we're going to do is we're going to use the same slot fill or the slot And then add some fill props and then in our in our Inside of our register plug-in call We're going to create this function because this the props get passed to the the contents of this So you get a function that has props and then you can say props dot message and when that renders it'll look like this Hello my or message. Hello slots You can customize the fill structure. So with this particular one the fills are all going to be wrapped in a button and Yeah, and so again, this is my setting screen. This is all very much the same. It's just the name the slot that's changing And then when we register our plug-in we can use multiple instances of of the slot fill to create multiple buttons So in here I have three buttons and then when this renders it's going to render me three buttons So this is this can be very powerful if you want to control What goes in a slot fill like for example the document setting panel one it's wrapped inside of a panel on the panel body So you just put the content in you don't have to worry about it styling it properly and getting the appropriate components in there Custom slot structure so we can we can customize the the slot so the slot will wrap all of the fills and so in this case I'm What I'm doing here is again We're getting all the fills past to our function and we're just checking the length that's there we're going to wrap all the fills in a code block and then otherwise just return also doesn't return anything and then when I use it I just expose the slot as normal and then This will be rendered inside of a code tag and then when it renders it's rendered inside of a code tag so Yeah So we can customize both slot and fill this is a really trivial example, but in our fill We're wrapping everything in an li and then our slot where we're wrapping it in a uL So we're building out a unordered list, which is kind of silly again But you can see how combining these would could be very very powerful if you're building out of Dewey I'm like hello check we go Yeah, and so okay, so I'm where it works exposing our slot again, and then We're using the custom slot fill to create these list items and then when it renders it renders like a list Okay, cool. So this is a fun one that idea This is a slot fill outside of the editor and so what I what I did this a little while ago And it was it's a it's a dashboard widget that uses slot fill And so we're going to I'm just going to take you through it So the first thing that we do is we're just going to register a dashboard widget the way that we normally would Here the only out they think I'm outputting is just a div with an ID that I could target with react Then I create a custom slot fill again. It's a very simple one some extraneous markup in there apparently and then Yeah, so when that's done then I add the slot fill system to the widget and I do that by creating my dashboard widget So you see I'm taking the slot fill provider and wrapping the whole thing. I'm adding a little bit of markup in here It's just a title and then I'm exposing exposing the slot and then I'm creating a custom plugin area with the scope of dashboard This can be rendered anywhere You you don't see it it can be run at the top of the app and bottom of the app as long as it's inside slot provider It doesn't matter and then just down here. I'm I'm using React to render this to the dashboard widget. So I should note though I'm only using WordPress packages the WordPress element package is a wrapper for react So I pulled render from that package. I'm not using like a different version of react or anything This is all straight out of WordPress and then once that's in place I can register a plugin and then I am scoping it to my custom one and This is my This is the last of my favorite gift fall on the internet. It starts out with like oh, what do you show me? And then it becomes okay Cool Okay, and so at the end of all this if you there it may not be a slot available for you You may not be able to extend the thing that you want to Extend so what you could try is you could try actual react portals and I wanted to show this code by George mama dash Billy who I think he sponsored by go daddy and he is super duper smart And he'll he okayed me to use this. He's mama duke all over the place But this is an example of using react portal to add that little smiley button into the editor so it's super super cool I just wanted to share that and oh If you want to steal all the code or any of the code from this anything you've seen is in my repo So that's the link and that's a QR code to get there feel free grab it and And review it and tell me how horrible I am at to add writing code So I'll leave that up for a couple of minutes or a couple of seconds. I should say All right, everyone got it we're good If it doesn't work for you come get me and I'll just I'll email you the link or something or snail mail to you I don't know. I'll figure something out to you. Yeah, cool. And so that's it for me. So Thank you, and if you're looking to find me you can find me as Ryan welter codes on twitch youtube and discord I'm at Ryan welter on the twitters and in most slack channels as welter Ryan welter welter Ryan variations of my two names Yeah, so Any questions happy to try to answer them and in slot films the example I actually made a couple of fills and I was interested on your thoughts in ordering them because if they return no Yeah, they move to the bottom next time they rent returns from thing So do you have any thoughts on ordering? I do I have I have a lot of thoughts on ordering I have a PR that actually orders them that I started a couple years ago That's I would love to get in place. It's Because I don't I think source order personally is a atrocious way to handle Controlling how your code runs, right? It's like back in the day of like procedural like I used to write a lot of flash code I don't know if anybody else wrote flash code But it was like you write it that the stuff at the top of the page ran before the stuff at the bottom of the page And that's that's just not a not a not an efficient way of doing it so there are some discussions around it because I The yeah, so so that doesn't answer your question, but I feel strongly about being able to order them Yeah, unfortunately Anyone else? Oh Yes, it's it is it is and it's it's it wasn't I didn't get any pushback on the concept of it It was more around the implementation of it And I think it was just more of a question of like well We should give the users the ability to manage the order before Developers can you know I mean so like if you read well It's it's sort of like being able to like so let's use the example of the of the document setting sidebar Right so we've got set we've got all those panels and you can't order them in the classic experience You could set that order based on user preferences, so I understand that's maybe where we want to go with it But I have to I got a light of fire under somebody probably me so anyway sorry Adam go ahead cool So it's a couple questions. I'm gonna combine them all into one Yeah, so the first part that the last thing you showed the portal Implementation does that mean that like we can literally put slot fills anywhere we want in the editor well not a lot fills Specifically not slot fills right but portals you can technically if you can figure out The way of getting it like finding the right classes and all that stuff and making sure that the class actually exists and all that Yeah, it is technically possible. I think there's a there's a certain plug-in by Google who might know about this that did That was something An amp and plug-in Yeah, yeah, yeah, so It is possible. It's going to be a hack, but much like the way You know actions and hooks were kind of in the classic experience experience of enough people hack it in a certain way We usually end up with a hook for it So maybe that's maybe that's one approach to getting things in kind of a gorilla approach Anyways, you should give more so the other question is about removing things from the editor So currently it's easy to add things and slots, but there's really no way other than like CSS hiding to remove elements Well, yes and no there is we have to know the name you have to know some things about it So my question though is do you think there's an approach where we could be registering core elements with slots and then you could just Unregister them. Yeah that we hook things in I think so like there are there are internal slots used as you probably know So like if you're building blocks if you've ever used inspector controls or advanced inspector controls inside of your blocks That's actually a slot fill so there's a bunch of internal slot fills that are being used but You can you can unregister a plug-in for example, but you unregister everything to do with that plug-in You can't there's no way to like so let's say that you have a plug-in and you register four things And you want to get rid of the third thing can't do it You can't you can't get access to it in that regards You can get a list of registered plugins and you can you can unregister the plug-in that you want to get rid of But it gets rid of everything it's a it's kind of a sledgehammer approach to it Yeah, yeah, you can't do that Thank you very much for this there was one Piece of code the beginning and it shows up throughout your little avocado in the slides around the custom icon And that's something where I've been a little stymied in the past by the documentation around how to get a custom icon Is that something that like is that a sort of a known documentation deficiency or am I just looking at the wrong place? It's a good question. I think in the sense of what I was doing with the custom SVG. It's probably a bit of a known It's probably a bit of a documentation issue. It will work The way that I did it and I can show you the code is I There's this awesome tool online where I took an actual image and dropped it in turn it into react components I'm actually rendering it in that way I'm not it's not a true SVG where I have to like get it into webpack and all all that stuff or it's not It is a true SVG, but it's not that so yeah, it's I think it's a bit of a documentation thing Hi there. Thanks for this. I'm not a developer. So I hope this question is relevant But if you get out just get out. No, I'm kidding If we so if we're adding additional Options within the editor for some kind of control are the Options available through the WordPress API if we have a headless site on the front end Through slot fill. Yes. No because this is strictly for the UI of Gutenberg. So Yeah, there's no there's no data layer Available for what we're what we're talking about here as far as I know. I don't believe there is I mean there is for blocks You can get stuff for x you can get stuff for Many things but no no this is strictly for the UI Now if for example, you're a slot fill introduced to means to say add a Custom post I'd you could get the data from that, but you can't couldn't get the actual slot And it wouldn't be it wouldn't be any good unless you were like it wouldn't be any good to you You can get the list of all the rest of your plugins But unless you're doing this with it, it's not much use to you. It's a good question. That's a great question Hi with a day I modification. Can you modify what you store in the blocks per se? Not what you store, but you could so there are slots like I said there are slot fills available in In the block API like inspector controls with beds inspector controls things like that if you can add You can add your own to your own custom blocks and let have people use that and then but it Unless it's setting attributes for for your block or doing some other side effect like setting meta or whatever it is It won't really affect the block itself It's it's quite literally just used for UI elements inside the block editor or the site editor or whatever editor You're in that actually has a slot fills enabled Any other questions? All right, let's hear it for Ryan. Thank you