How to create a custom inline-block?

[mahdiyazdani]

Is there any guide on creating custom inline blocks?

[oritheorca]

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.

[oandregal]

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

[oandregal]

@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!

[stokesman]

In case anyone is still looking for a way to make formats with children, here's what I found that worked. First, use create which accepts an object with an html property as a string (looks like the element property, taking a DOM element, could be used instead but I haven't tried it). Then pass the result as the second parameter to insert.

An example that's testable by running it in the console when on an editor screen

```javascript ( () => { const wrap = (content) => `${ content }`; const edit = ({value, onChange}) => { return wp.element.createElement( wp.blockEditor.RichTextToolbarButton, { icon: 'editor-code', title: 'Nested demo', onClick: function() { const text = wp.richText.getTextContent( value ) .substring(value.start, value.end); onChange( wp.richText.insert( value, wp.richText.create({ html: wrap( text ) }), )); }, } ) }; wp.richText.registerFormatType( 'format-demo/nested', { title: 'Format with children demo', tagName: 'b', className: null, edit, } ); } )(); ```

[paaljoachim]

Can we get an update on where this issue is currently? Thank you!

[x029a]

Can we get an update on where this issue is currently? Thank you!

Same. I'm looking for a mechanism that allows for simple in-line block insertion.

[mkaz]

@BenBroide @x029a Can you explain with specifics what you mean by inline block and where you want to insert it? Do you have an example of what exact markup you are trying to create?

My understanding of an inline block is something like a span or img tag. This is covered by the format api, that example shows how to create a toolbar button that when clicked adds <samp> tag within a rich text element.

[strarsis]

This appears to be quite similar to the classic editor TinyMCE custom styles API: https://codex.wordpress.org/TinyMCE_Custom_Styles

[pbiron]

Here's a typical use case I have (for which I have used shortcodes for years), for which I do not think the format API is suitable, but I would love to learn that I'm wrong on that.

I have a CPT, say committee, has a meta key/value for 'contact' (i.e., the person(s) to be contacted for that committee's business. The value of that meta is one or more WP user IDs. The WP users have an email address and a phone number.

I currently have [committee_contact_email committee='marketing'] which generates something like <a href='mailto:fred@example.com'>Fred Flintstone</a> and [committee_contact_phone committee='recreation'] which generates <a href='tel:123456789'>Betty Rubble</a>.

What I imagine the UI for an inline block to replace those 2 shortcodes is block settings panel with a dropdown that lists the committees. Once a committee is selected, a dropdown of users appears.

Could the above be handled by the format API, and if so, how?

[strarsis]

+1, I really like this! Having one snippet that can be globally used would be very useful, e.g. for a telephone number link.

[mkaz]

@pbiron You could probably create a stand alone block and allow for additional text to be added around it if needed. This might make it more flexible for widgets, or wherever you want it to be inserted. For example, create a Committee-Contact block that would display the dropdowns (maybe in the placeholder state) and then insert the correct link when selected and could include any additional markup (text, icons, etc..) around it.

Plus as a stand-alone block you can set it up for server-side rendering which allows you to use PHP to query whatever data you like, and you could change the data and the rendering would update everywhere it is used.

This is quite similar to how a shortcode would work but gives a much more intuitive interface for the users inserting it, they would be able to see the available committees and/or people to choose from.

[pbiron]

You could probably create a stand alone block and allow for additional text to be added around it if needed.

I'm not sure what you mean by that.

The point of these shortcodes (and hopefully their "inline block" equivalents) is that they can be used in the middle of a paragraph of text. For example,

The Scholarship committee meets the second Tuesday of every month. If you have agenda items to add to a meeting, please email [committee_contact_email committee='scholarships'] or call [committee_contact_phone committee='scholarships'] at least 1 week before the meeting at which you would like the items discussed.

[stokesman]

Perhaps the way for Gutenberg to support something near to this concept with the least effort would be by extending the Group block to support inline layout (similar to flex support added in #33359). Though, it would be weird that the only core block for text would be Paragraph.

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[realstephenzhao]

This is a basic functionality. We need a method to insert inline elements.

[mkaz]

@realstephenzhao This functionality exists, see the Format API as I mentioned in my comment above.

[realstephenzhao]

@realstephenzhao This functionality exists, see the Format API as I mentioned in my comment above.

404. That page can’t be found.

[Gwillison415]

@mkaz 404'd on me too -That page can’t be found.

[pbiron]

@realstephenzhao and @Gwillison415 I think the URL for that section of the handbook has changed. Try https://developer.wordpress.org/block-editor/how-to-guides/format-api/#step-3-apply-a-format-when-clicked

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[BenBroide]

@realstephenzhao This functionality exists, see the Format API as I mentioned in my comment above.

Can you please add example how the format api allow to add inline blocks? I'm not sure you follow what is this issue about. The format api does not add the ability to add blocks inline.

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[cbirdsong]

Why is this bot active on this issue but not any others in this repo? Can it be removed?

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[paaljoachim]

@mkaz Perhaps you could take a look at the bot actions again?

[github-actions[bot]]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[talldan]

The bot is only active on issues that have Needs More Info / Stale labels.

A 'Needs more info' issue will have the 'Stale' label applied after a couple of weeks of inactivity, and a 'Stale' issue will be closed after another two weeks of inactivity. If a new comment is left, the countdown for either of those things is reset. The idea is that someone with triage powers removes the label if there's enough info.

[skorasaurus]

I removed the status labels over the weekend as I was wondering about how to implement this myself and thought the examples given by @pbiron were sufficient as use cases;

Another example/use case is that I have a custom post type with some custom fields and custom taxonomies; I want to be able to display these posts and be able to display the fields within a loop.

In pure PHP, I'd make a new WP_query object, filter those custom posts based on specified taxonomy, fetch them, and then iterate over each post like follows:

<h2> Newly Published (The Taxonomy Term Name) <h2>
<ul> <li>
<a href=" <? php(get_field(custom_field_url_un));>" Read the <? php( the_title() ;>" </li>
</ul>

to result in:

<h2> Newly Published Microfiche </h2> 
<ul> <li> <a href="path-to-the-gladstone-report-uploaded-elsewhere.com"> The Gladstone Urban Renewal Project Report 8-A </a> </li> 
<li> <a href="path-to-the-gv-report-uploaded-elsewhere.com"> The Garden Valley Report 2-A </a> </li> 
</ul>

[markparnell]

We've run into this same problem today, and as others have said the Format API doesn't meet the need here. The difference is that we don't want to wrap a custom element around selected text - we want to insert a standalone piece of dynamic (inline) content. A simple example would be to display the user's IP address:

<p>Your IP address is 127.0.0.1</p>

This is simple with shortcodes as others have explained:

<p>Your IP address is [ip_address]</p>

However there doesn't seem to be any way to do this with blocks. If the above is possible with the Format API then the documentation doesn't cover it and a clear example is needed.

[cbirdsong]

Adding another use case – I wanted to create a easy way for editors to insert <wbr> or   into text to manage line breaks. You can add both by editing a block’s HTML without the block becoming invalid, but that’s a big lift for some editors, and it’s easy to forget where you’ve added them as there’s nothing to indicate those elements are present while editing.

[stokesman]

A simple example would be to display the user's IP address:

I wanted to create a easy way for editors to insert <wbr> or   into text to manage line breaks

I've blockified both in an example plugin https://github.com/stokesman/lineup/ and here's a quick demo:

https://user-images.githubusercontent.com/9000376/172286287-d833acf4-3ebd-4e7e-b39c-bec33ebab535.mp4

Since I've had this little hands-on with creating some inline blocks, I'll share my perspective. Creating one is basically the same as creating any other block. The inconvenience is—given what seems the typical use case of surrounding the block with text—you probably can't make do with that block on its own. You're likely to need two more blocks to accompany it—a container and an inline text block. The plugin includes those and there's a bit more detail in the readme.

If anyone tries this out, I think it will likely help them to understand that it would be quite a challenge to allow inner blocks in text-based blocks like Paragraph without hindering the ergonomics for the common use case of simply writing some text with rich formatting.

[cbirdsong]

The likely obstacle is most core blocks where one might want to place inline inner blocks (e.g. Paragraphs, Headings, Buttons) do not take them. So you end up needing to roll your own version of core blocks to accommodate inner blocks.

This is really the problem. It would be super confusing to tell editors "oh, to insert this special character/piece of data/whatever, you need to switch to this other block". Even discounting that, the other block wouldn't have all the settings, features and block styles of the equivalent native block. It's not really a workable solution.

[stokesman]

It's not really a workable solution.

For the particular use case you brought up I'm pretty confident a more workable solution could be produced with the Format API. It's the dynamic stuff that’s in need of some of the power of blocks. However, I think the big hurdle to allowing blocks inside of blocks like Paragraph is that it would complicate their common usage.

It seems like some ideas being discussed in #39831 might be more likely to become reality.

[mburridge]

@mahdiyazdani is there still a need for this? There's this page in the handbook on the Format API.

I'm closing this issue, but if there's still a requirement feel free to re-open it, or alternatively start a discussion in the Developer Blog Content repo to have a guide post written there.

[cbirdsong]

The format API does not provide a way to create inline elements that do not wrap existing text content, as previously discussed in this thread: https://github.com/WordPress/gutenberg/issues/10235#issuecomment-492710872

[pbiron]

The format API does not provide a way to create inline elements that do not wrap existing text content, as previously discussed in this thread: #10235 (comment)

Agreed. @mburridge please re-open this ticket.

See https://github.com/WordPress/gutenberg/issues/10235#issuecomment-896108469 and https://github.com/WordPress/gutenberg/issues/10235#issuecomment-896211424 for my use case, which the Format API does not cover.

[mburridge]

@pbiron I've re-opened it. Can you clarify what is being worked on here, is this functionality that is being added to the editor or does a guide need to be created, as per the original request?

I'm working on updating the handbook and am going through issues marked with [Type] Developer Documentation and either trying to action them or close them, or at least move them forward.

Is there a documentation requirement on this at present?

[pbiron]

The original question in this issue was "Is there any guide on creating custom inline blocks?"

It then became very clear that the answer is No, because it is not possible to create custom inline blocks.

So, as far as I'm concerned, this issue has morphed into "Please add the ability to create custom inline blocks."

[mburridge]

In that case would it be appropriate to remove the [Type] Developer Documentation label? Then it won't show up on the Docs team's radar.