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.

[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:[email protected]'>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