Server-side rendering a block for the editor preview

A dynamic block renders in PHP on the front end, and the editor needs to show something — reimplementing the render in JavaScript is how the two drift apart.

import ServerSideRender from '@wordpress/server-side-render';

edit({ attributes }) {
  return (
    <ServerSideRender
      block="turkerdev/recent"
      attributes={attributes}
      EmptyResponsePlaceholder={() => <p>No posts yet.</p>}
    />
  );
}

It posts the attributes to a REST endpoint that runs the block’s render_callback and returns the markup, so there is exactly one implementation. The cost is a request per attribute change, which makes editing a block with a text field feel sluggish — debouncing helps and the component does not do it for you. For anything whose preview is cheap to approximate in JavaScript, the duplicated render is faster and the drift is the price.