Add components level better alignment and wrapping for long text data

WordPress · May 16, 2024 · 319c3c9 · 319c3c9
1 parent 9c3284c
commit 319c3c9
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 18 deletions.
diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
@@ -18,4 +18,13 @@
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
+
+	.components-dropdown .components-button {
+		height: auto;
+		line-height: inherit;
+		min-height: 32px;
+		overflow: hidden;
+		text-align: left;
+		white-space: unset;
+	}
 }
diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js
@@ -82,7 +82,6 @@ export default function BlockThemeControl( { id } ) {
 			label={ __( 'Template options' ) }
 			text={ decodeEntities( template.title ) }
 			icon={ null }
-			className="editor-post-template__panel-dropdown"
 		>
 			{ ( { onClose } ) => (
 				<>

diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js
@@ -49,7 +49,6 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 			aria-expanded={ isOpen }
 			aria-label={ __( 'Template options' ) }
 			onClick={ onClick }
-			className="editor-post-template__classic-panel-toggle"
 		>
 			{ templateTitle ?? __( 'Default template' ) }
 		</Button>
@@ -206,7 +205,6 @@ function ClassicThemeControl() {
 	return (
 		<Dropdown
 			popoverProps={ POPOVER_PROPS }
-			className="editor-post-template__classic-panel-dropdown"
 			focusOnMount
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<PostTemplateToggle isOpen={ isOpen } onClick={ onToggle } />

diff --git a/packages/editor/src/components/post-template/style.scss b/packages/editor/src/components/post-template/style.scss
@@ -50,18 +50,3 @@
 .editor-post-template__classic-theme-dropdown {
 	padding: $grid-unit-10;
 }
-
-.editor-post-template__panel-dropdown,
-.editor-post-template__classic-panel-dropdown {
-	width: 100%;
-}
-
-.editor-post-template__panel-dropdown .components-dropdown-menu__toggle,
-.editor-post-template__classic-panel-dropdown .editor-post-template__classic-panel-toggle {
-	display: block;
-	max-width: 100%;
-	overflow: hidden;
-	text-align: left;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}