This system basically allows us to build our own blocks — and it's AWESOME!

when I initially first started thinking about how patterns would work with the new Global Styles inside of generate blocks I was really thinking about being able to do things like bring entire components across into different parts of my website without having to rebuild them from scratch and add all the individual classes as you can see in this C design my image up here has a class this little tag has a class my headline has a class and even this excerpt has a class if I wanted to go reuse this somewhere else on my site like let's say an archive page P I wouldn't want to have to add the container and the image and then add all the classes to each one of these blocks I'd want to be able to bring it in in a pattern just like this I imagine that's how most people are thinking about patterns but just earlier today I was having a conversation with Tom the founder of generate blocks and he said something kind of profound to me he said patterns basically give you the ability to create your own blocks now I didn't know exactly what he meant by this at first but once it all clicked for me it was a pretty amazing Discovery let me give you an example of what I'm talking about we're going to start off with the blank page here and I'm going to show you exactly what I mean let's say we're starting a brand new project and we want to style up our primary button for this project we know we're going to be reusing this button hundreds of times across this entire website so we're going to want to do all of that with the class so we can control all of it globally so to set this up initially I need to add a button block to our page and we need to give it a class in this case I'm going to call it button- primary we'll go ahead and hit create and since the button block comes with some default styling I'm going to go ahead and move all that from the local block styles to my class and hit start editing now I can go in here and make these changes for the demonstration purposes I'm just going to greatly change the style of this button so we can tell it's not the default style anymore I'll do this by changing the padding maybe making it a pill shape and going in here and even changing the background to a red color so now we know our button primary has this red style pill-shaped button right but when we want to add this across our entire website let me show you how many steps that Tak takes first I need to add a new block and click the button block so that's one action I need to take next I need to go ahead and add that class which was Button double Das primary that's a second action I need to take but of course some of these Block Level styles are overriding some of my class Styles so I need to go ahead and clear out the local Styles here and press confirm so that's about four or five different actions I need to take to get this button exactly how I need it but thanks to patterns we can actually pretty much create presets for all of our different default Styles instead of going in here and adding a button and going through all those four different steps what we would do instead is create this one time and create a pattern out of it so I'm just going to call this button double- primary just to be consistent with our class name there and I'm going to turn the synced patterns off we'll go ahead and hit create but instead of having to add another button to the page add the class and remove the local styles with this saved as a local pattern all I have to do is add block start searching for button and down here here I have my button primary pattern now I go ahead and insert that into the page and all of those steps are already taken care of it's already added the button primary class and it's already removed the local Styles because that's the condition we save the pattern in so not only does this make sense for components where we have multiple different kinds of blocks configured together it actually makes sense for creating all kinds of different presets for even single blocks think about how you might use this for your button stylings you could have several different patterns set up for your primary and secondary buttons but you could also have this set up for different headline Styles container Styles grid layouts the possibilities are almost endless in the different things you could do by using these patterns and so long as we're using the class to style everything we can always go back in here and edit this let's say we wanted to go back to our blue color and since it's using that class it's going to update every instance we use this pattern across the entire website which is the global control we were ultimately after now once I've started thinking about patterns as a way to create my own block or presets for blocks my mind is really exploded with all the kinds of different possibilities not only is this going to make it quicker and easier to build out websites it's going to make sure we maintain really consistent websites that scale really well I for one am really glad that generate blocks decided to use the core implementation of patterns because this gives us the ability to create synced and unsynced patterns and to be able to add these directly from the editor at any time as you can see with just a few clicks we can create patterns and also insert patterns into our page without ever leaving leaving the editor hopefully this little Revelation is as mind-blowing to you as it was to me cuz I know this is really going to transform the way I build sites going here forward if you learn something new in this video I would really appreciate a thumbs up and if you'd like to catch the next one make sure to subscribe and we'll see you then

Channel: The Admin Bar

Views: 1,794

Keywords:

Id: 8NWfjbzqrno

Length: 4min 45sec (285 seconds)

Published: Wed Apr 17 2024