From 9c3284cecc37693679850aaa893ab23cebf4c11b Mon Sep 17 00:00:00 2001 From: itzmekhokan Date: Thu, 16 May 2024 11:56:20 +0530 Subject: [PATCH 1/2] Fix long template name UI break issue --- .../src/components/post-template/block-theme.js | 1 + .../src/components/post-template/classic-theme.js | 2 ++ .../src/components/post-template/style.scss | 15 +++++++++++++++ 3 files changed, 18 insertions(+) diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index 9abacc0de3a7f0..031c49872a0ee5 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -82,6 +82,7 @@ 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 index fb8835c7203218..2b75c75d194b89 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -49,6 +49,7 @@ function PostTemplateToggle( { isOpen, onClick } ) { aria-expanded={ isOpen } aria-label={ __( 'Template options' ) } onClick={ onClick } + className="editor-post-template__classic-panel-toggle" > { templateTitle ?? __( 'Default template' ) } @@ -205,6 +206,7 @@ function ClassicThemeControl() { return ( ( diff --git a/packages/editor/src/components/post-template/style.scss b/packages/editor/src/components/post-template/style.scss index c969654a532658..420ba491039ab6 100644 --- a/packages/editor/src/components/post-template/style.scss +++ b/packages/editor/src/components/post-template/style.scss @@ -50,3 +50,18 @@ .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; +} From 319c3c9ecbf9b88fb6e6d826b9db235afbb23370 Mon Sep 17 00:00:00 2001 From: itzmekhokan Date: Thu, 16 May 2024 17:59:28 +0530 Subject: [PATCH 2/2] Add components level better alignment and wrapping for long text data --- .../src/components/post-panel-row/style.scss | 9 +++++++++ .../src/components/post-template/block-theme.js | 1 - .../src/components/post-template/classic-theme.js | 2 -- .../src/components/post-template/style.scss | 15 --------------- 4 files changed, 9 insertions(+), 18 deletions(-) diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss index 22d0cbbb644d8a..2ac68d06bd32f7 100644 --- 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 index 031c49872a0ee5..9abacc0de3a7f0 100644 --- 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 index 2b75c75d194b89..fb8835c7203218 100644 --- 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' ) } @@ -206,7 +205,6 @@ function ClassicThemeControl() { return ( ( diff --git a/packages/editor/src/components/post-template/style.scss b/packages/editor/src/components/post-template/style.scss index 420ba491039ab6..c969654a532658 100644 --- 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; -}