WordPress editor space issue
August 13, 2025 · AI Conversations
1) **Editor is creating new paragraphs, but there’s no visible space** (CSS reset in the editor).
2) **Editor isn’t creating “ at all** (TinyMCE/Gutenberg config changed).
Do this fast check:
– Switch to **Code editor** (Gutenberg: ⋮ > Code editor; Classic: **Text** tab).
– If you see `…` after pressing Enter → it’s **CSS**.
– If you only see “ or plain text → it’s **config**.
—
## Fix if it’s CSS (most common)
### A) Block Editor (Gutenberg) — block themes (e.g., Twenty Twenty-Four)
Add margins via `theme.json` (applies to editor + frontend):
{
"version": 2,
"styles": {
"elements": {
"paragraph": {
"typography": { "lineHeight": "1.6" },
"spacing": { "margin": { "bottom": "1.2rem" } }
}
}
}
}
Or enqueue an editor-only CSS file:
**functions.php**
add_action('after_setup_theme', function () {
add_theme_support('editor-styles');
add_editor_style('editor-fixes.css');
});
**editor-fixes.css**
:where(.editor-styles-wrapper) p,
:where(.editor-styles-wrapper) .wp-block-paragraph {
margin: 0 0 1.2em !important;
line-height: 1.6;
}
### B) Classic Editor (TinyMCE)
**functions.php**
add_action('after_setup_theme', function () {
add_editor_style('editor-fixes.css');
});
**editor-fixes.css**
#tinymce p { margin: 0 0 1.2em !important; line-height: 1.6; }
#tinymce br { display: inline; } /* in case some style hid <br> */
—
## Fix if it’s config (no “ inserted)
Something likely disabled paragraph creation:
**Restore TinyMCE defaults** (Classic Editor):
add_filter('tiny_mce_before_init', function ($init) {
$init['forced_root_block'] = 'p'; // ensure paragraphs on Enter
$init['wpautop'] = true;
return $init;
});
**Undo autop removals** (front end rendering, optional but good to revert):
add_filter('the_content', 'wpautop', 10);
add_filter('the_excerpt', 'wpautop', 10);
—
## If it still misbehaves
– Look for custom code/plugins that changed editor behavior:
– Search your codebase:
– `tiny_mce_before_init`, `forced_root_block`, `wpautop`, `enqueue_block_editor_assets`
– Check any admin CSS that sets `p { margin:0 }` or `br { display:none }`.
—
If you tell me whether you’re on **Classic editor or Gutenberg** (and your theme), I’ll drop the exact snippet tailored to your setup.
### 1) Force paragraphs on Enter (fixes “ issue)
Add to your theme’s `functions.php` (or a small must-use plugin):
// Make Enter create <p> (not <br>) in Classic Editor
add_filter('tiny_mce_before_init', function ($init) {
$init['forced_root_block'] = 'p'; // default block is <p>
$init['force_br_newlines'] = false; // don't force <br> on Enter
$init['force_p_newlines'] = true; // do force <p> on Enter
$init['wpautop'] = true; // keep auto <p> behavior
return $init;
});
// In case something disabled wpautop on render, restore it
add_filter('the_content', 'wpautop', 10);
add_filter('the_excerpt', 'wpautop', 10);
### 2) Ensure there’s visible spacing in the editor
Add editor stylesheet:
**functions.php**
add_action('after_setup_theme', function () {
add_editor_style('classic-editor-fixes.css');
});
**classic-editor-fixes.css**
/* Adds space between paragraphs inside TinyMCE */
#tinymce p { margin: 0 0 1.2em !important; line-height: 1.6; }
/* Safety: don’t let any admin CSS hide line breaks */
#tinymce br { display: inline; }
### 3) Quick verification
– New post → **Text** tab → type “Line 1”, press **Enter** once → type “Line 2”.
– You should see:
<p>Line 1</p>
<p>Line 2</p>
If you still get only “, a plugin/theme is overriding settings. Search your codebase/plugins for any of:
`tiny_mce_before_init`, `forced_root_block`, `wpautop`, or plugins like “Disable Autop”. Disable that override or keep the snippet above in a must-use plugin.
### Option A — If you’re on a block/FSE theme (e.g., Twenty Twenty-Four)
Add/merge this into your child theme’s `theme.json`:
{
"version": 2,
"settings": {
"spacing": {
"blockGap": "1.2rem" // space between blocks (applies to paragraphs too)
}
},
"styles": {
"blocks": {
"core/paragraph": {
"spacing": { "margin": { "bottom": "1.2rem" } },
"typography": { "lineHeight": "1.6" }
}
}
}
}
### Option B — If you’re on a classic (PHP) theme using the block editor
Add an editor stylesheet.
**functions.php**
add_action('after_setup_theme', function () {
add_theme_support('editor-styles');
add_editor_style('editor-fixes.css');
});
**editor-fixes.css**
/* Space between blocks inside the editor */
.editor-styles-wrapper { --wp--style--block-gap: 1.2rem; }
/* Classic-like paragraph spacing inside the editor */
.editor-styles-wrapper p,
.editor-styles-wrapper .wp-block-paragraph {
margin: 0 0 1.2em !important;
line-height: 1.6;
}
(If you also need it on the **front end**, add similar CSS to your theme or `theme.json`.)
—
### Quick checks
– Press **Enter** → should create a new paragraph with visible space.
– Press **Shift+Enter** → soft line break (no extra space), same as Classic.
If it’s still flat, some plugin/theme CSS may be zeroing margins. Search your code for `p { margin: 0 }` or `–wp–style–block-gap: 0` and override it as above.