Gutenberg: How to create a custom inline-block?

[mahdiyazdani]

Is there any guide on creating custom inline blocks?

[gckwan]

I have the same question. I'd like to create an inline image that works with an existing lightbox plugin I have (basically an <img> wrapped by an <a> tag).

[albedo0]

Does anybody find help about this question ?
I would like to create inline block to had span element with custom class...

[baba43]

I have the same question.

[ronalfy]

See https://github.com/iseulde/advanced-rich-text-tools for an example. You can also check out my WIP here: https://github.com/ronalfy/metronet-tag-manager/blob/gutenberg/src/js/gutenberg/main.js

[dsifford]

FYI @ronalfy : You shouldn't be setting state directly outside of the constructor.

https://github.com/ronalfy/metronet-tag-manager/blob/gutenberg/src/js/gutenberg/main.js#L180

[ronalfy]

@dsifford thanks for the heads up. I overlooked that.

[dsifford]

No prob.. Great example use-case nevertheless!

[jfbon]

This seems to be how the Inline Image is created now https://github.com/WordPress/gutenberg/blob/master/packages/format-library/src/image/index.js

Specifically I can see how they have used insertObject to add an img tag. It's not documented anywhere though.

What I am puzzled about is how to use insertObject with html inside (child tags). Not sure if that is possible.

[BenBroide]

Is there is a solution for this?
Some plugins use to have buttons to add shortcodes inside editor. How are these plugins handle in gutenberg inserting custom inline block with a shortcode?

[strarsis]

I am also using Gutenberg formats (https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/format-api/3-apply-format/) for inline/formatting stuff.

[nosolosw]

I believe this is covered by the Format API tutorial shared above.

[BenBroide]

@nosolosw format API does not provide a way to create inline blocks inside a block. Not sure why this issue is closes

[nosolosw]

@BenBroide you're right - was confused what this issue was about.

[phpbits]

What I am puzzled about is how to use insertObject with html inside (child tags). Not sure if that is possible.

Has anyone tried implementing child tags yet? I can't seem to find a way to do it. Thanks!