 Hello everyone. Welcome to our last session in track 2, which will be led by Birgit Bowli-Huck. Birgit is a publisher of Gutenberg Times, a site with news around WordPress blog editor and beyond. She hosts regular Gutenberg Live questions and answers YouTube and the podcast Gutenberg Change Log. Birgit has been contributing to the WordPress open source project since 2014 and contributes now full-time sponsored by Automatic. After 25 years living in Florida and 20 years running a web agency, she and her husband of 31 years moved back to Munich to be closer to their families. So, what Birgit will be talking about is how to customize the blog editor for client projects. Not every project needs custom development blogs to provide a great blog editor experience for your clients and their use cases. You also don't need to be a Javascript to make adjustments to the WordPress core experience. It certainly helps you to grow gradually into it. In this talk, we will discuss tools and methods for developers to curate the editor experience. Attendees learn about the nature of blog JSON and deem JSON, when to use the blog styles and block variations. We will also cover server and client-side filters with examples and resources to learn more. After Birgit finishes her session, we will have questions and answers and to start with Birgit, here's the floor. Thank you very much. Thank you so much, Maya. I think we have in the description a little bit too much for half an hour, so we're probably not getting to all of it, but what you're going to be walking away with is a list of resources that help you go down the rabbit hole about the things that you're interested in. Yes, well, I think I need to change my bio because all these numbers, they add up to, well, this woman is old. It's not the experience anymore, so yeah. But I'm really happy to connect with the German community, and I don't want to apologize for speaking English. It's easier for me with the technical topic, but if you have questions later on, yeah, you definitely can ask them in German, and I will, if I can, ask Einstein in German. So the slides are on the Bitly, I don't have a QR code. I only have a Bitly link. It's very succinct. So it's Bitly and then WCDE23, and you can follow along if you want to. So when I started working in the agency starting to implement the block editor for client projects, I had all the various reactions that you probably encountered too, but I found that the more I talked positive about it, the more the client also wanted to explore it. And of course, I also had people who wanted, no, don't change anything. We have our workflows fine, and yeah, please don't change anything. But I had two project managers who said, you know what, switch it on and we'll see what happens. And our editors will be fine. Just make our colors, the design colors from our brand, make them available through the color editor, and then we should be fine. And then some people, so I realized that's actually only small changes would be, people would be able to use the block editor, even with the classic themes or there, the current theme, because we were told, and most of it was true that the block editor works out of the box. Of course, when you are very opinionated about the design, you bump up against the opinion nation, up against the opinions of the developers and the designers of the block editor, but that's a different story. And we're still doing that. But you don't need a whole JavaScript expertise or no react to do small changes, bigger changes, and only on level four, you're all coming into the programming part. And even level four is for someone who does PHP and comes from that world can modify the block editor only on level five when you want to use React to customize or create custom blocks. You need quite some JavaScript and dive into the new world of Gutenberg or the block editor. So that's what we're going to do. I'm going to talk. I talk about all the levels, but I will dive a little bit deeper into the less code variations like the style and controls, how to block patterns and then adding block styles. And then for the other ones, I'll give you resources where we can talk about it in a Q&A. So that began. So level one was that use case. I want the brand colors in the color editor. And then the question is, do you still want the custom colors so users can create colors or create color combinations? Or is that too far into the design of your editors? And so that looks like this. So here is a modified text color palette with the brand colors. And then there's a custom color. And if you don't want them, you use the same JSON. And that dates how old the slide is actually. And you just use the settings color and then custom false. That would switch off that custom color thing. And you could do that with all that. But the first thing that I did when we switched over was test the theme. And do all the blocks show up nicely? Or do we have to do smaller styling changes? And I used a gist and have also make that available to everybody. We have a number of blocks in code view. And then you can add it to a post and then see how the theme reacts. And so I did this with underscore. Yeah. Do we get this? Yeah. So this is the gist in block form. And that is a cover block, an image block, gallery block. It all displays fine. Wow. Yeah. And then the quote, pull glow first buttons in all kind of variations. So I use that to just test the theme. Maybe a client theme that they're already using on the production side or on the test side. Or I used one of the other themes. And so this theme worked very well. And then there was another client project and that was a theme from 2007. And that didn't work that well. So there was, yeah, going back, you know, see here the text kind of blends in, there's some styling to be done. But it wasn't too bad. It was just a few things that needed to be adjusted to make it also work on a very old theme. Yeah, that's now here. The big things, pink fonts didn't work well, the sideline line height. But so if you ever have that situation that you have a client who wants to try out the block editor and you don't know how that works, or if the theme, feel free to use that gist on GitHub and link this here. And you get the whole raw thing. And if you, the pictures are public. So if you put them in your post, you will see the pictures if you want to replace them. Yeah, feel free, of course. But where's my computer? Who gets lost on their computer? I do. But that's a different level. Sorry. So if you have a block theme that a client wants to use, it's very, that whole process of testing blocks is now built into the site editor. With version 6.3. You don't have to, you go to site editor and then to style and then you get, this is a whole set of blocks where you have the test blocks, the text block media, design, rigid theme block. And even the custom blocks that come with your plugins, you can see how they work. And you can also change them in the site editor, the general or, I just wanted to point that out that that's the next generation of testing a theme and the blocks in a theme. The next one. So custom color palette, we talked about it. You have two steps. If you are not using a block theme, or if you're not using theme JSON, you have one, you need to put the custom color scheme into your functions PHP. And then of course, that's on the left hand side, where you just name them, give them a name, give them a slug, and a color to it. And then on the right hand side is the style CSS representation of those blocks. So it's a lot of duplication kind of thing. And if you use the theme JSON, you just do it in one file in the theme JSON under settings color palette. And then it automatically creates the CSS for it. So that is relatively easy. Now, when the classic and classic themes can use the theme JSON for those customizations. To disable custom colors, every feature that comes into WordPress also needs an off button. And that is add theme report to your functions PHP and then disable underscore custom colors. And as I said before, you can use it in the theme JSON as well. And then the custom color link is gone. The same with the font sizes, you can switch off custom font sizes for your clients or for the client site. And then they cannot, they only have the pre-built font sizes that you also can put in the theme JSON. And you find them in the theme JSON. If you use a theme that you got from somebody else or that you take over as a contractor or so, that's where you find those custom fonts. There are multiple ways now with the theme JSON to curate the editor experience. And you can all do this so I put this, this is from the documentation on WordPress.org. How you switch off the background color for settings for blocks, like custom blocks, or like group blocks or cover blocks, dual tone. Dual tone is a nice way to put a filter on your pictures, but not everybody wants them the same with gradients or default gradients or the default palette, the same with the typography. You can switch off the drop cap from the paragraph one or there are no controls for transform decoration and all that. You can switch off all those controls and then it makes it less prone to changes by your clients or editors of clients here. So, but there are other methods to do and Fabian had quite a few also talked about the locking of blocks and the content only editing for patterns. So, that certainly I would recommend that you watch that part of Fabian's talk. There's also a link in the slide that gets you on the documentation pages. There's one, just look for or search for curating the editor experience and that comes up very fast in the search engine. So, you can provide controls and options, default controls and options. You can limit the interface options with the same JSON settings. You can also disable inherited default layout and limit options globally or per block. That's that and every use case is different, but it's actually relatively fast to accomplish that. So, level two is block patterns and patterns is a collection of core blocks, could also be custom blocks that are available to the editor through the insert. On the left hand side, you have a big blue button plus you click on this, you have a tab, one is the blocks, the other one are patterns and the third one is media and the patterns show up there. So, patterns can come from the pattern directory and I don't know if you saw that, but there is now a new drop-down box here that says curate it. That is, some of the blocks are kind of looked for, curation means a designer looked through them and marked them kind of, these are higher quality kind of thing or these are kind of interesting patterns in all of the categories. So, you can see post, post means query loop, galleries, contractions, banners and headers, patterns, wireframe patterns that you can get from the pattern directory on wordpress.org slash pattern. And you just copy paste them into your post or pages, then patterns can come in with your theme and then you can also have custom made patterns that an editor or a user of WordPress can now create in the interface, in the site editor, since 6.3. So, the current version has that we can build patterns now, yes. So, just so if you haven't seen it yet, these are some kind of patterns from the pattern directory. To create pattern, it's all in PHP, but only one set of, it's a very low-key PHP. You register a block pattern, you give it a namespace and then a name, and then you put in a title, a description, a category and then you can use the content that you created with a site editor, a post editor, copy pasted in here. And then these are patterns we created for a foundation site, one with a picture on the right and the other one with the picture on the right, but the text was all formatted. You can do it with no code, there are two, if you're not on 6.3 yet, you can use it with Jean-Paul Pistodras, the core committer has a plugin and the editor's kit from Accentify also has a, no, it's not Accentify anymore, sorry, but Moonier-Kamal also has a huge selection of patterns and page layouts. I also have some favorite themes with patterns, one is Tobi by Anders Noren, the other one is Ano by Elmer Studio and then of course the 2024, if you haven't seen it yet. Take a look at it, it's a really fabulous default theme to come with 6.4, which is maybe three weeks away to hit your WordPress instance near you. Then there's a whole documentation about patterns and then WP Tavern had an article kind of patterns which changed everything, very opinionated, but I agree with Fabian when he said this morning that the patterns came actually made the use for custom blocks, simple custom blocks, you don't use them anymore because you can do patterns. There's a switch in terminology, so first when I talked about patterns, people asked me, are you talking about reusable blocks? You know what reusable blocks are? Okay, you put them once and then you put them in multiple posts and every time it's the same content, but when you change it on one post, it changes all the other instances as well. So it's actually opposite of a pattern, a pattern when you put it into the post or page, it stops existing as a pattern, it's just a collection of blocks and then you can change it and you're not messing up somebody else's post or something like that. Now, because from the idea it's actually the same, it's just kind of the, so the name change was now reusable block and now patterns, synced patterns in opposed to other patterns, unsynced patterns in the 10 minutes. Okay, let's go faster. Well, the other part is that we are working on or the developers are working on partially synced patterns so that you can define certain places where you can say, okay, sync this but not that. I'm really curious how that is going to turn out. So level three is add block styles and block styles are the things that you see under the style section and we also know that doesn't scale that well. There was actually a drop down where you can set something at default that has gone, is gone now. You cannot say this is default unless you use code and then block variations or blocks that show up in the insert. What you can do now with styles is you can say, okay, show it in the transform manual. So if you have a separator in a certain way and you want to transform it in another, you don't have to open the sidebar, you just can use the transform section there. So this is a style with hand drawn frames around an image and this is an example from Justin Tatlock. He had a post on the developer block and that's how that's pretty much the code of it. You add an action and you have the function and then register block style with a name, a label and you could do inline styles and the inline style is if you're very good at CSS, you can write this right now and you have a new style. So it's four or five lines of code and you have, give your editors a new way of having an image drawn or having a button outline or something like that and there's another attribute that you could use here and that says is default yes or no and if it's yes, then it kind of turns this style into the default style and it's always the same. I have a theme where I have a separator style but it's not the default one. So every time I use a separator, I have to go to the sidebar and select the style. So I could go into the code, change the little thingy there and add is default into it. And of course, you can also unregister core block styles if you say, well, I don't want rounded images in my website ever. You can unregister those or unregister hand drawn or something like that with two, three lines of code in your functions PHP. Block variations and that's where I'm kind of going a little faster now. So you can have block variations like in the columns when you select the columns block, you see the five, six different variations blank, three column, 70, 30 kind of switch, two columns and those are variations that are offered to you. Or you have a block that's intro, it's called intro that looks like this. You see it in the insert and you can use it like any other block but it's just a variation. It's built on top of core blocks. So there is, we have a few proliferation of terms that are not always clear what they are because people talk about block style variations. Yeah, is it a block style or is it a variation? It's a different function but there are also style variations that you get with themes where you can have a separate theme JSON that change everything from your theme into different fonts, different colors and all that and you see it in the site editor. So it's really important to kind of go in there and read the documentation definitely and to get familiar with that. On the developer blog, there is an introduction to block variations. It's a nice tutorial that you can, who knows about the developer blog? That's a third I would say. So there is on there, I'm going to go there now. I'm sorry, that's you earned it. Oops, if I can, if my ever lets me. Okay, so developer.work slash news and that's a developer blog and it's relatively new. It went online in November where it went out of beta in March. So we have, and that's the latest post, what's new for developers and then tutorials, how WordPress developers can keep their users safe, HTML API, process your tags, not your pain. Fabian talked about the HTML API, understanding block attributes. That was a really eye opener for me. And then you can go to see all posts and look through it. And there's a tutorial after tutorial, adding and using custom settings for your theme, Jason, introduction to block variations, anatomy of a, yeah, it's done design, the letter form. And then there is a series beyond block styles from test by Justin Tedlocks. And he goes from the problem that you have that the styles do not scale well in the sidebar to putting all the styles on a button and then make that available. Yeah, kind of that's the, that's what you get is kind of a separated bar that you can select from a button on your toolbar and then it gives you a different sidebar. So these are all great examples. Let's go back to the slide because I might have more for you. So these are all links about block style, block variation, block filters. And then level four, there are three block plugins where you can an ACF, everybody probably knows advanced custom fields. There's also one from Genesis custom blocks that was previously block bar where you can and they're all the same. They have your fields to put in or fields where you can put in content or and then you can create the template in PHP for rendering those fields in the block editor and everything else is kind of abstracted behind the scenes. That's how advanced custom fields pro does it custom blocks, formal block lab. And there's another plugin called lazy blocks who uses actually very scripting tools to for you as a developer to create the template for the front end of that. There was a very old article, but it's still because it was so basic, so relevant to kind of compare the three on the WP Tavern that you can check out. And then level five is definitely great custom blocks. That's where a lot of people kind of migrate over from ACF to, okay, interface wise, it's probably easier or better to use custom blocks. There's a great block tutorial and then learn wordpress.org. So the website has several courses. One is the introduction to custom block development, how to convert a shortcut to block. That's more like the strategic approach on that. It's not, it's not an automation conversion. How to use the wordpress data layer, registering block patterns, of course, and then more block development. And then I have a selection of articles that cover all that on the developer block dot wordpress.news. There's a lot of work to be done, but I think that we do a better job than before in the documentation to create some tutorials that are really real life examples that you can use in your day-to-day development learning or getting to custom blocks. And that's pretty much it. Stay in touch. My WordPress Slack and Twitter DMs are open. It's all under at BPH. You can also catch me via email or via the Twitter account of the Gutenberg Times. I also share the link to the podcast and to the subscription. And this is the podcast 92 that just came out with Joni Chalabi. And then we have the slides out. So this was it. We all in time. Wow, that was fast. Thank you so much. Do you have questions? This was amazing. I have tons of questions, but I'm going to start here. So we have the first question here. Totally agree with you. Next question was, I think, here, or you? Hi. The one who won the microphone. Question about block styles. So just to catch up on the title again before clients. For us, the use case is also very often that we reduce the block editor as much as possible, so that the customer can use it in BrainDead, let's say, in order to keep the CE. What we do there, for example, is when the core button block is cut very, very, very hard in front of us and then stuffed with block styles that then take care of color palettes and hair effects and such stuff. Do you know if something comes up with 6.4 or later? Or do you have another approach that you would recommend? Or is that your, in my opinion, the way? Which part? Which part? Because, yes, maybe the pants. Now start and remove the option of block styles, defined or variations, I mean, to make it a little safer, or maybe it wouldn't be better to let the core things be and put more on custom blocks. I think the core blocks have the advantage that all new features then come with the core block, had a disadvantage that all new features then have to be switched off again. If you don't want to, I totally see that. But what I also see is that what Fabian said, that you can't combine the styles you have. You can't take a blue button with a pink circle, if you know that, it just doesn't work. So you have to do a third style again, and that all goes hand in hand. I'm not sure, I had the impression that you would think about how to make style combinations, but I haven't seen a prototype yet or something like that. So that would help a lot of people. Mm-hmm, yeah, yeah. But that's not in the style thing anymore, it's in a separate sidebar. And that's where the user interface is a little bit wooden. Totally, totally. I asked my question in English. You showed many snippets with PHP code to add or delete styles, variations, all of that. Do you still need PHP for that or is this already possible in a theme jason or will it be possible in the future with the theme jason? Vieles ist schon machbar in the theme jason, auf jeden Fall. Also, das Abschalten von den custom settings, das ist beides gleich. Aber hier benutzt theme jason in the classic themes. So they also need a way to do it in PHP. That's why I've showed it both. And when you look at some of the more complex themes, you see there's a lot of code in the functions PHP that takes care of block variations or block styles or even custom blocks. Now, I think it was in 6.2 where the barrier to have blocks and themes has been removed. So because many, many agencies do bespoke themes and there is no reason to have the block separate from the theme. And yeah, there's a lot of PHP code in them. I think PHP is still with us for a long time. Yeah, I recognize that 2023 didn't have a functions PHP and 2024 has a functions PHP, not for a lot of things, but it calls like some of the new things are not in the theme jason yet. Or might not ever be. Because as the developers approached, they put it in theme jason first and then create the interface. And then and that's also the part where they do it in PHP. But if it's not in theme jason, then they also need no interface. Yeah, it's kind of, yeah. And yes, I'm not sure if I'm answering your questions. I have two small questions. One is, do you have a theme jason generator, which can help people like me to write the theme jason? And the second question is, what about sort of styles like before and after? If you just have one line of inline style, is there a way to use before and after? Yeah, sure. Inline style is not the only way to create block styles. You can also have in the registration a file that goes a list of file that has all the styles that you need separately. So you need to go through the documentation and then can have any style that you any CSS that you need for your style put in that separate file that gets loaded when the block is loaded on front end and on in the editor. Does it make sense? Not sure. But maybe afterwards, it's okay. So, well, if it's not clear for you, it's not clear for anybody. All right, we have one more question. Yeah, right. Just not killed. Thank you very much for your speech. Yeah, I want to ask in German. I hope it's okay. Absolutely. In react, how about? And the nachträglich, when the bloke platziert sind umendert entsteht halt dieser bekannte fehler was leider anders nicht handhabbar ist sozusagen, dass der block unarbeitet bearbeitet wurde. Daher meine Frage war nicht persönlich, wie gehst du damit um? Wenn man halt einmal ein Kundenprojekt mit der Save Funktion gemacht hat und nachträglich irgendwelche Änderung machen müsste. Und am Ende der Kunde sich dann beschwert, zum Beispiel, dass die ganze blöcke im Becken kaputt gegangen sind. Also ich habe einmal eine schlechte Erfahrung gesammelt. Deswegen ist meine also persönlich nämlich immer die Dynamic Blocks. Aber ich würde gerne mal deine Meinung dazu erfahren, wie du damit umgehst. Ja, ich bin damit. Also man hat eigentlich immer propagiert, dass Static Blocks kommen. Und dass diese Veränderung ist, da gibt es dann ein separates tool, das heißt also a deprecation of blocks and you need to kind of what's expected on the save block and what's new kind of thing and that needs to cover. I've never really understood that so the dynamic block it is. Yeah, because that's really hard to, a lot of people really understand it, but I don't that much. So I don't really assume, but there is a post on this developer blog about deprecation. And that can definitely help you with that particular case to when I would find here is block deprecation a tutorial. And Michael did a fabulous job to take it from progressive enhancement, so to speak, from a simple example to a more complex one that you have to put in in the build a deprecation.js. And then you have all the variations from your block be registered. And so the editor can read that too. It's, yeah, yeah, yeah. Total get it. Yeah, yeah. Yeah, it's, that's it. So the, the learner folge is that I'm a good man and I'm a land man. Yeah. Do we have more questions or we're sleeping here tonight? I can't, I have to get the shuttle bus. All right. Well, thank you. Yeah, thank you Berget for the session we had. It was a true pleasure having you today. Well, thank you. It was great pleasure and see you.