 I gave this at work camp Portland went really well so excited to share this with you all. It's my favorite talk title holy blockamoli so I've been diving into Gutenberg and kind of block development since about March The project has been going on for a lot longer than that really ton of stuff to learn So I wanted to share with everyone kind of that journey and for me It starts with why even learn this in the first place WordPress 5.0 came out yesterday have this great new Block editor and really we heard Gary kind of talking previously about this is all about the user experience and different ways to use Content and for me. I kind of wanted to fulfill a need So I had a shortcode that displayed a Google map Well, that's kind of not the best experience right having to remember Is it address or location equals that I put in the square braces and how does that going to look on the front end and My shortcode there were some things that would you know You could adjust height and some of that but it was hard to tell what was going on without publishing So this is just a much better experience for your users And so that's what drove me is that kind of content authoring And really putting that user experience first and this is one from A set of blocks called wp block party and they did data visualization blocks, which are really cool I can't even imagine how this would look in a shortcode Can you imagine how many parameters would be on that shortcode? To do this kind of stuff and see what's going on But here you have those nice visuals you can have tons of settings you can adjust So really creating this great experience and this is going to be the future of wordpress And if you're not able to deliver this to your clients, they're going to find somebody who can So for me, it's really important to deliver this experience To the people that i'm building projects for And so I went through this long journey I kind of want to back up hindsight gives us a lot of different perspective And so for me, I can't go back in a time machine and give myself a bunch of advice So I went to share some of these tips with you and hopefully They're helpful and the first thing that I really took away from kind of this journey of learning how to create blocks Is that there are different levels of adoption for wordpress 5.0 So a lot of people I've talked to different agencies developers are going I'm gonna have to learn react and javascript and all of this stuff Well, you actually don't I kind of broke down these levels of the progression and the first one is just Upgrade and test like just adopt 5.0 at all And maybe the new editor doesn't make sense for a legacy project That's not in development anymore and you install the classic editor. That's fine That's still adopting wordpress 5.0 And then we have opt-in functionality which we're going to talk about There's a ton tons of new things that come out of the box But there's some stuff you have to opt into and do a little bit of work for Uh, and then you can kind of optimize the block experience. So Out of the gate, there's a ton of core blocks But there's things you can do to make that experience better for your clients And then we can get into things like migrating short codes to blocks and creating custom blocks And as I look at this adoption kind of levels and progression I really split it by language and realized that there is a lot you can do with php I did it backwards. I dove into react and javascript and es6 and all this stuff because I thought it was cool And I went to hack away on it And then I figured out man, there was a ton I could do before I even had to go down that path And so that's my first tip is start with php If this is all daunting and new and you haven't been playing around with it for You know the last year Just start with php. There's a ton of things you can opt into with theme support One example here is color palettes or white images Raise your hand if you've seen a Gutenberg demo that has those nice full-screen white images If you have an existing theme Outside of the core themes that have been updated That is opt-in functionality. You will not get that if you upgrade to 5.0 You have to add theme support in a little bit of css And then you can support those the css that says hey my theme will show white images and support them you opt into that Color palettes as well. Maybe you're working on a project and instead of the color picker Allowing the user to pick any color they want Well, if I'm doing a site Um For somebody who has a specific brand you can go in and limit that color palette to only colors that match the brand And now people can't screw things up and shoot themselves in the foot when they're working with the editor This is one of my favorites is post type templates We've probably all created a custom post type for something I started working with wordpress and 3.0 when custom post types came out Because my projects needed something like a team page and custom post types are great for that Well, if you go in and you've played around with Gutenberg and or you've seen the demos There's that button to insert block and then this huge list of all the things that can be daunting for your users If you set up post type templates, you can actually define Which blocks are going to pre be pre-filled in there? And what attributes so if we go back to this we have name title image bio This is easy for someone to fill out a team member compared to a blank slate And they have to know Hey, I need to insert a heading block and it's an h4 not the h3 default like that's people aren't going to figure that out So you can kind of provide some guide rails For things outside of the freeform write a blog post There's lots of structured content and we can use templates to provide that content and that structure And you can even lock them down So uh, if you lock that in that means those blocks can't be deleted They can't add something else and guess what every team member is going to have a page that looks the same So what if you're building landing pages that match a specific layout or all sorts of things where you kind of want to Lock things into a certain template you can do that and all it takes is a little bit of php When you're registering your custom post type We also have block filters Now these are really nice because that huge long list of blocks that core ships with might not be right for every post type If i'm doing a team member does a video embed Do I really want some team member like slapping their custom youtube video on their team page? Maybe not right if i'm working with a big brand that's probably not going to fly So you can adjust what blocks are available to what post types or even check user roles all sorts of things I think of this is If i'm developing something and i'm creating a custom post type for recipes and I develop a new block for ingredients If you register a new block by default it shows up everywhere Take advantage of these filters trim out the blocks you don't need for certain post types So your users don't have a daunting list and if you're creating a new block Define where it should be used My ingredients block probably doesn't make sense outside of the context of my custom post type for recipes And so a whole bunch of stuff we can do with just php And then there is a large learning curve when you get into creating custom blocks that editorial experience In the new editor and the react side of things you're going to have to learn that And that kind of is where There's this big line and you're going to have to take a big leap But for a lot of your projects, there's a ton of this opt-in functionality and guide rails You can provide with php. That's really kind of low hanging fruit that you can go through an update for everyone And then take the time after all the dust has settled and start learning how to create custom blocks And when you do that like most projects and wordpress start with a plugin So I've seen tons of things shoved in the themes and for me, you know Custom post types should be in a plugin. We're separating structure and style Similarly when you're creating blocks, you're going to have to register the css and the css and javascript that power that block Dynamic blocks need a little bit of php. I actually prefer to make all my blocks dynamic Even if i'm doing something simple, I might want to render it differently in the rss feed then in the standard content context And you can do that with dynamic blocks And if setting all of this up from scratch seems pretty daunting there you can scaffold a block plugin with wpcli It's also a great project called great gluten block that will set up webpack that transpiles react and does all that stuff So you don't have to worry about it But you will have to understand modern javascript wordpress is going through this shift and To write custom blocks, you're going to have to make that leap as well JavaScript has been evolving. This is not some big new swing in the ecosystem in 2015 es6 came out and outside of Wordpress like javascript really took off and all these things took off There's been a new version of javascript every year since then it's going to continue to evolve And so you will have to understand react and jsx Make use of components. This was a big one for me Before I dove into all this stuff. I was mostly working with jQuery and those sorts of things If you find yourself hard coding and input, you're probably doing it wrong There's a component for that in the new editor that you should be using Similarly, you want to change state not the DOM. So with my map block, I defined location As an attribute and if the location is blank That's one state and I just define what markup should be there So maybe I show a message that says location is required If there's a valid address in the location field, I show markup that renders the map I'm not actually editing the DOM directly I'm just defining these different states and reacting accordingly Review the source code This really helped me to actually go take a look at the core blocks and see how they did things So if you're building an image block or something Media-based go look at the media blocks the gallery blocks get an idea for the Media placeholder components all of those things And a lot of this is documented in the handbook. I really wish I found this sooner There's thorough documentation on all of the components. Here's an example of an accessible svg So instead of creating your own svg use the svg component that gives you accessibility In-depth tutorials tons of code samples And the design principles if you read one thing in the handbook before you get started read the design principles This will help you understand the philosophies of the project in the new editor And taking that mindset when you go in to actually develop and create those experiences will really help out And then be prepared for changes 5.0 released yesterday And it was you know, been like two years since we had a release They're gonna come pretty fast and frequently After this so keep up with things But know that you are not alone The entire community is in this together This is a picture from work camp miami in march when they had a dedicated javascript Gutenberg track Uh in some resources here, but that's all I have so thank you very much a taylor me on github and twitter You can grab the slides and all the resource links and good luck exploring block development