WP Render Blocks Documentation

Quick Start Guide

Get up and running with WP Render Blocks in minutes. This guide will walk you through creating your account, installing the WordPress plugin, and rendering your first component.

1. Sign up for a free account at WP Render Blocks
2. Create an organization (or join an existing one)
3. Install the WordPress plugin from your dashboard
4. Connect your WordPress site using the API key
5. Upload your first React component
6. Add the component to a page using the Gutenberg block

Installing the WordPress Plugin

The WP Render Blocks plugin connects your WordPress site to our rendering service.

API Keys & Authentication

Your WordPress site connects to WP Render Blocks using a per-site API key. The plugin stores the API key in WordPress settings and sends it in request headers (not in the URL).

1. Create a Site in your dashboard (Dashboard → Sites)
2. Copy the API key (Sites → select site → API Keys)
3. In WordPress, open Settings → WP Render Blocks
4. Paste your API URL and API key, then click Test Connection

Creating Your First Component

Components can be created using any React tooling. Here's how to prepare a component for WP Render Blocks:

// MyComponent.jsx
import React from 'react';

export default function MyComponent({ title, description }) {
  return (
    <div className="my-component">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

SSR vs CSR: Which Should I Use?

WP Render Blocks supports both server-side rendering (SSR) and client-side rendering (CSR). The right choice depends on whether the page needs SEO-friendly HTML in the page source.

• Use SSR for public, indexable pages where SEO matters. SSR delivers crawlable HTML in your page source.
• Use CSR for logged-in areas, dashboards, internal tools, and pages where SEO isn't required.
• SEO note: CSR typically has lower SEO value than SSR because the initial HTML is minimal and content is generated in the browser.

SSR Compatibility

For components to render correctly on the server, they must be SSR-compatible. The platform automatically detects common issues and provides guidance on how to fix them.

Component Structure

WP Render Blocks supports standard React components with a few requirements:

• Default export of a React component
• Props defined as function parameters
• JSX return statement
• SSR-safe render: avoid browser-only APIs during render (see SSR Compatibility section below)
• Hooks are fine - effects run on the client after hydration
• CSS is bundled into a versioned style.css. Tailwind utility classes are supported in embeds via a Tailwind CDN safety net.
• Production dependencies are validated for security during upload

Props and Configuration

Components receive props from the WordPress editor. Define your props schema in the component configuration:

Best Practices

• Keep components pure: Avoid side effects and external API calls during render
• Use semantic HTML: Helps with SEO and accessibility
• Optimize images: Use optimized image formats and proper sizing
• Test locally first: Test components in a React environment before uploading
• Version control: Use meaningful version numbers for easy rollback