Skip to content

Commit

Permalink
move and update post status
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntsekouras
ntsekouras committed Apr 30, 2024
1 parent 77155cc commit 2df9c31
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 94 deletions.
33 changes: 22 additions & 11 deletions packages/edit-post/src/components/sidebar/post-status/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const {
const PANEL_NAME = 'post-status';

export default function PostStatus() {
const { isOpened, isRemoved, showPostExcerptPanel } = useSelect(
const { isOpened, isRemoved, showExcerptAndLastEditedPanels } = 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.
Expand All @@ -57,7 +57,7 @@ export default function PostStatus() {
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.
showPostExcerptPanel: ! [
showExcerptAndLastEditedPanels: ! [
'wp_template',
'wp_template_part',
'wp_block',
Expand All @@ -82,15 +82,26 @@ export default function PostStatus() {
<PluginPostStatusInfo.Slot>
{ ( fills ) => (
<>
<VStack spacing={ 2 }>
<PostStatusPanel />
<PostFeaturedImagePanel withPanelBody={ false } />
{ showPostExcerptPanel && (
<PrivatePostExcerptPanel />
) }
<PostContentInformation />
<PostLastEditedPanel />
</VStack>
{ showExcerptAndLastEditedPanels && (
<VStack
spacing={ 2 }
// TODO: this needs to be consolidated with the panel in site editor, when we unify them.
style={ { marginBlockEnd: '12px' } }
>
<PostFeaturedImagePanel
withPanelBody={ false }
/>

<>
<PrivatePostExcerptPanel />
<div>
<PostContentInformation />
<PostLastEditedPanel />
</div>
</>
</VStack>
) }
<PostStatusPanel />
<PostSchedulePanel />
<PostTemplatePanel />
<PostURLPanel />
Expand Down
14 changes: 10 additions & 4 deletions packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,19 @@ export default function PageSummary() {
<PluginPostStatusInfo.Slot>
{ ( fills ) => (
<>
<VStack spacing={ 2 }>
<PostStatus />
<VStack
spacing={ 2 }
// TODO: this needs to be consolidated with the panel in post editor, when we unify them.
style={ { marginBlockEnd: '12px' } }
>
<PostFeaturedImagePanel withPanelBody={ false } />
<PrivatePostExcerptPanel />
<PostContentInformation />
<PostLastEditedPanel />
<div>
<PostContentInformation />
<PostLastEditedPanel />
</div>
</VStack>
<PostStatus />
<PostSchedulePanel />
<PostTemplatePanel />
<PostURLPanel />
Expand Down
4 changes: 3 additions & 1 deletion packages/editor/src/components/post-card-panel/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,9 @@ export default function PostCardPanel( { className, actions } ) {
return (
<PanelBody>
<div
className={ classnames( 'editor-post-card-panel', className ) }
className={ classnames( 'editor-post-card-panel', className, {
'has-description': showExcerptAndLastEditedPanels,
} ) }
>
<HStack
spacing={ 2 }
Expand Down
5 changes: 4 additions & 1 deletion packages/editor/src/components/post-card-panel/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
&__header {
display: flex;
justify-content: space-between;
margin: 0 0 $grid-unit-10;
}

&.has-description &__header {
margin-bottom: $grid-unit-10;
}
}
1 change: 0 additions & 1 deletion packages/editor/src/components/post-featured-image/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
overflow: hidden; // Ensure the focus style properly encapsulates the image.
outline-offset: -#{$border-width};
min-height: $grid-unit-50;
margin-bottom: $grid-unit-20;

display: flex;
justify-content: center;
Expand Down
159 changes: 84 additions & 75 deletions packages/editor/src/components/post-status/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { useState, useMemo } from '@wordpress/element';
import { store as coreStore } from '@wordpress/core-data';
import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
import { useInstanceId } from '@wordpress/compose';
import { Icon, chevronDownSmall } from '@wordpress/icons';

/**
* Internal dependencies
Expand All @@ -31,8 +32,8 @@ import {
PATTERN_POST_TYPE,
NAVIGATION_POST_TYPE,
} from '../../store/constants';
import PostPanelRow from '../post-panel-row';
import { store as editorStore } from '../../store';
import { Icon, chevronDownSmall } from '@wordpress/icons';

function PostStatusLabel( { canEdit } ) {
const status = useSelect(
Expand Down Expand Up @@ -183,14 +184,6 @@ export default function PostStatus() {
return null;
}

if ( ! canEdit ) {
return (
<div className="editor-post-status">
<PostStatusLabel />
</div>
);
}

const updatePost = ( {
status: newStatus = status,
password: newPassword = password,
Expand Down Expand Up @@ -232,79 +225,95 @@ export default function PostStatus() {
};

return (
<Dropdown
className="editor-post-status"
contentClassName="editor-change-status__content"
popoverProps={ popoverProps }
focusOnMount
ref={ setPopoverAnchor }
renderToggle={ ( { onToggle } ) => (
<Button
className="editor-post-status-trigger"
onClick={ onToggle }
>
<PostStatusLabel canEdit={ canEdit } />
</Button>
<PostPanelRow label={ __( 'Status' ) } ref={ setPopoverAnchor }>
{ ! canEdit && (
<div className="editor-post-status">
<PostStatusLabel />
</div>
) }
renderContent={ ( { onClose } ) => (
<>
<InspectorPopoverHeader
title={ __( 'Status & visibility' ) }
onClose={ onClose }
/>
<form>
<VStack spacing={ 4 }>
<RadioControl
className="editor-change-status__options"
hideLabelFromVision
label={ __( 'Status' ) }
options={ STATUS_OPTIONS }
onChange={ handleStatus }
selected={
status === 'auto-draft' ? 'draft' : status
}
{ canEdit && (
<Dropdown
className="editor-post-status"
contentClassName="editor-change-status__content"
popoverProps={ popoverProps }
focusOnMount
renderToggle={ ( { onToggle } ) => (
<Button
className="editor-post-status-trigger"
onClick={ onToggle }
>
<PostStatusLabel canEdit={ canEdit } />
</Button>
) }
renderContent={ ( { onClose } ) => (
<>
<InspectorPopoverHeader
title={ __( 'Status & visibility' ) }
onClose={ onClose }
/>
{ status !== 'private' && (
<VStack
as="fieldset"
spacing={ 4 }
className="editor-change-status__password-fieldset"
>
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Password protected' ) }
help={ __(
'Only visible to those who know the password'
) }
checked={ showPassword }
onChange={ handleTogglePassword }
<form>
<VStack spacing={ 4 }>
<RadioControl
className="editor-change-status__options"
hideLabelFromVision
label={ __( 'Status' ) }
options={ STATUS_OPTIONS }
onChange={ handleStatus }
selected={
status === 'auto-draft'
? 'draft'
: status
}
/>
{ showPassword && (
<div className="editor-change-status__password-input">
<TextControl
label={ __( 'Password' ) }
onChange={ ( value ) =>
updatePost( {
password: value,
} )
}
value={ password }
placeholder={ __(
'Use a secure password'
) }
type="text"
id={ passwordInputId }
__next40pxDefaultSize
{ status !== 'private' && (
<VStack
as="fieldset"
spacing={ 4 }
className="editor-change-status__password-fieldset"
>
<CheckboxControl
__nextHasNoMarginBottom
label={ __(
'Password protected'
) }
help={ __(
'Only visible to those who know the password'
) }
checked={ showPassword }
onChange={
handleTogglePassword
}
/>
</div>
{ showPassword && (
<div className="editor-change-status__password-input">
<TextControl
label={ __(
'Password'
) }
onChange={ ( value ) =>
updatePost( {
password: value,
} )
}
value={ password }
placeholder={ __(
'Use a secure password'
) }
type="text"
id={ passwordInputId }
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
</div>
) }
</VStack>
) }
</VStack>
) }
</VStack>
</form>
</>
</form>
</>
) }
/>
) }
/>
</PostPanelRow>
);
}
1 change: 0 additions & 1 deletion packages/editor/src/components/post-status/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.editor-post-status {
max-width: 100%;
margin-bottom: $grid-unit-20;

.editor-post-status-trigger {
padding: 1px;
Expand Down

0 comments on commit 2df9c31

Please sign in to comment.