zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style(BlockEditor): improve block spacing and placeholder visibility behavior

Browse Source 
- 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
This commit is contained in:
Hyko
2026-04-25 17:42:51 -04:00
parent 645a54dba5
commit 7fa2353296
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/BlockEditor/Block.client.js
+1 -1
View File
@@ -196,7 +196,7 @@ const Block = forwardRef(function Block(
return ( return (
<div <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)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
draggable={draggable} draggable={draggable}
src/shared/components/BlockEditor/BlockEditor.client.js
+6 -2
View File
@@ -462,7 +462,7 @@ export default function BlockEditor({
<div <div
ref={containerRef} ref={containerRef}
onKeyDown={handleGlobalKeyDown} 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 /> <BlockEditorStyles />
{placeholder && blocks.length === 1 && !blocks[0].content && ( {placeholder && blocks.length === 1 && !blocks[0].content && (
@@ -516,10 +516,14 @@ function BlockEditorStyles() {
return ( return (
<style>{` <style>{`
.block-editor [contenteditable][data-placeholder]:empty::before { .block-editor [contenteditable][data-placeholder]:empty::before {
content: attr(data-placeholder); content: '';
color: rgb(163 163 163); color: rgb(163 163 163);
pointer-events: none; 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 { .dark .block-editor [contenteditable][data-placeholder]:empty::before {
color: rgb(82 82 82); color: rgb(82 82 82);
} }