Block

Individual unit of content within a block editor.

html

<div class="block block--paragraph block--active" data-type="paragraph" style="border-radius:8px;--accent:#D9C8F0;">
  
  <span class="block__handle" aria-hidden="true" title="Drag to reorder">
    <svg viewBox="0 0 10 16" width="10" height="16"><circle cx="2" cy="2" r="1.3" fill="currentColor"/><circle cx="8" cy="2" r="1.3" fill="currentColor"/><circle cx="2" cy="8" r="1.3" fill="currentColor"/><circle cx="8" cy="8" r="1.3" fill="currentColor"/><circle cx="2" cy="14" r="1.3" fill="currentColor"/><circle cx="8" cy="14" r="1.3" fill="currentColor"/></svg>
  </span>
  
  <span class="block__icon" aria-hidden="true">
    <svg class="block__icon-paragraph" viewBox="0 0 20 20" width="16" height="16"><path d="M3 4h14M3 9h14M3 14h9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
    <svg class="block__icon-heading" viewBox="0 0 20 20" width="16" height="16"><path d="M4 4v12M14 4v12M4 10h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
    <svg class="block__icon-image" viewBox="0 0 20 20" width="16" height="16"><rect x="3" y="4" width="14" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="7.5" cy="8.5" r="1.3" fill="currentColor"/><path d="M4 14l4-4 3 3 3-4 3 5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
  </span>
  <p class="block__content">Type &#39;/&#39; to choose a block, or start writing plain text.</p>
</div>
<style>
.block { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid transparent; }
.block--active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.block__handle { color: #24143066; cursor: grab; padding-top: 3px; }
.block__icon { color: var(--accent); padding-top: 2px; }
.block__icon svg { display: none; }
.block--paragraph .block__icon-paragraph, .block--heading .block__icon-heading, .block--image .block__icon-image { display: block; }
.block__content { margin: 0; flex: 1; }
.block--heading .block__content { font-size: 20px; font-weight: 700; }
.block--image .block__content { font-style: italic; color: #24143099; }
</style>

tailwind

<div data-type="paragraph" style="border-radius:8px;--accent:#D9C8F0;" class="block-tw block-tw--paragraph block-tw--active relative flex items-start gap-2.5 px-3.5 py-2.5 font-sans text-[15px] text-[#241430] bg-[#FAF7F2] border-[1.5px] border-transparent">
  
  <span class="text-[#24143066] pt-0.5" aria-hidden="true" title="Drag to reorder">
    <svg viewBox="0 0 10 16" width="10" height="16"><circle cx="2" cy="2" r="1.3" fill="currentColor"/><circle cx="8" cy="2" r="1.3" fill="currentColor"/><circle cx="2" cy="8" r="1.3" fill="currentColor"/><circle cx="8" cy="8" r="1.3" fill="currentColor"/><circle cx="2" cy="14" r="1.3" fill="currentColor"/><circle cx="8" cy="14" r="1.3" fill="currentColor"/></svg>
  </span>
  
  <span class="block-tw__icon pt-0.5" style="color:#D9C8F0" aria-hidden="true">
    <svg class="block-tw__icon-paragraph" viewBox="0 0 20 20" width="16" height="16"><path d="M3 4h14M3 9h14M3 14h9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
    <svg class="block-tw__icon-heading" viewBox="0 0 20 20" width="16" height="16"><path d="M4 4v12M14 4v12M4 10h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
    <svg class="block-tw__icon-image" viewBox="0 0 20 20" width="16" height="16"><rect x="3" y="4" width="14" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="7.5" cy="8.5" r="1.3" fill="currentColor"/><path d="M4 14l4-4 3 3 3-4 3 5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
  </span>
  <p class="flex-1 m-0">Type &#39;/&#39; to choose a block, or start writing plain text.</p>
</div>
<style>
.block-tw--active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent) !important; }
.block-tw__icon svg { display: none; }
.block-tw--paragraph .block-tw__icon-paragraph, .block-tw--heading .block-tw__icon-heading, .block-tw--image .block-tw__icon-image { display: block; }
.block-tw--heading p { font-size: 20px; font-weight: 700; }
.block-tw--image p { font-style: italic; color: #24143099; }
</style>

react

export function Block({
  blockType = "paragraph",
  content = "Type '/' to choose a block, or start writing plain text.",
  accent = "#D9C8F0",
  active = true,
  radius = 8,
}) {
  const icons = {
    paragraph: <path d="M3 4h14M3 9h14M3 14h9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />,
    heading: <path d="M4 4v12M14 4v12M4 10h10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />,
    image: <><rect x="3" y="4" width="14" height="12" rx="2" fill="none" stroke="currentColor" strokeWidth="1.6" /><circle cx="7.5" cy="8.5" r="1.3" fill="currentColor" /><path d="M4 14l4-4 3 3 3-4 3 5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /></>,
  };
  const contentStyle = {
    paragraph: {},
    heading: { fontSize: 20, fontWeight: 700 },
    image: { fontStyle: "italic", color: "#24143099" },
  }[blockType] ?? {};
  return (
    <div style={{ position: "relative", display: "flex", alignItems: "flex-start", gap: 10, padding: "10px 14px",
      font: "15px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", borderRadius: radius,
      border: active ? `1.5px solid ${accent}` : "1.5px solid transparent",
      boxShadow: active ? `0 0 0 3px ${accent}40` : "none" }}>
      {active && (
        <span aria-hidden="true" title="Drag to reorder" style={{ color: "#24143066", paddingTop: 3, cursor: "grab" }}>
          <svg viewBox="0 0 10 16" width="10" height="16"><circle cx="2" cy="2" r="1.3" fill="currentColor" /><circle cx="8" cy="2" r="1.3" fill="currentColor" /><circle cx="2" cy="8" r="1.3" fill="currentColor" /><circle cx="8" cy="8" r="1.3" fill="currentColor" /><circle cx="2" cy="14" r="1.3" fill="currentColor" /><circle cx="8" cy="14" r="1.3" fill="currentColor" /></svg>
        </span>
      )}
      <span aria-hidden="true" style={{ color: accent, paddingTop: 2 }}>
        <svg viewBox="0 0 20 20" width="16" height="16">{icons[blockType] ?? icons.paragraph}</svg>
      </span>
      <p style={{ margin: 0, flex: 1, ...contentStyle }}>{content}</p>
    </div>
  );
}