From a72f271ba377e7c0ab4412ddcc780caa3ced2051 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 13 Jul 2022 17:25:01 +1000 Subject: [PATCH 1/3] List View: Try adding partial content for the paragraph block --- .../list-view/block-select-button.js | 25 +++++++++++++++++++ .../src/components/list-view/style.scss | 7 +++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index 661bbec4dbfc46..7d268a3504b8c5 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -11,6 +11,9 @@ import { __experimentalHStack as HStack, __experimentalTruncate as Truncate, } from '@wordpress/components'; +import { getDefaultBlockName } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; +import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { forwardRef } from '@wordpress/element'; import { Icon, lock } from '@wordpress/icons'; import { SPACE, ENTER } from '@wordpress/keycodes'; @@ -23,6 +26,7 @@ import useBlockDisplayInformation from '../use-block-display-information'; import useBlockDisplayTitle from '../block-title/use-block-display-title'; import ListViewExpander from './expander'; import { useBlockLock } from '../block-lock'; +import { store as blockEditorStore } from '../../store'; function ListViewBlockSelectButton( { @@ -38,6 +42,20 @@ function ListViewBlockSelectButton( }, ref ) { + const { partialContent } = useSelect( + ( select ) => { + const block = select( blockEditorStore ).getBlock( clientId ); + const isDefaultBlock = block?.name === getDefaultBlockName(); + + return { + partialContent: isDefaultBlock + ? stripHTML( block?.attributes?.content ) + : undefined, + }; + }, + [ clientId ] + ); + const blockInformation = useBlockDisplayInformation( clientId ); const blockTitle = useBlockDisplayTitle( { clientId, @@ -89,6 +107,13 @@ function ListViewBlockSelectButton( { blockTitle } + { !! partialContent && ( + + + { partialContent } + + + ) } { blockInformation?.anchor && ( { blockInformation.anchor } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 4fce1136bdbd5a..c3f8d54100df09 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -301,7 +301,8 @@ min-width: 120px; } - .block-editor-list-view-block-select-button__title { + .block-editor-list-view-block-select-button__title, + .block-editor-list-view-block-select-button__partial-content { flex: 1; position: relative; @@ -312,6 +313,10 @@ } } + .block-editor-list-view-block-select-button__partial-content { + opacity: 0.5; + } + .block-editor-list-view-block-select-button__anchor { background: rgba($black, 0.1); border-radius: $radius-block-ui; From 2507d686c0352079d33dff1e39b992439e153fc5 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 29 Jul 2022 16:57:25 +1000 Subject: [PATCH 2/3] Try grouping the two pieces of truncated text within the one parent --- .../components/list-view/block-select-button.js | 16 ++++++++++------ .../src/components/list-view/style.scss | 5 ++--- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index 7d268a3504b8c5..34c1660b9f5dd7 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -105,15 +105,19 @@ function ListViewBlockSelectButton( spacing={ 1 } > - { blockTitle } - - { !! partialContent && ( - + - { partialContent } + { blockTitle } + { !! partialContent && ( + + + { partialContent } + + + ) } - ) } + { blockInformation?.anchor && ( { blockInformation.anchor } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index c3f8d54100df09..70cdc04d6c0197 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -301,12 +301,11 @@ min-width: 120px; } - .block-editor-list-view-block-select-button__title, - .block-editor-list-view-block-select-button__partial-content { + .block-editor-list-view-block-select-button__title { flex: 1; position: relative; - .components-truncate { + .block-editor-list-view-block-select-button__title__inner-wrapper { position: absolute; width: 100%; transform: translateY(-50%); From 5608435ffcfcbe0870121b3473620124086f1f0b Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 5 Aug 2022 15:32:37 +1000 Subject: [PATCH 3/3] Hack together logic to preserve correct widths --- .../src/components/list-view/block-select-button.js | 8 +++++++- packages/block-editor/src/components/list-view/style.scss | 8 ++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index 34c1660b9f5dd7..520e0e57f98808 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -106,7 +106,13 @@ function ListViewBlockSelectButton( > - + { blockTitle } { !! partialContent && ( diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 70cdc04d6c0197..2f9c26b8ff57f3 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -306,14 +306,22 @@ position: relative; .block-editor-list-view-block-select-button__title__inner-wrapper { + display: flex; + gap: 0.5em; position: absolute; width: 100%; transform: translateY(-50%); } } + .block-editor-list-view-block-select-button__title--no-shrink { + flex-shrink: 0; + } + .block-editor-list-view-block-select-button__partial-content { opacity: 0.5; + flex-basis: 100%; + overflow: hidden; } .block-editor-list-view-block-select-button__anchor {