Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to create a custom inline-block? #10235

Open
mahdiyazdani opened this issue Sep 28, 2018 · 14 comments
Open

How to create a custom inline-block? #10235

mahdiyazdani opened this issue Sep 28, 2018 · 14 comments

Comments

@mahdiyazdani
Copy link
Contributor

@mahdiyazdani mahdiyazdani commented Sep 28, 2018

Is there any guide on creating custom inline blocks?

@gckwan

This comment has been minimized.

Copy link

@gckwan gckwan commented Sep 30, 2018

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).

@ajitbohra ajitbohra added this to the Documentation & Handbook milestone Oct 4, 2018
@albedo0

This comment has been minimized.

Copy link

@albedo0 albedo0 commented Nov 5, 2018

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

@baba43

This comment has been minimized.

Copy link

@baba43 baba43 commented Nov 23, 2018

I have the same question.

@ronalfy

This comment has been minimized.

@dsifford

This comment has been minimized.

Copy link
Contributor

@dsifford dsifford commented Nov 24, 2018

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

This comment has been minimized.

Copy link

@ronalfy ronalfy commented Nov 24, 2018

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

@dsifford

This comment has been minimized.

Copy link
Contributor

@dsifford dsifford commented Nov 24, 2018

No prob.. Great example use-case nevertheless!

@jfbon

This comment has been minimized.

Copy link

@jfbon jfbon commented Feb 5, 2019

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

This comment has been minimized.

Copy link

@BenBroide BenBroide commented Mar 11, 2019

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?

@youknowriad youknowriad removed this from the Documentation & Handbook milestone Mar 18, 2019
@strarsis

This comment has been minimized.

Copy link

@strarsis strarsis commented Apr 2, 2019

@nosolosw

This comment has been minimized.

Copy link
Member

@nosolosw nosolosw commented May 15, 2019

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

@nosolosw nosolosw closed this May 15, 2019
@BenBroide

This comment has been minimized.

Copy link

@BenBroide BenBroide commented May 15, 2019

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

@nosolosw

This comment has been minimized.

Copy link
Member

@nosolosw nosolosw commented May 15, 2019

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

@nosolosw nosolosw reopened this May 15, 2019
@phpbits

This comment has been minimized.

Copy link

@phpbits phpbits commented Sep 17, 2019

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.