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 1 commit
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
10 changes: 8 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 @@ -43,8 +43,14 @@
}

// Could be unset for individual rich text instances.
&.is-selected [data-rich-text-placeholder]::after {
display: none;
&.is-selected {
&.keep-placeholder-on-focus [data-rich-text-placeholder] {
pointer-events: none;
Copy link
Member

Choose a reason for hiding this comment

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

Will it display a different cursor icon? I guess, it still needs to be overridden.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It shows the same one for me.

Copy link
Member

Choose a reason for hiding this comment

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

Why does this rule need to be added? Is the one above not enough on :after?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's needed so that you can select/see the caret through the placeholder.

}

&:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after {
display: none;
}
}
}

Expand Down