SlowlyCode
Run your own PHP, JavaScript, HTML, or CSS from a block, with a live preview.
The Code block runs your own code, PHP, JavaScript, HTML, or CSS, directly from a block, and previews the result as you write. It is the escape hatch for anything a visual block does not cover.
Because it runs real code, access is controlled in the Role Editor. It is not open to every contributor by default.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "code".
- Pick the Code block, then choose a language and write or paste your code.
Settings
In the code block's own panel. The shared design panel is documented at Styling.
| Setting | What it does | Reach for it when |
|---|---|---|
| Language / Render | Selects whether the block runs PHP, HTML, CSS, or JavaScript | Set this first; the editor highlights and the output behaviour both follow it |
| Execute | Runs the code and shows the output as a live preview in the editor | On by default; turn it off while writing a large block of PHP to avoid partial-execution errors mid-draft |
| Show block | Controls whether the block is visible on the front end | Off hides the output from visitors while keeping the block in place |
| Prevent clicks | Blocks pointer events on the preview inside the editor | Useful when the code renders interactive elements that get in the way of selecting the block |
| Skeleton | Shows a loading placeholder while the output is being computed | On by default; set the width, height, and radius to match the expected output |
Styling
The Code block uses the shared design panel for spacing, colour, borders, and effects, each per breakpoint. Use states if the rendered output needs a hover or focus treatment applied at the wrapper level.
Accessibility
Code you write here is responsible for its own semantics. If the output includes interactive elements, buttons, links, form controls, write the appropriate ARIA labels and roles into the markup directly. The block does not add any for you.