From 7fa235329626e785428c071af92fed0558e74980 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Sat, 25 Apr 2026 17:42:51 -0400
Subject: [PATCH] style(BlockEditor): improve block spacing and placeholder
 visibility behavior

- increase block vertical padding from py-0.5 to py-1.5 for better readability
- increase editor container vertical padding from py-3 to py-6
- show placeholder text only on hover or focus instead of always visible
---
 src/shared/components/BlockEditor/Block.client.js       | 2 +-
 src/shared/components/BlockEditor/BlockEditor.client.js | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/BlockEditor/Block.client.js b/src/shared/components/BlockEditor/Block.client.js
index 71ff63c..629e0dd 100644
--- a/src/shared/components/BlockEditor/Block.client.js
+++ b/src/shared/components/BlockEditor/Block.client.js
@@ -196,7 +196,7 @@ const Block = forwardRef(function Block(
 
   return (
     <div
-      className="relative group flex items-start gap-1 px-1 py-0.5"
+      className="relative group flex items-start gap-1 px-1 py-1.5"
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       draggable={draggable}
diff --git a/src/shared/components/BlockEditor/BlockEditor.client.js b/src/shared/components/BlockEditor/BlockEditor.client.js
index cf224a6..09ccb4d 100644
--- a/src/shared/components/BlockEditor/BlockEditor.client.js
+++ b/src/shared/components/BlockEditor/BlockEditor.client.js
@@ -462,7 +462,7 @@ export default function BlockEditor({
       <div
         ref={containerRef}
         onKeyDown={handleGlobalKeyDown}
-        className={`block-editor border rounded-xl bg-white dark:bg-neutral-900/60 px-3 py-3 ${error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50'} ${className}`}
+        className={`block-editor border rounded-xl bg-white dark:bg-neutral-900/60 px-3 py-6 ${error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50'} ${className}`}
       >
         <BlockEditorStyles />
         {placeholder && blocks.length === 1 && !blocks[0].content && (
@@ -516,10 +516,14 @@ function BlockEditorStyles() {
   return (
     <style>{`
       .block-editor [contenteditable][data-placeholder]:empty::before {
-        content: attr(data-placeholder);
+        content: '';
         color: rgb(163 163 163);
         pointer-events: none;
       }
+      .block-editor .group:hover [contenteditable][data-placeholder]:empty::before,
+      .block-editor [contenteditable][data-placeholder]:empty:focus::before {
+        content: attr(data-placeholder);
+      }
       .dark .block-editor [contenteditable][data-placeholder]:empty::before {
         color: rgb(82 82 82);
       }