EP300 – Gutenberg Block Editor, Block Design and the future of WordPress themes – WPwatercooler

(62) EP300 – Gutenberg Block Design and the future of WordPress themes – WPwatercooler – YouTube

Transcript:
(00:02) it’s episode number 300 I want to say thank you very much for all what this for 300 plus episodes we’ve done plenty of pluses we’d be nice 300 really maybe I just don’t know how to count I don’t know but we’re saying where these things work or anything so anyhow today we’re gonna be talking a little bit about like I watched Morton’s I watched Morton’s videos on LinkedIn and I was sitting here thinking I’m like all he keeps talking about is block editor what the heck’s is block editor thing it’s Berg
(00:56) come on what do you what’s going on here no it’s not called Guttenberg apparently all right Mort you run the show here Morton tells me about yourself I am Morton I have opinions thanks for it thanks for being on Morton I appreciate it how about you Steve tell us about yourself I am Steve saying it on the founder of Zeke Interactive and I run the OC WordPress meetup how about your Ross Kyle here from digital and I Co Co organized that we are made up this Monday here at my office we’re not only gonna have a lot of cool topics we’re
(01:41) also gonna give away an Amazon got the brand-new one the generation third generation just came out we’re gonna give that away here at my office we’re gonna have holiday goodies and Jason the organizer of this video stream he’s also coordinated he’s gonna be bringing pizza yep I bring all the carbs that’s right – VP now we have limited seating so how about you tell us about yourself my name is I contain them so much – this show that there contains some but still somehow everyone knows I have them I’m
(02:33) not sure how that works but anyway and make WordPress teach WordPress preach WordPress that’s a read media on all the things I like me you think you’re containing your opinions no you’re not yes / tell us about your containment I I can’t necessarily speak much about my containment but what’s up everybody I am Jason Casper aka the Big Bopper hello world baby [Laughter] [Music] find me over on Jason Tucker on Twitter my website is Jason Tucker dot blog I do this show here as well as the show WP
(03:22) blab feel free to go take a look at that and just so you know and just sober say remembers this particular show is brought to you by super oppressed makers and this episode is being streamed on a bunch of things we’re streaming on YouTube we’re streaming on Twitter and we’re streaming on my personal Facebook as well as a Facebook over on WP watercoolers Facebook page so press for helping us out we appreciate that every platform you cannot escape us but isn’t that a problem with the canonical source
(03:54) and okay so two inches something you mentioned something at the top here Morton regarding the idea that we we’ve been chronically Tandberg forever but network on at the block editor and then we told rupal it’s okay to use Gutenberg so did we just take Gutenberg and we just got through it at Drupal and said here use the word burg we call it the block editor now is that what happened so what happened yes so a long time ago a discussion started in the gutenberg repo specifically about this particular issue which is the
(04:50) codename for this project has suddenly become a name that is associated with the project we’re just not great that’s not something you normally do because it causes a hobby Windows 95 is an actual product name though whereas good is an actual code name but the like I come out here to talk about serious a new people are ok I’m serious people think I’m serious all the on this show before that was not me that was someone else know that the decision to stick with the Guttenberg name until like two days
(05:48) before release was a terrible one it should never happen I think if you think about Guttenberg as a magnet or like this block editor as an agnostic thing that other platforms can adopt I actually think the idea of keeping the Guttenberg name to refer to the larger web project called Guttenberg makes sense but then internally when it gets in baked into WordPress or Drupal or Magento or whatever it should just be the block editor there is a communication problem there because you know you’ll have like things like that
(06:24) Gutenberg Cloud which is the ideas you can make blocks that can be used in any implementation of the block editor but it’s called Guttenberg laws so users are going to be super confused about this until the end of time because there’s another project gutenberg that it’s ignore the important and is used and has an API and JavaScript libraries and all this kind of stuff that is the open source book publishing service for all public domain books in the world so it’s not like there’s any conflict here or
(06:53) anything so we didn’t check her namespace huh but that’s that’s smart going into this no one knew you know over the two years and to be quite honest let’s be real the expectations were very different from the results so you know the naming I mean obviously that’s a problem you come up with the naming that they did at the beginning is definitely not so they weren’t thinking about like oh just code names gonna stick and this is going to be a thing in the community for two years like nobody
(07:20) about that so it’s not gonna call it Gutenberg the user is not gonna call it anything but the new editor they’re barely even gonna call it the block editor that they’re gonna call it WordPress they just get a color WordPress they’re gonna call it their wittily you know they’re gonna call it cool because they already do and that’s it like we were the ones who get hung up on nomenclature developers get hung up in naming weird we never call the site tiny MCE right WordPress developers did that’s not true
(07:54) developers often refer to tiny MCE like and if you said that to a user they have no idea what you’re talking about but if you say that to a developer they are completely there like oh yeah the tiny MCE it’s a thing it’s a noble thing but the formal name is now block editor and referring to the block editor internally as block editor so if you were to say you know like in training in your training do you say okay you know add a page you click here and open the editor say that you just say add a page but you
(08:28) get a block and stick it into the block editor yeah I think I say because the block editor is moving outside of the contract right and it has text blocks in it so it’s your editing blocks it’s this nomenclature that this is the stuff these are the stuff I wish we’ve been working on like how do we say this to people instead of like every just freaking out about like the inevitability of JavaScript like the cowpath say just start being consistent about lumic later and it happens ever and those are real pictures you took by
(09:06) the way right yeah you’re close you can get in your car and drive up there and I can see it in Carpinteria it’s like that we have the block editor and we have the blocks that live within the block editor you know one of the one of the concerns that Martin was bringing up on on Twitter was the idea of styling these blocks and then having those Styles be inherit either inherited by the the theme in which they’re gonna live on or that the person is the person that’s developing those blocks are going to
(09:41) apply styles to it or that person who’s building those blocks are going to have to make sure that that block is compatible with a whole bunch of themes like there’s there’s many ways to kind of look at this to design a block and then actually make a block look good when you stick it on there yeah with widgets you had the same problem you had a h1 tag that you stuck on the top you put some text below it and hopefully things looked great but block editors are the block is different than a widget that’s going to live in the corner and a
(10:12) sidebar which of the sites nowadays don’t even have sidebars anymore I’ve been waiting for this moment in theme evolution for a very long time honestly because themes have have been for then I’ve talked about this I did a whole talk on it and like for labor camps ago or something about how the themes were just a mess there are just a nightmare of no standardization I mean since the theme even the theme customizer when theme options were like all crazy and like different versions and everything it doesn’t hasn’t gotten better because
(10:43) even if the customizer standardizes it it’s still crazy lots of different things and different you eyes within the customizer customizable right so that’s about you know if we’re getting away like my dream my theme dream would be the themes would hold you know styles and colors and basically out formats that’s like what they’re supposed to do that’s what they’ve been made to do their CSS skins essentially and then the stuff should inside should not you know crazy override that we have that problem you
(11:17) know you get that with like the events calendar yeah exactly like you can choose to override the CSS styles or use their CSS styles like that sounds beautiful to me it feels like simple and clean like not a problem and I’m sorry for all the theme developers out there in theme forest your time is over sorry for anybody on the developers they have made their gold rush the gold gold rush is over is what I would predict it’s over for the time being it’s gonna be interesting to see how this plays out in both the short term on
(11:54) the long term because this this undefined stage two of the Gutenberg Project and seems to indicate that you know blocks are gonna move everywhere inside a space and then you have kind of a view where you place blocks wherever you want almost like someone talked about this Edward campus last year or something the interesting like this is a huge opportunity but it’s also a really big challenge because unless WordPress establishes really quickly a way of doing this correctly so that it’s unified and everyone does it the same
(12:31) way we’ll have a bunch of plugins that will solve the problem in different ways and we’ll have this total chaos where it’s impossible solutions for it to that I think that that is almost I’m starting to believe that is almost by design like that is actually almost the way that some of the leadership let’s just say hi Matt Matt kind of wants people to just like build all the things and Duke it out and let the best thing win you know that’s almost like we don’t have to make a decision if everybody just fights
(13:04) these things together and then you know whatever happens to make it wins know there was a one point where we would take we would the the wordpress plugins and we bake them into we take we take them out and we bake them into a theme to make sure that no matter what it’s going to look the way that needs to look and I think it’s I think it’s I think we’re gonna have that same problem again mmm that you know we were we were taking a version of a plug-in and maybe it’s a form plug-in or contact plug-in or like
(13:44) any of those sorts of things you’re gonna have to deal with that and I don’t know what’s you know I don’t know what we’re I don’t know what we’re gonna end up doing what’s the what’s a set I mean that’s where we need to go is this where where the content editor block edit or whatever you want to call it is the unified experience that allows you to add blocks put content into the blocks layout the blocks and then the theme or whatever we want to call it provides templates and unified styling for that
(14:20) so you basically choose a look for your site and then you get templates you can use and then but the problem with that is for that to work WordPress actually has to be a page builder WordPress has to be a layout builder and that’s where the Schism is because a lot of people who are working internally on this project do not want WordPress to be layout builder and the reason why that’s a problem is there’s this thing called there are two things one called resiliency and the other one called accessibility where and they have
(14:50) the same requirement if you take away all the crafts what you need is a formatted HTML document that has a logical structure and is structured properly in an environment where you have a page builder where you can drag and drop blocks anywhere within a layout you have to make sure that if you take away the layout you have this structured HTML document that means in the block builder you then have to have basically two panels one where you say this is the logical order of my content and the actual semantics order of my content and
(15:17) then from there I can then drag the blocks out and position them within the view that is a level of customization and a level of cognitive load that you put on the user which simply is not tenable to most of the people who use WordPress so what will end up so then you have the templates right which say we’ve made the structure for you you just fill in the blocks right and that has to be that something WordPress to us because if every plugin tries to solve this problem half of them will not have the content order system in place they
(15:47) will all do it in a different way it’ll be totally chaotic to switch between different sites and will basically be back in that hellhole we were in a couple years ago where every plugin have their own settings panel in back-end and it was all just total chaos and no one understood anything the whole new level of that inside the editor I do want to be okay when the editor just moves to the front end and nobody has to look at the backend anymore well one thing that has well Matt Matt who is the great decider and I might saw is that he is
(16:33) clear he doesn’t want to friend it front and editor he said so in the most recent interview he did with my main concern and I don’t believe that this is something I one of the main selling features for WordPress that I one of the reasons I use it over everything else other than you know a million reasons is the database and this is something that I talked to you know even my clients about because that allows them this concept of data portability and I am a little concerned I’m not the you know I
(17:09) I don’t go deep on my programming skills so I get things get a little fuzzy and I’m like okay someone could we and that deep part can you explain that to me down there so you know Gutenberg’s already a little bit weird with its markup and how it turns it into you know not necessarily just totally portable data it has to get stripped it has to get whatever use anyone see a future where the database is not part of WordPress so should I start panicking now no we’re all good everyone’s like yes we needs database in
(17:40) order to have the decoupled apps the comic blog with api’s yeah so the content blob stays until if within the foreseeable future I think Matias I talked him into use about this this summer and he made a good point that I had kind of I’m not sure if this was originally planned that way but it’s what it ended up being I was asking him about why when you save blocks you’re actually just saving blocks inside the contents right so there’s one form entry inside the database that has the entire set up and
(18:13) you have all these weird comments and I said why do we do that why don’t we have you know each of these pieces is their own data element and then we have some sort of JSON type thing that says these pieces are the ones that go into this post that would make more sense from a data structure perspective and he said well we want it to be so that if WordPress basically fails like you know some you have a wordpress site WordPress collapses on you the database gets messed up you should be able to go into the content folder and the content table
(18:43) and pull out the entire piece of like the entire post if you separate that out you would then have an abstraction layer where you need to pull the list of blocks that go into it and then piece it together again so it’s a way of preserving resiliency now that’s a really good argument to keep it the way it is now however I am 100% certain that was not the thinking when the decision was made this is a rewriting of history to justify right so it’s like is one of those decision ended up being probably
(19:15) the right decision but that’s not how it came about something that we’re gonna keep at least a while well reusable blocks Blake’s breaks that entire concept anyways yeah about is there a way of being able to test test those blocks and has somebody come up with a way of testing for for essentially for compatibility both all themes that are out there when you’re kind of dragging and dropping in blocks they keep they keep with music is there a term or something that we can use to describe a visual unit test in a way like a way
(20:00) of being able to make sure that these things don’t collide or anything there’s a theme unit test that has blocks in it now the official theme unit test has there’s a branch on the github repo that has the blocks but there are an old layout blocks so far right because this this entire situation we’re talking about doesn’t exist yet well I mean you do have like columns for instance yeah yeah and if you have a if you have a block that isn’t staying within its boundaries which I saw a few of them
(20:28) early on where it’s like I just dragged this block in here wait why is this block 30 pixels in all directions bigger than its container what happened here like says it’s super block no divs work and now this whole thing kind of just went nuts so so we need that as well then would you guys all agree that there needs to be something that we can you know pretty much throw a bunch of blocks in there and see if it looks okay or not because when we get to the point where you know the block editor becomes the
(20:59) entire page at you know editing space that you’re gonna have to worry about that well one of the ways of approaching this which is usually done in design projects like this is you start by building the output you want so you say you mark up an HTML document the way that you would you would think it should be and then you make the entire layout the way that you think it should be and then you make maybe like it’s almost like a CSS Zen garden thing you make an HTML document then you make like 18 different layouts and you say we’re
(21:28) gonna try to achieve all of these using an interface what pieces do we need to have an interface was this to be possible right that is if I was head of this project that’s where I would go I would say we’re gonna make this unified HTML document and we’re gonna just put it into the community and everyone make you know the front-facing look that they want with this and the layers that they think they were gonna and not just for now but for later and make them responsive and make them work for everything and let me say okay
(21:57) what are the pieces how do we make the interface allow for this to happen because then at least we can have a unit test that would become the unit test for it right Steve Steve Steve been typing I think he just registered berg zen garden and block editors and carson something that’s not me they do that technical that’s not you typing no we all thought it was ok stop typing i can see when we’re talking about i have a quiet connection that WordPress should go you’re like if i were running this or
(22:33) you know so something that has come up time after time after time with gutenberg and it’s really shown i think some of the cracks in the community and in the structure that we have happening within WordPress is that you know with half the you know the discussion happening in half on slack half on github half on track no one really knows where these discussions are happening and there’s also not a very clear roadmap coming from Matt coming from the team coming from anyone and there’s no one place for this so this is something
(23:08) that I think is really important because we don’t have a space within which to talk about these concepts maybe see where I’m going with this segue so something that you brought up in your talk with your various speakers that you had was this concept of the WordPress governance project and I definitely want to ask you about that but I’ve one quick question to clarify first on the interview that Matt did with Bryan he and Bryan were questioning your intent not in a skeptical way yeah they didn’t
(23:41) know what you meant did you mean go where Chris’s role within the larger web community or governance of WordPress itself and the project they took it larger web community I had imagined it to be talking about WordPress governance so could you clarify please mention it’s both so it’s we need we need governance in the WordPress project for the health of WordPress itself and and governance in this circumstance means we need to have policies in place and ways to enforce those policies we need to have
(24:19) ways for people to have input on those policies we need to have representative who are responsible for managing those policies and so on and so on some basic governance of a large project so that we can trace decision-making and figure out who makes decisions in what for how does this happen who we is exactly but an essential part of that is for us to be able to take part in the larger web governance that means representation in government representation in NGOs representation when decisions are made about the web
(24:50) through w3c about the Internet through various government bodies and so on for us to be able to do that we first need policies and we need to be able to appoint people to be our representatives in those environments and for that we also need we need governance internally so it’s a it’s one of those chicken-and-egg situations they both need to be there but in our situation we can actually say we need the internal governance first we actually know who we are and what we stand for before we can move forward into open governance and
(25:22) yeah so let’s starting January we’re starting the project it’s gonna be fast-tracked like crazy we’re gonna try to propose something by the summer so on you who’s we all right now those that have been thinking about this and the scope of Wiis power right now is peaking a date and time for the meeting and setting a preliminary agenda right it’s like we’re very we the people who are working on this right now very specifically do not have a decision-making power in this project we’re simply booting it up so that a
(25:59) meeting can be happening and it’s a matter of talking to people to find out that we’re not overlapping with other meetings and getting a channel to have the meeting in that kind of stuff so it’s very technical just organizational components I’m just clarifying because we’re building a country though it’s the global thing kind of a big deal WordPress is a political organization in everything but name so we need all of those sorts of pieces to it well there are ways of doing governance that actually work they don’t
(26:41) come from web governance they come from other types of organizations the the key is just we need to have clear structures I mean think about it right now we have a btfl benevolent dictator for life the last part of the be DFL is concerning because that means what happens if Matt decides to just be like no I’m going to Mars with Elon Musk [Laughter] yesterday but this is not a tenable management structure for 32 percent of the web at all right when you argue it’s a dangerous structure because the impact
(27:31) WordPress could have just just yeah well okay so Facebook guest data security I’m even just talking from an economical state and an economy standpoint from all of just the people I’ve set up with WordPress sites right which is a you know probably close to like a thousand people which is insane right but if all of their sites stopped working their businesses actually I’ve had clients contact me after last week’s update they’re like oh it’s broken it’s whatever so you know that does have an
(28:01) economic impact that does have an impact beyond just the commercial aspects of the web development industry it has far-reaching things that are happening so I am I’m fully on board for this and this is actually incidentally what I thought the growth council was going to be because I was on the growth Council which was and is now no longer and I thought we were going to be talking about things like this like how to structure the stuff we did not talk about that so I’m really glad that there’s a forum when we’ll be able to
(28:33) have these conversations if you consider WooCommerce and all the people that are running the commerce that absolutely has an economic impact yeah like dramatic like and and not only that the tax collection in commerce the tax collection plug-in affects a lot of things for the people paying it to the people receiving it if there are errors in that if there’s just you know even just user error because it’s poorly made you know that’s problematic for a lot of people WordPress is mission-critical to millions of people arbitrations
(29:08) WordPress makes has a direct impact on the lives of millions of people I think that is one of the most important sentences and maybe should be the lead sentence of the governance project kick-off because that’s really true it does and if we all just only look at our own little square it’s like oh whatever it’s just some software I just know the source community it doesn’t matter if you take into what you just said like if you if you look at that really it really does matter a lot yeah remember the promise of 5.0
(29:40) point 1 coming out a week after the original release and it was gonna fix the gutenberg problems there anyone pay attention to the release that actually came out and what that did sitting on file for a long time they knew about that one oh yeah it’s been held back by as far as I understand and I’m not on the security team so I don’t speak for them but to my understanding that security update has been sitting there waiting for the release because no changes were gonna be made to core which is one of those decisions that is not ok
(30:12) so like I’ll put a caveat on that this could all be well you can’t talk about security issues publicly because there’s gonna be no 499 and ok we got a security update so Jason you were saying we’re out of time yeah thank you all for coming down hanging out with us watching us on all the various platforms that are out there feel free to go in and subscribe to us you can subscribe to us by going to WKYT dot-com / subscribe where you can learn how to subscribe to us on all the different platforms that
(30:57) are out there and I’ll talk to y’all later thank you