gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

Spinner in URLPopover positioned incorrectly

Open wongjn opened this issue 4 years ago • 2 comments

Description

The spinner loading indicator that can appear when typing in a URLPopover.LinkEditor component seems to be have incorrect layout due to invalid CSS properties for it.

Step-by-step reproduction instructions

  1. Log in to a WordPress 5.8.2 site.
  2. Add an Image (core/image) block.
  3. Click the Link button
  4. Type some characters into the link input box.

Screenshots, screen recording, code snippet

Incorrect compiled CSS is the right and bottom properties:

.block-editor-block-list__block .block-editor-url-input .components-spinner,
.components-popover .block-editor-url-input .components-spinner,
.block-editor-url-input .components-spinner {
  position: absolute;
  right: 8px 8px 8px 12px;
  bottom: 8px 8px 8px 12px8px1;
  margin: 0;
}

which is compiled from here: https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/url-input/style.scss#L48-L49

and also this is incorrect CSS for the bottom property:

.block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
.block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
  bottom: 8px 8px 8px 12px1;
}

which is compiled from here: https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/url-popover/style.scss#L76

This positions the spinner as below (see bottom left corner, the bit of gray is the spinner): image

Here, I manually edited the bottom and right properties to 8px which improves it, but I am not sure what the ultimate value should be (one of the values from $input-padding I would presume?). image

Environment info

WordPress 5.8.2, developing with a custom theme.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

wongjn avatar Dec 02 '21 16:12 wongjn

@jameskoster, @jasmussen, do you know if we can remove these styles after recent Spinner component refactoring?

Mamaduka avatar Aug 10 '22 15:08 Mamaduka

Quite possibly, yes. It doesn't look like these particular styles are used:

Screenshot 2022-08-11 at 09 46 08

jameskoster avatar Aug 11 '22 08:08 jameskoster