Core Blocks

WordPress core blocks are blocks like paragraphs, headings, lists, embeds, and tables. eddev can render them as HTML, tag them for editor rules, or group them into synthetic blocks before React receives them.

Keep core block behavior simple. Most sites only need to tag a small set of rich-text blocks and optionally provide React wrappers for their rendered HTML.

Rendering Core Blocks

By default, WordPress can render core blocks into innerHTML. If a site needs custom React wrappers, add mappings in blocks/_core.tsx.

import { ContentBlock } from "eddev/blocks"

const HTMLParagraph = (props: ContentBlock) => {
  if (!props.innerHTML) return null
  return <div className="block-p" dangerouslySetInnerHTML={{ __html: props.innerHTML }} />
}

const HTMLList = (props: ContentBlock) => {
  if (!props.innerHTML) return null
  return <div className="block-list" dangerouslySetInnerHTML={{ __html: props.innerHTML }} />
}

export default {
  "core/paragraph": HTMLParagraph,
  "core/list": HTMLList,
}

Use this when the frontend needs consistent wrappers, layout classes, or design-system typography around WordPress-rendered HTML.

Tagging Core Blocks

Block tags can be used in rootBlocks and InnerBlocks allowedBlocks. Your own blocks get tags from export const meta; core blocks get tags from PHP.

<?php

ED()->tagCoreBlocks("#inline", [
  "core/paragraph",
  "core/list",
  "core/heading",
]);

After that, React code can allow all tagged core blocks with one entry:

<InnerBlocks allowedBlocks={["#inline"]} />

Core blocks can have more than one tag, so it is fine to define broad tags like #inline and narrower layout tags for specific templates.

Grouping Core Blocks

Some sites group consecutive core blocks into a synthetic block before React receives them.

<?php

ED()->groupCoreBlocks("core/rich-text", [
  "core/heading",
  "core/paragraph",
  "core/list",
  "core/table",
]);

This converts adjacent matching core blocks into one block with blockName: "core/rich-text" and combined innerHTML. It is useful when the frontend wants one rich-text wrapper instead of separate heading, paragraph, list, and table blocks.

If you group core blocks, add a matching _core.tsx renderer:

import { ContentBlock } from "eddev/blocks"

export default {
  "core/rich-text": (props: ContentBlock) => {
    if (!props.innerHTML) return null
    return <div className="wysiwyg" dangerouslySetInnerHTML={{ __html: props.innerHTML }} />
  },
}

Only group core blocks when the layout benefits from it. If a site needs individual block-level spacing or wrappers, keep the blocks separate.