What Makes WordPress Blocks Great

**[00:00:00]** hello and welcome to the web talk show I'm Armando Peres careno and today we're going to be talking about blocks why I like them why I think they're a step in the right direction in WordPress and what they might mean for you as a user an agency owner or maybe even a developer so let's start off for any of you who might not know what a block is or have not heard about the block editor or Gutenberg or anything of that nature and you're used to Classic WordPress or classic themes a block will make sense as soon as I explain what the block editor is so think about publishing within WordPress just in the context of being an editor for example you are publishing blog posts or something of the nature when you're writing in a classic theme the traditional way what would happen is you would be met in the back end with this little box a tiny MCE box or what you see is what you get editor which is really what you see is what you get it's just a little box you write within it you might add some formatting some styling but then when you view it in the front and it's completely different because the CSS doesn't match the styling of the page doesn't match the width the margins Etc it's very different from what you see in the back end and what you really see in the front end so the block editor changes this experience now you put the title at the top but then the editor experience is literally what you see is what you get you start typing you see the paragraphs with the right fonts the right margins the right paddings and we'll get **[00:02:00]** deeper into that in a little bit but when you view it in the back end you view it in the front end it's exactly the same thing because it's thought of as a visual editor if you will that um allows you to really take advantage of the tools that WordPress provides you as a user as an editor um not only to edit but also to view it like people are going to view it without having to go back and forth and so there's a ton of things that go happen behind the scenes and we'll talk about some of those as well but it's important to keep in mind that instead of imagining what it's going to look like and having to preview you can really see what it's looking like what the columns you can enter columns if you want rows grids use flex Etc you can view all that as it's going to be shown in the front end and so that in itself is a great experience but it is not what people are used to and so there's this dilemma of should I start using the block editor or should I stay with what I have so what happened many years ago is that this exact thing where you have this editor that does not match what you see in the front end talking about the classic editor would make people look for Alternatives within WordPress to the publishing experience and that's where page Builders came in so you had Elementor or divy or the visual composer or anything like that uh Beaver Builder those tools allows you to yeah you can build a site on it but it also allowed you to to create experiences visually it allowed you to see **[00:04:00]** what it would look like and so a lot of that is very good because Through The Years they've evolve the editing experience and you didn't have to rely on that sort of old-fashioned little box that didn't really match what you saw in the front end so come the future the now WordPress core with its Project Gutenberg which is now just part of the block editor or full sight editing which we'll discuss later in this episode allows you to do much of that without requiring additional plugins or additional page Builders and that's where it really shines because it's way more performant it allows you to have more granular control of what happens in the site itself and also it allows your editors to have a consistent and standard way of doing things and we'll get into that as well so I really like it coming from building Elementor sites for example in the past having this ability to have that visual experience but within core WordPress is fantastic at least in my opinion um just playing around with it the first time that we built a site on the Block editor it was it was smooth it was very easy to do um there are things that are still growing within it as are in all the other tools but some of them have had more time to mature but the overall experience for me was a positive one and that's why I wanted to share this in this episode I'm going to discuss a few scenarios of why I think this makes sense for a lot of people and why you should give it a try if you haven't already so keep in mind that this is the future this is where weice is headed **[00:06:00]** this is what will be just standard there's no like oh I just want to keep the old one well there's a plugin for that but now core just ships out of the box the new themes 2024 2025 are block themes which we'll discuss as well so you have to prepare yourself for this whether you like it or not but I hope you like it and want to experience it because really it has been an eye opener for me and the more I use it and the more I talk to people who really use it in their agencies in their work um it they really like it so let's talk about where this fits in for the user imagine you're writing a post you start typing you have a paragraph right you want to add some bold italics yeah you could always do that but now you see right the right margins and everything now I discussed this in another episode with Mike Moler the importance of having Design Systems where you say for this site we're going to have these two fonts and we're going to have these five colors and we're going to have this amount of spacing and these are the font sizes that we have and that's it we can't go making a rainbow out of this and just having all sorts of mixed colors and fonts and margins and paddings because then it's a mess to manage so once you have this sort of design system which themes give you and you can modify of course you can now feel confident that you and your team and your editors and your authors can publish content that looks aligned across your site and if you ever have to change something like a **[00:08:00]** font size for a specific type of heading you change it once and it it is reflect everywhere else so that's very good so within the block editor yes you're you're typing on you're adding images things like that but you on the side you can select which font you want from the list of fonts that you have or you just leave it as default the the colors the based on a list that you already have that's predetermined the sizes maybe you have five sizes and those are the only ones you use or maybe you don't you don't even have to allow people to change font sizes they could just choose paragraph heading heading 1 2 3 4 5 six you have have all those to choose from that could already be pre-styled for your brand you don't have to think about what sizes to use because a designer already decided that uh that's what they should look like and so it's more it's a more comfortable experience for an editor and author just go through and build this out without having to think what sizes to use I know I'm doing a heading or a smaller one less important Etc I just go through and do that so just from an author or editor experience point of view I think it's great now what is a block so when we're talking about the editing experience you have for example an image block or you might have a carousel block or anything like that so think about widgets right you might have had widgets in the past that you put in from plugins you might have had short codes that you put in like a calendar short Cod or a form short code or anything like that **[00:10:00]** with blocks you can do that same thing but have all the settings right there so instead of having to go to a setting screen within an obscure plug-in page everything can be done in the actual editor so you're editing and now I want to add a carousel oh Carousel block you add it you can add the images there you can change padding styling everything right there you don't have to go anywhere else to create something and then bring it back so that's a very nice experience because everything is within the editor and so again this is for users it's just very easy to use um why is it better than a short code well because short codes you would have to send the parameters as code and you type something wrong you break it so especially for regular users why do they have to think of these sort of pseudo code items that have to put into the sites or their posts where you can just have a plus sign and add something like a carousel or a slider or anything like that and then they could just adjust settings that are exposed to them right there so that in my experience is a lot better than using short codes and I'll get into the developer side of short codes later but this just for users I think is a great use case you can get started with blocks just uh directly with WordPress 2024 you can build a full really powerful website using 20124 without having to drastically change it like you had to before because before it would be more of a blog type website now you can actually build pages and everything with with one of the standard themes um especially now **[00:12:00]** uh with 2025 coming soon now another great theme to start with is um Oli W by Mike McCallister that's a great theme also it has a lot of predefined sort of views and patterns and um we'll talk about patterns later but it allows you to build these experiences with predefined little chunks that just make it a lot easier for someone who might not be a developer to build a website for their business or for their blog or personal um project whatever it is so they're great now as an agency what does this mean why would I want to get into blocks or the block editor well with full sight editing which is the ability to create templates for pages and the header and the footer and dynamic content it really expands the power of Wordpress because again you don't need a plugin for a page builder to do this you can do it directly within the actual core Builder so you can create your own header there's templates for that you can change it completely you can add whatever you want it's all visual drag and drop you can create your own footer you can create page templates or post templates for example so that when someone goes into an article in your blog they can see how you want it to show so you already have the title The by line the author the related posts based on certain categorization that you already have the share feed Etc and that is all again you can visually as an agency um when you're building sites for customers you can do all that agency or freelancer of course you can do all that visually which is very nice because then when you're done someone else can **[00:14:00]** take over or if you given support uh or your your own client can actually take over that uh in the future if they wanted to of course you can provide the support you can limit these feature so they don't get confused but if you want to allow them to sort of keep the code or keep their site for themselves which I think is is good practice even if you're providing support maybe in the future you have a way to call it an escape hatch right so if if for whatever reason you're no longer available people can still go in and make adjustments to it um provided you give them the right access right so there's a lot that can be done and a lot of different ways but having this ability to create these templates for post types for custom post types for archives for how you show a post Grid or a product grid um in a catalog if you're showing the products and you have a sidebar with the filters and all that that can all be done within full sight editing and so the site now is essentially a page builder in its own without requiring anything else and like I said it's very performant and the reason or why of the reason that it's very performant is that blocks are collocated so all the code for a block the it's PHP it's JavaScript it's CSS it HTML everything is inside the block if that block is not on the page then the none of that loads so if you have uh special CSS that you had to load for a form or for a calendar or for a carousel that doesn't have to be loaded on all your pages just in **[00:16:00]** case that form is put on a page it will just load on the page that actually has that block right now or that is set to display that block right now and then all of that is stored within the post content so it's very easy which is a great feature for agencies as well to say oh I really like this layout that I have here and I want to move it to this other page I just select any section within the editor copy it and just paste it like that copy paste and it will go to any other page or post or even any other site because essentially in the back end the code that's there is readable you can click view the code you can see the HTML mark up the Json for the dynamic stuff I'm won't get too technical here but you can literally just grab an item or a pattern or a full section of a page on a site copy and then go to another website and paste it and it'll just work now of course you'll have to have those same blocks if you have custom blocks we'll talk about custom blocks later but uh if it's just regular block score blocks then yeah it'll just come over just like that now if you don't have some of those blocks available in the other site no worries it doesn't break it just tells you that block is no longer available and you can just delete it or remove it so compared to other solutions that I've worked with in the past where you might bring in something that doesn't exist from one side or another you would get an error or it would just disappear into the ether you **[00:18:00]** don't know what happened here you can actually visually see what went wrong so a little technical there but something that I think is really nice now now there's also the benefit of for a developer or an agency that has developers that does provide custom Solutions or custom code for your customers instead of creating short codes to be placed within templates or within posts or within content you have the option of creating custom blocks and creating custom blocks sounds complicated but it's really not it's practically the same as a short code from the PHP point of view but then you can take it further by using react or JavaScript to create the same layout experience in the editor the sort of back and front if you will editor uh of the block editor basically so that way instead of providing people with short codes or your own clients with short codes you can create these blocks that they can use and reuse across the site and have access to the same styling on the site which just core warpers provide so we talked about earlier about the um core Global Styles right you have your fonts your paddings your margins and you have special settings for those and so you can now with a custom block allow people to use insert your custom block for example if you're doing an LMS and it's a custom version of your LMS right even if you're using learn Dash or whatever you're using you can then create a custom block say a playlist block that can be shown within the editor when people are wanting to add it and they can go in and style it on the side with the same theme options that you see everywhere else **[00:20:00]** across the site so it's a great experience overall from the user to the agency or whoever is building site to developers who might be creating custom blocks or custom Solutions within a website within the context of a website build or even creating custom plugins which brings me to the last thing which is plugins I think that are going to evolve I think a lot of these newer plugins are going to have an advantage over some older plugins that haven't adapted yet because they will provide this enhanced experience for users to keep everything within the editor and we've seen this already ready with a big rewrite of um search and filter Pro they with version three it's fabulous cuz you could do everything in the editor you just add a search field or you add a choice selection or a control field or whatever they call I don't know what they're called but it allows you to add these fields right there and make the adjustments and Link it to the query Loop that you have there and it's all within the editor you don't have to go back and forth with just cryptic screens that other plugins might have have and so that is a good example of a company that took a very good plugin I have sites that run that from I don't know eight 10 years ago have had no changes and the plugin still runs no issues ever with compatibility or things like that so they're doing a good job but they decided to take the time to rewrite a lot of the functionality to make it work with blocks and the block editor and I think that's fantastic and I think that's what a lot of these plug-in companies should **[00:22:00]** be doing at least in my opinion but as I was saying a lot of these younger companies that don't have the overhead might start building like an e-commerce solution which I know that's the craziest thing you might want to do but if woocommerce slows down your site by double just by loading it because on every page load it loads a bunch of stuff if someone builds something similar completely block based out of the box then it's gonna be more performant so even though I really like woomer and the fact that they're doing the new checkout blocks the product blocks and they were great by the way checkout experience with blocks if you haven't tried it it's awesome compared to what we had in the past um I feel there's a lot of room for improvement with thinking about these items as collocated individual isolated blocks that uh only load their code when necessary and of course there's there's background functionality that has to run and everything but uh just keep keeping that in mind I think a lot of these plugins coming along now are going to be excellent so tell me know uh let me know what you think uh about the blocks in the comments on YouTube on Spotify you cannot leave comments from what I know but if you're listening on Spotify we also have this on our YouTube channel so you're welcome to leave comments there if you haven't already please like And subscribe here on Spotify or on YouTube or wherever you're listening to the episode and I hope you enjoyed it see