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
Site Editor: Hide resize handle. #28272
Conversation
Size Change: -9 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
margin-top: $default-block-margin; | ||
margin-bottom: $default-block-margin; | ||
|
||
// This needs high specificity as it's output as an inline style by the library. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
which library can override this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also wonder why we had the issue only in the site editor? Is it about the iframe? Does it mean we have another similar style elsewhere that we could remove now?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I assume it's caused by TextareaAutosize
which is used in context of the component. resize: horizontal;
gets output as an inline style.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you know why it doesn't happen in the post editor?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't know why, for whatever reason the resize
style does not appear to get output there. Here's some example markup:
<textarea role="button" aria-label="Add block" class="block-editor-default-block-appender__content" readonly="" rows="1" style="overflow: hidden; overflow-wrap: break-word; height: 25px;">Start writing or type / to choose a block</textarea>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
weird. Maybe the library detects an iframe or something and add it. Weird though.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed
There's a small resize handle in the default block editor appender:
This resize handle is added as an inline style, presumably by the React AutoSize library:
An
!important
was the only way to hide it: