@wordpress/editor 14.19.3 → 14.21.0

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

@@ -4,8 +4,9 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import {
-	VisuallyHidden,
-	__experimentalConfirmDialog as ConfirmDialog,
+	TextControl,
+	RadioControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -14,7 +15,7 @@ import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '
 /**
  * Internal dependencies
  */
-import { visibilityOptions } from './utils';
+import { VISIBILITY_OPTIONS } from './utils';
 import { store as editorStore } from '../../store';
 
 /**
@@ -33,45 +34,29 @@ export default function PostVisibility( { onClose } ) {
 		password: select( editorStore ).getEditedPostAttribute( 'password' ),
 	} ) );
 
-	const { editPost, savePost } = useDispatch( editorStore );
+	const { editPost } = useDispatch( editorStore );
 
 	const [ hasPassword, setHasPassword ] = useState( !! password );
-	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] =
-		useState( false );
 
-	const setPublic = () => {
-		editPost( {
-			status: visibility === 'private' ? 'draft' : status,
-			password: '',
-		} );
-		setHasPassword( false );
-	};
-
-	const setPrivate = () => {
-		setShowPrivateConfirmDialog( true );
-	};
-
-	const confirmPrivate = () => {
-		editPost( { status: 'private', password: '' } );
-		setHasPassword( false );
-		setShowPrivateConfirmDialog( false );
-		savePost();
-	};
-
-	const handleDialogCancel = () => {
-		setShowPrivateConfirmDialog( false );
-	};
+	function updateVisibility( value ) {
+		const nextValues = {
+			public: {
+				status: visibility === 'private' ? 'draft' : status,
+				password: '',
+			},
+			private: { status: 'private', password: '' },
+			password: {
+				status: visibility === 'private' ? 'draft' : status,
+				password: password || '',
+			},
+		};
 
-	const setPasswordProtected = () => {
-		editPost( {
-			status: visibility === 'private' ? 'draft' : status,
-			password: password || '',
-		} );
-		setHasPassword( true );
-	};
+		editPost( nextValues[ value ] );
+		setHasPassword( value === 'password' );
+	}
 
-	const updatePassword = ( event ) => {
-		editPost( { password: event.target.value } );
+	const updatePassword = ( value ) => {
+		editPost( { password: value } );
 	};
 
 	return (
@@ -81,90 +66,28 @@ export default function PostVisibility( { onClose } ) {
 				help={ __( 'Control how this post is viewed.' ) }
 				onClose={ onClose }
 			/>
-			<fieldset className="editor-post-visibility__fieldset">
-				<VisuallyHidden as="legend">
-					{ __( 'Visibility' ) }
-				</VisuallyHidden>
-				<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 }
+			<VStack spacing={ 4 }>
+				<RadioControl
+					label={ __( 'Visibility' ) }
+					hideLabelFromVision
+					options={ VISIBILITY_OPTIONS }
+					selected={ hasPassword ? 'password' : visibility }
+					onChange={ updateVisibility }
 				/>
 				{ hasPassword && (
-					<div className="editor-post-visibility__password">
-						<VisuallyHidden
-							as="label"
-							htmlFor={ `editor-post-visibility__password-input-${ instanceId }` }
-						>
-							{ __( 'Create password' ) }
-						</VisuallyHidden>
-						<input
-							className="editor-post-visibility__password-input"
-							id={ `editor-post-visibility__password-input-${ instanceId }` }
-							type="text"
-							onChange={ updatePassword }
-							value={ password }
-							placeholder={ __( 'Use a secure password' ) }
-						/>
-					</div>
+					<TextControl
+						label={ __( 'Password' ) }
+						onChange={ updatePassword }
+						value={ password }
+						placeholder={ __( 'Use a secure password' ) }
+						type="text"
+						id={ `editor-post-visibility__password-input-${ instanceId }` }
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						maxLength={ 255 }
+					/>
 				) }
-			</fieldset>
-			<ConfirmDialog
-				isOpen={ showPrivateConfirmDialog }
-				onConfirm={ confirmPrivate }
-				onCancel={ handleDialogCancel }
-				confirmButtonText={ __( 'Publish' ) }
-				size="medium"
-			>
-				{ __( 'Would you like to privately publish this post now?' ) }
-			</ConfirmDialog>
-		</div>
-	);
-}
-
-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>
+			</VStack>
 		</div>
 	);
 }

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

@@ -6,7 +6,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { visibilityOptions } from './utils';
+import { VISIBILITY_OPTIONS } from './utils';
 import { store as editorStore } from '../../store';
 
 /**
@@ -24,8 +24,11 @@ export default function PostVisibilityLabel() {
  * @return {string} Post visibility label.
  */
 export function usePostVisibilityLabel() {
-	const visibility = useSelect( ( select ) =>
-		select( editorStore ).getEditedPostVisibility()
+	const visibility = useSelect(
+		( select ) => select( editorStore ).getEditedPostVisibility(),
+		[]
 	);
-	return visibilityOptions[ visibility ]?.label;
+
+	return VISIBILITY_OPTIONS.find( ( option ) => option.value === visibility )
+		?.label;
 }

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

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

package/src/components/preview-dropdown/index.js

@@ -40,9 +40,12 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		isTemplateHidden,
 		templateId,
 	} = useSelect( ( select ) => {
-		const { getDeviceType, getCurrentPostType, getCurrentTemplateId } =
-			select( editorStore );
-		const { getRenderingMode } = unlock( select( editorStore ) );
+		const {
+			getDeviceType,
+			getCurrentPostType,
+			getCurrentTemplateId,
+			getRenderingMode,
+		} = select( editorStore );
 		const { getEntityRecord, getPostType } = select( coreStore );
 		const { get } = select( preferencesStore );
 		const _currentPostType = getCurrentPostType();

package/src/style.scss

@@ -41,7 +41,6 @@
 @import "./components/post-text-editor/style.scss";
 @import "./components/post-title/style.scss";
 @import "./components/post-url/style.scss";
-@import "./components/post-visibility/style.scss";
 @import "./components/posts-per-page/style.scss";
 @import "./components/post-trash/style.scss";
 @import "./components/preview-dropdown/style.scss";