Using Editor.js – Block Editor Guide

Editor.js is a modern block-based editor that gives members powerful content creation tools. If you’re familiar with Medium, Notion, or the WordPress block editor, you’ll feel right at home.

What You’ll Learn

• How block-based editing works
• All available block types
• Tips for creating engaging content

Enabling Editor.js

1. Go to Member Blog → Settings → Editor
2. Select Editor.js (Block-Style)
3. Click Save Changes

How Block Editing Works

Instead of one big text area, Editor.js treats each piece of content as a “block”. Each paragraph, heading, image, or list is its own block that you can move, edit, or delete independently.

Adding Blocks

There are three ways to add new blocks:

1. Just start typing – Creates a paragraph block automatically
2. Type “/” (slash) – Shows the block menu to choose a type
3. Click the “+” icon – Opens the block inserter

Moving Blocks

Hover over any block to see the move handles on the left. Drag up or down to reorder your content.

Deleting Blocks

Click the settings icon (⋮) on a block and select “Delete” or use keyboard shortcut.

Available Block Types

Text Blocks

Block	How to Add	Use For
Paragraph	Just type	Regular text content
Heading	Type /heading	Section titles (H2, H3, H4)
Quote	Type /quote	Quoted text, callouts
List	Type /list	Bullet or numbered lists

Media Blocks

Block	How to Add	Use For
Image	Type /image	Upload or embed images
Embed	Type /embed	YouTube, Twitter, etc.

Formatting Blocks

Block	How to Add	Use For
Code	Type /code	Code snippets
Delimiter	Type /delimiter	Visual section breaks
Table	Type /table	Data in rows/columns

Inline Formatting

Within any text block, select text to see the inline toolbar:

• Bold – Make text bold
• Italic – Make text italic
• Link – Add hyperlink
• Code – Inline code formatting

Creating a Post Step by Step

Step 1: Add Your Title

Type your post title in the title field at the top of the form.

Step 2: Write Your First Paragraph

Click in the editor area and start typing. Your first paragraph introduces your topic.

Step 3: Add a Heading

Press Enter to create a new block, then type /heading and press Enter. Select your heading level and type your section title.

Step 4: Add an Image

1. Create a new block and type /image
2. Click to upload from your computer
3. Or paste an image URL
4. Add a caption below the image

Step 5: Create a List

1. Type /list and press Enter
2. Type your first item and press Enter
3. Continue adding items
4. Press Enter twice to exit the list

Tips for Better Posts

• Use headings generously – They make content scannable
• Break up long paragraphs – Aim for 2-4 sentences per block
• Add images – Visual content increases engagement
• Use quotes for emphasis – Pull out key points
• Preview before publishing – Check how blocks look together

Keyboard Shortcuts

Shortcut	Action
/	Open block menu
Ctrl+B	Bold text
Ctrl+I	Italic text
Enter	New block
Backspace (on empty block)	Delete block

Troubleshooting

Block menu not showing:

• Make sure cursor is in an empty block
• Type “/” at the start of a line
• Check JavaScript is enabled

Can’t move blocks:

• Hover over the left edge of the block
• Look for the drag handle
• Click and drag to new position

Related Docs

• Editor Settings Overview
• Using TinyMCE Classic Editor
• Using Medium Editor