How do I add new blocks to the editor?

notknownperson

Hello, I'm trying using Automad as the central content management system for a document editor platform I'm working on. I've got most of the changes I need integrated, but I need quite a few custom blocks for the editor. []

Here's the dumb part: I can't figure out the structure of Automad enough to know how to add them. I have already implemented everything in Editor.js, but I have zero clue where to put it in Automad. Here's the dumber part: I don't know PHP. At all. So even if I figure out the PHP files I'm supposed to have, I don't know how to reimplement things. And the dumbest part: I don't know enough of what I don't know to know where to look, or how to learn what I need to know.

Wait a minute, I can search for the JS files. But if I just change things here, or inject my version of Editor.js, I might break things. I don't want to break things. I also value client security, and want to understand what I'm doing before I push hacks up to a production server.

TL;DR: How do I PROPERLY add new blocks and Editor.js plugins in Automad, without breaking things? And if I make some helpful blocks, is there interest upstream? Can I make them packages, or do I have to edit the code manually?

Thanks!

mad

notknownperson Hi there! At the moment there is no easy way to add custom blocks. What kind of blocks would you like to add. It is possible to add custom templates for the filelist and pagelist blocks. And of course custom snippets.

notknownperson

I have about 10 different custom blocks I'm using in Editor.js. They're basically duplicating existing functionality with some extra features related to the project I'm working on. For example, one of them is a button, but with functionality to add data tags that gets passed to my custom js on runtime. One of them is text that is followed by either a switch button, a text field, or a solid line depending on where the output is used.

Maybe I'm trying too hard to use Automad instead of building my own code from scratch. But I really like the benefits of PHP for backend work, my current backend requires Node.js which is outside the scope of simple hosting. Automad does everything I want, except for missing my custom blocks and UX improvements.

I'm not scared of learning the hard way to add blocks, I just don't know where to start, and I'm scared of breaking things. Which I guess isn't a problem if I'm breaking things on a dev platform. I'm gonna get my hands dirty and figure this out one way or another, I'm stubborn like that. 😁

Thanks!

mad

notknownperson Hi, I guess the issue with modifying the block editor is more that it will break on updates. Every future update will revert your changes. Aside from that a block consists of two parts — a JS class for the UI and a PHP counterpart that handles rendering on the server side. It is actually quite straightforward and you can get started by extending one of the existing blocks there.

notknownperson

mad Thanks, that's helpful. I think I've figured out what's what for PHP files. I'm already planning on integrating changes somewhat manually on this project, and since it's not web-facing I'm not as concerned about rapid updates.