How (and why) I rebuilt our website with GenerateBlocks & GeneratePress

all right this is the fun part we have to trust in the process that all of this is working for about 15 to 20 seconds uh while you wait on youtube to catch up but it does look like we're live uh i can see us here in the call so hopefully it's all good good morning everyone we're uh super excited to see you today i've been really really excited about this call anytime i can talk with dave foy is a good day for me and anytime i can talk about generate press and generate blocks is a really good day so we're doubling up on it today and it's friday everything is going our way today so fingers crossed i said that and now the stream will crap out but uh we're happy to have everybody here i'm gonna post a couple little things real quick to make sure we get everybody involved uh if you wouldn't mind hitting the little like button on the bottom of this video that's really helpful to make sure people actually get notified about this but uh good morning dave it's really uh really awesome to have you back on the show it's been a while you went away for a couple years and i i didn't see you a whole lot yeah we disappeared we were practically on calls every week weren't we for a little while back there people started to talk so uh i i think we just had an agreement didn't we that i'd disappear for a while we'd let the rumors die down and then we'd kind of get back into it slowly again so here we are i mean the lighting's a little bit different from my setup and yours but we're actually in the same room it's the same blue wall behind us i could reach out over here and dave right there absolutely let's just um where are we over this way i just saw your blue wall i thought i'm having one of those you know what i saw dave toomey's blue wall and then said i'm going to get one of those when i move yeah so it's all toomy's fault that's right that's right many like many many things no doubt well i'm super excited about this call today uh as i was preparing to rebuild the admin bars website with generate press and generate blocks i wanted to do some kind of dinner on it not to convince anybody that this is the tool for them uh i think you know you you pick the tool that's right for you but i do love this tool this set of tools and i do want to share how i'm using it but i wasn't quite sure how to do it and i ended up rebuilding the site fairly quickly getting it all done uh and i'm so deep into it i'm so close to the project it's really hard for me to know what to share about it and it just so happened that dave is making his way back to wordpress and checking out a lot of these same tools uh and he offered to jump on here and be the one to ask me all the questions kind of on behalf of the community probably a lot of the same things you guys are wondering now we did collect a bunch of questions as people registered for this call and both dave and i are trying our best to monitor the youtube comments in here so we we want to answer questions as much as possible so as interactive as we could make this i think the better uh so if you have questions go ahead and just drop them in there we're both going to try to grab them if we don't get to them i apologize but we do have a ton to cover dave and i jumped on a call yesterday and kind of walked through all this and there's a lot of stuff to get to so other than that i don't have a whole lot of setup so i'm going to pass it over to dave he's going to run this show and i'm just here to monkey around with buttons awesome let's do this yeah welcome to brilliant welcome to the admin bar website teardown um hey i mean i'm dave foy i'm your host for today i've got sir my guest today is some random dude kyle van dusen i don't know um kyle you can skip telling us who you are what you do because i think we all know you're the yeah you're the tacos guy right that's right that's the one uh yes i mean you've explained how this call came about in the first place anyway it's uh entirely selfish really on my part because as you said i'm kind of getting back into wordpress and started to survey the landscape whatever you're into is something that i am very interested in checking out i know that you talked to me previously about redesigning the tab website the admin bar website and i was very very interested so i just said tell you what let's get on a call i am just going to grill you i want to know the ins and outs the top the bottom the left to right and we'll figure out how you've done it why you did it what limitations you found and uh and that's it so what i'd quite like to do first for a little bit of context is just have a bit of a quick tour of the actual site itself you know the actual front end just have a little look you can point out to us some of the sort of the features and the you've got the home page the events the podcast um and everything else absolutely so i'll just share my screen and uh make sure that our faces are out of the way of anything important so i'm going to vamp for one slight second while i let youtube catch up on it but essentially this is it the the admin bars website is very content heavy so um there's not a lot of functionality built into it there's not a lot of things to interact and do on the website necessarily um it does pin our video right in the top corner hopefully that doesn't get in the way um but there is tons of content like you mentioned we have events like this one you're watching right now where we have people kind of pre-register for and a description all that and then replays afterwards we have uh nearly 100 podcast episodes on here over a hundred articles on here pages for all the products we've created uh pages for all the products we endorse uh and some kind of random things like that so um there was you know we'll kind of get into i guess the uh the details of of what changed from the old one to the new one but that's essentially it we're really wanting to just promote all the content that we create and the the primary call to action since we're all web developers here the the primary call to action on this website for anybody who isn't familiar with us is to come check out the community so you'll see that uh kind of throughout the site there's calls calls to action everywhere for people to join the community um so that's that's a huge thing and then obviously most people have involved in the community we're posting new content on the website pretty regularly so i want to make sure that all that content is accessible to folks that can find exactly what they're looking for and all that so yeah awesome so yeah it's you've got some fairly standard wordpress stuff and then it looks like some kind of custom post types as well yeah and it'll be interesting to see how well we'll see how you've managed to do that in generate press and generate blocks but yeah i've got to say we had a brief conversation where you were you were sort of thrashing away with the design and we'll talk about the design process in a moment but um and you know not quite happy with a few things i've got to say the end result is superb i mean it's just absolutely beautiful i think anybody who designs for long enough realizes it's just part of the process you have to throw stuff on the canvas and then hate yourself for a period of time sometimes that time is a a couple hours sometimes it's a couple weeks for me on this one it was about a month or so that i just hated everything i did and then all of a sudden all of a sudden it's just like poof everything works and it kind of comes together and then you're on a roll so it's just part of the process yeah yeah well it just looks awesome the next question well the next question then will be why did you want to redesign and rebuild the admin bar website in the first place was it a case of being sort of dissatisfied with the old design or you know just dissatisfied with the old tech that was running it or was it the fact that you'd spotted some kind of shiny new objects that you wanted to you were being drawn towards or a mixture of all of them i was gonna say can we say all of the above all of them when i first made the admin bar website it was all made with elementor that's what i was using at the time um and then i guess two years ago i started learning oxygen and i rebuilt the admin bars website with oxygen now uh oxygen does a ton of things that elementor didn't do it gave me a lot of new toys it it taught me a ton i didn't know really any css or html other than the very very basic things so i dug into oxygen and i learned a ton about it i think the biggest mistake i made in that transition is i rebuilt the admin bars website with oxygen as like my first real oxygen project and if you haven't worked with oxygen before um because everything is focused around creating classes for things there's a lot of like systems and processes that you need to have in place in order to make it scalable and i didn't have a real good grasp on that at the time that i made it so you could see like evolutions of the site throughout the site and a lot of inconsistencies where i didn't set things up properly and it no matter what platform i was going to use it was kind of at the point where it needed to be rebuilt anyways because it was just not sustainable uh where it was now in that time in between um i really came around to the side of blocks and started building a lot of sites with blocks and getting excited about that i've kind of found my home in that system uh so there was just i would have rebuilt it sooner but there was a few things lacking in generate blocks namely the query loop that was preventing me from even making that feasible so once the beta version came out of the query loop that's when i jumped in and started making the transition yeah so it was it was that new because it that feature is fairly new isn't it i think it was in the last main version yeah is that in the pro version of generate blocks it's in the free version i believe oh it is there are extra features aren't there in the in the pro version but you can actually get it done because tom osborne the developer of generate press and generate blocks i mean he's had the wp show posts plug-in for years and years i mean even before i was using elementor i was using that so i suppose that evolution of that plug-in into the main generate blocks tool was probably something that was going to happen eventually but i can see how i have not having that query loop would stop you being able to produce websites of any of any kind of complexity so yeah i think yeah yeah that was just one of i mean there's definitely and i think we'll get into this but like the trade-offs you make going from any platform to another platform or system to another system and there's definitely some trade-offs to make but that was one of the trade-offs like this website can't exist without query loops on it right so there was no point in even trying this until i could do all that and there was some like stop gaps like wp show post but it felt so disconnected to me and there's a lot there's a lot of like css and stuff you'd have to do to make all that work the way i wanted it to so i knew this was coming to generate blocks so excuse me it was just like a a little exercise in patience and waiting until it was all there and i could do it the way i wanted it to be done yeah yeah yeah so it was now you mentioned that you'd gone all in with blocks anyway what made you decide to do that was it the whole guttenberg is the future might as well get on board was it that page builders are old hat and you know there were there were problems with with that page building method or a bad experience with elementor or oxygen or what was the thing that made you decide i'm all in with blocks and that's that's where i'm going you know when when all the gutenberg stuff came out i was never in the camp of like never guttenberg this is trash i'll never use it but i certainly wasn't excited about it i tried it and i was like oh i don't i don't know you know we'll have to wait and see on this so i was kind of in that middle ground camp um my personality is such that i want to try all the things so i have to kind of stop myself from trying every single tool out there but for me the biggest thing is uh i'm not good at self-reflection but i figured out about myself i'm a very competitive person like anything we can turn into a competition i would like to turn it into a competition and then i have to win that competition it's just my nature i do it with everything uh we live in like a little pre-planned neighborhood but there's like lots of ways you can get out of it right well i've like driven every way in and out of the neighborhood multiple times and timed it to figure out what's the best way out and the best way in to like shave off a couple seconds i don't know why it's what i do and i can tell you which way in and out is the best and they're not the same route anyways um i've never figured out a good way to translate that like energy and passion into the work i do here because building websites really isn't a competition in any way nor should it be um but to fire me up i kind of have to have that so one of the ways you can actually measure what you're doing and turn it into a competition is page speed scores and uh you know webcore core web vitals all those kinds of things because they give you a score and then you can beat that score right so that fuels me a lot so in in that becoming a bigger part of how google's looking at websites how other people are analyzing websites what's important about websites that's something that really kind of drives me around that same time elementor was having a lot of problems uh and and their big release was a total nightmare and couple that with the fact that you know you just throw throw together an elementor website without a whole lot of extra work your mobile page speed scores are in the 30s you know and that that was tough for my competitive nature uh and that's kind of what got me looking into oxygen was the um the performance gains i would get out of that and kind of what i found in testing some different platforms is though oxygen is miles ahead of where elementor was and probably still is i don't use elementor so i can't really speak to that um but blocks was even a step ahead of that um so that was really kind of what fueled the whole thing for me yeah just being a competitive just completely competitive competitive nerd um what i'd like to do is before we take a look at the back end in wordpress because i'd i'd love to walk you through what have you walked through the the process really of in the back end the the the order that you built things i imagine you probably started with global styles first and have a look at the process and how how just what features of generate blocks you've used i'd like to i'd like you to talk us through first like your process of um like planning this site designing this site and then how you actually kind of you know we'll get into the depths of the of the back end of wordpress next but like did you sort of plan it on a bit on a back of a piece of you know scratch a piece of paper and then just do it straight and generate blocks or did you design in a separate tool yeah so it's it's funny when you're working on your own stuff how much different your process can be than when you're working on client stuff because i have all the leeway in the world like i don't have to answer to anybody to do this so the process goes out of the window when it's your own thing doesn't it yeah absolutely so i've gone back and forth on design designing first outside of the browser well even though sigma might be in the browser but outside of the website in a dedicated design software um doing it that way or just designing in the browser i found that just designing in off in in the website with oxygen was nearly impossible for me because you know you got to kind of just throw paint on the canvas right to figure out what your design is but with oxygen with any webflow with anything that's like class-based you really have to have all those things planned out or you have to do all that work and then delete it all and redo it the right way so i've i really struggled with trying to design in the builder with oxygen when i moved to blocks it was better but i think my comfort comfortability level with blocks wasn't enough that i could comfortably design and build at the same time so um i think there's benefits and drawbacks to both i do think if i'm being completely honest the product comes out better if i design it separately first where i'm not constrained by well when i drag this widget in it already kind of looks like this and then i'll manipulate it's i got to create this widget from scratch so i think the designs are a little bit nicer when i do it separately so initially when i was kind of kicking around how i was going to do this i think my plan was to just design it in the builder and probably keep the site really really similar and as i was really trying to look at the site objectively i'm like a lot of this is trash and i don't want to just rebuild this so i think i need to make a significant improvement i'm sure it would have improved slightly had i just tried to recreate it but it wasn't enough for me so i did want to go rebuild it so i did jump into figma and just bash my head against the wall for about a month and we can take a look at some of those files too if you want to do that yeah i think it'd be good to have a quick look through definitely if you don't mind yeah absolutely so yeah let's see here i'll go back to sharing my screen try to turn that on and off so we can conversate without being in a tiny bubble when we're just talking uh there's actually two files i'm in the more final file but i'm gonna go back here and uh this is the file i started with i've played with figma and played with xd i just i like tools right um so there was this is the process of me throwing a bunch of things uh on the canvas and seeing what worked so these initial designs i definitely wanted to go with something as simplified as possible i didn't need to be an over-the-top design so it was more about finding like a small motif that i could carry throughout the site without making it overly complex so this is my initial idea with just some plain cards you can see some things like this carried over into the final design things like this did not make their way into the final design but there was a lot of this was another home page design which these cards made it into the final design but this layout of just repeating did not make it so as you can see i'm not super organized in all these there's a lot of mess in here but the the design process is messy uh this was the initial blog post layout which was uh fairly similar to what we ended up with but does have some minor differences one of the big things i wanted to do is um we have a lot of long form content on here and a lot of people hate reading long form contact content in dark mode i tried an entire light mode design for the admin bar but it just doesn't work for for our branding i don't think but i definitely want to have a better uh light mode dark mode switcher specifically on the long-form content not necessarily across the whole site so that was a high priority for me we had implemented something like that in the oxygen version but it was really half-assed and didn't work so that was something i was trying to work out in this like where am i going to show light modes dark modes what's going to switch um had some ideas on doing like the blog hub pages or podcast hub pages with this this grid kind of look and i didn't end up going with that as well so we'll jump into the newer file here the what i ended up with i kind of took some of those designs and was working with some new concepts so simplifying it going in here and saying what does this website look like if it's light light mode and you can see this is more closely related to the uh the design we ended up with what it looks like in dark mode and then kind of stepping up the fidelity as we go um playing with all these things yeah it looks beautiful and i can see there that actually when you eventually built the site you still made some adjustments yeah i can see that some of the layouts are kind of the other way around and um but the it's much closer to the you actually got pretty close to the eventual design i think there in the figma yeah here here i'm getting pretty dang close that's that's the nice thing about doing this for yourself too and not for clients is i didn't i there was no one holding me to this had to be pixel perfect to the design this was a concept and you know once you go from figma where uh the world's your oyster to you're actually working with html and css things are a little bit different you know so there's compromises you have to make or things don't uh break in mobile views you can see i didn't do any mobile mock-ups of any of this i just figured i would figure that out as i go so i just gave myself leeway to say this is the general concept but let's see how that actually plays out once we put it in the builder and make sense of all of it cool cool i like it i like it a lot should we take some questions yeah absolutely if there's some questions in here let's have some questions let's do them um james murgatroyd hey james he's asking them james talk james said to me the other day uh he welcomed me back from my webflow gap year right which i really liked uh he's asking did you use a figma wireframe kit i didn't i designed pretty much everything from scratch so i've my i when i first started doing web stuff i had spent the 15 years prior in adobe illustrator every single day making vector graphics for science so i'm most comfortable in adobe illustrator so as i started going with some more like modern web uh web layout tools i kind of just migrated into adobe xd because it was so familiar it's it's not a huge gap to go from one tool to the other i opened up figma and played with a little bit and it didn't make any sense to me at all so i got stuck with xd for a while and just that i got to try every tool i started getting more and more into figma and trying to figure it out and really that was probably i started playing with figma more seriously maybe a couple weeks before i started working on this admin bar uh redesign so i didn't do any pre-done kits or anything like that all of it was just basically from scratch okay cool susan is asking hey susan um she does performance so she's really she's uh talking about our discussion of the performance of websites built with elementor versus websites built with with generate blocks she's asking does performance not also depend on your combination of builder and hosting as well sure absolutely absolutely and and the whole you know a lot of times when people will ask questions in the group about the performance issues they're having you know there's a couple metrics you can look at right away to figure out is the host the problem here you know that that time to first byte if we see that you know you made a call out to the server and it took two seconds for the server to respond we got a hosting problem you know um so you know any kind of cheap shared hosting is probably not what you want to use for your professional web design business there's a time and a place for cheap shared hosting i don't think it's necessarily inherently bad it's not what i would want to put all my client websites on i figure we're we're providing a professional service we probably need a more professional setup i use vulture high frequency servers through cloud ways on all my projects not a huge fan of cloudways uh and i like saying that but uh the the performance of the the vulture servers is really good i've had a lot some people have had some reliability issues with it but i haven't had it so much knocking on wood but yeah that can definitely be a huge part of it but i don't think even uh where i left off with elementor so i'll caveat by saying that i know they've made improvements but where i left off with elementor going from a shared hosting to the best host possible you still want to go from 30 to 98 you know you were going to go from 30 to 40 maybe so it wasn't going to make that huge of a difference it was elementor that's the problem yes that's that's the issue isn't it it's the fact of the the baseline level regardless of the hosting so it's just making sure that there's an even an even playing field isn't it so even on cheap shared hosting you might get a good score of say 90 on mobile with generate blocks means that you've got very little to do i mean you would still make sure if it's a professional site you use you know great hosting and you would probably implement caching anyway you would probably install perth matters so there's quite a few things that you can be doing but the fact that typically not always but typically an elementor site will require a lot more work to um to get those page speed scores so the other question uh is and a few people ask this actually before the call in different ways why did you and i think this is probably quite a big one a philosophical question actually why did you choose generate blocks generate press versus cadence stackable any of those other block plug-in solutions yeah and i do think this is the thing that probably most comes down to preference um [Music] i've used cadence quite a bit there's quite a few sites as i started with blocks i really wasn't i didn't have my feet under me enough to do everything i needed to with generate blocks and without the query loop and stuff i was installing generate blocks and cadence and supplementing in cadence where i needed to so i'm pretty familiar with it um so personal preference why i did it um when you drag in a element with elementor or with cadence or with beaver builder there's a lot of like pre-built components so i like to use the the example of like an icon box or an info box as an example right so you can drag it's going to have like a spot for an image or an icon it's going to have a spot for a title it's going to have a spot for a paragraph it's going to have a spot for a button all in one self-contained widget in some cases that's great you drag in one thing you've built five things right and then you have a lot of controls for those uh kind of all individually generate blocks you can make the same thing but you're you're building it out component by component so you need to drag in a container to hold everything you need to drag in an image for the image a headline for the headline a paragraph for the paragraph a button for the button um some might see that as more work to do because you are dragging in multiple elements instead of one the way the what the reason i prefer that is because now i have the baseline controls on each one of these elements i can style each one of these elements completely independent of each other and what i found with more of those pre-built components is that you are kind of limited on some of those things they might not give you all the options that you would for the headline that you would if you just brought in a headline block right so with cadence you could build all those things separately but uh for me it was just the the ease inside of generate blocks to build exactly what i needed to uh without any of those decisions made for me and that's one thing i interviewed tom from generate blocks a couple months back and that's one thing that's important to them is like not trying to make too many decisions for the user and generate blocks does such a great job of that that's kind of the style like building in but again like i said i think that's totally personal preference to people yeah i think um the fact that something is for instance in cadence and i'm not i'm not kind of you know hating on cadence whatsoever but the fact that something is pre-built is great until you want to for instance globally style it which you can't so you're into then having to individually style those individual blocks or like have to start again the one interesting thing that tom said on the call with you which was a great call by the way i was really really interesting but he was saying well the fact is that there are only those very very few elements that most web pages need a heading some text an image a container you know some sort of layout component and uh and the query loop i think there are there are six blocks in the in the entire package but he was saying that the fact is you know for your icon boxes and your info boxes just as an example um if generate press themselves or if you decide to update the controls on the heading for example well wherever you've used that heading you'll that that's that those same improvements will be available on every single heading it doesn't matter what context it's in whether it's within a box or within a layout or within something else you know some other kind of block pattern that you've built yourself and i really like i really really like that approach i know with elementor i've many many times um stumbled across the the problem that um you know i want to i want to be able to kind of globally style all the headings it doesn't really matter if they're within a an icon box or something else but either i can't do that because it's in a completely separate pre-built widget or the controls aren't the same the controls for the separate heading widget is not the same as the controls in the icon box widget yeah you just don't have that same level so i i do like that approach and that that kind of simplicity as well um i'm thinking now that i would quite like to jump into wordpress let's do it if that'd be all right with you i'd love you to walk us through how you built it um if you could start at the very top sir work your way through it in a very precise uh step-by-step workflow that would start over i'll just rebuild awesome just start from we've i've got i've got a long time dude um i'm sure we've all got several days no doubt so so i think part of this um part of what will help is to talk about kind of the the hierarchy of importance um for lack of a better term so there the way everything trickles down inside wordpress uh well i guess the way inheritance works in websites the way it works inside wordpress then the way it works inside generatepress and the way it works inside generate blocks there are some ways you can go about that to use that to your advantage so that's how i try to think about these as i'm building it out so for me as as a brand new build it all starts inside the customizer so we'll just go ahead and jump in there anything i can set here inside the customizer i know cascades down everywhere right so if i can if there's a setting available here i'd rather set it at this level than anywhere else because i know then i have to do less tweaking down the road so for me the customizer is where the whole thing kind of starts out that's where the top level of everything lives so that's things like my color palette so inside here you can see my color palette which is mainly just gray and then yellow lots of blacks and grays yes absolutely uh a ton of them um so uh all those colors in there the typography also is in here so um the typography settings there's only two fonts on the whole site so all those can be set in here and then i know colors typography all of that is cascading down across the whole site whether it be things that the theme's just injecting into the website that i'm putting in with blocks no matter what it is those things are going to kind of be centrally controlled as much as possible uh other things might be like layout so uh how wide your container is all those kinds of things so that's really where i start is at the customizer okay so you you've gone through and set your global colors your global typography what are you doing anything in layout particularly so um the container size so the container in here is set to 1440 content padding which it is kind of confusing and it's hard to explain all this where because you could build a website with generatepress which is the theme on here without generate blocks and you might be relying solely on the theme and there's a lot of controls in here for that now there's some in here that once you install a page builder or generate blocks which is essentially a page builder um those things are kind of going to kind of take over here so there's some things in here that might be set and aren't even really being used um but there are there are a few things here and some of that layout stuff actually would go into the generate press elements that i had to build that are gonna kind of set the scene for those things globally yeah yeah yeah that makes sense because tyler's asking here actually is there a way to set global padding for containers and i think that's the content padding at the bottom of that yeah that that is going to affect um really the the content that the theme would be laying out so if i wasn't using generate blocks so yes um so there are instances so the way i work is there's some pages i just don't want to build out i don't even know if i needed to publish that um there are some pages i don't necessarily want to build out with uh with blocks every time so i'm going to guess and hear that my privacy policy was one of those uh it wasn't um but there are cases sometimes where i just want to um jot in a little bit of content inside the uh inside the content editor and let the theme take care of the layout and stuff so i do try to default all those things in the customizer where there's going to be sufficient padding at the top and the left and right and same thing on tablet and same thing on mobile so i do kind of set those things up and we might be able to see kind of how that works inside the elements but if you wanted to do uh what tyler is talking about you'd really want to use global styles inside of generate blocks and set up some basics basically some default containers with all your paddings and widths and margins and things like that that makes a lot of sense yeah i mean i've been using generatepress since i think 2015 i think might have been the first time i used it and actually the controls that we're looking at here haven't changed a great deal since but that was for the just the basic content blogging theme uh which works really well and for a lot of people that's all you need but uh yeah so we can look at what the uh the generate blocks elements are as we get into there but yeah i understand so set as much as you can in the customizer anyway yeah absolutely as much as i can set in there i will and it's typically where i start the project is working through the customizer especially in this case i had the figma file so i could go in here and say okay these h ones uh you know here's the size of them here's the color of them here's the leading all those kinds of things so i could just have that open in one monitor have generate press open in the other and kind of translate all those things over really quickly so you have that you've kind of built out the theme for the website essentially through the customizer which takes away a lot of the decision making process later on when you're actually dragging in blocks because yeah those blocks will inherit will inherit the font size the uh the font family the colors all those kinds of things got it yeah and i suppose so the styles that you set in the customizer which are the kind of basic top level html tags h1 h2 h3 for example you can set those there but if you then want some of your own custom styles for certain kinds of headings i think you've got a few kind of pre-headers on this site and a few other things then it's actually generate blocks that you create those custom like global styles for those things which we can we can come to perfect but yeah that makes that makes a lot of sense yeah great stuff all right yes i think that's probably all of it inside the customizer i will say just a workflow thing i do use the additional css here as i'm building out sites to write css even though it's terrible to do in this tiny skinny window but just so i can see all the changes in real time there's none in there now because i've moved all that into a child theme i guess we could have started there with a child theme but uh i did use the child theme a generate press child theme on here yeah that's one of the questions we have actually which is a good point to stop for this question child theme did you use one and how did you use it or why did you choose it there's there's been a debate for a long time on whether or not you need to use a child team for for most of my career i've not used a child theme mainly because i didn't know how to do any customizations outside of what the theme gave me or what because outside the page builder yeah because you do have third-party plugins don't you like code snippets and wp code box which allow you to to write snippets of like functions that would go in your normal functions file in your child theme and and custom css so why choose a child theme anyway above using a third-party plugin so what i've kind of come to the realization you can do all of this without a child thief because of third-party plug-ins like that and and i have code snippets installed and there's code snippets running on here even though i have a child theme and i could just as easily put them in there i like the management of code snippets you know turning things on and off making separate uh you know separate ones for me there's no there's no um drawback to using a child theme but there could be a drawback to not having one so even if i installed a child theme and didn't do anything to it at least it's there if i ever need it but if you go ahead and just build on the regular theme and then need that child theme later it's more of a pain in the butt so for me it's just i might as well have it it's not a whole lot of extra work uh so it's really there to kind of cover my butt in case the event ever comes up that i'd rather have child theme in there yeah go yet now that makes sense definitely so we were talking about the hierarchy we've started at the top we've set global styles we've set anything we can in the customizer that may be overwritten further on down so now i know that any development of any website is never neat and tidy is it so i'm not suggesting that you did all this in this precise order but if you were gonna explain how you built this uh what would you say the next step would have been by where would you have gone next so the next one it's kind of 2a and 2b and it depends on what you're trying to accomplish i think we'll jump into the generate blocks global styles first because it's a little bit less complicated but the other part would be the generatepress elements they both serve a different function but they both affect things on a site-wide level so uh here in generate blocks under global styles i do have the pro versions of all these installed honestly i never use just the free version so i'm not a good person to ask is that in the free or is that in the pro i don't know i just use the pro for all of it um but we have the option here for global styles and you'll recognize this kind of page it looks like a post or page page so i typically refer to these as posts you could have as many posts inside your global styles as possible uh you can mix and match and put a bunch of different elements inside one post and just have one or you could separate them out i typically create a new post for each global style based on the widget so like i have one for headings i have one for buttons in this case i didn't make one for containers um but there are lots of sites where i do have a global style set up for different size containers so you would see another one here for containers but if we go in here into buttons and hit edit what you can do in here is uh we'll just walk through creating a new one because that will make it make a little bit more sense but what i can do in here is drop in a new generate blocks buttons element and here on the side under global style it gives me the opportunity to name this now it's going to go ahead and name it by default to some random characters but we can unlock that and we could just call this demo so we could go about using the uh the editor here to do whatever changes we needed to so let's say we wanted this to be you know a lot wider and we wanted it to you know have a big border radius and we wanted the background to be uh pink and the on hover it can be i don't know white we're making things up here right um and we'll say this is our new button style we want here right we've we finalized that now what global styles is doing is essentially creating a class for this element so the class is going to be gb hyphen button hyphen demo now you could call that in through writing css is fine but really what this gives you the opportunity to do and we'll just go ahead and do it here so everybody can see i'll just create a new page i am working on the live site which is probably a terrible idea but it is what it is not advised so if i drop in a new button here it's going to default to the default button styles but i can go over here and say use global styles and i can go to this uh i'm not inside the actual button am i oh i didn't save it that's why let me update this and we'll refresh here saving is important just do it kids yeah just save all right so we'll go back to where we were we'll drop in a button we'll click on this button here we'll click use global styles and now that demo button that i created is available and when i click on it it's going to go ahead and change all the settings i set up inside that that global style here to that button so i don't have to go back and recreate that every time the other part besides not having to recreate that every time is now you have one place to go back and edit the styles and will affect everywhere on the site so again i'm using the live site here because i don't know why um here is the primary button for the admin bars website which i've labeled primary it's yellow it has black text you hover it turns white but let's say for whatever reason the admin bar is now pink i could change this color to pink and hit update and we will see here that now if i go to the home page this button's pink and this button is pink and this button's pink and it looks terrible so we're going to quickly change this back um yeah we'll undo this there we go we'll save it undo undo undo yeah it was only pink for a moment now it's all back to yellow but obviously the benefit of the benefit of that is we can make siteway changes pretty easily and and that's really the thing i love the most about oxygen and webflow is everything is class first so you any element you make you give it a class and then you can reuse it everywhere this is generate blocks version of that it works essentially the same because you have all the controls of whatever that element might be to style that and give it its unique uh class name the only drawback is you have to go into this global style section to create those and you have to go in the global style section to edit those so you can't edit them on the fly now that can be a little bit of benefit because i can't tell you how many times i accidentally edited a class that i didn't mean to and changed everything on the website and didn't realize it a lot harder to do that here in this system but it is more time consuming to go into this this spot and that's something i talked with tom about too and there might be plans on the horizon to make that a little bit easier to do in the future but this is definitely a even though there's not a whole lot of things in here um and that's something i mentioned to you that this entire site is so simple i don't even know what to show you um but yeah there's not a whole lot of things in here but all of these things save me a ton of time and make this website a lot easier to update in the future yeah it strikes me that the global style system within generate blocks is it has the the power of oxygen and web flow which are both very similar systems um and but it gives you it gives you that simplicity of using elementor as well so something like elementor which has basically got you know very fixed uh set global styles i suppose you can add your own typography you can add your own colors but it's still quite limited so it gives you that power of a web flow and an oxygen but it's much much easier i think this is much easier to understand for a non-coder you know not really understanding i think so i think once you figure it out it's easier to understand uh if i had to knock generate press and generate blocks on some things i think they've spent so much time thinking about what is the easiest most uh future-proof implementation of this that we can do and they've nailed that on just about everything except it's not always intuitive to jump in and know how to do it from the start so the idea of there's patterns there's global styles there's elements that's a really confusing concept to wrap your mind around once you wrap your mind around it you think it's the greatest thing since sliced bread but like even me trying to explain it right now feels a little awkward yeah yeah yeah but that all makes sense so far so let's say then you set those globe those separate global styles which are i would say are more kind of i would think of them as more custom global styles so you've got your customizer styles which are very global top level html stuff really and your color palette then we get into creating more custom elements that you'll also want to globally style so you've got some buttons you've got some headings you also sometimes create different containers of different widths as well which is which is awesome so where would you go from here then are we kind of now looking into the elements for some of your kind of like global content patterns absolutely and i'm going to jump into that there's one thing i forgot to mention here that i think is worth mentioning i'm not sure if this is what tyler's asking or not but um i this is the new demo page i set up and brought in a button and used that global style so if we go into the block we can see that it's using the global style now you can overwrite all that stuff so if i said i wanted to use this global style but for whatever reason on this this page i don't want it to be a pink background i want it to be blue i can override it on this individual instance it's not going to override the global style but i could override it here in this one place which is nice if you just need to make like a color change or one little tweak but you want to still inherit the rest of those styles you set up which is is a definite useful feature in here so oh yeah definitely yeah if you can override that global style that's on on a per instance basis yeah absolutely i'll go ahead and trash that page so i don't forget later so let's get rich so so the next big thing is the elements now elements are part of generate press not generate blocks yes that you can use generate blocks inside of elements so um they work independently but they work nicely together yes i would say that tom i was gonna say sorry that tom's element system is probably something i've not really seen in other tools not in this way and it is so clever yeah and it's come on in bleeps and bones you've you've uh you've seen some other builders and themes pick up a really similar thing they've implemented a little bit different but i do think he kind of pioneered this idea which is um i think it all started with just being able to hook things in using all the hooks that are available inside generate press but inside of elements you you essentially have four different options you can create a block a hook a layout or a header um most of what i'm doing in here is a block nine times out of ten but i do have some layout ones and i do have some uh hooks in here as well so we can take a look at maybe some of the important ones here to kind of show you the idea of each so the first one i would look at look at is layout so this is a layout element which is a specific type of element and the options inside here are going to have to do with me laying out this page so for instance we have in here uh sidebar and i want to do content with no sidebars with the footer i'm just going default that's actually another uh element here in a second i'm disabling the default content title so by default the generatepress theme puts the title of the page as the h1 on the front end i'm disabling that because i want control over that i can set if i want what i want the content area to be if i want it to be default which is kind of a contain look if i want it to be full width which is what i want in this design or if i want it to be contained with no padding and then the the powerful part is all the display rules so now i can say this is the setup i want and here's where i want it to show so in instance i want this full page uh full width layout to show up on all pages i want it to be on the front page i want it to be on all my posts i want it to be on all my podcasts all the endorsements all the events those are some custom post types uh and i want to exclude this page category of standard page so this is kind of a wonky workaround i've come up with is there sometimes i don't want to use uh this full width layout i just want to go with the themes default uh layout and if we jump into here real quick i could probably maybe show you an example of that or maybe we'll just have to create one it doesn't look like i used any so i put in a little function here to be able to give pages categories you know typically you can only give posts categories i just put a little function in here to be able to also give pages one so if i just said uh dave page on this new page and we'll just put text goes here and we publish this and go look at it on the front end we'll see this is going to inherit that um full page layout you can see that this text goes here is going full width uh which if i was just wanting to drop some basic content in here um i wouldn't want that that doesn't look good so my workaround in not showing the full width uh layout is to set up this category and it's just called standard page because naming things is hard but if i click standard page here and hit update it's going to not use that layout element i used and it's going to actually just use what's default inside of generate press which is to have the page title here as an h1 and then the text inside my container so i found this handy apparently the admin bars website is not a good example of that but i know on my website i've done a similar thing for things like the privacy policy is just using the default page layout um so i've i've used that to be able to create pages where i don't want to put a bunch of blocks in i just want to dump some content you just want to yeah the straightforward generate press way right so i guess so those layouts then those um layout elements i'm thinking just in terms of elementor uh the way that elementor works you know like on a on certain pages you can set there to be i don't know like the canvas or the full width or the standard default from pulled in from your theme this is basically that same thing isn't it yeah absolutely i think i think you have some more granular control here but essentially the same idea and and the layout one is just one example obviously i might even have these sites run together that's the only layout one i have on here but that kind of gives you a sense of what the what the layout element does now there are some cases where i make might make three or four different layout elements depending on what my needs are it's probably for a whole other tutorial video but uh it is fairly powerful so you want to take a look at some of these other ones i do i've got one i have one question first before we press on amy asks a question amy ogden thank you amy if you override the global style for one specific instance so you were overriding the global style on the button about five minutes ago if you over if you override that will that element no longer take on any updated styles in the global element is it completely detached i feel 99 confident with this answer but not a hundred so take that for what it's worth it will inherit any new changes you make as long as those changes aren't the ones that have been overridden so in my example i changed the background color if i went back to the global one and changed the background color since i've updated that on that individual instance it's not going to do it but if i change the width of the button uh it would go ahead and inherit that because i didn't override that on that individual part that is cool if that is the case then that is very cool yeah i i feel confident that's the case but 99 i might yeah yeah you're wrong no that's good that's good good question and i will absolutely test that yeah amy can send a legal team like to have her legal team send you a letter and things like that if that's not correct so that's that's that's all good yeah i was just thinking as well i mean in in elementor which has the ability to switch the you know the full width and the canvas and things like that but it doesn't obviously have the display conditions that generate press has so i think this is more powerful really so from layouts i think you were saying that you use blocks the most yeah i'll quickly show you the hook just so if people haven't really used hooks before there's not a whole lot in here but a good example of this would be i have a hook for head code so you might have there's nothing in this one but you like your analytics code or something that they tell you to put in the header of your website so you can create a hook element where you could drop in that code tell it where you want it to hook into in this case i want it to hook into the wp head but there are tons of hooks built into generatepress where you could insert it in different places and you can also create your own hooks in this case it would just be in the head i would paste in my code here into this code editor and then i would use the display rules to say where do i want this hook to fire that's the most basic example i do use hooks for this is a really random thing that might just be my preference um i need to probably start closing some of these things out yeah so if if i zoom out of this site just using the zoom in my browser you can see that this website just stops um and if i zoomed out forever it stops forever um a better example of this might be something that has like a full width image as a background so on my website here this uh background image goes full width if i zoomed out on this and i didn't have it contained that image would just keep stretching infinitely uh and it would look really silly uh so i like to contain all my sights to 1920. uh it's not a magic number it happens to be the size of my monitor uh so it works really well for me and that's what matters right perfect so this contains to 1920 nothing's ever going to be wider than that so in order to do that and now i'm super zoomed out in order to do that i've created two hooks so there's one that i call open and one that i call close the open one goes at the very top of my website the closed one goes at the very bottom of my website and all these hooks are doing are opening up a div and giving it some classes and then the other one is just closing that div so it's basically saying at the beginning of my website hook in a div and at the very end of my website close that div off and then i can use c s target that div and say hey your your max width is 1920 pixels uh and i want you to be you know 100 but max out at 1920 pixels and that's just a little simple thing that i do but i utilize hooks to be able to do that uh pretty easy very very smart and actually if i recall um that the amount of hooks in generator press is insane yeah and if you want to hook stuff into wherever you like there's a hook for it uh i seem to remember they were quite granular actually um absolutely and and you can do the same thing with like hooking something into a sidebar all kinds of things and you actually can which we'll look at next these block elements you can actually use hooks inside of a block element too so you could create a block and then hook it into a specific place of the website which is nifty ah very nice yeah because i was going to say i used to do things like put like a call to action at the end of all blog posts and i would i would hook that in with like a pre-built in fact i used to do it with elementor i would create an elementor little template for that for that cta use generate press to insert those in i think this was before elementor had the ability to to design your blog post templates but um if you can do that in here then that's that's that's sweet yeah it definitely comes in i don't use a ton of them but when i need them they come really in clutch um all right so the block element that's the one i'm using most the time um a lot of what i'm doing with that is designing out things they're gonna use dynamic content for instance so one might be uh just the the blog post page so if we go look at articles we'll open this one here uh i need a way to design all of this out with all the dynamic content like the the title the author the the actual post content to design out this single post template so you do that in generate press through the elements feature so if we went in here blog post template the name of it we'll hit edit uh i can go in here and design this all out using all the tools that are available to me through generate blocks i'm putting in we can open this here we have you know a container with a container inside of it with the grid and a headline and then i'm actually you'll see here it just says hello world that's because i'm using dynamic content to bring in the post title here here i'm using dynamic content to bring in the post excerpt the author name the author image the date it was posted the categories and all that and then further down the line here we have kind of the main area of this post uh over here it's gonna this is actually just some code i put in for my little light mode dark mode switcher um you can preview it but it's kind of broken and then this is the actual content of the post so dynamic content there dynamic content for the author and all that kind of information and then i have static content like this call to action to join the group or subscribe to the newsletter or see the latest events that are coming up so i'm able to create this entire blog post template inside of a block element and then you get to choose what you want to do with it so again all those display rules come in um come into play so for this specific template that i'm creating i want it to show for posts all post and it's pretty simple but there are some cases in here where i've gone a lot not a lot more more complex with this to actually use the display rules to give me a little bit of functionality which i think is something uh worth looking at too yeah yeah so you can use so you can use you can create a block as a template which will actually be the template for an entire page yeah it's it's it's using this as the page template for my single posts uh-huh but you can also create blocks to be templates that might be just individual like a one container for example for like a call to action or a set of testimonials or something like that as well is that correct yeah absolutely right so i mean that is like ultra flexible ultra flexible would you have a question can you choose which post that you're previewing in the post template editor so at the moment we're looking at the hello world default post but just yeah unfortunate unfortunately you can't that is something that's nice inside of elementor or oxygen you can change which one you're previewing here you cannot so uh you're seeing just lower mipsum in here for the placeholder content i could change this technically to whatever i wanted but it's just going to bring in dynamic content based on the post so you are having to do a little bit with your imagination to know that this is going to be the page title this is going to be the featured image but unfortunately no you can't actually preview the post in the editor right well that's a deal breaker so that's the end of the call folks let's shut this call down we don't want to hear anything else no that's fine that that's that i mean as long as you know that that's the limitation then you can work with it can't you it's not a problem i think that's one of those like quality of life things that would be nice but it doesn't stop any of the functionality so again all this comes down to like what are the compromises you're willing to make to me this is an easy compromise to get awesome scores so absolutely no big deal we'll talk about trade-offs later on but you're exactly right yeah okay so you've got like your blog post template there uh and maybe if we can just look at you know two or three other blocks that you're using as well would be quite familiar absolutely so what i'll do i have i'm gonna try to keep this a little bit clean because my tabs are getting out of control um another one let's see i think the uh well okay we'll look at another simple one here so here's one for my footer so here i'm able to use all the generate block stuff to build out my footer exactly the way i want it i actually include this little call to action in my footer but what i'm about with this block is tell it that i want this the element type on the other one we didn't look at it but the element type was actually a content template on this one the element type is the site footer so now what we're telling generate press is i want you to use this block as my footer so now it's going to insert this in the footer wherever i want based on display rules so this is the same footer across the entire site so the display is set to entire site but i could make this as granular as i wanted and say i wanted you know a different footer on every page you could absolutely do that if you had the time but for simple things like this entire site works perfectly yeah yeah um yeah that makes sense jay is asking can you create a global style or block from a group of elements so could you create like an icon box for example with with with different styles so the way that you did with the button which was a global style on a single element could you globally style a group of elements in one block well not real maybe not the way you're phrasing it here jay because the way the global styles are working it's on an individual element what you could do is you could globally style all the elements that create that component and then create either a pattern out of that component or a reusable block out of that component and it would it would still have all those globally styled things inside of it so it's kind of a two-step process to do that with a component but you wouldn't be able to say you know just uh create a global style for this whole mess of things i created here as one cohesive unit you'd have to do that through patterns or through reusable blocks yeah you could both of those as well you could yeah going to generate blocks global styles create a new post as you called it just have maybe just that one pattern on that page and just set all the global styles on on that i think absolutely yeah yeah so you can do it but probably not the exact way you were thinking yeah yeah that's good i don't think that's the limitation particularly it's all so no it's just a different way of doing it i think all right so the last one i want to show you inside the elements here uh this is my attempt at being fun during this call so you'll have to see how fun it is um so this events page is something that's important to me because i love holding these events what i want to do with these events is be able to promote them ahead of time and get people to register um i'm sure this doesn't come as a surprise to anyone but that's to grow my email list so if i get you to register for this then i can market to you later so i have typically a mixture of past events on here and future events so if we look at a past event here this last one i did with mira uh ins this is a custom post type that i've created uh and then i've created a a block element to create the content template for displaying this but what we have in here is just you know the name of the event the little brief description the day and time it is a featured image and since this is a past event i'll see if i can mute this tab well i didn't i pinned it mute tab um it's going to have the video player in here so people go to this event and they can just start watching the event right away it also has the event description however and now i don't even know how to unpin there we go uh however there are other events here like this one that you're watching right now where this was a future event it hasn't happened yet so there's no way for me to show you a video since it's happening in real time right now so it's basically the same layout except at the top it doesn't have the video because video doesn't exist yet and at the bottom here it has a registration form so you can register for this so what i've done to make this work easily and easily as maybe relative but to work satisfactory to my needs is i have this custom post type for events and if we go in here we'll see all of the events all of the events are listed in here and what i've used is a category on here we can't see that in the quick edit actually i've used a tag it's a custom taxonomy but for all the upcoming events they're tagged with upcoming and if we went into the other one that i pulled up it would say past as the uh as the taxonomy for it so what we've done with elements here and i hope i'm not losing anybody at this point what i've done with elements is i have two different ones one is called past and one is called upcoming one of these elements shows a video and no registration form the other one shows a registration form and no video depending on if it's past or upcoming so all i have to do to change the layout here so we're on here on this one for this event that you're watching right now all i'd have to do in here is get rid of that upcoming and put past and we'll hit that hit add and update it and we'll give it a moment for my slow slow internet and now if i refresh this page what you're going to see is now the templates change to show me the video and no registration form so we'll refresh it here and now we can see the video showing here which i wonder if it would show it live look at that this is so meta right now this is the most meta i've ever been um and now the registration form is gone so that was kind of fun i'm gonna give myself credit for that uh so that's an easy way for me to be able to use one custom post type and handle showing past events and future events even though they need to show different content so to do that all i did in here was use those uh display conditions so if we go into this past event template um i can go in here and see this is event schedule is the custom taxonomy i created uh so show this template when the event schedule is passed and on the other one it says show this template when the event schedule is up coming so that's the only difference between the two but it gives me that control to be able to pretty quickly and easily change this from a past event to a or from an upcoming event to a past event with a couple clicks of a button yeah superb brilliant um when we had a brief little look through the site we had a little preview yesterday just for just just for five minutes or so but we would do is the um does the feature and i think this is generate blocks feature where you can create your own block patterns so effect effectively create your own block pattern library for further use throughout the site but there's also the concept of reusable blocks right which i've seen as well so you've got local patterns and then you've got reusable blocks yeah can you explain the difference and how they might be used on the site or if you've used them on the site absolutely okay so this is another one of those like quirky type things that it takes a minute to wrap your head around yeah but we'll start by going this we're going to first look at the local patterns uh which i think was called local templates until the last version so yeah and you can still see it says local templates here even though it's called patterns now generate blocks gives you the ability to have both local templates and remote templates remote templates come from their library of templates so think of it as pre-made sections that somebody else's design mic or somebody else that works for generate blocks has designed these templates and you could go into a page hit the little button and pull in any of these templates and use that as your starting point you can also create something that's your own pattern your own unique so kind of like i think it was jay a minute ago talking about creating like a global component you could go here and create your own template and then be able to reuse it through the site so i didn't use a lot of these on this project but there are some projects where i have uh dozens upon dozens of these um so let's see we'll go here to just the standard page one because it's fairly easy to figure out um what i did in this local pattern is just set up a couple little things there's this container it's got a container inside of it because the way i was doing some margin and padding and stuff but inside of it is a grid because this is kind of like a two column layout like a sidebar type layout where over here i um put in the content and over here i have kind of a sidebar and this is uh kind of previewing what we'll get into with reusable blocks but i've gone ahead and set this up with all the margins and paddings and responsive settings and all that and the idea here is now i've pre-built this entire section now this could be a hundred sections in this case it's just one section but the idea of that is now when i go dave says kyle i need you to put a new page on the website and it's going to be really simple just one of those standard pages we have on the website dave's simple page instead of having to go okay now how did i do that i had a container there was another container and there was some padding and then there was stuff on the right and stuff no that's too much so i can just go in here and start typing in pattern library this is going to show me both the all the ones that come with generate blocks and my local ones here's my local ones you can create thumbnails for them i just didn't bother since i'm the only one that looks at this but here's my standard page pattern that i've created so i'll click on that it's going to bring it in all that work is already done for me i can say okay well i don't need the dark mode switcher on here and i don't obviously this text is going to change and i'm just going to create whatever dave told me too told me too and now this page is already set up now this isn't one of those instances where it's global and if i make a change it will update everything this is kind of a starting point so it's a template for you to start with so if i went back to that local pattern in here and made a change to it it's not going to reflect those changes across the entire site um so the way that works is just a little bit different so you just have to think of this in cases with like i use this a lot for an instance like this where i have kind of a you know this page layout i want to use i'll also have this on i just did a really big site where throughout the site in different places we had like a video on the left with text on the right and it was really specific the way i wanted to lay out even though the content was different every time and that's that's the biggest difference between the patterns and the reusable blocks is patterns you're going to change the content each time reusable blocks the content is going to be the same each time so in this other website it was like a video on a side and next to it was a small bit of text and i wanted to make sure every time i did that i used the same layout so i just created a pattern for it and then brought in that pattern anytime i needed to use that so yeah on that side there's tons of patterns so it's it's it's essentially a standalone starting point isn't it you just add it to the page you've got a starting point and then from that point onwards you take it wherever you want to right and and to jay's point i believe it was jay sorry if i'm misquoting here uh if i created a local pattern and brought in a bunch of blocks and used global styles on those blocks i would kind of be able to give you that like global reusable component type thing so you can nest all these things together to create you know if this local pattern was just a you know a small uh card or something you could nest global styles of elements all inside of there and then bring those in wherever you needed to that makes sense so where do the reusable blocks come in then so the reusable blocks is essentially the same idea except it's where you want the content to be the same everywhere now the reusable blocks is not part of generatepress and not part of generate blocks it's just part of wordpress um right there are some terrible ui things here but we'll we just work with what we got but i'm going to show you where where i've used this um so for instance on this event page i have this little call to action on the side that says come join the group i have one for friday chaser and i have one for the latest events now i use this same thing on multiple places throughout the website here right but of course when i post a new event i don't want to have to go update this in a hundred different places right um so what i've done is just create a um a reusable block for these things now what's nice about this is let me go to let me think of a good place that i could do this we could just do it in this post template i think where everything's nesting in gets a little complicated sometimes um all right so inside this post template here i've brought in these reusable blocks and you can see when you hover over them you're not getting each individual element you're getting kind of the shaded area for this whole thing that's like the visual cue that this is reusable and all of these are reusable blocks well let's say i decided i wanted this come join us to be yellow i could the nice thing about reusable blocks is you can just jump in anywhere you find it and update it and it will update it globally but i could just click on this heading and go down here and say i'm going to change the text color to yellow and remember i did this on the blog post template so i've changed that to yellow we'll hit update and we can see i'm updating this reusable block we'll hit save that saved it here and now i did that on a blog post so we'll go to events here and click on one of these events and we can see this has been updated to you hello so anywhere i make a change it's going to change globally and that's not just a text color this could say join the community and we'll update that save it and again i did this on the blog post template but if i go over here and refresh this uh event page you can see now it says join the community so the benefit of this obviously is you can create reusable parts anywhere on your site and then bring them in so if we went back to the dave's page i was creating or whatever i could just drop one of these in and it would already have everything done for me so that's really when you when you want to use the same exact content the the part i was going to talk about that's a little wonky let me see if i undo this not that it really matters but might as well go back to what we had the part that's a little bit wonky is i don't know any way to get to these reusable blocks except to open the editor click the little kebab menu and go over here to manage reusable blocks and if we click that we'll go to a familiar looking page where we see all of our reusable blocks and we can go in here and edit them i guess that's kind of hidden away but the thing is is you can edit them anywhere you've used them so you don't really have to go here anyways you can you can do it on any page it's been inserted on so you could even create a new page insert it and make those changes and save it you know you can do that multiple different ways but that is definitely handy to have these here for things that you want to reuse throughout the site and be able to change in one place i've got it yeah so the reusable blocks are kind of wordpress core um which is like master editable templates you've got generate blocks which has got the local patterns which is standalone templates well basically you can just drop in as a standalone starting point um in fact here yeah much of design says i call all of my local patterns starters for that very reason which is which is cool and then also we've looked at i'm just getting this all clear in my own head thank you if it helps anyone else i don't know but you've also got within elements and blocks they are where you you you create a block and then you set display conditions for where that should automatically appear on the site so essentially you've got like those three separate kind of templating which are for different reasons and for different use cases um i think that would cover most things that most people need yeah i would imagine it it i'll be the first to admit that it definitely does take a little bit to wrap your mind around all those things and as i was figuring all this out i definitely got lost and created this when i should have created that and yeah you know figuring all that out is a little bit of a challenge but once you do you realize how powerful each one of these things are and that they're different enough that they need to be separate you know things separate systems within there uh but they're all usable just depending on what your need is in that that specific case yeah yeah so the big question what limitations did you run into yeah so so and and are there anything also as well just an additional question i might as well throw another one in are there any limitations that you could foresee possibly running into in future that you maybe didn't with the admin bar but you can foresee maybe for a different kind of website gotcha so uh small examples there's no uh modal inside of generate blocks so on the old events page for the admin bar if anybody remembers that you would go to the events page and there would be a button that said learn more and it would pop up the event description in a modal there was another button that said register and you'd click that and it would pop up the registration form and that's just kind of the aesthetic i went for on that design and building modals inside of oxygen is really easy there's no modal inside of generate press or generate blocks so i either i had to go download some other plugin that would allow me to create modals or come up with a different layout that didn't involve modals and as you can see from from what i did i just chose to not go the modal route i think it's actually better ux the way i have it now anyways so it was probably an improvement but there are use cases where i would like to have a modal and there's no modal built in cadences modal works really really well i've used that on other sites um with success um i was worried about installing blocks and cadence and maybe performance issues none i did all the tests and everything it's really fine to have them both on there so right you can do it i just find it messy so if i can avoid having both of them on there i will and i was able to avoid it on here um accordions there's no accordions inside here that's something probably don't get your hopes up on next week but they're working on some systems to be able to build things like accordions and tabs that aren't aren't there out of generate blocks now um and the other big one i think where it would stop a lot of people and where maybe this is just not a good solution for you is if you're doing a lot of woocommerce stuff i try to avoid woocommerce like the plagues so this is not a down the fact that there's no real woocommerce integration inside these tools generate press you can do some woocommerce stuff but generate blocks there's a few dynamic things you can do but not a lot of control over wu stuff since i don't use boom that's not a problem for me but if you have a bunch of woocommerce sites or your specialty is doing e-commerce this probably isn't the system for you so there are definite limitations like that um some people complain about the backside front side flipping back and forth not everything looks pixel perfect in the editor that it does on the front end so sometimes you're guessing a little bit and there are some trade-offs there uh where i do have to flip flop back and forth between the back end and the front end people will come to like the bakery where you literally can't see what it looks like at all uh until you save it and go to the front end it's not that bad generally i find that you're somewhere between 95 and 98 in the editor as as it's going to be to 100 the front end but there are some things you do have to get used to and say uh i don't know this is going to look the exact same on the front end for me i've learned i keep the customizer open typically while i'm developing on whatever page i'm developing so i can see that preview of what's going on change it to tablet and mobile and be able to see all those responsive break points i work with three monitors so it's not a problem the real estate's not a problem for me but that is definitely a quirk uh oxygen elementor beaver builder those things do a better job in the back end of showing you a more true representation of what's on the front end but i think we're splitting hairs because a lot of times it's it's 98 good yeah yeah yeah and it comes back to the trade-offs that we've been talking about as well isn't it you know if you can if you can kind of trust the fact that you've i mean you've set up a design system in the first place if even if that's a grand name for setting up you know some default spacing and colors and typography so a lot of the time if you set those things up you should really be able to trust that you've thrown a container you've thrown a grid on there you've thrown your in in there i think probably the issue comes about if you've got some custom css which is not being rendered in the preview but will be rendered on the front end yeah and even that's tricky because um it will there there's a little snippet you can put in the website to bring in the css uh from your child theme or from the customizer or both into the back end but it doesn't work 100 of the time so there's some things that will bring in and you see that custom css you wrote in the editor like that change being reflected and then there's some things that you just don't so for instance on our site like next to the pedal on a bunch of pages there's a little yellow bar and i did all that with custom css and that doesn't show on the back end um it is just one of those things that that's a compromise i'm willing to make it's it's not a huge deal it doesn't really matter does it in the grand scheme of things like i said i mean the compromise thing is important because for me i can compromise no woo commerce integration because i don't use woocommerce but for other people that's a deal breaker you know so it depends on the kinds of sites you're making yeah definitely yeah um we'll have some more questions and i'm just thinking we've probably got about five minutes left before we've hit the 90 minute mark which is probably the limit of anyone's anyone's attention so shout out to the 39 people still watching yeah come on special prize for all of you so i'll just go through a few of them um tyler was asking and tyler posted his generate blocks site in in the in the uh the group i think a couple of days ago which i thought looked really nice actually so he's saying i've installed cadence for using their gallery because it includes a masonry gallery as default how would you go about creating a masonry gallery with generate blocks so the default gallery widget inside of gutenberg inside of default wordpress i think it does uh masonry i'd have to double check that maybe it doesn't um there's only been a couple instances where i used a gallery and i actually installed another plug-in i can look at the net we have a blog post on the admin bar that it's like my block tech stack and it has all the plug-ins there's one in there for like um for galleries but it doesn't actually create the gallery it just gives you the option to have a light box for the gallery so if you click on the image it opens up bigger in a light box i've used that right i don't i haven't come across a whole lot of needs for image galleries so i haven't done a lot of it there have been times where i just created like a grid block and insert a bunch of images and kind of faked it but it's not you know it's not a perfect system for sure right yeah yeah um karen's asking do you have a great course recommendation for learning generate press generate blocks so my colleagues course is amazing yeah so unfortunately it's not open though um yeah so mike oliver did a course that's where i learned how to do all of this um was through mike oliver's course i actually have my 12 year old son going through his course right now he went through dave's no stress wordpress course when he was like 10. and he was building sites with elementor off of dave's teaching uh i'm updating him now to getting them in to generate blocks so he's going through mike's course right now mike has closed the course uh the plight of the online course creator that i'm sure dave is familiar with is you spend a year creating a course and then they do an update and nothing is the same anymore so with all the changes that happen in generatepress and generate blocks he was having to make so many supplemental videos that it was starting to feel a little uh disjointed he's actually working on a membership that's called the collective if you go to mike oliver dot me there's a button in the top right corner that says collective and you can sign up for notifications on that i think he's pretty close to launching i i don't know if he's keeping the full course in there or not but he is doing like ongoing tutorials and templates and there'll be new stuff every month and i think it's going to be fairly affordable so that's definitely where i would recommend people but other than that i don't know of any courses on generate press and generic blocks which is a shame yeah definitely it's um i mean mike's design work is off the charts isn't it yeah it's awesome i i uh we're we're buddies now but for a long time i was just a stalker of his and a huge fan so uh yeah he does really great work and he does a lot of the like uh site library like the pre-built sites you can get from generatepress and generate blocks uh he's done a lot of those some of these patterns and stuff he does really awesome work what do you think when people say that the gutenberg block editor is primarily for end users only for adding and editing content i mean i get the the admin bar website looks pretty nice my my agency website's not too shabby i mean so i guess that's a matter of opinion it matters what you need out of it if you need uh all the options that come inside something like elementor or webflow or oxygen then that's probably true if you don't need all of those things then i think it can do a lot more than you think it can one thing somebody needs to do a huge deep dive in is in generate blocks pro the effects panel it gives you the option to do all kinds of css effects and like uh transforms and box shadows and all kinds of things you can do so many things with that it's nearly limitless it's amazing the power that's in there but you wouldn't know it by looking at it i mean you had to tinker with it a little bit but it's amazing but what i've honestly found and i told dave this is the limitation has been really good for my output um i think when i first became a web designer i'd been a designer for a long time but not in the web i i think i needed to add all those flashy things to make up for the fact that i didn't know the fundamentals of web design so in order to make my client think this website's really good if i put enough flashy things in there i can mask all of these uh things i don't know about the grid right and what generate blocks has done for me is made me think about things in a more simpler form and i think that's made my websites come out better if you went through all my portfolio and looked at websites i built two years ago when i was using elementor and using every tool available uh the designs are okay but you can tell there's a lack of consistency there's uh there's things that are there or even like the old version of the the oxygen version of the m bars website where the events page had two different modals you'd have to click on a modal to read the description like why did i do that was it just to flex muscles and say like hey this description will be inside of a mo i mean there's no real good ux reason for that and i think the fact that things are so much more simplified and generate press and generate blocks i've had to think about like the fundamentals of things a whole lot more and say okay what am i trying to accomplish here and what would be the best way to do this i think it's made my designs better because i'm not over compensating with shiny things to mask for a lack of fundamentals and it does all the fundamentals so well so yeah for me it's been a huge benefit i don't know that that would be the same experience for everybody yeah yeah no that makes sense um and uh i think we are probably actually james also asked earlier are we doing this site with bricks next week you know i had a email card i sent an email out this morning kind of on this subject of like trying to there's so much anxiety right now with everything that happened with oxygen and people are worried about what tool to choose and you know the they brought up like the fact that you know you were huge on elementor and then all of a sudden it was web flow and you were gone and now kind of leaving webflow and back to wordpress you know one thing is there's a character trait of people like you and me that will get in front of a camera and make content about things and i think one of the character traits we all have in common uh other than like having a need for people to look at us which is apparent or we wouldn't be doing this yeah and the need for blue walls is we love to tinker and toy and play with new things if we didn't like to do that we probably wouldn't be making content on things there's probably exceptions to that rule but i think people like us are probably more fickle and and apt to try a bunch of different things so um am i going to use box next week or brix next week um no am i going to never use it i don't know i might get that itch one day or there might be something that comes out or i might find a limitation that makes me go do it i'm not going to eliminate it but i'm definitely not doing it for let's just go promote every tool that's out there the only tools i promote are the ones i'm using in my agency so you can go to my agency website and inspect all that and inspect all the client sites i'm using i'm building i'm only talking about the tools i use uh but technology changes and my preference changes and i get bored easily so yeah maybe combination combination of all those things yeah that's right that's my honest honestest answer yeah yeah excellent well i think we'll we're about ready to wrap this up my friend uh this has been fantastic thank you very much for uh following my request to uh to basically for you to show me how you did the website and i hope it's benefited everybody else as well this has been superb i you know this absolutely i wanted to do something like this but i don't think i could have really pulled it off in a meaningful way without you so thank you so much for jumping on here and running all this i didn't know what which questions to answer what questions people had you know so it's so helpful to have somebody kind of on the outside but that understands all this be able to come on and ask questions for everybody so hopefully we were able to shine a light on some things for people but i'm a nerd for this so if you have more questions just ask me if any time i can talk about this i'm happy to talk about it so yeah ping me with questions we'll do it any any questions we've not managed to cover uh just pop them in the group and yeah i'm sure that you'll be able to answer them brilliant well i'm sure that you have tacos to go and eat i have the wimbledon tennis semi-final to go and watch so we'll uh we'll wrap it up there and thank you very much dude thank you so much we'll look forward to everyone soon yeah excellent bye-bye everyone see ya

Channel: The Admin Bar

Views: 7,083

Keywords:

Id: eKDpfgRe1pE

Length: 94min 20sec (5660 seconds)

Published: Sat Jul 09 2022