Quick Start

Build your first block in a few minutes. This walks through adding a Code Block, the simplest block, so you can see the plugin working before moving on to the API reference blocks.

Step 1: Add the block#

1. Open a page or post in the block editor.
2. Click the plus icon to add a block.
3. Search for Code Block.
4. Add it to the page.

Step 2: Fill it in#

The Code Block has three fields: Language, Title, and Code. Try:

• Language: javascript
• Title: hello.js
• Code:

function greet(name) {
  return "Hello, " + name;
}

Save or preview the page. You should see a syntax-highlighted code panel with hello.js as its label.

Or: use the shortcode directly#

Every block also works as a shortcode, useful in the Classic editor, a widget, or anywhere shortcodes are supported:

[nahnu_code_block block="code-block" language="javascript" title="hello.js" code="function greet(name) {
  return 'Hello, ' + name;
}"]

This renders the same block as Step 2.

One thing to watch for#

WordPress’s shortcode parser stops a code="..." attribute at the very first matching quote character it finds. Since this attribute is delimited with double quotes, any double quote inside your code sample will cut it short and leak the rest of the sample as plain text on the page.

If your sample needs quoted strings, use single quotes inside it, as in the example above. Some of the other blocks pass their attributes as JSON arrays wrapped in single quotes, in that case, avoid single quotes inside the sample instead. Either way, the rule is the same: never use the same quote character inside an attribute that is being used to delimit it.