Skip to content

Modification of the core <ServerSideRender /> component for a better rendering experience.

Notifications You must be signed in to change notification settings

dgwyer/server-side-render-x

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 

Repository files navigation

New Server Side Render Component

The core WordPress component to render dynamic blocks (<ServerSideRender />) is not optimized and currently results in a poor user experience as demonstrated below (for the Flexible FAQs block).


Notice how the whole block content area is replaced with a spinner whenever a block attribute is updated.

To address this issue, a new <ServerSideRenderX /> component has been developed as a direct replacement for <ServerSideRender />. This new component is similar to the previous one except it uses the previously rendered HTML as the placeholder. This results in a much smoother transition between render states.


A spinner is also included along with the previous HTML as an indicator that the content is being updated.

Usage

Add the server-side-render-x.js file to the relevant place in your plugin (e.g. /src/block/components) and include it in your code as you would for any other component.

Then implement the new component in exactly the same way as for <ServerSideRender />.

<ServerSideRenderX
  block="my-plugin/my-block"
  attributes={attributes}
/>

There's also an additional (optional) prop available to specify the location for the spinner:

<ServerSideRenderX
  block="my-plugin/my-block"
  attributes={attributes}
  spinnerLocation={{right: 0, top: 10, unit: 'px'}}
/>

The above value for spinnerLocation is the default value used internally, so you can leave this blank unless you need to specifically change it.

More Details

For more details please see the full blog post.

About

Modification of the core <ServerSideRender /> component for a better rendering experience.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published