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.

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

Improved rich text placeholder #16733

Merged
merged 4 commits into from Jul 26, 2019

Conversation

@ellatrix
Copy link
Member

commented Jul 24, 2019

Description

This small PR improves the currently clunky placeholder text for rich text instances.

The way placeholders are currently implemented is by "shadowing" the whole rich text element.

  • This may sometimes result in styles being duplicated (when using :before or :after). See the double line?

Screenshot 2019-07-24 at 16 15 43

  • Sometimes it needs style adjustments for multi-line instances (see removal of p handling).
  • It requires a wrapper tag with relative positioning.

When placeholders were first implemented, we used :before, but we cannot do that as themes may use pseudo elements for styling.

What I propose here is to insert a placeholder span element whenever then content is empty. This way the styling is always correct. It's as if the text is just there. This implementation requires less code, and it feel a lot "cleaner".

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
margin-top: 0;

& > p {
margin-top: 0;

This comment has been minimized.

Copy link
@ellatrix

ellatrix Jul 24, 2019

Author Member

This is no longer necessary, since we're not duplicating the whole rich text element.

@ellatrix ellatrix force-pushed the try/improved-rich-text-placeholder branch from c8334ee to 9254300 Jul 26, 2019

@ellatrix ellatrix force-pushed the try/improved-rich-text-placeholder branch from 4ae0da8 to 2410275 Jul 26, 2019

@ellatrix ellatrix added this to the Gutenberg 6.2 milestone Jul 26, 2019

@ellatrix

This comment has been minimized.

Copy link
Member Author

commented Jul 26, 2019

@jasmussen @kjellr Would love your review on this as you have worked a lot with themes before. This change should make placeholder more invisible when developing themes, so themes should never have to take them into account.

@kjellr

kjellr approved these changes Jul 26, 2019

Copy link
Contributor

left a comment

From a theme perspective, this seems great. Definitely a positive move. ⭐️

I tested in a handful of existing themes, and saw no negative effects. The only placeholder that does still seem to perform oddly is the very first paragraph placeholder for an empty doc — this one is still rendered as a textarea, so it doesn't always inherit the correct text styles. This was existing behavior though, so it can be looked into separately.

@ellatrix ellatrix force-pushed the try/improved-rich-text-placeholder branch from 2410275 to 69cb29d Jul 26, 2019

@ellatrix

This comment has been minimized.

Copy link
Member Author

commented Jul 26, 2019

The only placeholder that does still seem to perform oddly is the very first paragraph placeholder for an empty doc — this one is still rendered as a textarea, so it doesn't always inherit the correct text styles.

Sounds like we should use RichText there instead. :)

Let's iterate if any placeholders turn out to be a bit off, also for the core blocks. If we end up needing placeholders on focus again, we can use CSS for those specific blocks, or reintroduce the prop to enable this rule.

&.is-selected [data-rich-text-placeholder]::after {
	display: inline;
}

@ellatrix ellatrix merged commit b51e44f into master Jul 26, 2019

1 of 2 checks passed

Milestone It Milestone It
Details
Travis CI - Pull Request Build Passed
Details

@ellatrix ellatrix deleted the try/improved-rich-text-placeholder branch Jul 26, 2019

sbardian added a commit to sbardian/gutenberg that referenced this pull request Jul 29, 2019

Improved rich text placeholder (WordPress#16733)
* Improved rich text placeholder

* Rerender if placeholder changes

* Adjust placeholder padding for paragraph

* Use is-selected instead of :focus
@ellatrix ellatrix referenced this pull request Aug 7, 2019
5 of 5 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.