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

Improve URL input and Image URL input user interfaces consistency #58507

Open
afercia opened this issue Jan 31, 2024 · 2 comments
Open

Improve URL input and Image URL input user interfaces consistency #58507

afercia opened this issue Jan 31, 2024 · 2 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Jan 31, 2024

Description

Splitting this out from #58505 (comment)

Consistency in user interfaces is part of accessibility, better user experience and consistent design.
A consistent UI reduces cognitive load, provides predictability and improves trust and affordance.

To insert links on text and images there are two different components. Besides obvious specific differences, for example images do have specific features like 'preset' to add a link to the image file or attachment, ideally these two UIs should look and behave very similarly. There's some pretty evidend inconsistencies though. To mention a few:

  • The buttons placement: visually placed inside or outside the input field.
  • The aria-disabled state of the Submit button.
  • The labelling of the button: Apply vs. Submit.
  • Different placeholder text: Paste URL or type to search vs. Search or type url with url lowercase (sigh).
  • Divider border, spacing, and other CSS details.
  • Possibly more.

Additionally, while working on #58505 I observed the state of the CSS isn't ideal. There's some overriding of default styles that should be avoided and, generally, working on this part of the CSS isn't a great user experience. It's likely that, by reducing functional inconsistencies and inconsistent markup, it is then posisble to freatly simplify the CSS as well.

Current state of the Image URL input UI before #58505

before 01

Current state of the 'default' URL input UI:

default 01

Step-by-step reproduction instructions

  • Select an Image block and add a link to ig.
  • The popover with the URL input UI opens.
  • Compare this UI with the one to add links to normal text.
  • COmpare both visuals, interaction, and functionality.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Package] Block editor /packages/block-editor labels Jan 31, 2024
@afercia afercia changed the title Improve URL input and Image URL input uer interfaces consistency Improve URL input and Image URL input user interfaces consistency Jan 31, 2024
@afercia
Copy link
Contributor Author

afercia commented Feb 1, 2024

Noting that the image link settings spacing, left/right padding and top border look broken on trunk. Screenshot from current trunk.

In #58505 I'm going to remove the top border. Further adjustments should be done in the context of this issue.

Screenshot 2024-02-01 at 14 24 54

@afercia
Copy link
Contributor Author

afercia commented Feb 1, 2024

The link settings are largely inconsistent as well. For example:

  • Checkboxes vs. toggle.
  • Link rel vs. no follow.
  • Link CSS class only in one of the two interfaces.
  • Vertical spacing between input fields, left / right padding, borders.
  • For the default URL input UI, the settings are available only after a link has been applied, while for the image they are available also before.
  • Cancel / Save buttons (related to the above point and the overall insert / save flow).

link settings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

1 participant