Long slugs breaking summary panel UI #64053
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
amitraj2203
added
[Type] Bug
|
Size Change: +2.44 kB (+0.14%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
|
Thank you for the PR 🙏 I'm not sure this is the correct solution though, it's making the other buttons in the panel 
Another option to try could be; target |
|
Alternatively it might be better to truncate the button. When the URL is extremely long this button can consume a large amount of space. 
|
…URL is extremely long
|
@jameskoster Thanks for the review. I have changed the CSS to truncate URL when they are extremely long. |
amitraj2203
changed the title
|
Thank you! This is working for me, let's get a review from the components team. |
ciampo
requested changes
Jul 30, 2024
There was a problem hiding this comment.
Thank you for the ping, @jameskoster !
We do have a Truncate component that should this use case perfectly — the only tweak that we'd have to make for the best results is to make sure that children of <Truncate /> are strings (and not JSX).
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index be32b40eaf..aca36566c0 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -3,7 +3,11 @@
*/
import { useMemo, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
-import { Dropdown, Button } from '@wordpress/components';
+import {
+ Dropdown,
+ Button,
+ __experimentalTruncate as Truncate,
+} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { safeDecodeURIComponent } from '@wordpress/url';
import { store as coreStore } from '@wordpress/core-data';
@@ -86,7 +90,9 @@ function PostURLToggle( { isOpen, onClick } ) {
aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
onClick={ onClick }
>
- { isFrontPage ? postLink : <>/{ decodedSlug }</> }
+ <Truncate numberOfLines={ 1 }>
+ { isFrontPage ? postLink : `/${ decodedSlug }` }
+ </Truncate>
</Button>
);
}
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index 45e5b2063d..104f246458 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -27,12 +27,6 @@
padding-inline-start: 0 !important;
}
-.editor-post-panel__row-control {
- .components-button.editor-post-url__panel-toggle {
- word-break: break-word;
- display: inline-block;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
+editor-post-url__panel-toggle {
+ word-break: break-word;
}
This shouldn't require any additional style overrides.
| .editor-post-url__panel-toggle { | ||
| word-break: break-word; | ||
| .editor-post-panel__row-control { | ||
| .components-button.editor-post-url__panel-toggle { |
There was a problem hiding this comment.
Let's avoid using .components-* classnames, as they are not assumed to be public APIs from the @wordpress/components package.
There was a problem hiding this comment.
@ciampo Thanks for the review. Can you please review it again?
ciampo
approved these changes
Jul 31, 2024
jameskoster
approved these changes
Jul 31, 2024
2 tasks
|
I kindly disagree with this change. The entire purpose of this UI is ot show the full link or slug. Truncation is not a content strategy. If there's not enough space in the design to show content, the root problem is in the design in the first place. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes: #64052
Why?
See this comment
Screenshots or screencast