Hi there, I would love to know a little more about what you are trying to do. There is already this: https://github.com/WordPress/gutenberg/blob/master/blocks/library/html/index.js. If you could let me know a bit more I can hopefully help.
Hi there!
> how do I make the HTML block??
If what you want is adding a rich HTML input (like the paragraph block for example), you’ll have to use the Editable component. We have some documentation showing how to use this component.
– http://gutenberg-devdoc.surge.sh/blocks/introducing-attributes-and-editable-fields/
It might be a good idea to look at examples in our built-in blocks. See here for instance https://github.com/WordPress/gutenberg/blob/master/blocks/library/image/block.js#L244-L252
Hi guys,
Thanks for your replies.
Tammie:
I would love to create a custom block, just like “Custom HTML” and “Classic Text”.
Right now, I’m writing all the blocks in ES5 – But most of the guides are for EXNext, and I can’t make that work 🙁
Riad:
As mentioned above, I need to create a custom block that can create <li> IN the text, like the “Classic text” editor – but I can’t make it work with ES5. Furthermore, I need a block like the “Custom code”. I’m creating some blocks that contain “Title”, “Teaser” and “Content” – and for the “content” part I need the “Classic Text”.
Does it make any sense?
PS. I would love a guide on how to start with ESNext and block-writing.
Maybe I’m just too tired – but I can’t make it work…
Best regards
AK
-
This reply was modified 8 years, 8 months ago by
kuckovic.
Hey, thanks for trying to create custom blocks 👍
> But most of the guides are for EXNext, and I can’t make that work
While the gutenberg code is written in ES5, we try to provide documentation in both ESNext and ES5.
In the tutorial here, you can switch between ES5 and ESnext in all the code examples.
We also have an examples repository with examples in both https://github.com/WordPress/gutenberg-examples
> As mentioned above, I need to create a custom block that can create <li> IN the text, like the “Classic text” editor
Unfortunately, the “classic text” is not meant to be reusable. We encourage the use of the Editable component for any block needed html content like the “content” part of your block.
That said, if you want <li>, your options are:
– Use multiple Editable components, one for each <li> (maybe with a button to add rows)
– Use your own custom editor (you can look for any React Wysiwyg component, it should just work)
Should we make the “Classic text” editor reusable? I feel like we’re trying to avoid this, but we may reconsider if we see a lot of requests for it.
Does this answer your questions?
Hi Riad,
Thanks for your quick reply.
> We also have an examples repository with examples in both https://github.com/WordPress/gutenberg-examples
Yes, I know. I’ve been looking through these, and I made 8-10 custom blocks based on these examples. But it’s really simple ones, like 2 pictures and 2 titles – thats not a problem for me to make.
> Unfortunately, the “classic text” is not meant to be reusable.
Okay, makes sense of course. I might take a look into some React WYSIWYG editors for my blocks. A paragraph block simply won’t cut it. I need to make a block, where the user can edit the text – and add some lists aswell in between, when it’s needed. Furthermore, I need them to make links in the text aswell.
> Should we make the “Classic text” editor reusable?
I get the idea of not wanting to reuse something thats “on the way out”. But maybe you should implement a toolbar with some more options, like adding lists and maybe adding some code (just a thought).
Furthermore:
Would it be possible, to take the attributes from the blocks, and implement them in the REST API? Would be SO USEFUL when you’re creating websites using AngularJS as frontend 🙂 Thats why I’m so specific in my needs 😀
Best regards
Aris Kuckovic
> Would it be possible, to take the attributes from the blocks, and implement them in the REST API?
This is something we’re considering, we have an open PR for this, but we’re not there yet because this requires server-side parsing which we don’t have yet.
Related material:
– https://github.com/WordPress/gutenberg/pull/2649
– https://github.com/WordPress/gutenberg/issues/2751
Hi Riad,
I’m glad you’re atleast looking into it 🙂
It would open up so many possibilities 😉
I will mark this as solved for now.
Best regards
AK
