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

Jump to bottom

Site Editor: Hide resize handle. #28272

Merged
merged 1 commit into from Jan 18, 2021
Merged

Site Editor: Hide resize handle. #28272

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/default-block-appender/style.scss
View file
Open in desktop
Expand Up @@ -24,10 +24,12 @@
outline: $border-width solid transparent;
transition: 0.2s outline;
@include reduce-motion("transition");
resize: none;
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.
Copy link
Contributor

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?

Copy link
Contributor

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?

Copy link
Contributor Author

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.

Copy link
Contributor

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?

Copy link
Contributor Author

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>

Copy link
Contributor

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.

Copy link
Member

Choose a reason for hiding this comment

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

Agreed

resize: none !important;

// Emulate the dimensions of a paragraph block.
// On mobile and in nested contexts, the plus to add blocks shows up on the right.
// The rightmost padding makes sure it doesn't overlap text.
Expand Down