In this update to the Block Styles Manager, we focus on some of the weird UI challenges that the block editor provides, why custom CSS isn’t already an option, and what is a block editor “plugin”.

Transcript

Intro/Recap

Hey, welcome to part four of the series where I build my new kind of like personal pet project, the block styles manager in public. So to quickly recap, trying to build a tool to add custom CSS into WordPress in a way that’s maintainable, sustainable, saves the files as CSS on your actual file system, or maybe in your custom theme or something like that.

And then lets you manage it all through the block editor. So you can attach styles to blocks and they’ll load the styles if they’re being used and it won’t load the styles if they’re not being used. So remember working my way through this, you can watch the other three videos. But I thought I’d talk a little bit today about block editor user interface and why I’m even doing this.

Site Editor UI?

So I was in this situation recently where I was loading up the site editor and there was already a few things that were kind of sticking out to me, like the fact that if you load the site editor, it’s called design. And I guess I would think if I went back from here, I would actually get other options than design, but design is literally everything.

Which seems to me a little weird. Like navigation. I don’t know. Does that count as design? I would love to see this be filterable I’d love to be able to just directly link to things from here I’d love to be able to directly link to edit the footer of my site edit the header of my site just you know Something like that and then we won’t even talk about the navigation. But then you can jump into styles and one of the things is that no matter how long you’ve had your site, you always have to get past this style variation tool, which to me is a one and done thing.

You know, you set your style variation. I don’t think you’re going to be editing every time, but it’s, you know, this thing you have to click through again to get to, you just have to know that this pencil icon exists. One of the big requests I get from clients is, can I edit the hover of a button? So you have a button and then what does it look like when you hover it? So you actually can’t do that at this point in time. And this is. And then I didn’t realize that if you come down here, there is a way to add your own CSS to an individual block, but you can only add properties and values.

So again, you can add you know, a hover state using this additional CSS. So again, not really that helpful. And then I believe. Somewhere in here, this one, maybe, yeah, there is this additional CSS. I guess you could do it in here, but I don’t find this to be super useful as a tool because it’s inside the site editor.

Moving things around

So I’ve been working through the process of building this. The other videos kind of go through some of the technical stuff. A lot of that has been solved. The files are saving as CSS. I’m using object cache to kind of keep things in memory. We’re using a custom data store to send stuff back and forth to block editor.

So under the advanced tab. I have the option to add block styles for whatever block you’re on. So we’re on the list block and we have this nice emoji list style applied to it. And if I take it off, then my list over here looks pretty boring and I can put it back on.

One of the things that I had in earlier videos was when you manage the block styles, it was this kind of full screen thing that took over so you could see everything. I actually don’t like that. I like to think that you’ll want to do it very in line. So I’ve updated this. So you notice we’re here in the settings, but there’s these other plugin options up here.

So now when you click on it, it actually takes you to this. So before you had to like go into this context menu or something, but now it’s just up here.

Where do Plugins go

This is essentially the place we’re allowed to add things in the block editor. There’s not very many places you get to add your own UI.

This is one of the few ones you can see Yoast does it here. But I wonder if it’s even that discoverable because Yoast still loads this like footer meta box on all your pages and stuff. So this is, and this is like old, you know, PHP meta box backwards compatibility, so I’m not sure

if they’re seeing people spend a lot of attention up here. I think it gets a little confusing because, I mean, you have a view, and then you have view page, already confusing. And then if you click on view, you again have view page down here, but it’s not view, it’s preview. And then the update button, just kind of in the middle.

So like there’s some stuff over here, some over there. These all tend to open contextual menus, except for this one, which opens like a dropdown settings kind of thing. And then it’s like, even once you get to here, you know, you click through here and then even once you get to there, then there’s like more tabs.

So all of this kind of, I think it’s a little confusing, but what I’m trying to accomplish is the idea that

Our UI Goals

Let’s say we have our list. You’re right here. You can jump over to manage all your styles, or my goal eventually is you can click create and you’ll be able to add a new block style and it’ll get applied.

And then it’ll shoot you back over to the plugin and you’ll be able to edit it while looking at your content. And so right now this is kind of working. You can actually make your CSS changes here. I put in a CodeMirror editor for you. And so you can kind of do changes, apply them here.

And the goal would be that, you know, you can see what you’re doing while you’re working on it. And that jump from the styles manager back to the individual block sidebar would feel pretty seamless, but because they’re two completely separate components, we’re actually loading two completely different things.

Next Steps

So overall it’s kind of working. I still need to get some stuff set up. One of the hardest things right now that I’ll be working on next is the concept of using unique IDs. Because right now I’m trying to keep the CSS saved like this, this is the actual CSS file that gets saved in a folder on your site when you use it.

So turn off my plugin, where’s your CSS. It’s right here. It’s saved. And it only gets registered you know, if it’s being used on that page, you can see all the different block styles I’ve been messing around with and you can see here, and I’ve been doing some testing with WordPress naming.

So in the past I was using custom post types and stuff. And if I had two things with the same name, two posts, the same name, WordPress would automatically handle that for you. So I’ve been testing ways to make sure that it increments numbers in case you use the same name and takes care of all of that under the hood for you.

And it’s working really well, but then that means, you know, I need some ways to kind of pass some of the data back and forth and make sure I, if I change the name, if I understand that it was tied in correctly anyway.

But beyond that the actual process of writing the custom CSS and rendering it on the front end is working.

I’m looking forward to updating you with maybe a good beta release by the next time I record one of these videos and I can put out there for everybody to poke holes in and give me feedback on. But if you have any questions about how some of this was accomplished, let me know and I can dig into it in the next video.