Support » Developing with WordPress » Displaying dynamic Gutenberg block properly in editor without making it editable

  • I am trying to create a dynamic Gutenberg block that displays an option from the database (via get_option). The option’s content is input by the user via a textarea. To display on the front end, the new lines in the content are converted to BR tags via the nl2br() function.

    I want to display the content properly in the editor as well. The only way I’ve found to do this is to use RichText in my block. However, this also allows the content to be edited. I don’t save the actual content in the database, so editing it doesn’t affect the front end display, but I’m afraid the ability to edit the content may be confusing for the user inserting the block. If I don’t use RichText, the BR tags display along with the content and I’d rather not have that.

    JavaScript is not my strong suit. Is there a way to properly display the content in the editor without also making it editable? In other words, is there an alternative to RichText or a way to make RichText content not editable?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi @jjbte, hopefully I’m understanding the problem correctly. I think some of the core dynamic blocks have a similar problem and a solution.

    The archives block seems like it might be similar use case. It uses the ServerSideRender component to display the archives in the editor. However clicking on one of the archives there would cause the user to be navigated out of the editor and to that archive, which is undesirable.

    The solution there was to use the Disabled component (wp.components.Disabled) to wrap ServerSideRender, which makes it so that the output from the server can’t be interacted with in the editor:
    https://github.com/WordPress/gutenberg/blob/5494bc57fc77de6cada4295823a3fb047e168f89/packages/block-library/src/archives/edit.js#L32-L34

    jjbte

    (@jjbte)

    Thank you for this information, @talldanwp. I was thinking some of the core blocks might be good to look at since they render nicely in the block editor without being editable. I was having trouble making sense of the associated files, though. I will take a closer look at the example you linked to and see if I can figure it out.

    Thanks again! 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Displaying dynamic Gutenberg block properly in editor without making it editable’ is closed to new replies.