Skip to content

List View: Use heading content for button label text if available #41855

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.

Sign up for GitHub

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

Merged
andrewserong merged 14 commits into from
Jul 11, 2022
Merged

List View: Use heading content for button label text if available #41855

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b50ec2a
List View: Use heading content for button label text if available
andrewserong Jun 22, 2022
ff204f6
Use __experimentalLabel and a custom list-view context for the label …
andrewserong Jun 23, 2022
f243ea4
Remove whitespace change
andrewserong Jun 23, 2022
3905d86
Roll back to earlier approach, tweak layout to work out what to do ab…
andrewserong Jun 28, 2022
4ffc7d8
Revert whitespace change
andrewserong Jun 28, 2022
319400e
Try switching back to using 'list-view' context
andrewserong Jun 29, 2022
ddf9e64
Update XPath for getListViewBlocks so that the span can be any nested…
andrewserong Jun 30, 2022
f5b3cb8
Try to fix gallery and navigation tests to be less strict about where…
andrewserong Jun 30, 2022
a940738
Slightly improve specificity of XPath queries, and ensure getListView…
andrewserong Jun 30, 2022
b514956
Tidy up useBlockDisplayTitle function signature and wrapper margins
andrewserong Jul 1, 2022
73ae70a
Increase max-width of wrapper, include lock icon within wrapper space
andrewserong Jul 6, 2022
04ab515
Tweak heading sizing to ensure it uses available space without unexpe…
andrewserong Jul 7, 2022
71cbd7c
Move min-width up to the parent wrapper, reduce right padding on the …
andrewserong Jul 8, 2022
26d7799
Use flex 1 instead of width percentage, use a min function on the anc…
andrewserong Jul 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Tweak heading sizing to ensure it uses available space without unexpe… 
…ctedly extending the panel
  • Loading branch information
@andrewserong
andrewserong committed Jul 11, 2022
commit 04ab515263017ccdff5fb5ae5b08e6fe5ec4a556
9 changes: 3 additions & 6 deletions packages/block-editor/src/components/list-view/block-select-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,9 @@ function ListViewBlockSelectButton(
justify="flex-start"
spacing={ 1 }
>
<Truncate
className="block-editor-list-view-block-select-button__title"
ellipsizeMode="auto"
>
{ blockTitle }
</Truncate>
<span className="block-editor-list-view-block-select-button__title">
<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
</span>
{ blockInformation?.anchor && (
<span className="block-editor-list-view-block-select-button__anchor">
{ blockInformation.anchor }
Expand Down
16 changes: 12 additions & 4 deletions packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@
}

.block-editor-list-view-block__menu-cell {
padding-right: 4px;
padding-right: $grid-unit-05;

.components-button.has-icon {
height: 24px;
Expand Down Expand Up @@ -297,16 +297,24 @@
}
}

.block-editor-list-view-block-select-button__label-wrapper {
max-width: 240px;
.block-editor-list-view-block-select-button__title {
min-width: 120px;
width: 100%;
position: relative;

.components-truncate {
position: absolute;
width: 100%;
transform: translateY(-50%);
}
}

.block-editor-list-view-block-select-button__anchor {
background: rgba($black, 0.1);
border-radius: $radius-block-ui;
display: inline-block;
padding: 2px 6px;
max-width: 120px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
Expand Down