Using Design Systems on WordPress - A Chat with Mike McAlister

**[00:00:00]** hello everyone this is Armando peris careno and I'm here with one and only Mike mallister welcome Mike well thanks thanks for having you so much oh it's really an honor to have you on the call I am a big fan of Ali as I think everyone who have has heard of it touched it used it is as well so I'm very excited to have you on the call the I vast majority of people who will watch this will already know who you are but for those who don't could you give us like a very brief intro of how you got into all this yeah for sure yeah I've been in the WordPress space for long time 15 20 years some somewhere in there um and I've been making products in the WordPress space for a large part of that and usually around WordPress themes sometimes plugins but um I've spent a lot of my time uh making WordPress themes I've had theme companies and and now I'm working uh on a project a product called Ali which is a block theme ties into all of this new cool stuff in in WordPress full sight editing patterns and and all of this new technology so that's where I'm spending my time now that's exciting Oli for those of you who don't know is an absolute Jewel to work with I used it for the first time on a production site for a client like we we built a design from scratch I was not thinking of using Oli at the moment we just designed the custom design and I'm not a designer we'll get into that in a few but uh we nice design and everything when it came time to implement I saw oi installed **[00:02:00]** it Oli Pro wasn't there so I didn't have figma files or anything for that um and just started putting our Custom Design into the site using oi and the experience was marvelous it just worked out and what I found astonishing was that once I did the one the first pass I was like okay let's go into the mobile part now right you expect everything to be a mess and we moved into Mobile and it all looked great out of the box I was just like yeah Mike knows what he's talking about so you come from a design background y originally yep yeah I've been a designer since effectively since high school I've been designing just forever and that's like that's me that's my my Essences as a designer I'm also software engineer all these things but it all revolves around uh my my passion as a designer so that makes sense and speaking from my side of things I'm originally a developed software engineer not a designer I came into design later in the game just because of applications and web so for those of us who are in and I think there's many of us in this sort of same boat what is it that makes your design in oi so such a breeze to use I I understand obviously there's a design system involved and and we'll talk about that a little more but what do you think and maybe this is related to block things in general but what do you think has changed that the sort of starts to make it click even for those who are not designers yeah that's an excellent question and it does lead into block themes in in general um now obviously Ali has kind of **[00:04:00]** my special touch so it might be you know a little bit uh design Fidelity might be a little bit higher but um yeah I think and for those who don't know uh WordPress block themes are they're like the old school WordPress themes and that they apply a style to your site they provide the kind of typography and templates but with block themes all of these um these designs these templates the typography all this can be controlled in the WordPress site editor now so it's all kind of in a wrapped in a almost no code interface um if you want it to be code it can be um but what that means is instead of a design being locked up in a template in CSS files all of that immediately becomes available to you in the editor so any design that I ship if I make the typography look a specific way you can go in there easily take a few sliders change it how you want it um and also what that means as armo kind of was was hinting at is that this effectively provides you a design system now it's not as a design system as you may think of it in a big complex organization they're almost like designed guard rails and so the themes come with at least Ali does a lot of presets that are kind of there to help guide your design so when you when you put something like a pattern to a page it's already designed it already has the spacing kind of nice and generous spacing the typography is set up in a way that automatically scales down to um to mobile devices and it has a color palette that is like easily customizable and just **[00:06:00]** looks good out of the box so you know instead of um you know like the old school themes having to kind of get in there with your hands coating things and moving things around it really simplifies it and kind of once it hits the P it's ready to go you add your content or you can customize it as needed so it it effectively opens up a world of design that we didn't have in WordPress before but I think it also empowers people who maybe don't have a ton of design experience kind of empowers them a little bit more to kind of run with it and easily tweak the dials and still get something that looks really nice at the end of it that's you and you touch on an excellent point The Design Systems that maybe someone as a developer does not come in knowing out of the box I remember in the elementary days before using Gutenberg or block editing or full sight editing Global fonts and Global Styles was a game changer and it came way after like way down the line and I was like oh well this actually is helpful so having this here from the start pretty close to the beginning uh the ability to have these Prett redefined and that's something I sort of made it click for me in Ali specifically having just a small set and maybe you can speak through this a little more but a smaller set of hey these are my font sizes that I'm going to Cru just use across my site extra small small medium large extra large and these are the two fonts or three fonts or um these are the weights that I'm going to use and these are the **[00:08:00]** five colors that I'm going to use and and just narrowing it down to that and not having a color pi and not having a bunch of other things that then can make your site look like a circus right so what comes into designing that do you at what point should one when they're maybe designing a theme for themselves or a custom site for a client at what point does one start determining how many font sizes which font sizes um do you do that in the like in figma when you're starting out do you do that once you've had a full layout and then you create those Styles how do you go about that as a designer getting that sort of Base so that then the rest of the layout can can all match that's these are such great questions I love this intersection of kind of software and design and and so yeah that's a great question and you know we all love to customize things right it's the first thing we want to do with the design or a website or any anything we love customizing it and so um yeah when you go to customize it you know in some page Builders you have as many options as you want to customize it and unfortunately sometimes that means by the end of it your layout looks pretty wild right you might have three or four fonts in one section and you got just your typography hierarchy is is all Goofy and so you know options and and tooling it's not always the best for getting the best structure for your site so um you know within the block editor and with with Ali and things like that um we do kind of limit **[00:10:00]** the uh typography options again going back to that like being able to design with guardrails because the more you get into design and and website building you realize that like the most important part is your content right that's what is just key like Google is reading your content it's reading the the titles the the hierarchy of of titles content that's so important so and also now it's um reading uh whether or not your your typography is legible is it too big is it too small so these are very important things uh when you're designing your website so when I'm designing um I take that into account as somebody who loves design I love typography and so um I design a scale highest and lowest fonts and then everything in between and then it's fluid so that it scales down perfectly for for mobile and I encourage people to stick to that I think you said there's maybe six six spont sizes in oi and what happens if you stick to that system like most Design Systems again you're getting a very cohesive feel across your whole page not or not just your whole page but your whole website so if you're using the same font size for your H2S everywhere it looks great if you're using the same spacing it looks great and staying within those systems or those settings um for typography and spacing you end up with something that looks really nice out of the box you don't have to go find your own font size in fact you shouldn't because it's already been like measured out like I I have painstakingly made sure that it looks as good as possible uh out of the box so that you don't have to like **[00:12:00]** that's the whole part of it and if you buy into the system um it makes your life a lot easier you design a lot faster you publish sooner and you're you're just back to doing whatever you were before that so yeah leaning into the presets because that's where the they're that's what they're there for and it's just going to give you a much better outcome in the end right and just to disclose this for everyone doesn't mean you're tied to those it just means that it's a better way of doing it for your own peace of mind right right right right because at the look I I really started noticing it once I started using Design Systems because this might resonate with some people let's say you're on Elementary or when whichever tool you want or Wix or wherever you are you build a homepage then you go and build a contact page and then you go and build another landing page for whatever product and then you realize that you need to make a change in the header style in one of those pages and so you change it and then you realize you have to go and change it in other places right and so it's a mess and so well okay having global fonts Global colors okay that helps good but then let's say you are a developer that builds client websites and so then your customers are going to go in and maybe they're going to create their own landing pages create their own content or even just post content on their blog using the blog editor so if you provide these guard rails like you were explaining then you don't have to give them a detailed guide on okay so **[00:14:00]** you're gonna for headings of these type you're going to use this heading and then change the font to this size and then make this adjustment out of the box you've already set it up in the theme which can be modified now in the front end as well uh so that all H1s have this particular style and all H2S and all h3s and that's not how it works out of the box in just like overall WordPress well sort of but it doesn't look nice so now now with obviously 2024 and forward it does but uh it's it's great because now some whoever can just go in and like you were saying just follow the hierarchy maybe I have an H1 and then H2 and then H3 everything makes sense and it's cohesive without people having to think about which type of title am I adding which type of heading right yep that's exactly right yeah and to the to your point those those things are already mapped out and um because with with Ali Pro we we also provide the the figma files for all all all of those designs and they match so any designer who's ever worked in figma knows you end up setting up a design system there and maybe use tokens to match the the typography to the website and if you stay in that system it just works you know and so yeah you can and then like every tool once you get more familiar with it you go to your second third fourth by the time you're there you you kind of know how the system works in in WordPress and you can really move quick because you know modifying you know this uh typography level is going to affect **[00:16:00]** it here and um yeah it just you you you start to get the the kind of the the the new paradigm and it does take a little bit getting used to I always I'm very upfront with people like some people still have trouble with the block editor and the site editor and it's you probably should have trouble with it because it's not intui from where we came from in WordPress there's a lot of new Concepts that are very powerful but they're not entirely um there's no comparison to to Old WordPress so things like like these Global Styles like you're saying being able to go in and change the typography or colors globally or on the Block Level things like patterns and sync patterns which are almost like Global components though that's a huge thing another way of keeping your site kind of your site design cohesive and maybe only updating it in one spot and then sending those changes throughout your site so there's a lot of these things that they're not entirely um you know intuitive out of the box but once you get your brain around those things it really changes how you build your website from the beginning if you can kind of know what um sections might need to be Global you might make those sync patterns to begin with so yeah there's there's there's a lot to dig into and part of Alli mission is helping people Shepherd in to this new era through through tutorials and things like that um but yeah it's it's really powerful once you get the hang of it but the learning curve is there it's real you got to you got to get over it and um but it's it's better on the other **[00:18:00]** side yeah it is definitely better on the other side what do you recommend for someone who's maybe thinking of using Olie for their site obviously they can just jump in and start guarding patterns and building stuff right but if maybe it's someone who's building it for a client or for themselves but they have they want to spend the time and do it right do you recommend that they grab the like the only Pro figma files and maybe start grabbing some of those patterns and putting them in their design and making adjustments and then implementing or what would be the workflow that you would recommend May for professionals uh in the space I would just I would just get the the free Ali theme it's totally free on wordpress.org you can just go into WordPress and type Ali and install it and that really will give you a lot to play with up front with no commitments whatsoever it's not a limited theme it's not a light theme or anything like that it's totally um you can build production sites on it people do it all the time and it comes with um yeah yeah exactly like I've seen some really great sites built on it like almost Enterprise level sites built with just like oi which is awesome it shows the power of it so um and oi comes with um around 50 patterns patterns are just just like pre-made design sections they could be as big as a hero section or you know a card design or blog post layouts and it comes with all these things and they're all designed cohesively so they click together kind of like Legos and a layout so I tell people to just like get that for free **[00:20:00]** set up a local site or live site even and just start playing with it to get the feel of what it's like to build with patterns and customize patterns and tweak your typography in the global Styles panel and figure out the header and footer which are template parts so kind of getting through that first layer of terminology and figuring out where things are in the UI you can just use Ali to do that or you can use one of the um default themes they're all kind of the same and um that will help you really kind of get your head around it and um then if you want to take it to the next level if you want more layouts and things like that you could get something like Al Pro which just comes with more patterns and more um styles and and things like that it comes with the figma file and the slack community so comes with all those but you don't have to do that to to start building with it and um that kind of reminds me of something I also tell people often about this stuff is that the power of this new stuff isn't in the themes particularly it kind of like it used to be that the themes did a lot you know sometimes they were just style layers and sometimes you know we had these Mega themes that did everything big drop- down menus Mega menus and all this stuff but the power actually is in the WordPress interface now themes are just a kind of a layer that ties into this powerful interface so the sooner you learn the the WordPress interface and the design tools learn how blocks or groups work and stacks and rows **[00:22:00]** and the columns when to use columns and when like learning all of that you you kind of build a universal skill set in WordPress and so doesn't matter what theme you install a block theme you install you can use those tools in in any of them and Ali is just a a a really nice layer for that so I just tell people like start learning that it's the future it's not going anywhere and um the sooner you learn it the faster you can build with block themes that's great advice I even have found that you you can have a good block theme like goly and build a site and if you go to 2024 or another block theme for debugging purposes or Just for kicks everything stays there all the layouts all the content it's all still there and everything still works except of course if you have some custom blocks in the theme but most of the time you'll have them maybe in plugins and so maybe typography padding margins some things changed headers but the rest of it is essentially there and right that speaks to the power of what you were saying this new version of the interface that allows WordPress content and and layouts to be agnostic of really the theme it's just yeah it's yours if you want to restyle it you can everything stays there travels with you you can even copy it from one site to another and it's it just works right yeah absolutely it just because Ali is just using the native blocks that come in WordPress so they're just content now if you switch to 2024 it might look a little rough it might you know and that's something we're actually going to be able **[00:24:00]** to fix soon so that you switch over and it's just going to know it's going to you know it's going to path or create a path to those the that they have defined and it'll it'll look a lot better that's just a bigger um initiative that's going on in WordPress that's not specific to Oli but just being able to have those Pathways so that people can move a lot easier between block themes and to that point I kind of you know after spending two three four years now building block themes I honestly I think we're going to spend a lot less time switching themes going forward you know it used to be like maybe every year you try to find a new theme or people want to switch their themes out but the way this is all architected and like I said it's kind of decoupled from the theme and that all the power lies in WordPress I think that the theme is going to be less of a something you have to change in that like instead you just go in and change parts of your site that you want right if you want to change the the typography in a major way like maybe you would do for you know in the Old School themes you would just get a new theme to kind of switch up the style you don't have to do that you could just go into to the global Styles and you add a siif instead and you tweak it and maybe you want to change the the spacing a little like you can just do all that on a more granular level and I think that just causes a lot of like less headaches overall we're not jumping **[00:26:00]** themes and that's not to say you should even you know buy into Ali and all that I'm just saying in general I feel like that's where we're going with this and I think that was the intention right it was to decouple it and put the power in WordPress so that um we can get away from having to hop from solution to solution every few years and instead just like really dive into WordPress and say no we can do that here and um we can make the content more portable and um all of that stuff along the way and I'll tell you what I never thought I'd say this but there's a client side that we built using a default theme we used 2024 and just used all core blocks of course we built some custom blocks for them but it work it looks fantastic and why because that theme the particular theme aligned with the font Styles it was more of an editorial type thing and it works it's not just like a placeholder anymore for now it's a real like you can actually use that theme and like you were saying with Ali with 2024 with five whichever theme you're going to use you can just if you're technical you can go into theme Json make those adjustments yourself uh for those who don't know that's that's sort of where the settings uh for the for the theme what's available are but more and more these things are being added to the full sight editing uh style panel where you can make these adjustments like Mike was saying like uh I when I add new fonts now we can add new fonts directly with core in the front end and you can change paddings **[00:28:00]** and margin and Global Styles and all that can get uh written down to the theme Json as well so it's such a fantastic way to handle things I still I do understand why some people are hesitant um because it's a big when I didn't understand the project I was like I always wanted to disable it Gutenberg disable classic right definitely once I tried it it's was like oh oh oh this is this is good and it's yeah it has some rough edges but there are things that we can do here that yeah you take for granted an elementary but it took them five six years to add that in right and not it's not like we started with that and so it's a work in progress yes but it's so much nicer to work with and there's some things that if you're a professional you might have to get your hands dirty and get in the code and make adjustments but you would also do that in classic themes as well so same difference but what I really like I don't know if if you're on the same page but the fact that you can make these custom blocks PHP JavaScript right yeah there's you can use react if you want to use it in the editor but you could just build it in in PHP if you want you just use the render PHP getting a bit technical here but you can it's build in it's worked like a short Cod it's just in another file and yeah it has a process you'll learn that in 5 minutes it's not like you have to do your own build process it's already there and so you do it and then you get all this power **[00:30:00]** that is collocated and that's what I love that now yeah I have CSS code for this custom block it won't be printed anywhere except on that page that has that block and that PHP code won't run anywhere it won't be even read unless that is right there that block is inside and so that helps so much for performance that I don't I don't know why everyone isn't like jumping over and saying this is fantastic I I just think we need to sort of spread the word a bit more oh yeah yeah we've almost it's it happened so quick and it's so powerful and under the hood we just we've already taken it for granted but you're you're absolutely right that happens for custom blocks happens for all the core blocks I have some custom Styles and oi for blocks to make them look really nice it only loads if if you ever use the block the same is true for the typography you might load up in uh WordPress five or six fonts if you're you're wild and you want to do that um that's okay because that font will not get loaded unless it is called on the page in a block wow so we get this native kind of tree shaking these performance uh enhancements and every release it gets even better so it's just like for free for free totally free um now they're doing um image enhancements so we'll have webp and um other formats that are that you can choose as a default so smaller file sizes um all of these things happen so you're right I think there's um there's a perception and some people still don't love it they're not quite buying into it and that that's okay **[00:32:00]** but I I try to tell people like it's pretty awesome now it gets better with every release imagine what it's like in 2 years two years is is so long in a in a project like this with as quickly as it is improving so um I I can't imagine where it is 2 years from now and um I'm just I'm excited to keep following it and that's what alli's going to do we're not going to go build a bunch of custom stuff like it's all happening in WordPress so we're just we're just going to side right up against that and and just just take advantage of all that's that's coming out in WordPress I think that's a great way to handle it speaking of going crazy what do you suggest as a designer for web developers or maybe someone who's just starting out in the space they want to create their own theme for a site and um they might go crazy and have a bunch of fonts and and weights and styles right colors what is a good number or range of like how many fonts should one have how many font sizes how many colors and and what is the really the purpose of limiting these mhm yeah I'll answer it in reverse the the the benefit of limiting it is a more cohesive design at the end so then you don't have a bunch of random font sizes throughout your site and throughout your pages and throughout your sections if you have a limited amount to choose from you're more conscious of how you use them and um they can fit better into the overall design personally I like Max like six font sizes and then even within that some of them **[00:34:00]** you'll use sparingly like in oi there's there's like a really large one right that's not to get used often that's for like maybe a big H1 hero section or something like that it's there for for things like that but you're not going to use that in the same way we have an extra extra small font size you're not going to use that often but there are going to be cases where you do and it's going to prevent you from having to create your own it's just there in the the random time you need it so if you take those two out you're looking at maybe four and then you're like really getting in The Sweet Spot because then you're if you can stick to that and and you kind of build around that then your design really is humming along and you you realize that you might not realize it when you're building a section or a page but then when you're like two or three pages in and you're clicking around you're like whoa this thing this thing clicks together it's nice and there is some psychological thing about good design that is subconscious and I think that tying into it I think humans we like consistency we like you know you like that feeling you might not know it that you're feeling it but you're there's something that tells you this is high quality this is trustworthy good design is is feels trustworthy um and um so I think that's that colors um I try oh you know I'm pretty I'm a pretty minimal dude when it comes to to color when it comes to typography so just sticking into the the the dark dark Grays not quite black dark dark Grays and **[00:36:00]** some you know a few accent colors of that so you might have a secondary gray that looks nice as like a subtitle or something like that and then also within the uh the WordPress color palette so you have those those kind of font colors and then you have maybe something like a primary color for a brand color right and again I try to like get folks to stick to that and not add Too Many Colors cuz again Your Design kind of looks it can get a little crazy it can work too don't get me wrong it with a great designer can make um a a very fun and vibrant color palette work you can totally do it um but you have to have a plan going into it you know I think if you start with a blank page and you start with that color palette I think you by the time you get to the bottom of the page you might regret having all those colors but um it can work so um and I think that's another important thing is going into it with a design you're always going to be better off you know than trying to design just freshen the browser at least that's me I'm I'm somebody who I have to get it down in figma first and then I feel like okay now I can take it into the system and implement it and um iterate where I need right so how do you do it do you on figma let's say you're starting from scratch you didn't have oi um you you start your file you start B maybe from top to bottom right you're doing like hero section blah blah blah right do you just start designing **[00:38:00]** and then what the first time you add a heading do you already have a side panel where you're like okay so this is going to be my first size of heading and then as you go along you make another heading you're like okay this is going to be my second one or do you first Define like five sizes that you might use and then start designing mhm I typically I'm somebody who I start like with a blank canvas almost always like with a new site or a new you know pattern collection I start fresh because I like to get out of the pattern of what I was designing previously Mak to to help me get something new and maybe something different that I wouldn't have gotten otherwise MH so I'll start designing fresh blank canvas and then I'll usually design the the header a hero and maybe two sections first that really helps me get an like a design down a direction I get like the Aesthetics the kind of the design language that I'm going for and only then do I start to really like systemize it where it's like okay because I kind of need that many sections to know how the headings are going to break up and subsections and you know feature boxes then I can think about okay this makes sense to turn into a style like a heading style and and then I go from there but yeah I usually do like a quarter of a full page first just on the canvas I don't use Auto layout at that point I'm just really quickly iterating and if you look at my like the start of a design I might have five or six duplicated frames where I'm just **[00:40:00]** kind of just trying something I go back here I'll delete it I'll duplicate it and um then I'll land on something and then I'll start to turn it into a design system and my design system are usually very small they're this they're kind of they follow WordPress right they're like okay five or six font sizes one or two fonts usually and then um the color palette the minimal color palette and then I go from there so and then I try to stay within that because again I want to I'm for me particularly I'm designing a product that is in a system like WordPress that has its own guard rails so have to design with those in mind along the way now if you're designing something for a client site or something like that you might have a little more Liberty to get rid of those things but because I'm Distributing a product it has limitations that I have to be aware of so that I can actually implement it and ship it you know what I mean that's a good point yeah yeah okay all right and also uh speaking of of guardrails and all the things that WordPress does for you I think it's also very nice that once you get into this flow of limiting like sizes for example the interface in the editor will actually change based on the number of items that you have so for those who don't know if you have a lot of items it'll be a drop down which takes more work to use however if you stay within a certain limit you'll see like xxss SML right so it's just one click you change the font size so these little things that that WordPress does for **[00:42:00]** you ask you sort of align to using Design Systems I think is is some of those little Nifty Easter eggs that that one can can find I would love to get I just was looking at that this morning so I'm releasing a kind of a refreshed homepage design for the for Oli and um I saw that yeah I have I have a drop down but if you switch to 2024 you get that nice little slider thing and I was like oh man how do I how do I get this thing down so I can get into that interface and that kind of brings up the struggle of building a a distributable distributable product is like once it's out there and people are using it you know you can't just take away one of the font sizes it throws their site for a loop so you kind of have to be and I was building Ali very early so you know like that's the part of the early adopter problem too is like you get a product out there and you're kind of you kind of have these constraints on you but we come up with clever ways of getting out of there and and updating and you know I think also in WordPress there's this idea like you we started so early there going to be some updates that you have to get in there and just tweak a few things you know we we try to limit that as much as possible because I don't love having that when I'm using products so but it's kind of the reality of that and it's it's still way easier than having to switch themes and do all this other stuff so it's like yeah you might **[00:44:00]** have to go and tweak a color here there or something but um the the trade-off is that you have beautiful design system at your fingertips and it's totally free and I'm happy to answer any questions you have all day long so it's like you know it's part of the it's part of the offering you know it's great and also people don't realize this or many people don't realize how much it goes into creating a product to be distributed like Oli the other day I was thinking of like I I thought of you because I was looking into theme Json version 3 right and so I was like man yeah I want to opt into new features and then I was thinking well yeah sure I can change to version three but if someone is using a child of Olie for example they're on version two you switch to version three what does that happen right what does that make I'm sorry what what side effects will that cause and I was just thinking wow that's got to be a pain to manage just because maybe you want opt into all these new features but then you have to make sure you have an upgrade path for your customers so that they child themes don't go off the rails it's tough It's really tough and yeah upgrading to version three of that is something that's definitely on our on our um road map but you're right it's the the smallest changes in in that file can have some pretty sweeping ramifications so you just and this is like you know I've been building WordPress products for like a a long time I've dealt with this forever you have to be very careful once you've shipped something **[00:46:00]** to to do that and um there's a little more flexibility with that in in Block themes but it's still true that you're uh it's not like a SAS right where you change something and it's all in a centralized location so they come to the site and it's just it works as is no these people they're running it on their sites their client sites the sites are all different they have different amounts of plugins on each one it's already a very volatile environment to have one of your products live So that's its own thing and then on top of that trying to keep up with how fast WordPress is moving and and be able to to add all these features in and stay on your feet um uh and not bring people sights down it's a lot it's a lot of work and again this is all free this is like the free version of Ali it's just free you know this is like you might it might just look like a little kind of Wordpress template but there's so much that goes into it and there's so much that goes into keeping it alive and updated and fresh and supported so yeah it's it's a lot it's a lot of work for sure yeah and you've done a great job because the interface for those who don't know Ali has this very nice interface and I don't know what part of this is pro and what's not cuz I I have both but the the pattern library and I know you also have it on your website so people can just browse it on the site even though they don't have it being able to browse those patterns see what they look like and then **[00:48:00]** if you do have the pro license being able to just grab one copy the code put it in or insert it directly that I think makes it way easier for people to use these and understand what they are yeah um than than ever everything anything I've seen before MH yeah so yeah in Ali Pro we have a you know a lot more patterns so you just can get a lot of awesome designs layouts full page designs and we built a uh effectively a pattern browser because this is like a Cloud Library so we bu built a browser that looks very much like the pattern browser you see in WordPress except we've added some more Pro features things that help you find things quicker filter quicker you can kind of Browse by Cate categories you can copy patterns you can see a live preview of it before you add it to the page you can download it to your theme if you want so we've kind of wrapped that experience around WordPress and made it feel very native because we want it to feel like it's in WordPress we're not trying to make things that feel like they're bolted on and that they don't belong we want it to feel right you know we want it to feel like it belongs in WordPress because that's the that's what we should all be working towards now now that we have these all of these powerful features and design Tooling in WordPress this is a this should be a cohesive experience for anybody who comes to it new we can hopefully maybe get rid of this old era of everyone making the admin look how they want and all of these banners everywhere and notifications this like oh **[00:50:00]** don't get me started on the back can we please move on from that and and have something that looks adult and professional and and slick and um so that's what and anytime we do anything in WordPress we design for that experience so it's again it's it's a choice that everyone has but I feel like I I'm hoping that we can all rally around that and really get serious about bringing the level of design way up here do you use any like WordPress internals to build that interface or is it just custom to make it look like WordPress now we use as many WordPress core component is possible so that is built with all of the things you see in the WordPress interface many of those have components in the in the WordPress component Library so buttons and uh menus and sidebar stuff all of that we pull in so that you get that unified interface there might be some things yeah it's it's it's meant to look that way and it's it is because we use those underlying elements and if there's ever a time where we have to code something custom we just still make it look like the other components you know so and I think that's important and um again it's hard work it's not easy kind of following the components and making sure that they're all there and some of them are experimental and some of them aren't but like the experience that the user gets is a lot better and so it's worth it for us to do that that makes sense that makes sense but yeah it does look seamless and I think one of the benefits of that is is that I know probably some of those that **[00:52:00]** you make custom are because they haven't exposed them or they haven't exposed a similar one but at some point they might most likely and so at that point you just replace it and it still looks the same right so exactly this is all very exciting especially like now with the interactivity API and the collaborative part coming into it I I think the platform is going in a very good direction uh as a platform as a publishing system I don't think there's anything like it like yeah sure I can build something in in react and next uh and I can use a CMS but everything that's built on top is not there I mean here if I want to just use it as a a database well yeah it's a little Overkill and I could I could probably do it better from scratch doing it somewhere else in laravel or next um but all the additional tooling that people have made the community has made through the years that make it so easy for someone who's maybe not a professional course creator right they could just strap on learn Dash right or any other type of tool they want to use Commerce they could use W Commerce or they could use anything else for Commerce and just it'll work out of the box you can make adjustments to it you can make it look whatever you want but but it handles so much more than any other cont management system out there so with with the direction that that it's heading with the interactivity API with blocks it's I think I think we're on a good path oh yeah for sure looks like my camera went out here I'll try to pop it back on but **[00:54:00]** um yeah you make such a great point and I think you know the perception around WordPress has always been a little funny and even still to this day it's still kind of funny but I think those opinions are they're stuck in like before the block editor came that's kind of what people think of Wordpress and in the cooler like laravel and and react and those those things that have moved a lot quicker they look at WordPress and it's you know it's kind of a a bit of a joke to some people but I just don't and and a lot of those people they're not paying attention to what's going on now and so I get that they've moved on and whatever but when I look at this thing I don't see as you don't a comparison out there you can use WordPress and now that it has a JavaScript engine you can make blocks that do whatever the hell you want they can do anything and they have this beautiful system underneath of it now and we have a Content editor we have a site editor an interactivity API you get authentication in WordPress which is in itself is so difficult to do other places you just get it right out of the box it's just been tested for 20 years it's it's incredible you can build any on this platform and it has better CMS than everywhere else and you could do custom fields and that's going to come to core in a more meaningful way so all of that combined to me I'm looking at that and you know I kind of had a moment when this block editor came out and I was like where is this thing going but once I **[00:56:00]** played with it for just a few weeks I was like I saw the light I was like this thing is going to be crazy for WordPress because it's what we always wanted in the platform but couldn't have CU it was just these these old you know tiny MCE boxes were putting content in and it looks different here and it looks different on the front end but now we have this unified thing coming together and I've seen some prototypes of where they want the wp admin and those interfaces to go and it's going to blow people's minds because once this Vision comes together again I'm always like thinking what's it what's this thing like in two years let's get over these bumps let's get over these um these rough edges in the UI and I really do think it's going to be something that just totally uh underscores WordPress and it's going to let us last for another 10 years at least I think I'm not worried about where WordPress is going I'm not worried about the growth I'm not worried about market share or anything like that I'm I just I trust that what's happening in WordPress now is going to sustain and take us to some new heights and I don't even work for automatic or anything like that I just as a as a technologist and a futurist I just I can't help but think that seeing what I see yeah yeah especially like you said now that it has a JavaScript engine as well uh along with everything else that just opens up such a big scope of what you can do because you can bring in any Library you want now so oh you want to do some crazy like uh **[00:58:00]** I don't know react flow diagram in tool that's drag and Dr just bring it in install the package and go go crazy right so and I've seen people doing this and and it works great and then seeing what Seth Rubenstein is doing with blocks and the interactivity API that also that conversation blew my mind as well because I was like how what just see I saw the demos of the interactivity API it looks fantastic but you don't really understand or one doesn't really understand what's going on what yeah what it looks like yeah sure I could do that in jQuery right or JavaScript whatever but but then seeing how they took it apart and made their sort of atomic block thing and have this block and this other block talk together and it's all in the interface no code involved once it's there yeah you can do anything you want and it doesn't have to look like WordPress or feel like WordPress it doesn't matter what it is it's just you have fantastic CMS behind the scenes that's powering extraordinary experiences if you wanted to yeah that's exactly right and I think the the product Market has been slow to adopt it and I I can talk for an hour about why I think that is but I do think once companies do finally catch up and they see that possibility and they they realize that if we do invest here a little bit and um they will save a lot more money in the end um because they can concentrate it all around this experience they have full control of it um and like you said like you're your limits are really just your only imagination you want to you want to pull in **[01:00:00]** some react packages um all of the the stuff that comes there go for it you can do that you you want to do view you can do that too you can write old school JavaScript you can really just do whatever you want and um again I feel like we are catching up slowly but surely we're catching up and um we'll get there I think we'll get there um people need to lead and kind of get out there write content start building with the stuff and sharing and um that will really help get us over the line I think yes yeah there plugins specifically like you said one thing that really sort of made me understand I think like you were saying now why is a person I won't I won't tell say who they are but a person that's being in the space they have a plug-in company fantastic plugins fantastic service and they recently said like their their plugins most of them don't work on blocks yet which is fine because it's hard to to convert everything oh yeah but especially when you have a big customer base but one of them recently said like oh I just tried building a site on blocks and it's it's an interesting experience and that sort of clicked and I was like oh they probably just have never tried it like the owners of the company have never tried it cuz they've been doing this for 15 years and so now that they see it in action oh okay so now it makes sense why people are reaching out and saying hey could you make it work with blocks it's not a niche thing it's like this is WordPress so this is WordPress it like I don't **[01:02:00]** know if you Ed the woocommerce blocks sketchy at first but the check out Block it's fantastic I mean it needs work and adjustments and stuff but yeah out of the box if you just need it to what it's supposed to do it's so seamless and so easy to use for clients that I don't know it's I I very very happy on on where this is all going I think yeah you rais a good point about companies who and I'm sorry my camera keeps going in out I think it might be too warm in here so it's whatever um but companies who have kind of a legacy blocks or products I don't want to say Legacy in a in in a bad way but just kind of in it served old WordPress I understand their hesitation to move into that space because maybe adoption hasn't been great and it's just difficult like a lot of Wordpress companies are strapped for cash and resources we don't operate on huge revenues in WordPress most of us don't um but I do think once they figure out how to create a path from their product um into a block interface it modernizes it and like you said it makes it available when you install WordPress today you get the block editor you get the site editor that is the experience you get out of the box you can't you you have to go out of your way to install the old thing where your product works best so you have to meet the industry where it's at right now any person who installs WordPress they're getting that block experience and the quicker you have something that can work in that experience and by the way your product probably probably **[01:04:00]** will work a little bit better and that you can do more you can add more settings you can make give it a visual aspect to it um you can extend your product's lifespan you can maybe even charge more because now you have um more settings or more options in there and um it's a better experience and you can build the whole thing around so again it's it's an investment and I think that has a lot of Reason a lot to do with why we're adoption has been a little slow but I do think the value is there for a product owners to get in there and um learn it because like I said love it or hate it it's not going anywhere and it's only going to get better so that's what I would plan for plan for next year the year after and start investing for that because um the other the Legacy base is going to keep going like this mhm it might there might be a few million people using the classic editor plugin but it's just going to keep getting smaller and smaller and then the other ones the other side's going to get this way so that's what you plan for that's what you build for and um that's what I would invest in I agree that's an excellent point it even though the market looks big it's just getting smaller and the current version is going to get larger yeah I mean million probably I don't how many WordPress installs happen a day I don't even know maybe tens of thousands at least maybe a 100 thousand um all of those people are seeing maybe WordPress for the first time and they're getting the block editor experience they don't **[01:06:00]** know anything else that's what they know so that's where I'm playing that's my sandbox yeah that's that's a great place to be and specifically like I'll give you a good example then to everyone like woocommerce we talked about the checkout experience it's great uh work in progress but still very nice however you want to add something like custom checkout fields and you go on the wordpress.com or ecommerce.com Marketplace and there's this add-on Fields plug in right and it's by one of these companies that has been doing this for a while mhm and they have no support for checkout blocks and so what do you do as a customer you're like oh so so I can't so then you have to revert your client or yourself to an old experience just because that feature that is not hard to do by the way later I found the documentation on how to actually add those fields it's there in believe it or not in the GitHub repo um there's it's a very quick path to converting these old school plugins to two blocks in this particular scenario I know others will be harder but this particular scenario there's there's a way to jump in and so yeah I think what you said makes a lot of sense asking um plugin companies to to um try it and see what uh what the experience is like because a lot of I mean the base is only keep going to keep growing and uh and you want to op into the latest features right yeah and to your point about those folks who might not support those blocks that might be an opportunity for another company you know so uh I'm I know I've said a thousand times the **[01:08:00]** the adoption has been a little slow but as soon as they start to see the financial incentives um if you're not going to add those things someone else will and that might mean a whole new industry um a Renaissance of of block solutions that that come out and um they'll they'll be here whether you want to compete with them or not so um I think it's it's smart to to get in that space and again like you said earlier just kind of uh knowing this code this new way of coding and everything it's going to benefit you in a thousand different ways not just your product but being able to just EB and flow with where WordPress is going is always going to be a great benefit for you yeah yeah totally agree now I don't want to keep you a bunch more time here I know you're a very busy man but I'm gonna ask you a couple of questions the first is uh the for the person who may want to jump into the WordPress space and take advantage of all this and and actually do very good design do you have any recommendations about where someone can learn about design not specifically WordPress but design in general is there like a book or or an online thing or or what to search for so people understand what a design system means and how how they can sort of make things cohesive that's a good question I've been so out of the the design the design space in general I have my skill set and I just kind of go with it but um there was a um a course recently that a lot of people were talking about I think it was **[01:10:00]** called radical design Jack McDade who does um statamic okay which is his own CMS uh check that one out a lot of people were were speaking very highly of that um and um I'm always a proponent of just plain old YouTube these days the the the cool thing about YouTube is that um creators get on there and they share design tips and you don't have to buy into a course because they're incentivized because they're getting paid from YouTube to just create this content for free so there's incredible resources out there I would probably look at um figma courses okay because um or figma design channels there because most people are using figma at this point and if you're not you probably should be it's kind of the design standard in the indust IND right now and for good reason it's it's an incredible bit of software and it feels more like the web then it is designed in a way it's got components got all the things so it speaks both ways it's not just a design canvas it kind of feels like it's for the web so um and there's just tons of free content out there tons I think um figma do Academy was another one that was popular for a while and I think that that one I think is really helpful because you're learning design along the way while you're also learning the figma interface and that's huge that's like The Best of Both Worlds and like every tool the better you learn the tool the easier it is to design in there because you're not messing with the tool and you can just fluidly move through and get ideas from your brain to the canvas as quickly as possible so **[01:12:00]** um the same's true for WordPress the the quicker you learn it the less time you're spending tinkering this and you just get you go from prototype to design to to publishing it and and done so um just learn those tools fluidly so I would do that and then yeah just dig into um just search on YouTube uh figma tutorials pigment designs and uh there's there's so much content out there now totally free you can design start a whole design career on YouTube if you want you know that's the beauty of uh the Internet it's just um if I had this back in the day my gosh I was I was learning about design and books that were already probably dated 10 years you know you know so was like um so the fact that this is all out there now is is an incredible resource and in terms of like WordPress design stuff the cool thing about ali is it's free and same thing with 2024 it's free it belongs to everyone you can get in there and pick it apart and look at how we did things in there you can learn about why designed things a certain way and all the patterns the way they are and um if you have any questions I'm happy to answer them design code or or otherwise so I'm pretty open book I love sharing what I know and uh if you find me on the internet ask me a question happy to answer those are great suggestions I appreciate it Mike the definitely and the tool part right because when when someone gets into figma if you understand that you no longer you made a good point about it being web oriented in a way because **[01:14:00]** you can have gaps and you can have out of layouts and things like that that work the same way a browser will and so if you don't use that you have to sort of work manually a lot but once you understand it then it just becomes easier because it'll match sort of map what what you're going to see the end right that's right yep great great suggestion for everyone just go on YouTube search for figment tutorials um and and learn WordPress I think is also a great resource to to find some information about WordPress so the other question for you is going to be where can people find you yeah you can um I'm uh on the social media I'm almost exclusively at Mike mallister on Twitter X I'm Mike McCallister there and then uh mikem mcallister.com but my my main project as we've been talking about is Ali and you can find that at alwp docomo and just just everything out there for that stuff so I'm all over the place but I'm mostly on Twitter that's the only social media I use so that's kind of where you can find me and and uh yeah I love getting out there and meeting new folks so follow me let's chat I love uh chatting with with Armando here it was so cool to finally finally catch up and um and connect so this was awesome thank you so much Mike it was a blast I'm really happy we were able to jump on the call and um look forward to seeing more Ali content as well cool man thank you so much thank