Editor.js (Block Editor)
BuddyPress Member Blog overviewFree + ProGet BuddyPress Member Blog →
Editor.js is the default editor on a new site. Each paragraph, heading, list, image or embed is its own block that you can add, move and delete on its own, much like Notion or the WordPress block editor.
The site owner chooses the editor for everyone under WB Plugins > Member Blog > Editor > Active editor. See Choosing the writing experience. Members cannot switch editors themselves.
The toolbar
Section titled “The toolbar”A row of buttons sits above the writing area:
| Button | Adds |
|---|---|
| Heading | A heading block (H2 by default). |
| Image | Opens the media library so you can upload or pick an image. |
| List | A bulleted list. |
| Quote | A quote block with a line for who said it. |
| Code | A code block. |
| Divider | A visual break between sections. |
| Video | Asks for a video or media link and adds it. |
On tablets and desktops the toolbar stays pinned under the site header while you scroll a long post, so it is always in reach. On phones it scrolls with the post, so it does not take up the screen above the keyboard.
Adding blocks
Section titled “Adding blocks”- Just type. Pressing Enter at the end of a block starts a new paragraph.
- Press Tab or type / in an empty block to open the block menu, then pick a block.
- Press + in the block handle to open the same menu.
- Use the toolbar above the writing area.
The block handle
Section titled “The block handle”Point at a block (or tap it) to show its handle: a + button and a settings button. The settings button opens the block’s options, which include moving the block up or down and deleting it. Some blocks add their own options, such as the heading level or the list style.
On screens wider than about 650px the handle sits in the margin to the left of the text, so it never covers your words. On narrower screens Editor.js shows it under the block instead.
Available blocks
Section titled “Available blocks”| Block | Notes |
|---|---|
| Paragraph | Regular text. |
| Heading | H2, H3 or H4. Shortcut: Cmd/Ctrl+Shift+H. |
| List | Bulleted or numbered. |
| Quote | Quote text plus an optional author line. Shortcut: Cmd/Ctrl+Shift+O. |
| Code | Plain code, shown as written. |
| Divider | A section break. |
| Image | Upload, pick from the media library, or paste an image link. Add an optional caption. |
| Embed | Paste a YouTube, Vimeo, Twitter, Instagram, CodePen or Gfycat link on its own and it becomes an embed. |
Formatting text
Section titled “Formatting text”Select text inside a paragraph, list or quote and a small toolbar appears with bold, italic and link, plus:
- Inline code (Cmd/Ctrl+Shift+C) for a word or command inside a sentence.
- Marker (Cmd/Ctrl+Shift+M) to highlight text.
Cmd/Ctrl+B and Cmd/Ctrl+I also work for bold and italic.
Images
Section titled “Images”There are three ways to add an image to the body of a post:
- Press Image on the toolbar to open the media library, then upload a new image or pick one you uploaded before.
- Add an Image block from the block menu and press Select Image to upload a file from your device.
- Paste an image link into an Image block.
Files uploaded with Select Image follow the same rules as the featured image: the file types and size limit the site owner set (JPG, PNG, GIF and WebP up to 20 MB on a new site, or less if the server allows less). A file that breaks the rules is refused with a message saying why. The media library follows the site’s normal WordPress upload rules.
The featured image is separate. Set it in the Category, tags and image section of Post settings.
Videos and embeds
Section titled “Videos and embeds”Press Video and paste the link. The link is added in its own paragraph and a message says it becomes a player when you preview or publish. Any provider WordPress can embed works this way (for example YouTube, Vimeo, Dailymotion or TikTok). A link WordPress cannot embed stays a working link.
When the editor does not load
Section titled “When the editor does not load”If Editor.js cannot load (a browser extension blocks it, or the connection drops), the writing area says The editor could not load. You can still write your post in the box below. and a plain text box appears. You can still write and submit the post.