@wordpress/editor 12.5.4 → 12.7.0

package/src/components/post-visibility/index.js

@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__experimentalConfirmDialog as ConfirmDialog,
+	Button,
 } from '@wordpress/components';
-import { withInstanceId, compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { close as closeIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,172 +18,150 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
-export class PostVisibility extends Component {
-	constructor( props ) {
-		super( ...arguments );
+export default function PostVisibility( { onClose } ) {
+	const instanceId = useInstanceId( PostVisibility );
 
-		this.setPublic = this.setPublic.bind( this );
-		this.setPrivate = this.setPrivate.bind( this );
-		this.setPasswordProtected = this.setPasswordProtected.bind( this );
-		this.updatePassword = this.updatePassword.bind( this );
+	const { status, visibility, password } = useSelect( ( select ) => ( {
+		status: select( editorStore ).getEditedPostAttribute( 'status' ),
+		visibility: select( editorStore ).getEditedPostVisibility(),
+		password: select( editorStore ).getEditedPostAttribute( 'password' ),
+	} ) );
 
-		this.state = {
-			hasPassword: !! props.password,
-			showPrivateConfirmDialog: false,
-		};
-	}
+	const { editPost, savePost } = useDispatch( editorStore );
 
-	setPublic() {
-		const { visibility, onUpdateVisibility, status } = this.props;
+	const [ hasPassword, setHasPassword ] = useState( !! password );
+	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] = useState(
+		false
+	);
 
-		onUpdateVisibility( visibility === 'private' ? 'draft' : status );
-		this.setState( { hasPassword: false } );
-	}
-
-	setPrivate() {
-		this.setState( { showPrivateConfirmDialog: true } );
-	}
-
-	confirmPrivate = () => {
-		const { onUpdateVisibility, onSave } = this.props;
-
-		onUpdateVisibility( 'private' );
-		this.setState( {
-			hasPassword: false,
-			showPrivateConfirmDialog: false,
+	const setPublic = () => {
+		editPost( {
+			status: visibility === 'private' ? 'draft' : status,
+			password: '',
 		} );
-		onSave();
+		setHasPassword( false );
 	};
 
-	handleDialogCancel = () => {
-		this.setState( { showPrivateConfirmDialog: false } );
+	const setPrivate = () => {
+		setShowPrivateConfirmDialog( true );
 	};
 
-	setPasswordProtected() {
-		const { visibility, onUpdateVisibility, status, password } = this.props;
-
-		onUpdateVisibility(
-			visibility === 'private' ? 'draft' : status,
-			password || ''
-		);
-		this.setState( { hasPassword: true } );
-	}
+	const confirmPrivate = () => {
+		editPost( { status: 'private', password: '' } );
+		setHasPassword( false );
+		setShowPrivateConfirmDialog( false );
+		savePost();
+	};
 
-	updatePassword( event ) {
-		const { status, onUpdateVisibility } = this.props;
-		onUpdateVisibility( status, event.target.value );
-	}
+	const handleDialogCancel = () => {
+		setShowPrivateConfirmDialog( false );
+	};
 
-	render() {
-		const { visibility, password, instanceId } = this.props;
+	const setPasswordProtected = () => {
+		editPost( {
+			status: visibility === 'private' ? 'draft' : status,
+			password: password || '',
+		} );
+		setHasPassword( true );
+	};
 
-		const visibilityHandlers = {
-			public: {
-				onSelect: this.setPublic,
-				checked: visibility === 'public' && ! this.state.hasPassword,
-			},
-			private: {
-				onSelect: this.setPrivate,
-				checked: visibility === 'private',
-			},
-			password: {
-				onSelect: this.setPasswordProtected,
-				checked: this.state.hasPassword,
-			},
-		};
+	const updatePassword = ( event ) => {
+		editPost( { password: event.target.value } );
+	};
 
-		return [
-			<fieldset
-				key="visibility-selector"
-				className="editor-post-visibility__dialog-fieldset"
-			>
-				<legend className="editor-post-visibility__dialog-legend">
-					{ __( 'Post Visibility' ) }
+	return (
+		<>
+			<Button
+				className="editor-post-visibility__close"
+				isSmall
+				icon={ closeIcon }
+				onClick={ onClose }
+			/>
+			<fieldset className="editor-post-visibility__fieldset">
+				<legend className="editor-post-visibility__legend">
+					{ __( 'Visibility' ) }
 				</legend>
-				{ visibilityOptions.map( ( { value, label, info } ) => (
-					<div
-						key={ value }
-						className="editor-post-visibility__choice"
-					>
+				<p className="editor-post-visibility__description">
+					{ __( 'Control how this post is viewed.' ) }
+				</p>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="public"
+					label={ visibilityOptions.public.label }
+					info={ visibilityOptions.public.info }
+					checked={ visibility === 'public' && ! hasPassword }
+					onChange={ setPublic }
+				/>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="private"
+					label={ visibilityOptions.private.label }
+					info={ visibilityOptions.private.info }
+					checked={ visibility === 'private' }
+					onChange={ setPrivate }
+				/>
+				<PostVisibilityChoice
+					instanceId={ instanceId }
+					value="password"
+					label={ visibilityOptions.password.label }
+					info={ visibilityOptions.password.info }
+					checked={ hasPassword }
+					onChange={ setPasswordProtected }
+				/>
+				{ hasPassword && (
+					<div className="editor-post-visibility__password">
+						<VisuallyHidden
+							as="label"
+							htmlFor={ `editor-post-visibility__password-input-${ instanceId }` }
+						>
+							{ __( 'Create password' ) }
+						</VisuallyHidden>
 						<input
-							type="radio"
-							name={ `editor-post-visibility__setting-${ instanceId }` }
-							value={ value }
-							onChange={ visibilityHandlers[ value ].onSelect }
-							checked={ visibilityHandlers[ value ].checked }
-							id={ `editor-post-${ value }-${ instanceId }` }
-							aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
-							className="editor-post-visibility__dialog-radio"
+							className="editor-post-visibility__password-input"
+							id={ `editor-post-visibility__password-input-${ instanceId }` }
+							type="text"
+							onChange={ updatePassword }
+							value={ password }
+							placeholder={ __( 'Use a secure password' ) }
 						/>
-						<label
-							htmlFor={ `editor-post-${ value }-${ instanceId }` }
-							className="editor-post-visibility__dialog-label"
-						>
-							{ label }
-						</label>
-						{
-							<p
-								id={ `editor-post-${ value }-${ instanceId }-description` }
-								className="editor-post-visibility__dialog-info"
-							>
-								{ info }
-							</p>
-						}
 					</div>
-				) ) }
-			</fieldset>,
-			this.state.hasPassword && (
-				<div
-					className="editor-post-visibility__dialog-password"
-					key="password-selector"
-				>
-					<VisuallyHidden
-						as="label"
-						htmlFor={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-					>
-						{ __( 'Create password' ) }
-					</VisuallyHidden>
-					<input
-						className="editor-post-visibility__dialog-password-input"
-						id={ `editor-post-visibility__dialog-password-input-${ instanceId }` }
-						type="text"
-						onChange={ this.updatePassword }
-						value={ password }
-						placeholder={ __( 'Use a secure password' ) }
-					/>
-				</div>
-			),
+				) }
+			</fieldset>
 			<ConfirmDialog
-				key="private-publish-confirmation"
-				isOpen={ this.state.showPrivateConfirmDialog }
-				onConfirm={ this.confirmPrivate }
-				onCancel={ this.handleDialogCancel }
+				isOpen={ showPrivateConfirmDialog }
+				onConfirm={ confirmPrivate }
+				onCancel={ handleDialogCancel }
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
-			</ConfirmDialog>,
-		];
-	}
+			</ConfirmDialog>
+		</>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getEditedPostAttribute, getEditedPostVisibility } = select(
-			editorStore
-		);
-		return {
-			status: getEditedPostAttribute( 'status' ),
-			visibility: getEditedPostVisibility(),
-			password: getEditedPostAttribute( 'password' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { savePost, editPost } = dispatch( editorStore );
-		return {
-			onSave: savePost,
-			onUpdateVisibility( status, password = '' ) {
-				editPost( { status, password } );
-			},
-		};
-	} ),
-	withInstanceId,
-] )( PostVisibility );
+function PostVisibilityChoice( { instanceId, value, label, info, ...props } ) {
+	return (
+		<div className="editor-post-visibility__choice">
+			<input
+				type="radio"
+				name={ `editor-post-visibility__setting-${ instanceId }` }
+				value={ value }
+				id={ `editor-post-${ value }-${ instanceId }` }
+				aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
+				className="editor-post-visibility__radio"
+				{ ...props }
+			/>
+			<label
+				htmlFor={ `editor-post-${ value }-${ instanceId }` }
+				className="editor-post-visibility__label"
+			>
+				{ label }
+			</label>
+			<p
+				id={ `editor-post-${ value }-${ instanceId }-description` }
+				className="editor-post-visibility__info"
+			>
+				{ info }
+			</p>
+		</div>
+	);
+}

package/src/components/post-visibility/label.js

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,13 +9,9 @@ import { withSelect } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
-function PostVisibilityLabel( { visibility } ) {
-	const getVisibilityLabel = () =>
-		find( visibilityOptions, { value: visibility } ).label;
-
-	return getVisibilityLabel( visibility );
+export default function PostVisibilityLabel() {
+	const visibility = useSelect( ( select ) =>
+		select( editorStore ).getEditedPostVisibility()
+	);
+	return visibilityOptions[ visibility ]?.label;
 }
-
-export default withSelect( ( select ) => ( {
-	visibility: select( editorStore ).getEditedPostVisibility(),
-} ) )( PostVisibilityLabel );

package/src/components/post-visibility/style.scss

@@ -1,39 +1,44 @@
-.edit-post-post-visibility__dialog,
-.editor-post-visibility__dialog-fieldset {
-	padding: $grid-unit-05;
-	padding-top: 0;
+.editor-post-visibility__close {
+	position: absolute;
+	right: $grid-unit-20;
+	top: $grid-unit-20;
+}
+
+.editor-post-visibility__fieldset {
+	padding: $grid-unit-10;
 
-	.editor-post-visibility__dialog-legend {
+	.editor-post-visibility__legend {
 		font-weight: 600;
-		margin-bottom: 1em;
+		padding: 1em 0 0 0;
+	}
+
+	.editor-post-visibility__description {
 		margin-top: 0.5em;
-		padding: 0;
 	}
 
-	.editor-post-visibility__dialog-radio[type="radio"] {
+	.editor-post-visibility__radio[type="radio"] {
 		@include radio-control;
 		margin-top: 2px;
 	}
 
-	.editor-post-visibility__dialog-label {
-		font-weight: 600;
-	}
+	.editor-post-visibility__info {
+		color: $gray-700;
+		margin-left: $grid-unit-15 + $radio-input-size-sm;
+		margin-top: 0.5em;
 
-	.editor-post-visibility__dialog-info {
-		margin-top: 0;
-		margin-left: $grid-unit-40;
+		@include break-small {
+			margin-left: $grid-unit-15 + $radio-input-size;
+		}
 	}
 
 	// Remove bottom margin on the last label only.
-	.editor-post-visibility__choice:last-child .editor-post-visibility__dialog-info {
+	.editor-post-visibility__choice:last-child .editor-post-visibility__info {
 		margin-bottom: 0;
 	}
-}
 
-.editor-post-visibility__dialog-password {
-	.editor-post-visibility__dialog-password-input[type="text"] {
+	.editor-post-visibility__password .editor-post-visibility__password-input[type="text"] {
 		@include input-control;
-		margin-left: $grid-unit * 4.5;
-		margin-top: $grid-unit-10;
+		margin-left: $grid-unit * 4;
+		width: calc(100% - #{$grid-unit * 4});
 	}
 }

package/src/components/post-visibility/utils.js

@@ -3,22 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 
-export const visibilityOptions = [
-	{
-		value: 'public',
+export const visibilityOptions = {
+	public: {
 		label: __( 'Public' ),
 		info: __( 'Visible to everyone.' ),
 	},
-	{
-		value: 'private',
+	private: {
 		label: __( 'Private' ),
 		info: __( 'Only visible to site admins and editors.' ),
 	},
-	{
-		value: 'password',
-		label: __( 'Password Protected' ),
-		info: __(
-			'Protected with a password you choose. Only those with the password can view this post.'
-		),
+	password: {
+		label: __( 'Password protected' ),
+		info: __( 'Only those with the password can view this post.' ),
 	},
-];
+};