Skip to main content

​
Overview

The updateBlock method modifies a block’s metadata (order, depth, align) and/or its content value.

​
Signature

Blocks.updateBlock(
  editor: YooEditor,
  blockId: string,
  newData: Omit<Partial<YooptaBlockData>, 'id' | 'type'>
): void

​
Parameters

​
editor
YooEditor
required
The editor instance
​
blockId
string
required
ID of the block to update
​
newData
Omit<Partial<YooptaBlockData>, 'id' | 'type'>
required
Partial block data to update. Can include:

​
Examples

​
Update Block Metadata

import { Blocks } from '@yoopta/editor';

// Update alignment
Blocks.updateBlock(editor, 'block-123', {
  meta: { align: 'center' },
});

// Update depth
Blocks.updateBlock(editor, 'block-123', {
  meta: { depth: 2 },
});

// Update multiple meta properties
Blocks.updateBlock(editor, 'block-123', {
  meta: {
    align: 'right',
    depth: 1,
  },
});

​
Update Block Content

// Update block value
Blocks.updateBlock(editor, 'block-123', {
  value: [
    editor.y('paragraph', {
      children: [editor.y.text('New content')]
    })
  ],
});

​
Update Both Meta and Value

Blocks.updateBlock(editor, 'block-123', {
  meta: { align: 'center' },
  value: [
    editor.y('paragraph', {
      children: [editor.y.text('Updated content')]
    })
  ],
});

​
Use Cases

​
Change Block Alignment

const setBlockAlignment = (
  editor: YooEditor,
  blockId: string,
  align: 'left' | 'center' | 'right'
) => {
  Blocks.updateBlock(editor, blockId, {
    meta: { align },
  });
};

​
Update Block Content Programmatically

const updateBlockText = (editor: YooEditor, blockId: string, text: string) => {
  const block = Blocks.getBlock(editor, { id: blockId });
  
  if (!block) return;

  Blocks.updateBlock(editor, blockId, {
    value: [
      editor.y('paragraph', {
        children: [editor.y.text(text)]
      })
    ],
  });
};

​
Batch Update Multiple Blocks

const alignAllBlocks = (editor: YooEditor, align: 'left' | 'center' | 'right') => {
  Object.keys(editor.children).forEach((blockId) => {
    Blocks.updateBlock(editor, blockId, {
      meta: { align },
    });
  });
};

​
Notes

Properties in newData are merged with existing block data. To remove a property, you need to explicitly set it to undefined or null.
The id and type fields cannot be updated using this method. To change the block type, use toggleBlock instead.
If the block doesn’t exist, the method will log a warning and return without making changes.
The method creates separate operations for meta and value updates, so you can update them independently or together.

​
Type Definition

type YooptaBlockData = {
  id: string;
  type: string;
  value: SlateElement[];
  meta: {
    order: number;
    depth: number;
    align?: 'left' | 'center' | 'right';
  };
};

getBlock

Get block before updating

toggleBlock

Change block type

increaseBlockDepth

Increase block depth

decreaseBlockDepth

Decrease block depth