Skip to content
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

Jump to bottom

Update/list view outline information about post #50414

Open
wants to merge 16 commits into
base: trunk
Choose a base branch
from
Open

Update/list view outline information about post #50414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e21624d
Added list-view outline to contain heading count, paragrapth count an…
n2erjo00 May 6, 2023
e638b1a
Added code refactors to make it look nicer, changed slightly html str…
n2erjo00 May 6, 2023
c6f1ca1
Updated styles to match new html structure
n2erjo00 May 6, 2023
83a69d2
Updated to use HTML table element for better screen reader access
n2erjo00 May 11, 2023
cd2e5e0
Updated styles to match new table element
n2erjo00 May 11, 2023
94596f3
Merge branch 'trunk' into update/list-view-outline-information-about-…
n2erjo00 Jul 26, 2023
9c8a770
Added new React component to show base information about the document
n2erjo00 Jul 26, 2023
60f8f2e
Removed table ui and heading, paragraphcount and blockCount from the …
n2erjo00 Jul 26, 2023
16a9903
Added third tab to inserter called Info
n2erjo00 Jul 26, 2023
f70b5b5
Style changes and additions since HTML uses <ul> structure
n2erjo00 Jul 26, 2023
45186d4
Merge branch 'trunk' into update/list-view-outline-information-about-…
n2erjo00 Sep 25, 2023
8efd549
Removed padding-right since added white-space to html to make screen-…
n2erjo00 Sep 26, 2023
62d78cf
Added white-space to html element to make screen readers read more cl…
n2erjo00 Sep 26, 2023
103cbee
Added styles to overview list element
n2erjo00 Sep 30, 2023
f46bd90
Added CharacterCount, WordCount, TimeToRead to info tab
n2erjo00 Sep 30, 2023
9429354
Removed CharacterCount, WordCount, TimeToRead from outline tab. Also …
n2erjo00 Sep 30, 2023
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
68 changes: 68 additions & 0 deletions packages/edit-post/src/components/secondary-sidebar/list-view-info.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { __experimentalText as Text } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useInstanceId } from '@wordpress/compose';
import { CharacterCount, WordCount, TimeToRead } from '@wordpress/editor';

export default function ListViewInfo() {
const { headingCount, paragraphCount, blockCount } = useSelect(
( select ) => {
const { getGlobalBlockCount } = select( blockEditorStore );
return {
headingCount: getGlobalBlockCount( 'core/heading' ),
paragraphCount: getGlobalBlockCount( 'core/paragraph' ),
blockCount: getGlobalBlockCount(),
};
}
);
const instanceId = useInstanceId(
ListViewInfo,
'edit-post-editor-list-view-overview-info'
);
return (
<div className="edit-post-editor__list-view-overview__container">
<p className="screen-reader-text" id={ instanceId }>
{ __( 'Document info' ) }
</p>
<ul
className="edit-post-editor__list-view-overview"
aria-describedby={ instanceId }
>
<li className="edit-post-editor__list-view-overview__item">
<Text variant="muted">{ __( 'Characters' ) }&nbsp;</Text>
<Text size={ 16 }>
<CharacterCount />
</Text>
</li>
<li className="edit-post-editor__list-view-overview__item">
<Text variant="muted">{ __( 'Words' ) }&nbsp;</Text>
<Text size={ 16 }>
<WordCount />
</Text>
</li>
<li className="edit-post-editor__list-view-overview__item">
<Text variant="muted">{ __( 'Paragraphs' ) }&nbsp;</Text>
<Text size={ 16 }>{ paragraphCount }</Text>
</li>
<li className="edit-post-editor__list-view-overview__item">
<Text variant="muted">{ __( 'Headings' ) }&nbsp;</Text>
<Text size={ 16 }>{ headingCount }</Text>
</li>
<li className="edit-post-editor__list-view-overview__item">
<Text variant="muted">{ __( 'Time to read' ) }&nbsp;</Text>
<Text size={ 16 }>
<TimeToRead />
</Text>
</li>
<li className="edit-post-editor__list-view-overview__item">
<Text variant="muted">{ __( 'Blocks' ) }&nbsp;</Text>
<Text size={ 16 }>{ blockCount }</Text>
</li>
</ul>
</div>
);
}
35 changes: 4 additions & 31 deletions packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,9 @@
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import {
DocumentOutline,
WordCount,
TimeToRead,
CharacterCount,
} from '@wordpress/editor';
import { DocumentOutline } from '@wordpress/editor';
import { store as blockEditorStore } from '@wordpress/block-editor';
import {
__experimentalText as Text,
Path,
SVG,
Line,
Rect,
} from '@wordpress/components';
import { Path, SVG, Line, Rect } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

function EmptyOutlineIllustration() {
Expand Down Expand Up @@ -64,23 +53,7 @@ export default function ListViewOutline() {
};
}, [] );
return (
<>
<div className="edit-post-editor__list-view-overview">
<div>
<Text>{ __( 'Characters:' ) }</Text>
<Text>
<CharacterCount />
</Text>
</div>
<div>
<Text>{ __( 'Words:' ) }</Text>
<WordCount />
</div>
<div>
<Text>{ __( 'Time to read:' ) }</Text>
<TimeToRead />
</div>
</div>
<div className="edit-post-editor__list-view-overview__container">
{ headingCount > 0 ? (
<DocumentOutline />
) : (
Expand All @@ -93,6 +66,6 @@ export default function ListViewOutline() {
</p>
</div>
) }
</>
</div>
);
}
8 changes: 8 additions & 0 deletions packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { ESCAPE } from '@wordpress/keycodes';
*/
import { store as editPostStore } from '../../store';
import ListViewOutline from './list-view-outline';
import ListViewInfo from './list-view-info';

export default function ListViewSidebar( { listViewToggleElement } ) {
const { setIsListViewOpened } = useDispatch( editPostStore );
Expand Down Expand Up @@ -121,6 +122,8 @@ export default function ListViewSidebar( { listViewToggleElement } ) {
<ListView dropZoneElement={ dropZoneElement } />
</div>
);
} else if ( tabName === 'info' ) {
return <ListViewInfo />;
}
return <ListViewOutline />;
}
Expand Down Expand Up @@ -154,6 +157,11 @@ export default function ListViewSidebar( { listViewToggleElement } ) {
title: _x( 'Outline', 'Post overview' ),
className: 'edit-post-sidebar__panel-tab',
},
{
name: 'info',
title: 'Info',
className: 'edit-post-sidebar__panel-tab',
},
] }
>
{ ( currentTab ) => (
Expand Down
36 changes: 22 additions & 14 deletions packages/edit-post/src/components/secondary-sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,22 +90,30 @@
}

.edit-post-editor__list-view-overview {
display: flex;
flex-direction: column;
gap: $grid-unit-10;
border-bottom: $border-width solid $gray-300;
padding: $grid-unit-20;

& > div > span:first-child {
// Width of the text information fields.
width: 90px;
display: inline-block;
display: grid;
gap: $grid-unit-20;
grid-template-columns: 1fr 1fr;
list-style: none;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: $grid-unit-20;
padding: 0;

&__item {
margin-bottom: 0;

> .components-text {
display: block;

&:first-of-type {
margin-bottom: $grid-unit-10;
}
}
}

& > div > span {
font-size: $helptext-font-size;
line-height: $default-line-height;
color: $gray-700;
&__container {
padding: 8px 6px;
}
}

Expand Down
Loading