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

fix(ui): improve block editor placeholder visibility with fade transition

Browse Source 
- remove unused `placeholder` prop from BlockEditor component
- add `block-editor--sole-empty` class when editor has a single empty block
- show placeholder via opacity transition instead of content injection
- always render `attr(data-placeholder)` content, toggle visibility with opacity
- add 150ms ease transition for smooth placeholder fade in/out
- show placeholder when block is focused, hovered, or editor is sole-empty
This commit is contained in:
Hyko
2026-04-25 19:09:41 -04:00
parent d225ff2e5f
commit c7b96f2e16
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/BlockEditor/BlockEditor.client.js
+9 -9
View File
@@ -63,7 +63,6 @@ export default function BlockEditor({
onChange,
label,
error,
placeholder,
disabled = false,
className = '',
enabledBlocks,
@@ -801,13 +800,9 @@ export default function BlockEditor({
ref={containerRef}
onKeyDown={handleGlobalKeyDown}
onMouseDownCapture={handleContainerMouseDown}
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}`}
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'} ${blocks.length === 1 && inlineLength(blocks[0].content ?? []) === 0 ? 'block-editor--sole-empty' : ''} ${className}`}
>
<BlockEditorStyles />
{placeholder && blocks.length === 1 && inlineLength(blocks[0].content ?? []) === 0 && (
// Placeholder global injecté via data-placeholder du paragraphe initial
null
)}
{blocks.map((block, i) => (
<Block
key={block.id}
@@ -872,13 +867,18 @@ function BlockEditorStyles() {
return (
<style>{`
.block-editor [contenteditable][data-placeholder]:empty::before {
content: '';
content: attr(data-placeholder);
opacity: 0;
color: rgb(163 163 163);
pointer-events: none;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.block-editor .group:hover [contenteditable][data-placeholder]:empty::before,
.block-editor [contenteditable][data-placeholder]:empty:focus::before {
content: attr(data-placeholder);
.block-editor [contenteditable][data-placeholder]:empty:focus::before,
.block-editor--sole-empty [contenteditable][data-placeholder]:empty::before {
opacity: 1;
}
.dark .block-editor [contenteditable][data-placeholder]:empty::before {
color: rgb(82 82 82);