Server Side Rendering and Disabled component

There are many cases where the block rendering has to be done on the server-side and only displayed in the editor. For that purpose, the block editor has a ServerSideRender component that can pass block attributes to the server-side rendering function and display rendered HTML as is.

Before I started the Blocks tutorials series, I created a standalone tutorial about converting shortcodes to blocks, where we can create a block that uses existing shortcodes rendering code and use it to render the same content as a block. That tutorial in its core has the use of the ServerSideRender component. I suggest you check out that tutorial and get more information on how the Server Side Rendering works, and how to use this component.

The way ServerSideRender works, is to get whatever HTML is rendered on the server side, and show it. That has one major downside: if the rendered content has links or buttons, they will be clickable, and you can click by mistake, and the browser will navigate off the current page. That can be a big issue, especially if you build complex layout, and you need to make changes often, move elements, you will more then likely, click some links inside the server rendered content.

When I created the tutorial for the shortcodes conversion to blocks, I didn’t know how to solve that problem, and it took me awhile to find how the make the server side content passive, and basically, disable the interaction with the rendered content. Only few months after that tutorial, I have seen an example where a new component is used to wrap the ServerSideRender component, and that new component is called: Disabled.

So, if you had ServerSiderRender used like this:

<ServerSideRender
  block='shortcodes-to-blocks/press-notice'
  attributes={attributes}
/>

you will need to change it to this:

<Disabled>
  <ServerSideRender
    block='shortcodes-to-blocks/press-notice'
    attributes={attributes}
  />
</Disabled>

That’s it, there are no extra settings, or anything, just wrap whatever you want in Disabled, and the interactivity of that wrapped element will be disabled. This work with any other component, and you can use it anywhere, but it is really useful when used with ServerSideRender.

Let me know if you ever used these components, and if you have some useful tips to share.