Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rich Text: Add missing keep placeholder on focus prop. #17439

Merged
merged 3 commits into from
Sep 15, 2019
Merged

Rich Text: Add missing keep placeholder on focus prop. #17439

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f9dafd2
Rich Text: Add missing keep placeholder on focus prop.
epiqueras Sep 14, 2019
37e6fab
Use text cursor for the placeholder
ellatrix Sep 15, 2019
46b2501
Turns out the cursor prop is not needed if the pointer-events prop is…
ellatrix Sep 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/block-editor/src/components/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,7 @@ class RichTextWrapper extends Component {
didAutomaticChange,
undo,
placeholder,
keepPlaceholderOnFocus,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we include the deprecation message?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are not actually deprecating this one.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to restore documentation then.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#17445

// eslint-disable-next-line no-unused-vars
allowedFormats,
withoutInteractiveFormatting,
Expand Down Expand Up @@ -383,7 +384,10 @@ class RichTextWrapper extends Component {
selectionEnd={ selectionEnd }
onSelectionChange={ onSelectionChange }
tagName={ tagName }
className={ classnames( classes, className, { 'is-selected': originalIsSelected } ) }
className={ classnames( classes, className, {
'is-selected': originalIsSelected,
'keep-placeholder-on-focus': keepPlaceholderOnFocus,
} ) }
placeholder={ placeholder }
allowedFormats={ adjustedAllowedFormats }
withoutInteractiveFormatting={ withoutInteractiveFormatting }
Expand Down
8 changes: 6 additions & 2 deletions packages/block-editor/src/components/rich-text/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,20 @@
}
}

[data-rich-text-placeholder] {
pointer-events: none;
cursor: text;
}

[data-rich-text-placeholder]::after {
content: attr(data-rich-text-placeholder);
pointer-events: none;
// Use opacity to work in various editor styles.
// We don't specify the color here, because blocks or editor styles might provide their own.
opacity: 0.62;
}

// Could be unset for individual rich text instances.
&.is-selected [data-rich-text-placeholder]::after {
&.is-selected:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after {
display: none;
}
}
Expand Down