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

Editor: Update and simplify the Post Summary and Post Card section in the document sidebar #61624

Merged
merged 5 commits into from
May 14, 2024
Merged

Editor: Update and simplify the Post Summary and Post Card section in the document sidebar #61624

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f8e1274
Editor: Update and simplify the Post Summary and Post Card section in…
youknowriad May 13, 2024
44c4207
Fix typo
youknowriad May 13, 2024
34cfa41
Fix post editor sidebar e2e test
Mamaduka May 13, 2024
a1a0d17
Better spacing
youknowriad May 13, 2024
77f6bb4
Fix remaining e2e test error
Mamaduka May 14, 2024
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
125 changes: 40 additions & 85 deletions packages/editor/src/components/post-card-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
import {
Icon,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalText as Text,
PanelBody,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
Expand All @@ -25,89 +18,51 @@ import { store as editorStore } from '../../store';
import {
TEMPLATE_POST_TYPE,
TEMPLATE_PART_POST_TYPE,
PATTERN_POST_TYPE,
} from '../../store/constants';
import { PrivatePostExcerptPanel } from '../post-excerpt/panel';
import PostLastEditedPanel from '../post-last-edited-panel';
import { unlock } from '../../lock-unlock';
import TemplateAreas from '../template-areas';

export default function PostCardPanel( { className, actions } ) {
const { title, showPostContentPanels, icon, postType } = useSelect(
( select ) => {
const {
getEditedPostAttribute,
getCurrentPostType,
getCurrentPostId,
__experimentalGetTemplateInfo,
} = select( editorStore );
const { getEditedEntityRecord } = select( coreStore );
const _type = getCurrentPostType();
const _id = getCurrentPostId();
const _record = getEditedEntityRecord( 'postType', _type, _id );
const _templateInfo =
[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
_type
) && __experimentalGetTemplateInfo( _record );
return {
title:
_templateInfo?.title || getEditedPostAttribute( 'title' ),
id: _id,
postType: _type,
icon: unlock( select( editorStore ) ).getPostIcon( _type, {
area: _record?.area,
} ),
// Post excerpt panel and Last Edited info are rendered in different place depending on the post type.
// So we cannot make this check inside the PostExcerpt or PostLastEditedPanel component based on the current edited entity.
showPostContentPanels: [
TEMPLATE_POST_TYPE,
TEMPLATE_PART_POST_TYPE,
PATTERN_POST_TYPE,
].includes( _type ),
};
},
[]
);
export default function PostCardPanel( { actions } ) {
const { title, icon } = useSelect( ( select ) => {
const {
getEditedPostAttribute,
getCurrentPostType,
getCurrentPostId,
__experimentalGetTemplateInfo,
} = select( editorStore );
const { getEditedEntityRecord } = select( coreStore );
const _type = getCurrentPostType();
const _id = getCurrentPostId();
const _record = getEditedEntityRecord( 'postType', _type, _id );
const _templateInfo =
[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( _type ) &&
__experimentalGetTemplateInfo( _record );
return {
title: _templateInfo?.title || getEditedPostAttribute( 'title' ),
id: _id,
icon: unlock( select( editorStore ) ).getPostIcon( _type, {
Mamaduka marked this conversation as resolved.
Show resolved Hide resolved
area: _record?.area,
} ),
};
}, [] );
return (
<PanelBody>
<div
className={ clsx( 'editor-post-card-panel', className, {
'has-description': showPostContentPanels,
} ) }
<div className="editor-post-card-panel">
<HStack
spacing={ 2 }
className="editor-post-card-panel__header"
align="flex-start"
>
<HStack
spacing={ 2 }
className="editor-post-card-panel__header"
align="flex-start"
<Icon className="editor-post-card-panel__icon" icon={ icon } />
<Text
numberOfLines={ 2 }
truncate
className="editor-post-card-panel__title"
weight={ 500 }
as="h2"
>
<Icon
className="editor-post-card-panel__icon"
icon={ icon }
/>
<Text
numberOfLines={ 2 }
truncate
className="editor-post-card-panel__title"
weight={ 500 }
as="h2"
>
{ title ? decodeEntities( title ) : __( 'No Title' ) }
</Text>
{ actions }
</HStack>
<VStack className="editor-post-card-panel__content">
{ showPostContentPanels && (
<VStack
className="editor-post-card-panel__description"
spacing={ 2 }
>
<PrivatePostExcerptPanel />
<PostLastEditedPanel />
Copy link
Member

@Mamaduka Mamaduka May 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're are we rendering this element?

This change is causing remaining e2e test failure.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're rendering it but in a consistent place (it was rendered in two different places for different post types)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you link where? Sorry if I'm missing the obvious logic change, but keeping up with all the unify/redesign changes for the sidebar is a bit tricky.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes

gutenberg/packages/editor/src/components/sidebar/post-summary.js

Line 15 in a1a0d17

import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/panel';

gutenberg/packages/editor/src/components/sidebar/post-summary.js

Line 71 in a1a0d17

<PostExcerptPanel />

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the confusion. This works as expected.

P.S. We need to add some doc block comments for PrivatePostExpectPanel and PostExpectPanel to make them easily distinguishable without needing to read the logic.

cc @ntsekouras

</VStack>
) }
{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }
</VStack>
</div>
</PanelBody>
{ title ? decodeEntities( title ) : __( 'No Title' ) }
</Text>
{ actions }
</HStack>
</div>
);
}
19 changes: 19 additions & 0 deletions packages/editor/src/components/post-panel-section/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
import { __experimentalVStack as VStack } from '@wordpress/components';

function PostPanelSection( { className, children } ) {
return (
<VStack className={ clsx( 'editor-post-panel__section', className ) }>
{ children }
</VStack>
);
}

export default PostPanelSection;
3 changes: 3 additions & 0 deletions packages/editor/src/components/post-panel-section/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.editor-post-panel__section {
padding: $grid-unit-20;
}
12 changes: 1 addition & 11 deletions packages/editor/src/components/sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ import PageAttributesPanel from '../page-attributes/panel';
import PatternOverridesPanel from '../pattern-overrides-panel';
import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
import PluginSidebar from '../plugin-sidebar';
import PostActions from '../post-actions';
import PostCardPanel from '../post-card-panel';
import PostDiscussionPanel from '../post-discussion/panel';
import PostLastRevisionPanel from '../post-last-revision/panel';
import PostSummary from './post-summary';
Expand Down Expand Up @@ -58,7 +56,6 @@ const SidebarContent = ( {
renderingMode,
onActionPerformed,
extraPanels,
showSummary = true,
} ) => {
const tabListRef = useRef( null );
// Because `PluginSidebar` renders a `ComplementaryArea`, we
Expand Down Expand Up @@ -115,14 +112,7 @@ const SidebarContent = ( {
>
<Tabs.Context.Provider value={ tabsContextValue }>
<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
<PostCardPanel
actions={
<PostActions
onActionPerformed={ onActionPerformed }
/>
}
/>
{ showSummary && <PostSummary /> }
<PostSummary onActionPerformed={ onActionPerformed } />
<PluginDocumentSettingPanel.Slot />
{ renderingMode !== 'post-only' && (
<TemplateContentPanel />
Expand Down
128 changes: 57 additions & 71 deletions packages/editor/src/components/sidebar/post-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,102 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
PanelBody,
} from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { __experimentalVStack as VStack } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import PluginPostStatusInfo from '../plugin-post-status-info';
import PostActions from '../post-actions';
import PostAuthorPanel from '../post-author/panel';
import PostCardPanel from '../post-card-panel';
import PostContentInformation from '../post-content-information';
import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/panel';
import PostFeaturedImagePanel from '../post-featured-image/panel';
import PostFormatPanel from '../post-format/panel';
import PostLastEditedPanel from '../post-last-edited-panel';
import PostPanelSection from '../post-panel-section';
import PostSchedulePanel from '../post-schedule/panel';
import PostSlugPanel from '../post-slug/panel';
import PostStatusPanel from '../post-status';
import PostStickyPanel from '../post-sticky';
import PostSyncStatus from '../post-sync-status';
import PostTemplatePanel from '../post-template/panel';
import PostTrashPanel from '../post-trash/panel';
import PostURLPanel from '../post-url/panel';
import { store as editorStore } from '../../store';
import { PATTERN_POST_TYPE } from '../../store/constants';
import {
NAVIGATION_POST_TYPE,
PATTERN_POST_TYPE,
TEMPLATE_PART_POST_TYPE,
TEMPLATE_POST_TYPE,
} from '../../store/constants';
import TemplateAreas from '../template-areas';

/**
* Module Constants
*/
const PANEL_NAME = 'post-status';

export default function PostSummary() {
const { isOpened, isRemoved, isPattern } = useSelect( ( select ) => {
export default function PostSummary( { onActionPerformed } ) {
const { isRemovedPostStatusPanel, postType } = useSelect( ( select ) => {
// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
const {
isEditorPanelRemoved,
isEditorPanelOpened,
getCurrentPostType,
} = select( editorStore );
const postType = getCurrentPostType();
const { isEditorPanelRemoved, getCurrentPostType } =
select( editorStore );
return {
isRemoved: isEditorPanelRemoved( PANEL_NAME ),
isOpened: isEditorPanelOpened( PANEL_NAME ),
// Post excerpt panel is rendered in different place depending on the post type.
// So we cannot make this check inside the PostExcerpt component based on the current edited entity.
isPattern: postType === PATTERN_POST_TYPE,
isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
postType: getCurrentPostType(),
};
}, [] );
const { toggleEditorPanelOpened } = useDispatch( editorStore );

if ( isRemoved ) {
return null;
}
const isPattern = postType === PATTERN_POST_TYPE;
const isTemplate = postType === TEMPLATE_POST_TYPE;
const isTemplatePart = postType === TEMPLATE_PART_POST_TYPE;
const isNavigation = postType === NAVIGATION_POST_TYPE;

return (
<PanelBody
title={ __( 'Summary' ) }
opened={ isOpened }
onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
>
<PostPanelSection className="editor-post-summary">
<PluginPostStatusInfo.Slot>
{ ( fills ) => (
<>
{ ! isPattern && (
<VStack
spacing={ 3 }
// TODO: this needs to be consolidated with the panel in site editor, when we unify them.
style={ { marginBlockEnd: '24px' } }
>
<PostFeaturedImagePanel
withPanelBody={ false }
/>
<PostExcerptPanel />
<VStack spacing={ 1 }>
<PostContentInformation />
<PostLastEditedPanel />
</VStack>
<VStack spacing={ 3 }>
<PostCardPanel
actions={
<PostActions
onActionPerformed={ onActionPerformed }
/>
}
/>
<PostFeaturedImagePanel withPanelBody={ false } />
<PostExcerptPanel />
<VStack spacing={ 1 }>
<PostContentInformation />
<PostLastEditedPanel />
</VStack>
) }
<VStack
spacing={ 1 }
style={ { marginBlockEnd: '12px' } }
>
<PostStatusPanel />
<PostSchedulePanel />
<PostTemplatePanel />
<PostURLPanel />
<PostSyncStatus />
{ ! isRemovedPostStatusPanel && (
<>
<VStack spacing={ 1 }>
<PostStatusPanel />
<PostSchedulePanel />
<PostTemplatePanel />
<PostURLPanel />
<PostSyncStatus />
</VStack>
<PostStickyPanel />
<PostFormatPanel />
<PostAuthorPanel />
{ isTemplate && <TemplateAreas /> }
{ fills }
{ ! isPattern &&
! isTemplate &&
! isTemplatePart &&
! isNavigation && <PostTrashPanel /> }
</>
) }
</VStack>
<PostStickyPanel />
<PostFormatPanel />
<PostSlugPanel />
<PostAuthorPanel />
{ fills }
{ ! isPattern && (
<HStack
style={ {
marginTop: '16px',
} }
>
<PostTrashPanel />
</HStack>
) }
</>
) }
</PluginPostStatusInfo.Slot>
</PanelBody>
</PostPanelSection>
);
}
4 changes: 4 additions & 0 deletions packages/editor/src/components/sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,7 @@
}
}
}

.editor-post-summary .components-v-stack:empty {
display: none;
}
1 change: 0 additions & 1 deletion packages/editor/src/components/template-areas/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.editor-template-areas {
margin-top: $grid-unit-20;
&__list {
margin: 0;
> li {
Expand Down
Loading
Loading