Try removing abs position on placeholder text in button #1247
Conversation
This tries to address #1168, specifically the concerns around letting the placeholder text scale the content.
There was a problem hiding this comment.
Can we set the caret at the beginning using some trick?
My first thought is changing :before to :after for the placeholder, which would work except for the fact that there's a "bogus" linebreak added by TinyMCE in the case of empty content. If we change the placeholder to not be absolute-ly positioned, we wouldn't need the line break. Not sure yet how to go about preventing it from being added.
blocks/library/button/style.scss
Outdated
| @@ -27,6 +27,10 @@ $blocks-button__height: 46px; | |||
| left: 50%; | |||
| transform: translateX( -50% ); | |||
| } | |||
|
|
|||
| .blocks-editable__tinymce[data-is-empty="true"]:before { | |||
There was a problem hiding this comment.
Should this be so specific to button, or should we set this as the default for all empty Editable placeholders?
https://github.com/WordPress/gutenberg/blob/cab8713/blocks/editable/style.scss#L49
|
Tried changing to |
aduth
added
[Feature] Rich Text
|
The change in fbc091c seems to have resurfaced the issue described in #868 , resulting in double dashes on quote placeholder:
We'll likely want to choose between one or the other between the placeholder dash added in 1975200 and the dash applied by styling. |
|
Thanks so much for the help!
Since adding that dash for this particular quote style is a, well, style choice, I lean towards us adding this in CSS. |
Placeholder applied by styles Closes #868
|
37b217f removes the redundant placeholder dash. Seeing now some issues with inserting a quote, assigning some citation text, then clearing it out. Appears the |
|
@iseulde if you have bandwidth do you have any knowledge on the behavior of data-mce-bogus? Thank you. |
|
I'll have a look. If the behaviour is inconsistent, that seems to be a TinyMCE bug. |
|
I think the best solution might be to have the placeholder as the content, and still make it seem as empty. This will also make sure we don't have any issues with something else styling :before or :after. I'll have a look at how doable this is. |
|
@spocke I don't see any placeholder settings or plugins for TinyMCE. Do you think there's any good way to build this in? |
|
There doesn't appear to be an official placeholder-text plugin but there is one that turns up on a search ( https://github.com/mohan/tinymce-placeholder ). It appears that it just displays a label over the editor when the content is empty and hides it when it is shown. |
|
One problem with this implementation is that once the block has been unfocused (by selecting another block) it is challenging to refocus the button label editor with the mouse. The plugin linked detects focus on the label and selects the editor instead which makes this work a bit better. |
|
Working on an alternative approach right now. Let's see. |
|
Fixed in #1477. |
This tries to address #1168, specifically the concerns around letting the placeholder text scale the content.
Props @georgeolaru, #1168 (comment)
The downside is that the cursor is blinking at the end:
But as soon as you start typing, it works as intended. Can we address this? Can we set the caret at the beginning using some trick? Stacked textareas, one left floated? @iseulde any ideas?