diff --git a/editor/sidebar/post-visibility/index.js b/editor/sidebar/post-visibility/index.js index 4b1b704dde097..8f663a07bd2bf 100644 --- a/editor/sidebar/post-visibility/index.js +++ b/editor/sidebar/post-visibility/index.js @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import clickOutside from 'react-click-outside'; import { find } from 'lodash'; +import { withInstanceId } from 'components'; /** * WordPress dependencies @@ -36,8 +37,7 @@ class PostVisibility extends Component { }; } - toggleDialog( event ) { - event.preventDefault(); + toggleDialog() { this.setState( ( state ) => ( { opened: ! state.opened } ) ); } @@ -56,8 +56,8 @@ class PostVisibility extends Component { const { onUpdateVisibility, onSave } = this.props; onUpdateVisibility( 'private' ); + this.setState( { hasPassword: false } ); onSave(); - this.setState( { opened: false } ); } setPasswordProtected() { @@ -72,7 +72,7 @@ class PostVisibility extends Component { } render() { - const { status, visibility, password, onUpdateVisibility } = this.props; + const { status, visibility, password, onUpdateVisibility, instanceId } = this.props; const updatePassword = ( event ) => onUpdateVisibility( status, event.target.value ); @@ -106,35 +106,61 @@ class PostVisibility extends Component { return (
{ __( 'Visibility' ) } - { this.state.opened &&
-
- { __( 'Post Visibility' ) } -
- { visibilityOptions.map( ( { value, label, info, onSelect, checked } ) => ( - - ) ) } +
+ + { __( 'Post Visibility' ) } + + { visibilityOptions.map( ( { value, label, info, onSelect, checked } ) => ( +
+ + + {

{ info }

} +
+ ) ) } +
{ this.state.hasPassword && - +
+ + +
}
} @@ -156,5 +182,4 @@ export default connect( return editPost( { status, password } ); }, } -)( clickOutside( PostVisibility ) ); - +)( withInstanceId( clickOutside( PostVisibility ) ) ); diff --git a/editor/sidebar/post-visibility/style.scss b/editor/sidebar/post-visibility/style.scss index 54944dd0200a1..c48ffa99015ea 100644 --- a/editor/sidebar/post-visibility/style.scss +++ b/editor/sidebar/post-visibility/style.scss @@ -62,12 +62,15 @@ .editor-post-visibility__dialog-legend { font-weight: 600; font-size: 0.9em; +} +.editor-post-visibility__choice { + margin: 10px 0; } +.editor-post-visibility__dialog-radio, .editor-post-visibility__dialog-label { - display: block; - margin: 10px 0; + vertical-align: top; } .editor-post-visibility__dialog-password-input { @@ -79,5 +82,6 @@ color: $dark-gray-200; padding-left: 20px; font-style: italic; - margin-top: 4px; + margin: 4px 0 0; + line-height: 1.4; }