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

( () => {
  const wrap = (content) => `<b><i><font color="deeppink">${ content }</font></i></b>`;
  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.

[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:

inline-block-demo.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: #10235 (comment)

[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 #10235 (comment) and #10235 (comment) 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.

[pbiron]

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.

to be honest...the labels applied to most issues in this repo make absolutely no sense to me ;-) So, I don't really know how to answer your question

Note: I edited my previous comment to make it more clear what I meant (I hit the comment button without proofreading what I'd wrote)

[difawa]

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:

inline-block-demo.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.

Hello sir, can you make the longer demo video? I just installed the plugin and I didn't find any difference on the editor page. I mean I didn't find the block to follow your demo. How to create the block like in your demo?

[stokesman]

If you didn’t find the Lineup block in the editor then I'll guess that you didn’t build the plugin. If you aren’t familiar with node/npm a here’s a good place to start with regards to its use in block development. If you have it installed then all it should take is executing npm i and then npm run build from the plugin directory in your terminal. Let me know if I guessed wrong and something else is the issue.

[mtias]

It seems the remaining use cases described here are better captured by the inline shortcodes proposal in the temporarily named "bits" — #39831

It's better to direct feedback there as it's still in proposal stage. There's no other way to define inline dynamic content today.