forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Try/publish in site editor (WordPress#51408)
* add required inputs * schedule date * add password and fix a few things * re-add status modal * update change status modal * revert in sidebar status change * refine a few status details * fix merge issues * fix status label * use null for status date * handle empty date * change to add fields instead of modal * default publish not draft * remove style import * add required inputs * schedule date * add password and fix a few things * re-add status modal * update change status modal * revert in sidebar status change * refine a few status details * fix merge issues * fix status label * use null for status date * handle empty date * change to add fields instead of modal * default publish not draft * remove style import * remove css * only autofocus password field if empty * aria label on status popover * remove end line * create radio with help component * adjust to use radiocontrol and hide password * radio label alignment * add form wrapper * aria label
- Loading branch information
1 parent
d53a625
commit b33b0c3
Showing
7 changed files
with
465 additions
and
41 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
233 changes: 233 additions & 0 deletions
233
packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.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,233 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| Button, | ||
| BaseControl, | ||
| ToggleControl, | ||
| Dropdown, | ||
| __experimentalText as Text, | ||
| __experimentalHStack as HStack, | ||
| __experimentalVStack as VStack, | ||
| TextControl, | ||
| RadioControl, | ||
| } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useDispatch } from '@wordpress/data'; | ||
| import { useState, useMemo } from '@wordpress/element'; | ||
| import { store as coreStore } from '@wordpress/core-data'; | ||
| import { store as noticesStore } from '@wordpress/notices'; | ||
| import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import StatusLabel from '../../sidebar-navigation-screen-page/status-label'; | ||
|
|
||
| const STATUS_OPTIONS = [ | ||
| { | ||
| label: ( | ||
| <> | ||
| { __( 'Draft' ) } | ||
| <Text variant="muted">{ __( 'Not ready to publish.' ) }</Text> | ||
| </> | ||
| ), | ||
| value: 'draft', | ||
| }, | ||
| { | ||
| label: ( | ||
| <> | ||
| { __( 'Pending' ) } | ||
| <Text variant="muted"> | ||
| { __( 'Waiting for review before publishing.' ) } | ||
| </Text> | ||
| </> | ||
| ), | ||
| value: 'pending', | ||
| }, | ||
| { | ||
| label: ( | ||
| <> | ||
| { __( 'Private' ) } | ||
| <Text variant="muted"> | ||
| { __( 'Only visible to site admins and editors.' ) } | ||
| </Text> | ||
| </> | ||
| ), | ||
| value: 'private', | ||
| }, | ||
| { | ||
| label: ( | ||
| <> | ||
| { __( 'Scheduled' ) } | ||
| <Text variant="muted"> | ||
| { __( 'Publish automatically on a chosen date.' ) } | ||
| </Text> | ||
| </> | ||
| ), | ||
| value: 'future', | ||
| }, | ||
| { | ||
| label: ( | ||
| <> | ||
| { __( 'Published' ) } | ||
| <Text variant="muted">{ __( 'Visible to everyone.' ) }</Text> | ||
| </> | ||
| ), | ||
| value: 'publish', | ||
| }, | ||
| ]; | ||
|
|
||
| export default function PageStatus( { | ||
| postType, | ||
| postId, | ||
| status, | ||
| password, | ||
| date, | ||
| } ) { | ||
| const [ showPassword, setShowPassword ] = useState( !! password ); | ||
|
|
||
| const { editEntityRecord } = useDispatch( coreStore ); | ||
| const { createErrorNotice } = useDispatch( noticesStore ); | ||
|
|
||
| const [ popoverAnchor, setPopoverAnchor ] = useState( null ); | ||
| // Memoize popoverProps to avoid returning a new object every time. | ||
| const popoverProps = useMemo( | ||
| () => ( { | ||
| // Anchor the popover to the middle of the entire row so that it doesn't | ||
| // move around when the label changes. | ||
| anchor: popoverAnchor, | ||
| 'aria-label': __( 'Change status' ), | ||
| placement: 'bottom-end', | ||
| } ), | ||
| [ popoverAnchor ] | ||
| ); | ||
|
|
||
| const saveStatus = async ( { | ||
| status: newStatus = status, | ||
| password: newPassword = password, | ||
| date: newDate = date, | ||
| } ) => { | ||
| try { | ||
| await editEntityRecord( 'postType', postType, postId, { | ||
| status: newStatus, | ||
| date: newDate, | ||
| password: newPassword, | ||
| } ); | ||
| } catch ( error ) { | ||
| const errorMessage = | ||
| error.message && error.code !== 'unknown_error' | ||
| ? error.message | ||
| : __( 'An error occurred while updating the status' ); | ||
|
|
||
| createErrorNotice( errorMessage, { | ||
| type: 'snackbar', | ||
| } ); | ||
| } | ||
| }; | ||
|
|
||
| const handleTogglePassword = ( value ) => { | ||
| setShowPassword( value ); | ||
| if ( ! value ) { | ||
| saveStatus( { password: '' } ); | ||
| } | ||
| }; | ||
|
|
||
| const handleStatus = ( value ) => { | ||
| let newDate = date; | ||
| let newPassword = password; | ||
| if ( value === 'publish' ) { | ||
| if ( new Date( date ) > new Date() ) { | ||
| newDate = null; | ||
| } | ||
| } else if ( value === 'future' ) { | ||
| if ( ! date || new Date( date ) < new Date() ) { | ||
| newDate = new Date(); | ||
| newDate.setDate( newDate.getDate() + 7 ); | ||
| } | ||
| } else if ( value === 'private' && password ) { | ||
| setShowPassword( false ); | ||
| newPassword = ''; | ||
| } | ||
| saveStatus( { | ||
| status: value, | ||
| date: newDate, | ||
| password: newPassword, | ||
| } ); | ||
| }; | ||
|
|
||
| return ( | ||
| <HStack className="edit-site-summary-field"> | ||
| <Text className="edit-site-summary-field__label"> | ||
| { __( 'Status' ) } | ||
| </Text> | ||
| <Dropdown | ||
| contentClassName="edit-site-change-status__content" | ||
| popoverProps={ popoverProps } | ||
| focusOnMount | ||
| ref={ setPopoverAnchor } | ||
| renderToggle={ ( { onToggle } ) => ( | ||
| <Button | ||
| className="edit-site-summary-field__trigger" | ||
| variant="tertiary" | ||
| onClick={ onToggle } | ||
| > | ||
| <StatusLabel | ||
| status={ password ? 'protected' : status } | ||
| /> | ||
| </Button> | ||
| ) } | ||
| renderContent={ ( { onClose } ) => ( | ||
| <> | ||
| <InspectorPopoverHeader | ||
| title={ __( 'Status' ) } | ||
| onClose={ onClose } | ||
| /> | ||
| <form> | ||
| <VStack spacing={ 5 }> | ||
| <RadioControl | ||
| className="edit-site-change-status__options" | ||
| hideLabelFromVision | ||
| label={ __( 'Status' ) } | ||
| options={ STATUS_OPTIONS } | ||
| onChange={ handleStatus } | ||
| selected={ status } | ||
| /> | ||
| { status !== 'private' && ( | ||
| <BaseControl | ||
| id={ `edit-site-change-status__password` } | ||
| label={ __( 'Password' ) } | ||
| > | ||
| <ToggleControl | ||
| label={ __( | ||
| 'Hide this page behind a password' | ||
| ) } | ||
| checked={ showPassword } | ||
| onChange={ handleTogglePassword } | ||
| /> | ||
| { showPassword && ( | ||
| <TextControl | ||
| onChange={ ( value ) => | ||
| saveStatus( { | ||
| password: value, | ||
| } ) | ||
| } | ||
| value={ password } | ||
| /* eslint-disable jsx-a11y/no-autofocus */ | ||
| autoFocus={ ! password } | ||
| /* eslint-enable jsx-a11y/no-autofocus */ | ||
| placeholder={ __( | ||
| 'Enter a secure password' | ||
| ) } | ||
| type="password" | ||
| /> | ||
| ) } | ||
| </BaseControl> | ||
| ) } | ||
| </VStack> | ||
| </form> | ||
| </> | ||
| ) } | ||
| /> | ||
| </HStack> | ||
| ); | ||
| } |
35 changes: 35 additions & 0 deletions
35
packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.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,35 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalVStack as VStack } from '@wordpress/components'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import PageStatus from './page-status'; | ||
| import PublishDate from './publish-date'; | ||
|
|
||
| export default function PageSummary( { | ||
| status, | ||
| date, | ||
| password, | ||
| postId, | ||
| postType, | ||
| } ) { | ||
| return ( | ||
| <VStack> | ||
| <PageStatus | ||
| status={ status } | ||
| date={ date } | ||
| password={ password } | ||
| postId={ postId } | ||
| postType={ postType } | ||
| /> | ||
| <PublishDate | ||
| status={ status } | ||
| date={ date } | ||
| postId={ postId } | ||
| postType={ postType } | ||
| /> | ||
| </VStack> | ||
| ); | ||
| } |
Oops, something went wrong.