-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Editor: Update and simplify the Post Summary and Post Card section in…
… the document sidebar (#61624) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
- Loading branch information
4 people
authored
May 14, 2024
1 parent
70576a7
commit 2010994
Showing
10 changed files
with
136 additions
and
178 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
packages/editor/src/components/post-panel-section/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .editor-post-panel__section { | ||
| padding: $grid-unit-20; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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={ 4 }> | ||
| <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={ 2 }> | ||
| <VStack spacing={ 1 }> | ||
| <PostStatusPanel /> | ||
| <PostSchedulePanel /> | ||
| <PostTemplatePanel /> | ||
| <PostURLPanel /> | ||
| <PostSyncStatus /> | ||
| </VStack> | ||
| <PostStickyPanel /> | ||
| <PostFormatPanel /> | ||
| <PostAuthorPanel /> | ||
| { isTemplate && <TemplateAreas /> } | ||
| { fills } | ||
| { ! isPattern && | ||
| ! isTemplate && | ||
| ! isTemplatePart && | ||
| ! isNavigation && <PostTrashPanel /> } | ||
| </VStack> | ||
| ) } | ||
| </VStack> | ||
| <PostStickyPanel /> | ||
| <PostFormatPanel /> | ||
| <PostSlugPanel /> | ||
| <PostAuthorPanel /> | ||
| { fills } | ||
| { ! isPattern && ( | ||
| <HStack | ||
| style={ { | ||
| marginTop: '16px', | ||
| } } | ||
| > | ||
| <PostTrashPanel /> | ||
| </HStack> | ||
| ) } | ||
| </> | ||
| ) } | ||
| </PluginPostStatusInfo.Slot> | ||
| </PanelBody> | ||
| </PostPanelSection> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,3 +12,7 @@ | |
| } | ||
| } | ||
| } | ||
|
|
||
| .editor-post-summary .components-v-stack:empty { | ||
| display: none; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.